:root{scrollbar-gutter:stable}

/* Semantic Premier colors stay independent from the equipped cosmetic theme. */
.page-home .home-rating-card.csg-rating-gray strong{color:#aeb7bd!important;text-shadow:0 0 20px #aeb7bd22}
.page-home .home-rating-card.csg-rating-cyan strong{color:#5ac8e6!important;text-shadow:0 0 22px #5ac8e63d}
.page-home .home-rating-card.csg-rating-blue strong{color:#64a9ff!important;text-shadow:0 0 22px #64a9ff3d}
.page-home .home-rating-card.csg-rating-purple strong{color:#b17af0!important;text-shadow:0 0 22px #b17af044}
.page-home .home-rating-card.csg-rating-pink strong{color:#ee72c8!important;text-shadow:0 0 22px #ee72c844}
.page-home .home-rating-card.csg-rating-red strong{color:#ff6868!important;text-shadow:0 0 22px #ff686844}
.page-home .home-rating-card.csg-rating-gold strong{color:#f6c945!important;text-shadow:0 0 24px #f6c94555}

.page-home .csg-home-rebirth{
  order:21!important;
  width:min(1120px,100%);
  margin:-4px auto 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  box-sizing:border-box;
  padding:14px 16px;
  border:1px solid #f6c9456b;
  border-radius:13px;
  background:linear-gradient(110deg,#201a0d,#11191e 58%,#0b141a);
  box-shadow:inset 0 1px #fff3b21c,0 13px 34px #0005,0 0 26px #f6c94512;
}
.csg-home-rebirth div{display:grid;gap:3px;min-width:0}.csg-home-rebirth small{color:#f6c945!important;font-size:7px;font-weight:950;letter-spacing:.15em}.csg-home-rebirth b{color:#eef3f5;font:850 20px/1 var(--font-display,'Barlow Condensed',sans-serif);text-transform:uppercase}.csg-home-rebirth span{color:#91a1aa;font-size:9px;line-height:1.4}.csg-home-rebirth button{min-width:150px;min-height:42px;border:1px solid #ffe58a!important;border-radius:10px!important;background:linear-gradient(145deg,#ffe57c,#f4c542 48%,#d69b17)!important;color:#0b1014!important;font-size:8px;font-weight:950;letter-spacing:.06em;box-shadow:inset 0 1px #fffbd0,0 0 24px #f4c5422b!important}

/* Paint-only easing hides asset swaps without changing layout or reel timing. */
.site-shell,.site-shell:before,.site-shell main:before,.site-shell .home-stage,.site-shell .topbar,.site-shell .side-menu{transition:background-color .42s ease,border-color .42s ease,box-shadow .42s ease,filter .42s ease!important}
html.csg-theme-transition .site-shell{filter:brightness(.92) saturate(.9)}
.case-preview-backdrop,.case-spin-backdrop,.case-reveal-backdrop{animation:csgBackdropIn .28s ease-out both}
.case-preview-modal,.case-spinner,.case-batch-reveal{animation:csgCaseLayerIn .4s cubic-bezier(.2,.75,.2,1) both}
@keyframes csgBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes csgCaseLayerIn{from{opacity:.65;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}

/* The round-result panel (ratingPop/deltaKick/progressGrow etc., defined in the
   compiled app CSS) already animates its individual numbers in nicely. But the
   panel itself has no entrance of its own - React swaps the picker for the result
   with no transition, so the whole block teleports in a frame before its own
   numbers start their pop. This gives the container a short lead-in so the swap
   reads as one continuous motion instead of a hard cut followed by a delayed pop. */
.result-panel{animation:csgResultIn .22s ease-out both}
@keyframes csgResultIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Arrival motion ----------

   The app bundle animates main>section with page-arrive (.32s, fade + 9px rise),
   so page content already eases in. Nothing else does: on first load the topbar
   and the sidebar rail are simply painted, so the chrome snaps into place a beat
   before the content slides up under it, and inside a page every card in a grid
   appears at once.

   These are deliberately small - 6px of travel, under half a second, and only on
   first paint. They run once per document: none of them re-fire on route change,
   so moving between pages costs nothing. Reel and spinner timing is untouched.
   Everything here is disabled under prefers-reduced-motion at the end of the
   file. */

.site-shell>.topbar{animation:csgChromeArrive .44s cubic-bezier(.2,.75,.2,1) both}
/* opacity only on the rail: it owns a translate for its off-canvas slide on
   mobile, and animating transform here would fight that */
.site-shell>.side-menu{animation:csgFadeIn .5s ease-out .06s both}
@keyframes csgChromeArrive{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes csgFadeIn{from{opacity:0}to{opacity:1}}

/* Grids: let the tiles arrive in sequence rather than as one block. The delay is
   capped so a long grid never leaves the last item waiting - past the sixth tile
   everything shares the same beat. */
.page-home .center-mode-grid>*,
.page-home .home-tools>*,
.case-grid>.case-card{animation:csgTileArrive .38s cubic-bezier(.2,.75,.2,1) both}
.page-home .center-mode-grid>:nth-child(1),.page-home .home-tools>:nth-child(1),.case-grid>.case-card:nth-child(1){animation-delay:.02s}
.page-home .center-mode-grid>:nth-child(2),.page-home .home-tools>:nth-child(2),.case-grid>.case-card:nth-child(2){animation-delay:.06s}
.page-home .center-mode-grid>:nth-child(3),.page-home .home-tools>:nth-child(3),.case-grid>.case-card:nth-child(3){animation-delay:.1s}
.page-home .center-mode-grid>:nth-child(4),.page-home .home-tools>:nth-child(4),.case-grid>.case-card:nth-child(4){animation-delay:.14s}
.page-home .center-mode-grid>:nth-child(5),.page-home .home-tools>:nth-child(5),.case-grid>.case-card:nth-child(5){animation-delay:.18s}
.page-home .center-mode-grid>:nth-child(6),.page-home .home-tools>:nth-child(6),.case-grid>.case-card:nth-child(6){animation-delay:.22s}
.page-home .center-mode-grid>:nth-child(n+7),.page-home .home-tools>:nth-child(n+7),.case-grid>.case-card:nth-child(n+7){animation-delay:.26s}
@keyframes csgTileArrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media(max-width:760px){.page-home .csg-home-rebirth{width:calc(100% - 20px);flex-direction:column;align-items:stretch}.csg-home-rebirth button{width:100%}}
@media(prefers-reduced-motion:reduce){.site-shell,.site-shell:before,.site-shell main:before,.site-shell .home-stage,.site-shell .topbar,.site-shell .side-menu{transition:none!important}.case-preview-backdrop,.case-spin-backdrop,.case-reveal-backdrop,.case-preview-modal,.case-spinner,.case-batch-reveal,.result-panel{animation:none!important}.site-shell>.topbar,.site-shell>.side-menu,.page-home .center-mode-grid>*,.page-home .home-tools>*,.case-grid>.case-card{animation:none!important}/* the app bundle's own page-arrive on main>section was never covered here */.site-shell main>section{animation:none!important}}

/* ================================================================
   ACTION MOTION

   One vocabulary, different verbs. Every interaction below moves only
   transform, opacity or a colour - never width, height, blur or filter on a
   running animation - so nothing here triggers layout and the compositor can
   keep it off the main thread.

   Duration is read from --csg-m, which each preset sets for itself, so Carbon
   feels tighter than Vertigo without any of these rules knowing which theme is
   equipped. Every animation is disabled wholesale under prefers-reduced-motion
   at the end of this block.
   ================================================================ */

:root{ --csg-m:1; --csg-ease:cubic-bezier(.22,.61,.36,1); --csg-snap:cubic-bezier(.2,.9,.3,1.2); }
/* theme-specific motion language, kept deliberately small */
.site-shell.cosmetic-theme-carbon{ --csg-m:.78 }      /* tight, mechanical */
.site-shell.cosmetic-theme-chrome{ --csg-m:.90 }      /* precise */
.site-shell.cosmetic-theme-longrange{ --csg-m:1.18 }  /* deliberate, long throw */
.site-shell.cosmetic-theme-vertigo{ --csg-m:1.30 }    /* floating, deeper */
.site-shell.cosmetic-theme-afterplant{ --csg-m:1.05 }

/* ---- normal press: a small physical compression, no bounce ---- */
.site-shell .csg-button{ transition:transform calc(.11s * var(--csg-m)) var(--csg-ease),
                                    background-color calc(.16s * var(--csg-m)) ease,
                                    border-color calc(.16s * var(--csg-m)) ease; }
.site-shell .csg-button:active{ transform:scale(.975) }
.site-shell .csg-button-primary:active{ transform:scale(.982) translateY(1px) }

/* ---- hover: quick, small, no floating ---- */
.site-shell .center-mode,
.site-shell .home-tools>button,
.site-shell .case-card{ transition:transform calc(.16s * var(--csg-m)) var(--csg-ease),
                                   border-color calc(.16s * var(--csg-m)) ease,
                                   background-color calc(.16s * var(--csg-m)) ease; }
.site-shell .center-mode:hover,
.site-shell .home-tools>button:hover,
.site-shell .case-card:hover{ transform:translateY(-2px) }
.site-shell .v33-nav-icon[data-v33-icon]{ transition:transform calc(.18s * var(--csg-m)) var(--csg-snap) }
.site-shell .side-menu nav button:hover .v33-nav-icon[data-v33-icon],
.site-shell .center-mode:hover .v33-nav-icon[data-v33-icon]{ transform:scale(1.08) }

/* ---- navigation: the active item answers immediately ---- */
.site-shell .side-menu nav button{ transition:transform calc(.13s * var(--csg-m)) var(--csg-ease),
                                              background-color calc(.16s * var(--csg-m)) ease,
                                              border-color calc(.16s * var(--csg-m)) ease; }
.site-shell .side-menu nav button:active{ transform:translateX(2px) scale(.99) }
.site-shell .side-menu nav button.active .v33-nav-icon[data-v33-icon]{ animation:csgNavMark calc(.34s * var(--csg-m)) var(--csg-snap) both }
@keyframes csgNavMark{ from{transform:scale(.86)} 60%{transform:scale(1.10)} to{transform:scale(1)} }

/* ---- sidebar: one slide, chrome settles with it ---- */
.site-shell>.side-menu{ transition:transform calc(.30s * var(--csg-m)) var(--csg-ease),
                                   background-color calc(.30s * var(--csg-m)) ease !important; }
.site-shell .nav-scrim{ transition:opacity calc(.26s * var(--csg-m)) ease }

/* ---- lock rating: a committed action, so it answers with a directed pulse ---- */
@keyframes csgLockPulse{
  0%{ transform:scale(1); box-shadow:0 0 0 0 var(--csg-pulse,#f6c94566) }
  35%{ transform:scale(.972) }
  100%{ transform:scale(1); box-shadow:0 0 0 18px transparent }
}
.site-shell .lock-button.csg-act-lock{ animation:csgLockPulse calc(.52s * var(--csg-m)) var(--csg-ease) both }

/* ---- submit clip: a stronger confirmation than an ordinary button ---- */
@keyframes csgSubmitOk{
  0%{ transform:scale(1) }
  30%{ transform:scale(.96) }
  55%{ transform:scale(1.035) }
  100%{ transform:scale(1) }
}
.site-shell :is(.submit-top,.side-submit).csg-act-submit{ animation:csgSubmitOk calc(.46s * var(--csg-m)) var(--csg-snap) both }

/* ---- results: controlled positive lift, quick local danger ---- */
@keyframes csgWin{
  0%{ transform:translateY(4px) scale(.985); opacity:.7 }
  60%{ transform:translateY(-2px) scale(1.012) }
  100%{ transform:none; opacity:1 }
}
@keyframes csgLose{
  0%,100%{ transform:translateX(0) }
  20%{ transform:translateX(-5px) } 45%{ transform:translateX(4px) }
  70%{ transform:translateX(-2px) }
}
.site-shell .csg-act-win{ animation:csgWin calc(.46s * var(--csg-m)) var(--csg-ease) both }
.site-shell .csg-act-lose{ animation:csgLose calc(.34s * var(--csg-m)) ease both }
/* the shake is scoped to the result element on purpose - never the document */

/* ---- higher / lower: the motion states which way the call went ---- */
@keyframes csgCallUp{ 0%{transform:translateY(8px);opacity:.55} 100%{transform:none;opacity:1} }
@keyframes csgCallDown{ 0%{transform:translateY(-8px);opacity:.55} 100%{transform:none;opacity:1} }
.site-shell .csg-act-up{ animation:csgCallUp calc(.30s * var(--csg-m)) var(--csg-snap) both }
.site-shell .csg-act-down{ animation:csgCallDown calc(.30s * var(--csg-m)) var(--csg-snap) both }

/* ---- survival: a life leaving is its own event ---- */
@keyframes csgLifeLost{
  0%{ transform:scale(1); opacity:1; filter:none }
  40%{ transform:scale(1.25); opacity:1 }
  100%{ transform:scale(.7); opacity:.25 }
}
.site-shell .csg-act-life{ animation:csgLifeLost calc(.44s * var(--csg-m)) var(--csg-ease) both }

/* ---- case opening: heavier, mechanical, with a settle ---- */
@keyframes csgCaseArm{
  0%{ transform:translateY(-6px) scale(.99) } 55%{ transform:translateY(2px) scale(1.004) }
  100%{ transform:none }
}
.site-shell .csg-act-case{ animation:csgCaseArm calc(.60s * var(--csg-m)) cubic-bezier(.3,.05,.2,1) both }

/* ---- upgrader: tension, then a clear payoff ---- */
@keyframes csgUpTension{
  0%{ transform:none } 50%{ transform:scale(1.006) } 100%{ transform:none }
}
.site-shell .csg-act-tension{ animation:csgUpTension calc(1.1s * var(--csg-m)) ease-in-out infinite }

/* ---- route change and theme switch: the backdrop crossfades, never hard-cuts ---- */
#csg-backdrop-canvas{ transition:opacity calc(.34s * var(--csg-m,1)) ease }
#csg-backdrop-canvas.csg-theme-swap{ opacity:0 }
.site-shell main>section{ animation:csgRouteIn calc(.34s * var(--csg-m)) var(--csg-ease) both }
@keyframes csgRouteIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

@media(prefers-reduced-motion:reduce){
  .site-shell .csg-button,.site-shell .center-mode,.site-shell .home-tools>button,
  .site-shell .case-card,.site-shell .v33-nav-icon[data-v33-icon],
  .site-shell .side-menu nav button,.site-shell>.side-menu,.site-shell .nav-scrim,
  #csg-backdrop-canvas{ transition:none!important }
  .site-shell .csg-act-lock,.site-shell :is(.submit-top,.side-submit).csg-act-submit,
  .site-shell .csg-act-win,.site-shell .csg-act-lose,.site-shell .csg-act-up,
  .site-shell .csg-act-down,.site-shell .csg-act-life,.site-shell .csg-act-case,
  .site-shell .csg-act-tension,.site-shell main>section,
  .site-shell .side-menu nav button.active .v33-nav-icon[data-v33-icon]{ animation:none!important }
  .site-shell .center-mode:hover,.site-shell .home-tools>button:hover,
  .site-shell .case-card:hover{ transform:none!important }
}