/* t1548 (Kip 2026-11-13): every ONE|11 Studio page, step and panel slides UP from the bottom.
   Going back slides it DOWN. Same curve and timing as the live suit flow (.62s cubic-bezier(.22,.8,.24,1)).
   Loaded last in index.html so it overrides the old side-slide rules (t490 panels, v2 shift-left/right, v2 pop). */
:root{--o11-up-ease:cubic-bezier(.22,.8,.24,1);--o11-up-dur:.62s}

/* 1) Off-ice kit panel (#kitModal) and emblem creator panel (#embModal): were translateX(100%) from the right */
html body #kitModal,
html body #embModal{
  transform:translateY(100%);
  box-shadow:0 -18px 50px rgba(0,0,0,.55);
  transition:transform var(--o11-up-dur) var(--o11-up-ease),visibility 0s linear var(--o11-up-dur);
}
html body #kitModal.sl-open,
html body #embModal.sl-open{
  transform:none;
  transition:transform var(--o11-up-dur) var(--o11-up-ease),visibility 0s;
}
/* t1549: the kit frame stays pure black behind the carousel (no white iframe backdrop) */
html body #kitModal{background:#000!important}
html body #kitModal iframe,#kitFrame{background:#000!important;color-scheme:dark}

/* 2) + 3) Logo step: was a horizontal shift in from the right (back from the off-ice kit) and a scale "pop"
   (from the suit hub). Now it slides up from the bottom, and down when going back.
   .wrap moves with position:relative + top, not transform: a transform would re-anchor the fixed walkthrough
   sheet (#sf1424) inside .wrap and make it jump at the end. The footer and nav have no fixed children, so they use transform. */
html body.v2-prep-pop > .wrap{transform:none;opacity:1;position:relative;top:100dvh}
html body.v2-prep-pop #raceFooter941{transform:translateY(100dvh);opacity:1}
html body.v2-prep-pout > .wrap{transform:none;opacity:1;position:relative;top:0}
html body.v2-prep-pout #raceFooter941{transform:none;opacity:1}
html body.v2-run-pop > .wrap{transform:none;opacity:1;position:relative;top:0;transition:top var(--o11-up-dur) var(--o11-up-ease)}
html body.v2-run-pop #raceFooter941{transform:none;opacity:1;transition:transform var(--o11-up-dur) var(--o11-up-ease)}
html body.v2-run-pout > .wrap{transform:none;opacity:1;position:relative;top:100dvh;transition:top var(--o11-up-dur) var(--o11-up-ease);pointer-events:none}
html body.v2-run-pout #raceFooter941{transform:translateY(100dvh);opacity:1;transition:transform var(--o11-up-dur) var(--o11-up-ease);pointer-events:none}
/* forward out of the logo step (legacy shift-up path): page leaves upward */
html body.v2-run-shift-right > .wrap{transform:none;position:relative;top:-100dvh;transition:top var(--o11-up-dur) var(--o11-up-ease);pointer-events:none}
html body.v2-run-shift-right #raceFooter941,
html body.v2-run-shift-right .v2logosNav{transform:translateY(-100dvh);transition:transform var(--o11-up-dur) var(--o11-up-ease);pointer-events:none}
/* back from the off-ice kit: the kit slides down, then the logo step comes down from above */
html body.v2-prep-shift-left > .wrap{transform:none;position:relative;top:-100dvh}
html body.v2-prep-shift-left #raceFooter941{transform:translateY(-100dvh)}
html body.v2-run-shift-left > .wrap{transform:none;position:relative;top:0;transition:top var(--o11-up-dur) var(--o11-up-ease)}
html body.v2-run-shift-left #raceFooter941{transform:none;transition:transform var(--o11-up-dur) var(--o11-up-ease)}

/* 4) Full-page (cross-document) view transitions on phones: slide up, slide down on Back */
::view-transition-old(root){animation:o11VtOut1548 var(--o11-up-dur) var(--o11-up-ease) both}
::view-transition-new(root){animation:o11VtIn1548 var(--o11-up-dur) var(--o11-up-ease) both}
html:active-view-transition-type(o11back)::view-transition-old(root){animation-name:o11VtOutBack1548}
html:active-view-transition-type(o11back)::view-transition-new(root){animation-name:o11VtInBack1548;z-index:0}
@keyframes o11VtIn1548{from{transform:translateY(100%)}to{transform:none}}
@keyframes o11VtOut1548{from{transform:none}to{transform:translateY(-20%);opacity:.4}}
@keyframes o11VtInBack1548{from{transform:translateY(-20%);opacity:.4}to{transform:none;opacity:1}}
@keyframes o11VtOutBack1548{from{transform:none}to{transform:translateY(100%)}}
html:active-view-transition-type(o11back)::view-transition-old(root){z-index:1}

@media (prefers-reduced-motion:reduce){
  html body #kitModal,html body #embModal,
  html body.v2-run-shift-right > .wrap,html body.v2-run-shift-left > .wrap,
  html body.v2-run-pop > .wrap,html body.v2-run-pout > .wrap,
  html body.v2-run-pop #raceFooter941,html body.v2-run-pout #raceFooter941{transition:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}