/* All content is visible without GSAP. Only the enhancement controls and wrappers live here. */
.main.preview-water-ripple { isolation: isolate; }
.water-ripple-layer { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .6s ease-out; }
.water-ripple-layer[data-ripple-state="playing"] { opacity: 1; }
.water-ripple-layer:is([data-ripple-state="unavailable"],[data-ripple-state="context-lost"]) { transition: none; }
.water-ripple-canvas { position: absolute; top: 0; left: 0; display: block; width: 100%; pointer-events: none; }
/* The original reading shade stays stationary; no text or image enters WebGL. */
.water-ripple-layer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 27, 49, .42), rgba(3, 27, 49, .08) 72%); }
.preview-hero .motion-art-frame { position: relative; width: 100%; min-width: 0; align-self: center; }
.preview-hero .motion-art-frame .main-visual-slider { width: 100%; }
.preview-hero .motion-art-frame[data-motion-ambient="playing"] .main-visual-slider { will-change: transform; }
.motion-split { text-wrap: wrap; font-kerning: none; }
.motion-word, .motion-char { display: inline-block; }
.motion-word { white-space: nowrap; }
.motion-word-mask, .motion-line-mask { padding-block: .1em; margin-block: -.1em; vertical-align: top; }
.preview-toolbar .preview-motion-controls { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding-left: 8px; border-left: 1px solid #3b596d; }
.preview-toolbar #preview-toggle-motion { white-space: nowrap; min-height: 30px; color: #bcf0ff; }
.preview-toolbar #preview-toggle-motion[aria-pressed="false"] { color: #c2cdd5; }
.preview-toolbar #preview-replay-motion { display: inline-flex; align-items: center; justify-content: center; width: 30px; min-height: 30px; padding: 4px; }
.preview-toolbar .preview-motion-controls button:hover:not(:disabled) { background: #18435e; }
.preview-toolbar .preview-motion-controls button:disabled { opacity: .6; cursor: default; }
.preview-motion-toggle:disabled { cursor: default; text-decoration: none; opacity: .75; }
html[data-motion-state="off"], html[data-motion-state="unavailable"] { scroll-behavior: auto; }
html:is([data-motion-state="off"],[data-motion-state="unavailable"]) *,
html:is([data-motion-state="off"],[data-motion-state="unavailable"]) *::before,
html:is([data-motion-state="off"],[data-motion-state="unavailable"]) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
@media (max-width: 620px) {
  .preview-hero .motion-art-frame { flex: none; width: 100%; }
  .preview-toolbar { flex-wrap: wrap; row-gap: 2px; }
  .preview-toolbar > nav { margin-left: auto; gap: 2px; }
  .preview-toolbar .preview-motion-controls { margin-left: 2px; padding-left: 4px; }
  .preview-toolbar #preview-toggle-motion { padding-right: 4px; padding-left: 4px; }
}
@media (max-width: 390px) {
  .preview-toolbar > div:first-child { width: 100%; }
  .preview-toolbar > nav { width: 100%; justify-content: flex-end; }
  .preview-toolbar { padding-top: 4px; padding-bottom: 4px; }
}