/* Cinematic, progressively enhanced motion. Layout and commerce stay native. */
html[data-effects="on"] [data-reveal] {
  opacity:0; transform:translate3d(0,34px,0)!important; filter:blur(5px);
  transition:opacity .75s ease var(--reveal-delay,0ms),filter .75s ease var(--reveal-delay,0ms),transform .85s cubic-bezier(.16,1,.3,1) var(--reveal-delay,0ms);
}
html[data-effects="on"] [data-reveal].fx-shown { opacity:1; filter:none; transform:translateZ(0)!important }
html[data-effects="on"] .scroll-progress,
html[data-effects="on"] .product-page>.progress {
  display:block; width:100%; height:3px; transform:scaleX(var(--reading-progress,0));
  transform-origin:left; background:linear-gradient(90deg,#c51f3e,#ff5361,#ffc38a);
  box-shadow:0 0 18px #ff435c88; pointer-events:none;
}

/* Staged entrance and travelling highlight: visible without moving a mouse. */
html[data-effects="on"] .hero-copy { animation:none }
html[data-effects="on"] .hero-copy>* { animation:hero-copy-in .95s cubic-bezier(.16,1,.3,1) both }
html[data-effects="on"] .hero-copy>:nth-child(2) { animation-delay:.09s }
html[data-effects="on"] .hero-copy>:nth-child(3) { animation-delay:.18s }
html[data-effects="on"] .hero-copy>:nth-child(4) { animation-delay:.27s }
html[data-effects="on"] .hero-copy>:nth-child(n+5) { animation-delay:.36s }
@keyframes hero-copy-in { from { opacity:0; filter:blur(8px); transform:translateY(30px) } to { opacity:1; filter:none; transform:none } }
html[data-effects="on"] .hero[data-hero] h1 .red {
  background:linear-gradient(105deg,#f0394a 15%,#ff6972 39%,#ffe1ca 48%,#ff6972 57%,#f0394a 80%);
  background-size:280% 100%; background-clip:text; -webkit-background-clip:text;
  -webkit-text-fill-color:transparent; animation:title-glint 7s ease-in-out infinite;
}
@keyframes title-glint { 0%,15% { background-position:100% 0 } 60%,100% { background-position:0 0 } }
.hero-atmosphere { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; contain:strict }
.scene-aura { position:absolute; width:75%; height:130%; right:-6%; top:-24%; opacity:.7;
  background:radial-gradient(ellipse at 62% 34%,#ff97602d,transparent 54%),radial-gradient(ellipse at 28% 60%,#ef304f24,transparent 58%);
  mask-image:radial-gradient(ellipse at center,#000 25%,transparent 70%);
  mix-blend-mode:screen; transform-origin:65% 50%; animation:scene-breathe 10s ease-in-out infinite alternate }
.scene-glint { position:absolute; width:26%; height:150%; right:16%; top:-35%; opacity:.2;
  background:linear-gradient(90deg,transparent,#ffd7ac2b,transparent); transform:rotate(26deg);
  mix-blend-mode:screen; animation:scene-light 12s ease-in-out infinite alternate }
.scene-particles { position:absolute; inset:0; width:100%; height:100%; opacity:.9; mix-blend-mode:screen }
@keyframes scene-breathe { to { transform:translate3d(-6%,6%,0) scale(1.14); opacity:1 } }
@keyframes scene-light { to { transform:translate3d(50%,3%,0) rotate(19deg); opacity:.55 } }
html[data-effects="on"] .hero[data-hero]>.wrap { position:relative; z-index:1 }
html[data-effects="on"] .hero-cta>.btn:first-child { box-shadow:0 0 0 1px #ff8c7c33,0 8px 32px #e629363b; animation:cta-glow 4s ease-in-out infinite }
@keyframes cta-glow { 50% { box-shadow:0 0 0 1px #ff8c7c66,0 8px 44px #e6293666 } }
html[data-effects="on"] .btn:not(.launcher-cta) {
  position:relative; isolation:isolate; overflow:hidden; transition:background .22s,box-shadow .22s,border-color .22s;
}
html[data-effects="on"] .btn:not(.launcher-cta):after {
  display:block; content:""; position:absolute; inset:-2px; z-index:1; pointer-events:none;
  background:linear-gradient(110deg,transparent 25%,#ffffff3d 47%,transparent 67%);
  transform:translateX(-150%); transition:transform .75s cubic-bezier(.2,.7,.2,1);
}
html[data-effects="on"] .btn:not(.launcher-cta):hover:after { transform:translateX(150%) }
html[data-effects="on"] .modal.on .modal-card {
  animation:dialog-enter .32s cubic-bezier(.16,1,.3,1) both;
}
html[data-effects="on"] .lightbox.on img { animation:dialog-enter .4s cubic-bezier(.16,1,.3,1) both }
@keyframes dialog-enter { from { opacity:0; filter:blur(5px); transform:translateY(24px) scale(.96) } to { opacity:1; filter:none; transform:none } }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  /* No zoom: the artwork has little space above the heads. */
  html[data-effects="on"] .hero-art {
    transform:translate3d(var(--scene-x,0px),var(--scene-y,0px),0)!important;
    transition:transform 1s cubic-bezier(.16,1,.3,1);
  }
  html[data-effects="on"] .card,html[data-effects="on"] .plan,
  html[data-effects="on"] .app-feature {
    transition:border-color .3s,box-shadow .3s,opacity .75s,filter .75s,transform .85s cubic-bezier(.16,1,.3,1);
  }
  html[data-effects="on"] .card:hover,html[data-effects="on"] .app-feature:hover {
    border-color:#ff879078; box-shadow:0 24px 70px #0005,0 0 35px #ef304f17;
  }
  html[data-effects="on"] .plan:hover { border-color:#ff879078; box-shadow:0 24px 70px #0005,0 0 35px #ef304f17 }
  html[data-effects="on"] .card:after,html[data-effects="on"] .plan:after,
  html[data-effects="on"] .app-feature:after,html[data-effects="on"] .app-download:after,
  html[data-effects="on"] .companion-banner:after {
    display:block; content:""; position:absolute; inset:0; border-radius:inherit;
    z-index:3; pointer-events:none; opacity:0; transition:opacity .4s;
    background:radial-gradient(480px circle at var(--light-x,50%) var(--light-y,0%),#ff9a7930,transparent 65%);
  }
  html[data-effects="on"] .app-feature { position:relative; overflow:hidden }
  html[data-effects="on"] .fx-hover:after { opacity:1 }
  /* Keep light outside bot artwork, and motion strictly in the image plane. */
  html[data-effects="on"] #bots .card:after { display:none }
  html[data-effects="on"] #bots .shot img,
  html[data-effects="on"] .app-game img { transition:transform .85s cubic-bezier(.16,1,.3,1) }
  html[data-effects="on"] #bots .card.fx-hover .shot img { transform:scale(1.035) }
  html[data-effects="on"] .companion-visual { perspective:1000px }
  html[data-effects="on"] .companion-visual img { animation:phone-float 8s ease-in-out infinite alternate }
  @keyframes phone-float { from { transform:scale(1.025) translateY(0) rotate(-.6deg) } to { transform:scale(1.055) translateY(-8px) rotate(.6deg) } }
  html[data-effects="on"] .game-picker a { transition:background .25s,color .25s,box-shadow .25s }
  html[data-effects="on"] .game-picker a[aria-current] { box-shadow:inset 0 -2px #ef445f,0 3px 14px #0003 }
  html[data-effects="on"] .game-picker a:not([aria-current]):hover { background:#252e3c; box-shadow:inset 0 0 0 1px #ff879044 }
}
html[data-effects="on"] .hero[data-fx-paused] *,
html[data-effects="on"] body[data-fx-paused] *,
html[data-effects="on"] .companion-visual:not(.fx-in-view) img { animation-play-state:paused!important }
@media(hover:none),(pointer:coarse) {
  html[data-effects="on"] [data-reveal] { filter:none; transform:translateY(16px)!important; transition:opacity .45s,transform .55s }
  html[data-effects="on"] [data-reveal].fx-shown { transform:none!important }
  .scene-particles { display:none }
  .scene-glint { animation:none }
  .companion-visual img { animation:none }
}
@media(prefers-reduced-motion:reduce) {
  .hero-atmosphere { display:none }
  html[data-effects="on"] [data-reveal] { opacity:1; filter:none; transform:none!important }
}
@media print {
  [data-reveal] { opacity:1!important; filter:none!important; transform:none!important }
  .hero-atmosphere { display:none }
}