/* Homepage motion owns only opacity, transforms, and interaction shadows.
   Confirmed against the rendered homepage; CSS entrances replay on node replacement. */
:root{--homepage-motion-ease:cubic-bezier(.16,1,.3,1)}
@keyframes homepage-title-enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes homepage-card-enter{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes homepage-opacity-enter{from{opacity:0}to{opacity:1}}
.hero h1{animation:homepage-title-enter 900ms var(--homepage-motion-ease) backwards}
.hero-copy>.eyebrow{animation:homepage-opacity-enter 700ms ease backwards}
.hero .intro,.hero-actions{animation:homepage-title-enter 900ms var(--homepage-motion-ease) 160ms backwards}
.hero .logo-strip{animation:homepage-title-enter 900ms var(--homepage-motion-ease) 240ms backwards}
.hero #intelligence{animation:homepage-card-enter 850ms var(--homepage-motion-ease) 180ms backwards}
/* Independent translate leaves the hover transform free while cards enter. */
.game-card.motion-enter,.deal-card.motion-enter,.motion-enter{animation:homepage-card-enter 760ms var(--homepage-motion-ease) var(--entrance-delay,0ms) backwards!important}
.feed-empty{animation:homepage-opacity-enter 360ms ease backwards}
body .deal-card,body .game-card,body #intelligence{
  transition:transform 320ms var(--homepage-motion-ease),box-shadow 320ms ease,border-color 240ms ease!important;
}
body .primary,body .outline,body .text-button,body .deal-action{
  transition:transform 300ms var(--homepage-motion-ease),opacity 280ms ease,box-shadow 280ms ease,border-color 220ms ease!important;
}
@media(hover:hover) and (pointer:fine){
  body .deal-card:hover,body #intelligence:hover{transform:translateY(-4px);box-shadow:0 22px 55px #03071332}
  body .game-card:hover,body .liquid-selector .game-card:hover{transform:translateY(-4px)}
  body .primary:hover,body .outline:hover,body .text-button:hover{transform:translateY(-3px)}
}
body .primary:active,body .outline:active,body .text-button:active,body .deal-action:active{transform:scale(.98)}
body .game-card:active{transform:scale(.98)}
/* Retire conflicting layout animation, while preserving the comparison's appearance. */
body .compare-row i{transition:none!important}
@media(prefers-reduced-motion:reduce){
  .hero h1,.hero-copy>.eyebrow,.hero .intro,.hero-actions,.hero .logo-strip,.hero #intelligence,.game-card.motion-enter,.deal-card.motion-enter,.motion-enter,.feed-empty{
    animation:homepage-opacity-enter 700ms ease backwards!important;
  }
  body .deal-card,body .game-card,body #intelligence,body .primary,body .outline,body .text-button,body .deal-action{transition:opacity 280ms ease!important}
  body .deal-card:hover,body .game-card:hover,body .liquid-selector .game-card:hover,body #intelligence:hover,
  body .primary:hover,body .outline:hover,body .text-button:hover,body .primary:active,body .outline:active,body .text-button:active,body .deal-action:active,body .game-card:active{transform:none!important}
}
body.motion-off .hero h1,body.motion-off .hero-copy>.eyebrow,body.motion-off .hero .intro,body.motion-off .hero-actions,body.motion-off .hero .logo-strip,body.motion-off #intelligence,body.motion-off .motion-enter,body.motion-off .feed-empty{animation:none!important}
body.motion-off #intelligence:hover,body.motion-off .text-button:hover,body.motion-off .text-button:active,body.motion-off .deal-action:active{transform:none!important}
/* Interaction feedback also remains visible with reduced motion enabled. */
body .game-card,body .deal-card,body #intelligence,body .filter-tabs button,body .logo-strip button,body .panel-heading,body nav a{
  transition:transform 300ms var(--homepage-motion-ease),opacity 280ms ease,box-shadow 320ms ease,border-color 220ms ease!important;
}
@media(hover:hover) and (pointer:fine){
  body .deal-card:hover,body #intelligence:hover{box-shadow:0 22px 55px #03071332,inset 0 0 0 1px #d6def730}
  body .game-card:hover,body .liquid-selector .game-card:hover{box-shadow:inset 0 0 0 1px #d6def745,0 10px 26px #03071330}
  body .primary:hover,body .outline:hover,body .text-button:hover,body .deal-action:hover,body .filter-tabs button:hover,body .panel-heading:hover{opacity:.92}
  body .logo-strip button:hover,body nav a:hover{opacity:1}
}
body .primary:active,body .outline:active,body .text-button:active,body .deal-action:active,body .filter-tabs button:active,body .game-card:active,body .panel-heading:active{opacity:.82}
body .filter-tabs button:active{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){
  body .game-card,body .deal-card,body #intelligence,body .filter-tabs button,body .logo-strip button,body .panel-heading,body nav a{transition:opacity 280ms ease,box-shadow 320ms ease!important}
  body .filter-tabs button:active{transform:none!important}
}
body.motion-off .filter-tabs button:active{transform:none!important}


/* Explicit homepage motion request: retain these small movements even when the
   browser reports reduced motion. The site's Motion off control still wins. */
body:not(.motion-off) .hero h1{animation:homepage-title-enter 900ms var(--homepage-motion-ease) backwards!important}
body:not(.motion-off) .hero .intro{animation:homepage-title-enter 900ms var(--homepage-motion-ease) 120ms backwards!important}
body:not(.motion-off) .hero-actions{animation:homepage-title-enter 900ms var(--homepage-motion-ease) 220ms backwards!important}
body:not(.motion-off) .game-card.motion-enter,body:not(.motion-off) .deal-card.motion-enter{animation:homepage-card-enter 760ms var(--homepage-motion-ease) var(--entrance-delay,0ms) backwards!important}
body:not(.motion-off) .game-card,body:not(.motion-off) .deal-card{transition:transform 320ms var(--homepage-motion-ease),box-shadow 320ms ease,border-color 240ms ease!important}
@media(hover:hover) and (pointer:fine){
  body:not(.motion-off) .game-card:hover,body:not(.motion-off) .liquid-selector .game-card:hover,body:not(.motion-off) .deal-card:hover{transform:translateY(-4px)!important}
}
/* Section entrances and controls follow the same explicit site motion choice. */
body:not(.motion-off) .motion-pending{opacity:0}
body:not(.motion-off) .motion-enter{animation:homepage-card-enter 760ms var(--homepage-motion-ease) var(--entrance-delay,0ms) backwards!important}
body:not(.motion-off) button,body:not(.motion-off) a:is(.primary,.outline,.text-button){transition:translate 280ms var(--homepage-motion-ease),scale 180ms ease,opacity 240ms ease,box-shadow 280ms ease,border-color 240ms ease!important}
@media(hover:hover) and (pointer:fine){
 body:not(.motion-off) button:not(:disabled):not(.game-card):hover,body:not(.motion-off) a:is(.primary,.outline,.text-button):hover{translate:0 -2px}
}
body:not(.motion-off) button:not(:disabled):active,body:not(.motion-off) a:is(.primary,.outline,.text-button):active{scale:.97}
body.motion-off .motion-pending{opacity:1}
body.motion-off button,body.motion-off a:is(.primary,.outline,.text-button){translate:none!important;scale:none!important}

html.booting body:not(.motion-off) .hero h1,html.booting body:not(.motion-off) .hero .intro,html.booting body:not(.motion-off) .hero-actions,html.booting .hero .logo-strip,html.booting .hero #intelligence{animation:none!important}
html.booting #artwork-stage,html.booting .shade,html.booting .ambient-light{visibility:hidden}

/* Quieter surfaces, clearer spacing, and shorter repeated entrances. */
@keyframes homepage-card-enter{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
body:not(.motion-off) .motion-enter,body:not(.motion-off) .game-card.motion-enter,body:not(.motion-off) .deal-card.motion-enter{animation-duration:620ms!important}
.deal-grid{gap:20px}
.deal-card{border:1px solid #cbd6ed20;background:linear-gradient(135deg,#243145e8,#172333ed);box-shadow:0 8px 24px #03071318}
.deal-card>p{line-height:1.85}
.deal-toolbar{border:1px solid #cbd6ed16;background:#1b2738d9}
.section-heading{margin-bottom:26px}
.status-badge{letter-spacing:.02em}
@media(min-width:801px){.deals-section{margin-bottom:36px}.savings-lab{margin-top:32px;margin-bottom:32px}.how-section{margin-bottom:32px}}
button:focus-visible,a:focus-visible{outline:2px solid #d9cba9;outline-offset:4px}
@media(hover:hover) and (pointer:fine){body:not(.motion-off) .deal-card:hover{box-shadow:0 14px 32px #03071330}}

/* Progressive disclosure keeps the main page focused on the decision. */
.hero-copy>.eyebrow,.section-copy>.eyebrow,.section-heading>.eyebrow,.section-heading>div>.eyebrow,.section-heading p:not(.eyebrow),.section-copy p:not(.eyebrow),.community>.eyebrow,.insights>.eyebrow{display:none}
.hero{min-height:480px;align-items:center}
.hero .intro{max-width:34em;line-height:1.7;margin-bottom:26px}
.hero-actions .outline{background:transparent}
.price-panel .verdict-row>div:first-child{display:none}
.price-panel .verdict-row{grid-template-columns:1fr}
.quiet-details{margin:14px 0;font-size:11px;color:#bbc7d9;border-top:1px solid #ffffff16;padding-top:12px}
.quiet-details summary,.quiet-section>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.quiet-details summary:after,.quiet-section>summary:after{content:'+';font-size:18px;color:#d9cba9;font-weight:300}
.quiet-details[open]>summary:after,.quiet-section[open]>summary:after{content:'−'}
.quiet-details>p{font-size:12px;line-height:1.8;color:#bcc7db}
.quiet-details .deal-metadata{padding-top:10px}
.quiet-section{margin:20px 0;padding:0 26px;border-radius:16px}
.quiet-section>summary{padding:23px 0;font-size:15px;color:#e4e9f2}
.quiet-section>.savings-lab,.quiet-section>.how-section{margin:0 0 24px;border:0;background:transparent;box-shadow:none;padding:16px 0}
.deal-card{min-height:245px}.deal-card h3{margin:18px 0 14px}.deal-card .quiet-details{margin-bottom:16px}.deal-card .deal-action{margin-top:auto}
.community>p:not(.eyebrow){max-width:38em}.community>.beta-actions{display:none}
/* Frosted glass with restrained highlights and an opaque fallback. */
.glass,.deal-card,.deal-toolbar{background:linear-gradient(135deg,#29364bea,#142032ee);border:1px solid #e4efff26;box-shadow:inset 0 1px 0 #ffffff12,inset 1px 0 0 #ffffff06,0 14px 38px #02081722}
@supports(backdrop-filter:blur(1px)){
 .glass,.deal-card,.deal-toolbar{background:linear-gradient(130deg,#53617b30,#1724379c);backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%)}
}
.quiet-details summary:focus-visible,.quiet-section>summary:focus-visible{outline:2px solid #d9cba9;outline-offset:5px}
@media(max-width:800px){.hero{min-height:0}.quiet-section{padding:0 20px}.quiet-section>summary{font-size:14px}.deal-card{min-height:0}}

/* Lighter glass surfaces: preserve text opacity, reduce only panel tint. */
@supports(backdrop-filter:blur(1px)){
 body .glass,body .deal-card,body .deal-toolbar,body .games-section,body .price-panel,body .community,body .insights{
  background:linear-gradient(130deg,rgba(83,97,123,.10),rgba(23,36,55,.32));
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  border-color:rgba(228,239,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 10px 30px rgba(2,8,23,.09);
 }
}
body .game-card{background:rgba(168,182,209,.025)}
body .game-card.selected{background:rgba(187,199,232,.07);border-color:rgba(203,217,241,.20)}
body .game-card:hover{background:rgba(213,223,255,.08)}