:root {
  color-scheme: dark;
  --bg: #050506;
  --ink: #f4f2ed;
  --muted: #9e9da1;
  --red: #d71932;
  --gold: #f2ad33;
  --line: rgba(255,255,255,.14);
  --mx: 0;
  --my: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img { display: block; max-width: none; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 99; background: white; color: black; padding: .8rem 1rem; }
.skip-link:focus { top: 1rem; }

.site-header {
  height: 68px;
  padding: 0 clamp(1rem, 3vw, 3rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(to bottom, rgba(5,5,6,.92), rgba(5,5,6,.54));
  backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: .75rem; width: max-content; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 30px; transform: skew(-9deg); background: var(--ink); color: #050506; font-weight: 1000; letter-spacing: -.09em; font-size: .96rem; }
.brand-word { font-size: 1.05rem; font-weight: 900; font-style: italic; letter-spacing: -.035em; }
.header-caption, .header-cta { margin: 0; font-size: .72rem; font-weight: 750; letter-spacing: .17em; text-transform: uppercase; }
.header-caption { color: #a9a8aa; }
.header-cta { justify-self: end; transition: color .2s ease; }
.header-cta:hover { color: #ff3550; }

.showroom {
  min-height: 100svh;
  height: max(760px, 100svh);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.075), transparent 31%),
    linear-gradient(180deg, #111114 0%, #070708 46%, #040405 100%);
}
.showroom::before {
  content: "";
  position: absolute;
  inset: 68px 0 0;
  z-index: -2;
  background: repeating-linear-gradient(90deg, transparent 0 16.6%, rgba(255,255,255,.027) 16.7%);
  opacity: .5;
}
.showroom-copy {
  position: absolute;
  left: clamp(1rem, 3vw, 3rem);
  top: clamp(6.8rem, 14vh, 9rem);
  z-index: 7;
  pointer-events: none;
}
.eyebrow { margin: 0 0 .85rem; color: #ff344e; font-size: .72rem; font-weight: 850; letter-spacing: .2em; text-transform: uppercase; }
h1, h2 { margin: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; text-transform: uppercase; line-height: .84; letter-spacing: -.025em; }
h1 { font-size: clamp(3.8rem, 7.1vw, 8.4rem); }
h1 span { color: transparent; -webkit-text-stroke: 1.5px rgba(244,242,237,.65); }
.showroom-intro { width: min(330px, 33vw); margin: 1.25rem 0 0; color: #b8b7ba; font-size: .92rem; }

.ambient {
  position: absolute;
  width: 38vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .24;
  z-index: -1;
  transition: opacity .7s ease, transform 1.2s ease;
}
.ambient-red { left: 25%; top: 23%; background: #d4082b; }
.ambient-gold { right: -5%; top: 18%; background: #c77713; opacity: .13; }
.showroom:has(.garment-left.is-selected) .ambient-red { transform: translateX(-26vw); opacity: .5; }
.showroom:has(.garment-center.is-selected) .ambient-red { transform: translateX(4vw); opacity: .52; }
.showroom:has(.garment-right.is-selected) .ambient-gold { transform: translateX(-17vw); opacity: .46; }

.ice-lines {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 6.2rem;
  height: 18%;
  z-index: 0;
  border: 1px solid rgba(255,255,255,.13);
  transform: perspective(600px) rotateX(66deg);
  transform-origin: bottom;
  background:
    linear-gradient(90deg, transparent 49.85%, rgba(255,255,255,.16) 50%, transparent 50.15%),
    radial-gradient(circle at center, transparent 0 14%, rgba(215,25,50,.17) 14.5% 15.2%, transparent 15.7%);
  box-shadow: 0 0 80px rgba(255,255,255,.035) inset;
}

.stage {
  position: absolute;
  inset: 110px max(1rem, 3vw) 72px;
  z-index: 3;
  perspective: 1500px;
  transform-style: preserve-3d;
  transition: transform .12s linear;
  transform: rotateY(calc(var(--mx) * 2.3deg)) rotateX(calc(var(--my) * -1.5deg));
}
.garment {
  --x: 0%;
  --z: 0px;
  --rot: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(230px, 25vw, 440px);
  height: min(68vh, 620px);
  padding: 0;
  border: 0;
  background: transparent;
  color: white;
  cursor: pointer;
  transform-style: preserve-3d;
  transform: translate(-50%, -47%) translateX(var(--x)) translateZ(var(--z)) rotateY(var(--rot));
  transition: transform .9s cubic-bezier(.17,.84,.19,1), opacity .55s ease, filter .55s ease;
}
.garment-left { --x: -105%; --z: -90px; --rot: 7deg; }
.garment-center { --x: 0%; --z: 60px; --rot: 0deg; z-index: 3; }
.garment-right { --x: 105%; --z: -90px; --rot: -7deg; }
.garment-float {
  position: absolute;
  inset: 0 0 62px;
  display: block;
  transform-style: preserve-3d;
  animation: float 4.8s ease-in-out infinite;
}
.garment-left .garment-float { animation-delay: -.8s; }
.garment-right .garment-float { animation-delay: -1.7s; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotateZ(-.4deg); }
  50% { transform: translateY(-15px) rotateZ(.4deg); }
}
.garment-light {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 10%;
  height: 18%;
  border-radius: 50%;
  filter: blur(38px);
  opacity: .45;
  background: var(--red);
  transform: scaleX(.85);
  transition: opacity .4s, transform .4s;
}
.garment-left .garment-light { background: #e31938; opacity: .3; }
.garment-right .garment-light { background: var(--gold); opacity: .3; }
.garment:hover .garment-light, .garment:focus-visible .garment-light { opacity: .78; transform: scale(1.08); }
.garment-card {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transition: transform 1.05s cubic-bezier(.18,.82,.18,1);
}
.hoodie-face {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  box-shadow: 0 34px 70px rgba(0,0,0,.52);
  backface-visibility: hidden;
  transform: translate(-50%, -50%);
  background: #151517;
}
.hoodie-back { transform: translate(-50%, -50%) rotateY(180deg); }
.crop-square { width: 100%; aspect-ratio: .92; }
.crop-portrait { width: 66%; aspect-ratio: .59; }
.crop img { position: absolute; left: 0; top: 0; width: 200%; height: auto; }
.crop-right img { left: -100%; }
.garment-label {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .7rem;
  padding-top: .65rem;
  border-top: 1px solid rgba(255,255,255,.33);
  transform: translateX(-50%);
  text-align: left;
  transition: opacity .35s;
}
.garment-label b { font-size: .82rem; letter-spacing: .13em; }
.garment-label small { color: #a7a6aa; font-size: .62rem; letter-spacing: .12em; }
.stage.has-selection .garment:not(.is-selected) { opacity: .08; filter: blur(5px); pointer-events: none; }
.stage.has-selection .garment.is-selected {
  --x: 13%;
  --z: 310px;
  --rot: 0deg;
  z-index: 9;
}
.stage.has-selection .garment.is-selected.is-turned .garment-card { transform: rotateY(180deg); }
.stage.has-selection .garment.is-selected .garment-label { opacity: 0; }
.stage.has-selection .garment.is-selected .garment-light { opacity: .85; transform: scale(1.2); }

.product-detail {
  position: absolute;
  inset: 68px 0 0;
  z-index: 10;
  visibility: hidden;
  pointer-events: none;
}
.product-detail.visible { visibility: visible; pointer-events: none; }
.product-detail.visible .detail-close,
.product-detail.visible .tag,
.product-detail.visible .detail-copy { pointer-events: auto; }
.detail-close {
  position: absolute;
  top: 1.3rem;
  right: clamp(1rem, 3vw, 3rem);
  z-index: 4;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  background: rgba(7,7,8,.45);
  color: white;
  font-size: 1.9rem;
  line-height: 1;
  opacity: 0;
  transform: scale(.75);
  transition: opacity .35s .65s, transform .35s .65s, background .2s;
}
.product-detail.visible .detail-close { opacity: 1; transform: scale(1); }
.detail-close:hover { background: var(--red); }
.detail-copy {
  position: absolute;
  right: clamp(1rem, 5vw, 6rem);
  top: 50%;
  width: min(360px, 28vw);
  opacity: 0;
  transform: translateY(-40%) translateX(45px);
  transition: opacity .5s .82s, transform .65s .82s cubic-bezier(.2,.8,.2,1);
}
.product-detail.visible .detail-copy { opacity: 1; transform: translateY(-50%) translateX(0); }
.detail-copy h2 { font-size: clamp(3rem, 5.6vw, 6.6rem); }
.detail-description { margin: 1.2rem 0; color: #b8b7ba; font-size: .92rem; }
.detail-price { margin-bottom: 1.3rem; font-size: 1.55rem; font-weight: 900; }
.size-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.size-picker button {
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.22);
  color: white;
  font-weight: 800;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.size-picker button:hover, .size-picker button.selected { background: var(--red); border-color: var(--red); }
.size-hint { min-height: 20px; margin: .65rem 0; color: #949397; font-size: .75rem; }
.order-button {
  min-height: 49px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #09090a;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .1em;
  transition: transform .2s, background .2s, opacity .2s;
}
.order-button:not(.disabled):hover { transform: translateY(-2px); background: white; }
.order-button.disabled { opacity: .3; pointer-events: none; }

.tag-wrap {
  position: absolute;
  left: clamp(1rem, 5vw, 6rem);
  top: 3%;
  width: clamp(170px, 17vw, 260px);
  height: 76%;
  opacity: 0;
  transform: translateY(-44%);
  transition: opacity .4s .58s, transform .9s .48s cubic-bezier(.16,.8,.2,1);
}
.product-detail.visible .tag-wrap { opacity: 1; transform: translateY(0); }
.tag {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  perspective: 900px;
}
.tag-string {
  position: absolute;
  left: 50%;
  top: -12%;
  width: 3px;
  height: 28%;
  display: block;
  background: repeating-linear-gradient(45deg, #e5e4e0 0 3px, #18181a 3px 6px);
  transform: translateX(-50%);
  transform-origin: top;
}
.tag-inner {
  position: absolute;
  left: 50%;
  top: 19%;
  width: 100%;
  aspect-ratio: .63;
  display: block;
  transform: translateX(-50%);
  transform-style: preserve-3d;
  animation: tagSwing 3.4s ease-in-out infinite;
  transition: transform .75s cubic-bezier(.2,.8,.2,1);
}
@keyframes tagSwing {
  0%, 100% { transform: translateX(-50%) rotateZ(-2deg); }
  50% { transform: translateX(-50%) rotateZ(2deg); }
}
.tag.flipped .tag-inner { animation: none; transform: translateX(-50%) rotateY(180deg); }
.tag-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
  backface-visibility: hidden;
  background: #111;
}
.tag-back { transform: rotateY(180deg); }
.crop-tag img { position: absolute; top: 0; left: 0; width: 200%; height: 100%; object-fit: cover; }
.crop-tag.crop-right img { left: -100%; }
.tag-hint {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: max-content;
  transform: translateX(-50%);
  color: #aaa9ac;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.showroom-bottom {
  position: absolute;
  left: clamp(1rem, 3vw, 3rem);
  right: clamp(1rem, 3vw, 3rem);
  bottom: 1.35rem;
  z-index: 15;
  display: flex;
  justify-content: space-between;
  color: #8d8c90;
  font-size: .65rem;
  font-weight: 750;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.brand-strip {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 2rem;
  padding: .7rem 2rem;
  overflow: hidden;
  background: var(--ink);
  color: #070708;
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .16em;
  white-space: nowrap;
}
.brand-strip i { width: 7px; height: 7px; flex: 0 0 auto; background: var(--red); transform: rotate(45deg); }
.about { max-width: 1440px; margin: auto; padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 5vw, 5rem); }
.about h2 { max-width: 1200px; font-size: clamp(3.5rem, 8vw, 8rem); }
.about h2 span { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.62); }
.about-grid { margin-top: 4rem; display: grid; grid-template-columns: 1fr 1fr; gap: 12vw; align-items: start; }
.about-grid > p { max-width: 500px; margin: 0; color: #aaa9ac; font-size: 1.12rem; }
.about dl { margin: 0; border-top: 1px solid var(--line); }
.about dl div { padding: .85rem 0; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.about dt { color: #8f8e92; }
.about dd { margin: 0; text-align: right; font-weight: 850; }
footer { min-height: 150px; padding: 2rem clamp(1rem, 3vw, 3rem); display: grid; grid-template-columns: 1fr auto 1fr; gap: 2rem; align-items: center; border-top: 1px solid var(--line); }
footer p { margin: 0; color: #8d8c90; font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; }
footer > a:last-child { justify-self: end; font-weight: 800; }
:focus-visible { outline: 3px solid #ff3d55; outline-offset: 3px; }

@media (max-width: 980px) {
  .header-caption { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .showroom { height: max(780px, 100svh); }
  .showroom-copy { top: 6rem; }
  h1 { font-size: clamp(3.2rem, 10vw, 6rem); }
  .showroom-intro { display: none; }
  .stage { inset-inline: .5rem; }
  .garment { width: clamp(210px, 32vw, 330px); height: min(61vh, 530px); }
  .garment-left { --x: -82%; }
  .garment-right { --x: 82%; }
  .stage.has-selection .garment.is-selected { --x: -8%; --z: 240px; }
  .detail-copy { right: 1.5rem; width: min(330px, 36vw); }
  .tag-wrap { left: 1.5rem; width: clamp(160px, 21vw, 230px); }
}

@media (max-width: 700px) {
  .site-header { height: 62px; }
  .showroom { height: 900px; min-height: 100svh; }
  .showroom-copy { top: 5.2rem; }
  .showroom-copy .eyebrow { font-size: .62rem; }
  h1 { font-size: 3.4rem; }
  .stage {
    inset: 165px 0 102px;
    transform: none;
    overflow: visible;
  }
  .garment {
    top: 48%;
    width: 48vw;
    min-width: 165px;
    max-width: 230px;
    height: 51vh;
    max-height: 440px;
  }
  .garment-left { --x: -59%; --z: -80px; --rot: 5deg; }
  .garment-center { --x: 0%; --z: 20px; }
  .garment-right { --x: 59%; --z: -80px; --rot: -5deg; }
  .garment-label { width: 95%; display: block; text-align: center; }
  .garment-label small { display: none; }
  .stage.has-selection .garment.is-selected { --x: 0%; --z: 150px; width: min(78vw, 300px); }
  .crop-portrait { width: 76%; }
  .showroom-bottom { bottom: 1rem; }
  .interaction-hint { display: none; }
  .product-detail { inset: 62px 0 0; }
  .detail-close { top: .9rem; }
  .detail-copy {
    left: 1rem;
    right: 1rem;
    top: auto;
    bottom: 2.8rem;
    width: auto;
    padding: 1rem;
    background: linear-gradient(90deg, rgba(5,5,6,.94), rgba(5,5,6,.78));
    backdrop-filter: blur(12px);
    transform: translateY(40px);
  }
  .product-detail.visible .detail-copy { transform: translateY(0); }
  .detail-copy h2 { font-size: 3rem; }
  .detail-description { display: none; }
  .detail-price { margin: .6rem 0; font-size: 1.25rem; }
  .tag-wrap { left: .2rem; top: 8%; width: 128px; height: 48%; }
  .tag-hint { display: none; }
  .brand-strip { justify-content: flex-start; }
  .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  footer { display: flex; flex-direction: column; align-items: flex-start; }
  footer > a:last-child { align-self: flex-start; }
}

@media (max-width: 420px) {
  .garment { min-width: 150px; }
  .garment-left { --x: -55%; }
  .garment-right { --x: 55%; }
  .size-picker button { min-height: 40px; }
}

/* Keep hit targets on a flat layer; only the image inside each button rotates. */
.stage { transform-style: flat; transform: none; pointer-events: none; }
.garment {
  top: 55%;
  width: 27%;
  min-width: 0;
  max-width: 440px;
  --scale: .94;
  transform: translate(-50%, -47%) scale(var(--scale));
  transition: left .85s cubic-bezier(.18,.85,.2,1), top .85s, transform .85s cubic-bezier(.18,.85,.2,1), opacity .5s, filter .5s;
  pointer-events: auto;
  touch-action: manipulation;
}
.garment-left { left: 19%; z-index: 2; }
.garment-center { left: 50%; z-index: 3; --scale: 1.06; }
.garment-right { left: 81%; z-index: 2; }
.garment > * { pointer-events: none; }
.garment-card { perspective: none; }
.garment-float {
  perspective: 1200px;
  translate: calc(var(--mx) * 12px) calc(var(--my) * 7px);
  transition: translate .2s ease-out;
}
.garment:not(.is-selected):hover { --scale: 1.05; }
.stage.has-selection .garment.is-selected {
  left: 48%;
  width: 27%;
  --scale: 1.15;
  transform: translate(-50%, -47%) scale(var(--scale));
  filter: drop-shadow(0 0 28px color-mix(in srgb, var(--accent, #e92343) 28%, transparent));
}
.stage.has-selection .garment.is-selected .garment-float { animation-play-state: paused; }
.showroom-copy { transition: opacity .45s, transform .6s; }
.is-exploring .showroom-copy { opacity: 0; transform: translateY(-24px); }
.ambient, .ice-lines { pointer-events: none; }
.ambient { animation: atmosphere 8s ease-in-out infinite alternate; }
@keyframes atmosphere { to { opacity: .35; scale: 1.12; } }
.garment-light { animation: light-breathe 4s ease-in-out infinite alternate; }
@keyframes light-breathe { to { filter: blur(25px); } }
.garment-float::after {
  content: "";
  position: absolute;
  inset: -5% 8%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.18) 49%, transparent 60%);
  opacity: 0;
}
.garment.is-turned .garment-float::after { animation: light-sweep 1.1s ease-out; }
@keyframes light-sweep {
  0% { opacity: 0; transform: translateX(-35%); }
  40% { opacity: .7; }
  100% { opacity: 0; transform: translateX(35%); }
}
.detail-copy, .tag-wrap { transition-delay: 0s; }
.detail-close { transition-delay: 0s; cursor: pointer; }
.tag-inner { animation: none; transition: transform .85s cubic-bezier(.2,.8,.2,1); }
.tag { animation: tag-sway 4s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes tag-sway { 0%,100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.garment-label b, .size-hint, .header-cta, .order-button { font-size: .875rem; }
.garment-label small { font-size: .75rem; }
.garment-label { flex-wrap: wrap; }
@media (max-width: 980px) {
  .stage.has-selection .garment.is-selected { left: 44%; width: 26%; --scale: 1.1; }
  .detail-copy { width: 30vw; }
  .tag-wrap { width: 17vw; }
}
@media (max-width: 700px) {
  .garment { width: 31%; min-width: 0; height: 300px; top: 35%; }
  .garment-left { left: 17%; }
  .garment-center { left: 50%; }
  .garment-right { left: 83%; }
  .garment-label b { font-size: .75rem; letter-spacing: .02em; }
  .stage.has-selection .garment.is-selected { left: 55%; top: 25%; width: 50%; --scale: 1; }
  .detail-copy { width: auto; bottom: 2.8rem; }
  .tag-wrap { top: 12%; width: 23%; left: 2%; height: 42%; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .stage { transform: none; }
}

/* Collection carousel */
.intro-screen {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: #050506; color: #f4f2ed; pointer-events: none;
  transition: opacity .7s ease, visibility .7s;
}
.intro-screen span {
  font-size: clamp(4rem, 12vw, 11rem); font-weight: 950; font-style: italic;
  letter-spacing: -.075em; animation: intro-word 1.25s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes intro-word { from { opacity: 0; filter: blur(15px); transform: scale(1.16); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
.intro-screen.intro-exit { opacity: 0; visibility: hidden; }
.intro-screen.intro-exit span { transform: translateY(-15vh) scale(.48); transition: transform .75s cubic-bezier(.2,.8,.2,1); }
.showroom {
  --scene-color: #641d24;
  --scene-ink: #fff9f2;
  --scene-muted: rgba(255,249,242,.78);
  background-color: var(--scene-color);
  background-image: radial-gradient(ellipse at 50% 32%, rgba(255,255,255,.1), transparent 65%), linear-gradient(180deg, transparent 45%, rgba(0,0,0,.16));
  color: var(--scene-ink);
  transition: background-color 1s cubic-bezier(.2,.65,.3,1), color .7s ease;
}
.showroom::before, .ice-lines { opacity: 0; }
.ambient-red, .ambient-gold { display: none; }
.light-scene { --scene-ink: #231f1b; --scene-muted: rgba(35,31,27,.7); }
.showroom .eyebrow, .showroom-intro, .showroom-bottom, .interaction-hint { color: var(--scene-muted); }
.showroom-copy h1 span { -webkit-text-stroke-color: var(--scene-muted); }
.garment, .garment-label, .carousel-count { color: var(--scene-ink); transition-property: transform, opacity, filter, visibility, color; }
.garment-label { border-color: color-mix(in srgb, var(--scene-ink) 30%, transparent); }
.garment-label small { color: var(--scene-muted); }
.light-scene .carousel-count { color: var(--scene-ink); }
.light-scene .carousel-arrow { color: var(--scene-ink); border-color: rgba(35,31,27,.35); background: rgba(255,255,255,.15); }
.light-scene .detail-description, .light-scene .size-hint, .light-scene .tag-hint { color: var(--scene-muted); }
.light-scene .size-picker button { color: var(--scene-ink); border-color: rgba(35,31,27,.35); background: rgba(255,255,255,.25); }
.light-scene .size-picker button.selected { background: #231f1b; color: white; }
.showroom-copy { top: clamp(6rem, 12vh, 8rem); }
.showroom-copy h1 { font-size: clamp(3.5rem, 6.5vw, 7rem); }
.showroom-intro { width: 290px; }
.stage { perspective: 1400px; }
.garment {
  width: clamp(210px, 27vw, 410px); height: min(65vh, 590px);
  top: 53%; left: 50%;
  --x: 0%; --z: 0px; --rot: 0deg; --scale: 1;
  transform: translate(-50%, -47%) translateX(var(--x)) translateZ(var(--z)) rotateY(var(--rot)) scale(var(--scale));
  transition: transform .85s cubic-bezier(.18,.82,.16,1), opacity .65s ease, filter .85s ease, visibility .65s;
  will-change: transform;
}
.garment[data-position="left"] { --x: -108%; --z: -130px; --rot: 18deg; --scale: .83; z-index: 2; opacity: .78; filter: brightness(.8); }
.garment[data-position="center"] { --x: 0%; --z: 85px; --rot: 0deg; --scale: 1.05; z-index: 3; opacity: 1; filter: none; }
.garment[data-position="right"] { --x: 108%; --z: -130px; --rot: -18deg; --scale: .83; z-index: 2; opacity: .78; filter: brightness(.8); }
.garment[data-position="hidden"] { --x: 0%; --z: -300px; --rot: 0deg; --scale: .5; z-index: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.garment[data-position="center"]:hover { --scale: 1.09; }
.garment-light { background: var(--scene-color) !important; }
.stage.has-selection .garment.is-selected {
  --x: -8%; --z: 240px; --rot: 0deg; --scale: 1.15;
  width: clamp(210px, 27vw, 410px); opacity: 1; filter: drop-shadow(0 0 25px color-mix(in srgb, var(--accent) 35%, transparent));
}
.stage.has-selection .garment:not(.is-selected) { opacity: 0; visibility: hidden; pointer-events: none; }
.hoodie-face {
  width: 100%; aspect-ratio: 1; background: transparent; border: 0; border-radius: 0;
  box-shadow: none; filter: drop-shadow(0 24px 20px rgba(0,0,0,.2));
}
.hoodie-face img { width: 200%; height: 100%; object-fit: fill; }
.garment-light { opacity: 0 !important; }
.carousel-nav { position: absolute; inset: 46% clamp(1rem, 3vw, 3rem) auto; z-index: 8; display: flex; justify-content: space-between; pointer-events: none; }
.carousel-arrow {
  width: 60px; height: 60px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%;
  background: rgba(5,5,6,.16); color: white; font-size: 2rem; line-height: 1; cursor: pointer;
  pointer-events: auto; backdrop-filter: blur(8px); transition: transform .25s, background .25s, opacity .35s;
}
.carousel-arrow:hover { background: rgba(255,255,255,.16); }
.carousel-arrow:first-child:hover { transform: translateX(-5px); }
.carousel-arrow:last-child:hover { transform: translateX(5px); }
.is-exploring .carousel-nav { opacity: 0; pointer-events: none; }
.is-exploring .carousel-arrow { pointer-events: none; }
.carousel-count { min-width: 88px; color: #f4f2ed; font-size: .85rem; font-variant-numeric: tabular-nums; }
@media (max-width: 980px) {
  .garment { width: 34vw; height: min(58vh, 520px); }
  .garment[data-position="left"] { --x: -82%; }
  .garment[data-position="right"] { --x: 82%; }
  .stage.has-selection .garment.is-selected { --x: -5%; width: 34vw; }
}
@media (max-width: 700px) {
  .showroom { height: max(830px, 100svh); }
  .showroom-copy { top: 5.4rem; }
  .showroom-copy h1 { font-size: 3.6rem; }
  .stage { inset: 175px 0 120px; }
  .garment { width: 48vw; height: 50vh; top: 43%; }
  .garment[data-position="left"] { --x: -62%; --rot: 12deg; --scale: .76; }
  .garment[data-position="right"] { --x: 62%; --rot: -12deg; --scale: .76; }
  .garment[data-position="center"] { --scale: 1; }
  .stage.has-selection .garment.is-selected { --x: 0%; --z: 110px; --scale: 1; width: 57vw; top: 28%; }
  .carousel-nav { inset: auto 1rem 7.3rem; }
  .carousel-arrow { width: 48px; height: 48px; font-size: 1.5rem; }
  .garment-label { width: 100%; }
  .light-scene .detail-copy { color: #f4f2ed; }
  .light-scene .detail-copy .eyebrow, .light-scene .detail-copy .size-hint { color: #d4d0ca; }
  .light-scene .detail-copy .size-picker button { color: #f4f2ed; border-color: rgba(255,255,255,.35); background: transparent; }
  .light-scene .detail-copy .size-picker button.selected { background: #d71932; }
}

/* Northline collection additions. Arena illustration is a local visual placeholder. */
.hero{height:100svh;min-height:620px;position:relative;isolation:isolate;overflow:hidden;background:#090c12;display:flex;align-items:center;justify-content:center;text-align:center}
.arena{position:absolute;inset:0;z-index:-1;overflow:hidden;transform:scale(1.06) translateY(calc(var(--hero-scroll,0) * -3vh));transition:transform .1s linear;background:radial-gradient(ellipse at 50% 15%,#394453 0,#151c28 31%,#080b12 73%)}
.arena::before{content:"";position:absolute;inset:15% -12% 23%;border:35px solid #111722;border-radius:50%;box-shadow:0 0 0 22px #202938,0 0 0 54px #0b1019,0 0 0 88px #1b222f,0 0 0 128px #090e16,0 30px 130px #000 inset;transform:perspective(800px) rotateX(62deg)}
.arena-lights{position:absolute;inset:0;background:radial-gradient(circle at 17% 24%,#f8fbff 0 1%,#adc5e880 2%,transparent 13%),radial-gradient(circle at 82% 24%,#f8fbff 0 1%,#adc5e880 2%,transparent 13%),radial-gradient(ellipse at 50% 78%,#97aec144,transparent 47%)}
.arena-stands{position:absolute;inset:20% -10% 19%;border-radius:50%;background:repeating-radial-gradient(ellipse at 50% 60%,transparent 0 11px,#d6e4ff10 12px 13px,#02040a55 15px 20px);transform:perspective(800px) rotateX(62deg)}
.arena-ice{position:absolute;left:14%;right:14%;bottom:3%;height:31%;border-radius:50%;background:linear-gradient(90deg,transparent 49.8%,#a5425270 50%,transparent 50.2%),radial-gradient(circle at center,transparent 0 13%,#9c344566 13.3% 14%,transparent 14.3%),linear-gradient(#9eb3c8,#d9e4e9);filter:blur(1px);transform:perspective(550px) rotateX(57deg);box-shadow:0 0 90px #dce8ff66}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#050506a8 0%,#0505064d 35%,#05050677 75%,#050506 100%)}
.hero-content{padding:5rem 1rem 0;transform:translateY(calc(var(--hero-scroll,0) * -6vh));opacity:calc(1 - var(--hero-scroll,0) * .65)}
.hero h1{font-size:clamp(4.5rem,15vw,16rem);font-style:italic;letter-spacing:-.055em;text-shadow:0 12px 50px #000b}
.hero-content>p:last-child{font-size:clamp(.8rem,1.1vw,1rem);letter-spacing:.16em;text-transform:uppercase}
.hero-scroll{position:absolute;bottom:3rem;font-size:.7rem;font-weight:850;letter-spacing:.22em}.hero-scroll span{display:block;font-size:1.5rem;margin-top:.4rem;animation:float 3s infinite}
.showroom{scroll-margin-top:0}.stage{touch-action:pan-y}.stage.dragging .garment{transition:none!important}.stage.dragging .garment[data-position="left"],.stage.dragging .garment[data-position="center"],.stage.dragging .garment[data-position="right"]{transform:translate(-50%,-47%) translateX(calc(var(--x) + var(--drag,0px))) translateZ(var(--z)) rotateY(calc(var(--rot) + var(--drag-progress,0) * -9deg)) scale(var(--scale))}.stage.dragging{cursor:grabbing}.garment{cursor:grab}
.product-marks{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin:1rem 0}.product-marks figure{margin:0;min-width:0}.product-marks img{width:100%;height:82px;object-fit:cover}.mini-label img{object-position:55% 56%}.neck-photo{height:82px;overflow:hidden;position:relative}.neck-photo img{position:absolute;width:200%;max-width:none;height:200%;object-fit:fill;left:0;top:-100%;filter:brightness(1.7)}.product-marks figcaption{font-size:.58rem;line-height:1.3;color:var(--scene-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.35rem}
.gretzky,.packaging,.final-cta{padding:clamp(5rem,10vw,10rem) clamp(1rem,6vw,7rem)}.gretzky{background:#111216}.gretzky h2{font-size:clamp(4rem,12vw,12rem)}.gretzky p:not(.eyebrow){max-width:690px;color:#d0ced0;font-size:clamp(1.1rem,2vw,1.6rem);line-height:1.5}.gretzky small,.packaging small{color:#89878c;font-size:.7rem}
.packaging{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:4vw;align-items:center;min-height:800px;background:radial-gradient(circle at 75% 55%,#252a32,#090a0d 60%)}.packaging h2{font-size:clamp(3.5rem,6vw,7rem);overflow-wrap:anywhere}.packaging p:not(.eyebrow){max-width:440px;color:#aaa9ac}.bag-scene{height:min(70vw,620px);min-height:420px;position:relative;display:grid;place-items:center;perspective:1000px}.bag{position:relative;width:min(76%,430px);aspect-ratio:1.25;background:linear-gradient(110deg,#e9ece7dd,#f8f9f2f2 30%,#bfc3c3c9 100%);color:#111;border:1px solid #ffffffb0;box-shadow:25px 42px 55px #000a, inset 22px 0 30px #fff9,inset -15px 0 24px #40464b28;transform:rotateY(-9deg) rotateZ(-3deg);transition:transform .6s}.bag-scene:hover .bag{transform:rotateY(3deg) rotateZ(-1deg)}.bag-handle{position:absolute;width:38%;height:26%;top:4%;border:12px solid #e5e7e1c9;border-bottom:0;border-radius:50% 50% 0 0;transform:rotateZ(-3deg);filter:drop-shadow(2px 4px 5px #0008)}.bag-top{position:absolute;top:23%;width:100%;text-align:center;font-size:clamp(1.2rem,2.4vw,2rem);font-weight:950;letter-spacing:-.06em}.bag-top small{display:block;color:#222;font-size:.36em;letter-spacing:.24em;margin-top:.25rem}.bag-rink{position:absolute;top:49%;left:39%;width:22%;border:1px solid #343a3b;display:flex;justify-content:space-between;align-items:center;padding:.35rem;font-size:.6rem}.bag-rink span{font-weight:900}.bag-bottom{position:absolute;bottom:8%;left:8%;right:8%;display:flex;justify-content:space-between;align-items:end;font-size:clamp(.38rem,.65vw,.6rem);font-weight:850;letter-spacing:.1em}.bag-bottom b{font-size:1rem}.final-cta{text-align:center;background:#d71932}.final-cta .eyebrow{color:#ffced4}.final-cta h2{font-size:clamp(4rem,10vw,10rem)}.final-cta a{display:inline-flex;margin-top:2rem;padding:1rem 1.5rem;background:#fff;color:#111;font-weight:900;font-size:.8rem;letter-spacing:.08em}
@media(max-width:700px){.hero{min-height:540px}.hero h1{font-size:17vw}.hero-content>p:last-child{font-size:.65rem}.showroom{height:max(930px,100svh)}.detail-copy{bottom:1.5rem;padding:.7rem}.product-marks{margin:.55rem 0}.product-marks img,.neck-photo{height:56px}.packaging{grid-template-columns:1fr;gap:0;min-height:auto}.bag-scene{height:440px;min-height:0}.bag{width:83%}.gretzky h2{font-size:18vw}}

/* Keep the real garment details legible, without brightening the fabric. */
.product-marks{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.product-marks img{display:block;height:auto;filter:none}
.mini-label img{width:100%;aspect-ratio:1.18;object-fit:cover;object-position:50% 57%}
.neck-photo{width:100%;height:auto;aspect-ratio:1;overflow:hidden;background:#151515}
.neck-photo img{position:absolute;left:0;top:-100%;width:200%;height:200%;max-width:none;object-fit:fill;filter:none}
.neck-photo.three-panel img{width:300%}
.product-marks figcaption{font-size:.75rem;line-height:1.35;letter-spacing:.025em}
.gretzky h2{max-width:1050px;font-size:clamp(2.1rem,5.5vw,5.8rem);line-height:1.05;overflow-wrap:normal}
.gretzky blockquote{margin:0 0 clamp(3rem,7vw,6rem);padding:0;border:0}
.gretzky blockquote p{max-width:none!important;margin:0 0 .7rem;color:#f4f1f1!important;font-size:clamp(2.5rem,7vw,7.5rem)!important;font-weight:900;line-height:.98!important;letter-spacing:-.045em}
.gretzky cite{color:#db3348;font-size:clamp(.9rem,1.6vw,1.25rem);font-style:normal;font-weight:800;letter-spacing:.06em}
.gretzky h2+p{margin-top:2rem}


/* Original garments retain their proportions in the opening composition. */
.hero{background:#131315 url('./assets/arena-aerial.png') center center/cover no-repeat}
.hero-hoodies{position:absolute;inset:75px 3vw 55px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-items:center;justify-items:center;gap:4vh 2vw;z-index:-1}
.hero-hoodies span{display:block;width:min(100%,35vh);aspect-ratio:1;overflow:hidden}
.hero-hoodies img{display:block;width:200%;max-width:none;height:100%;object-fit:fill;filter:brightness(.9);transform:translateX(-50%)}
.hero::after{background:linear-gradient(180deg,#050b1455,#050b1440 25%,#050b148c 50%,#050b1440 75%,#050b1477)}
.hero-content{position:relative;z-index:1;padding:0 1rem}.hero h1{font-size:clamp(4rem,14vw,15rem);text-shadow:0 6px 25px #0008}
.hoodie-neck{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s;pointer-events:none}
.hoodie-neck img{width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:4px}
.garment[data-view="neck"] .garment-card{opacity:0;visibility:hidden}
.garment[data-view="neck"] .hoodie-neck{opacity:1;visibility:visible}
.garment-card{transition:transform .8s,opacity .25s}
.tag{--tag-left:-54.7%;--tag-right:-168%;--tag-top:-22.9%;--tag-width:323.4%;--tag-height:137.8%}
.crop-tag img{width:var(--tag-width);height:var(--tag-height);max-width:none;object-fit:fill;top:var(--tag-top);left:var(--tag-left)}
.crop-tag.crop-right img{left:var(--tag-right)}
.tag[data-product="hot-girls"],.tag[data-product="pretty-girls"]{--tag-left:-48%;--tag-right:-171%;--tag-top:-22%;--tag-width:320%;--tag-height:138%}
.tag[data-product="mcdavid"]{--tag-left:-54%;--tag-right:-168%;--tag-top:-21.5%;--tag-width:324%;--tag-height:139%}
.tag-face{border-radius:6px}.tag-inner{aspect-ratio:475/743}
@media(max-width:700px){.hero-hoodies{inset:75px 4vw 70px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:0 12vw}.hero-hoodies span{width:min(100%,19vh)}.hero h1{font-size:16vw}.hero{min-height:650px}.hoodie-neck img{width:100%}.detail-description{display:block;font-size:1rem;line-height:1.45;margin:.65rem 0}.detail-copy{bottom:3.2rem}.detail-close{top:3.5rem}.is-exploring .interaction-hint{display:block;position:absolute;left:0;right:0;bottom:440px;text-align:center;font-size:.65rem;letter-spacing:.04em}}

/* Preserve single-view image proportions and the approved garment framing. */
.hoodie-face.approved-back img{left:0;width:100%;height:100%;object-fit:contain}
.hero-hoodies img.approved-back-image{width:100%;height:100%;transform:none;object-fit:contain}
.hero-hoodies>span{position:relative}
.hoodie-face.approved-back img.lettering-patch,.hero-hoodies img.lettering-patch{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform:none;pointer-events:none}
.lettering-bedard{clip-path:inset(86% 43% 9% 44%)}
.lettering-mcdavid{clip-path:inset(75.5% 44% 20.5% 42%)}
.hero-hoodies>span{opacity:0;translate:0 32px;scale:.94;transition:opacity .85s ease,translate .85s cubic-bezier(.2,.8,.2,1),scale .85s ease;transition-delay:calc(var(--arrival,0)*110ms)}
.hero-hoodies>span:nth-child(2){--arrival:1}.hero-hoodies>span:nth-child(3){--arrival:2}.hero-hoodies>span:nth-child(4){--arrival:3}.hero-hoodies>span:nth-child(5){--arrival:4}.hero-hoodies>span:nth-child(6){--arrival:5}.hero-hoodies>span:nth-child(7){--arrival:6}.hero-hoodies>span:nth-child(8){--arrival:7}
.hero.hoodies-ready .hero-hoodies>span{opacity:1;translate:0 0;scale:1}
@media(prefers-reduced-motion:reduce){.hero-hoodies>span{opacity:1;translate:none;scale:1;transition:none}}

/* Drop 01 final polish: logo lettering and in-garment production details. */
/* Opening-only motion: retain the approved resting and detail compositions. */
.stage.has-selection .garment.is-selected {
  transition: transform 1.15s cubic-bezier(.22,.72,.18,1), left 1.15s cubic-bezier(.22,.72,.18,1), top 1.15s cubic-bezier(.22,.72,.18,1), width 1.15s cubic-bezier(.22,.72,.18,1), opacity .5s, filter .85s;
}
.is-exploring .garment.is-selected .garment-float { translate: 0 0; }
.stage:not(.has-selection) .hoodie-neck,
.stage:not(.has-selection) .collar-detail { display: none; }
.is-cinematic .hoodie-neck { visibility: hidden; opacity: 0; }
.product-detail.visible .tag-wrap { transition-delay: .08s; }
.product-detail.visible .detail-copy { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
  .product-detail.visible .tag-wrap, .product-detail.visible .detail-copy { transition-delay: 0s; }
}
.hero h1{
  font-family:"Arial Black",Impact,sans-serif;
  font-style:italic;
  font-weight:950;
  letter-spacing:-.085em;
  text-transform:none;
  transform:skewX(-11deg);
  transform-origin:center;
}
.hero-light-slot{filter:drop-shadow(0 0 26px rgba(255,255,255,.2)) brightness(1.16)}
.collar-detail{
  position:absolute;left:25%;top:15.7%;z-index:3;width:8.8%;height:10%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  color:#f7f7f5;font-style:normal;line-height:1;text-align:center;pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.55));
}
.collar-detail i{display:grid;place-items:center;width:28%;aspect-ratio:1;background:#080808;color:#fff;font-size:clamp(3px,.45vw,7px);font-weight:950;letter-spacing:-.08em}
.collar-detail b{margin-top:4%;font-size:clamp(3px,.38vw,6px);letter-spacing:.08em}
.collar-detail em{margin-top:4%;font-size:clamp(2px,.28vw,4px);font-style:normal;letter-spacing:.02em}
.collar-detail.tone-red b,.collar-detail.tone-red em{color:#ac111e}
.collar-detail.tone-black b,.collar-detail.tone-black em{color:#111;filter:none}
.crop-portrait .collar-detail{left:25%;top:14%;width:10%}
@media(max-width:700px){
  .collar-detail{width:20%;left:19%;top:11.5%;transform:scale(1.18)}
  .crop-portrait .collar-detail{width:21%;left:19%;top:11%}
  .collar-detail i{font-size:5px}.collar-detail b{font-size:4px}.collar-detail em{font-size:3px}
}

.stage { perspective: none; }
.garment {
  transform: translate(-50%, -47%) translateX(var(--x)) scale(var(--scale));
  will-change: auto;
}
.garment[data-position="left"],
.garment[data-position="right"] {
  opacity: 1;
  filter: none;
}
.stage.dragging .garment[data-position="left"],
.stage.dragging .garment[data-position="center"],
.stage.dragging .garment[data-position="right"] {
  transform: translate(-50%, -47%) translateX(calc(var(--x) + var(--drag, 0px))) scale(var(--scale));
}

/* The selection becomes a short, full-bleed product film before its detail view. */
.cinema[hidden]{display:none}
.cinema{
  position:absolute;inset:0;z-index:9;overflow:hidden;pointer-events:none;
  background:radial-gradient(ellipse at 50% 65%,color-mix(in srgb,var(--cinema-accent) 42%,#070708),#09090d 64%);
  opacity:0;isolation:isolate;
}
.cinema.playing{animation:cinema-curtain 3.05s both}
.cinema::before{
  content:"";position:absolute;inset:-30%;z-index:-1;
  background:linear-gradient(106deg,transparent 34%,color-mix(in srgb,var(--cinema-accent) 28%,transparent) 49%,transparent 63%);
  transform:translateX(-60%) skewX(-13deg);
}
.cinema.playing::before{animation:cinema-sweep 3.05s ease-in-out both}
.cinema-beams{position:absolute;inset:0;perspective:700px;transform:scale(1.13)}
.cinema-beams i{
  position:absolute;top:-20%;height:145%;width:clamp(7px,1.2vw,23px);
  background:linear-gradient(90deg,transparent,#fff4,color-mix(in srgb,var(--cinema-accent) 77%,white),#fff7,transparent);
  box-shadow:0 0 28px 8px var(--cinema-accent),0 0 100px 20px color-mix(in srgb,var(--cinema-accent) 55%,transparent);
  opacity:.7;transform:rotate(12deg);
}
.cinema-beams i:nth-child(1){left:11%}.cinema-beams i:nth-child(2){left:28%;width:5px;opacity:.34}
.cinema-beams i:nth-child(3){right:15%;transform:rotate(-12deg)}
.cinema-beams i:nth-child(4){right:32%;width:4px;opacity:.29}
.cinema.playing .cinema-beams{animation:cinema-drift 3.05s cubic-bezier(.2,.8,.2,1) both}
.cinema-camera{position:absolute;inset:0;display:grid;place-items:center;perspective:1200px}
.cinema-garment{position:relative;width:min(42vw,450px);aspect-ratio:1;transform-style:preserve-3d;will-change:transform}
.cinema.playing .cinema-garment{animation:cinema-orbit 3.05s cubic-bezier(.16,.76,.16,1) both}
.cinema-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;transform-style:preserve-3d}
.cinema-face img{position:absolute;top:0;left:0;width:200%;height:100%;max-width:none;object-fit:fill}
.cinema-front{transform:translateZ(24px)}
.cinema-back{transform:rotateY(180deg) translateZ(24px)}.cinema-back img{left:-100%}
.cinema-volume,.cinema-depth{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.cinema-depth{overflow:hidden;transform:translateZ(var(--depth));filter:brightness(.62) saturate(.8);opacity:.94}
.cinema-depth img{position:absolute;inset:0;width:200%;height:100%;max-width:none;object-fit:fill}
.cinema-garment::before{content:"";position:absolute;left:14%;right:14%;top:13%;bottom:7%;border-radius:44% 44% 18% 18%;transform:translateZ(0);background:color-mix(in srgb,var(--cinema-accent) 38%,#0b0b0d);filter:blur(8px);opacity:.8}
.cinema-title{position:absolute;left:6%;bottom:9%;font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:clamp(4rem,12vw,12rem);line-height:.8;letter-spacing:-.045em;color:#f7f2ed;text-shadow:0 8px 30px #000b;opacity:0}
.cinema-index{position:absolute;left:6%;top:14%;font-size:.8rem;font-weight:850;letter-spacing:.24em;color:#fff;opacity:0}
.cinema.playing .cinema-title{animation:cinema-type 3.05s both}
.cinema.playing .cinema-index{animation:cinema-index 3.05s both}
.cinema-flare{position:absolute;inset:0;background:linear-gradient(110deg,transparent 45%,#fff9 50%,transparent 55%);mix-blend-mode:screen;opacity:0}
.cinema.playing .cinema-flare{animation:cinema-flash 3.05s both}
.is-cinematic .stage{pointer-events:none}
.is-cinematic .showroom-bottom{opacity:0}
@keyframes cinema-curtain{0%{opacity:0}9%,88%{opacity:1}100%{opacity:0}}
@keyframes cinema-sweep{0%,18%{transform:translateX(-70%) skewX(-13deg)}68%,100%{transform:translateX(70%) skewX(-13deg)}}
@keyframes cinema-drift{0%{transform:scale(1.2) translateX(0)}50%{transform:scale(1.35) translateX(-7%)}100%{transform:scale(1.08) translateX(5%)}}
@keyframes cinema-orbit{
  0%{transform:translate3d(0,16%,-260px) rotateX(2deg) rotateY(-8deg) scale(.58);opacity:0}
  14%{transform:translate3d(0,1%,-20px) rotateX(1deg) rotateY(0) scale(.98);opacity:1}
  31%{transform:translate3d(-5%,0,90px) rotateX(-2deg) rotateY(-15deg) scale(1.22)}
  48%{transform:translate3d(5%,2%,155px) rotateX(2deg) rotateY(64deg) scale(1.38)}
  64%{transform:translate3d(2%,1%,115px) rotateX(-1deg) rotateY(126deg) scale(1.3)}
  79%,92%{transform:translate3d(-5%,0,55px) rotateX(0) rotateY(180deg) scale(1.16);opacity:1}
  100%{transform:translate3d(-8%,0,20px) rotateY(180deg) scale(1.08);opacity:0}
}
@keyframes cinema-type{0%,58%{opacity:0;transform:translateY(35px)}72%,89%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes cinema-index{0%,13%{opacity:0}23%,83%{opacity:.75}100%{opacity:0}}
@keyframes cinema-flash{0%,44%,55%,100%{opacity:0}49%{opacity:.55}}
@media(max-width:700px){
  .cinema-garment{width:86vw}
  .cinema-title{left:5%;right:5%;bottom:17%;font-size:clamp(3.4rem,17vw,6rem);overflow-wrap:anywhere}
  .cinema-index{left:5%;top:18%}
}
/* Match the approved single-view backs and their lettering overlays. */
.cinema-face{filter:drop-shadow(0 35px 28px #000a)}
.cinema-back.approved-back img{left:0;width:100%;object-fit:contain}
.cinema-back img.lettering-patch{left:0;width:100%;object-fit:contain}

/* Real-volume opening turn, calibrated from the seven physical hoodie videos. */
.cinema.playing{animation-duration:3.35s}
.cinema.playing::before,.cinema.playing .cinema-beams,.cinema.playing .cinema-title,.cinema.playing .cinema-index,.cinema.playing .cinema-flare{animation-duration:3.35s}
.cinema-camera{perspective:1450px;perspective-origin:50% 45%}
.cinema-turntable{
  position:relative;width:min(42vw,450px);aspect-ratio:1;transform-style:preserve-3d;
  will-change:transform,opacity;filter:drop-shadow(0 38px 32px rgba(0,0,0,.62));
}
.cinema-object{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.cinema-plane{position:absolute;inset:0;display:block;overflow:hidden;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,opacity;filter:drop-shadow(0 18px 17px rgba(0,0,0,.32))}
.cinema-plane img{position:absolute;inset:0;width:200%;height:100%;max-width:none;object-fit:fill}
.cinema-plane-front{transform:translateZ(46px)}
.cinema-plane-back{transform:rotateY(180deg) translateZ(46px)}
.cinema-plane-back img{left:-100%}
.cinema-plane-side{transform:rotateY(90deg) translateZ(18px);opacity:0}
.cinema-plane-side img{
  left:0;width:100%;object-fit:contain;
  transform:translate(var(--side-shift-x,0),var(--side-shift-y,0)) scaleX(var(--side-scale-x,1)) scaleY(var(--side-scale-y,1));
  transform-origin:50% 54%;
}
.cinema-plane-back.approved-back img{left:0;width:100%;object-fit:contain}
.cinema-plane-back img.lettering-patch{left:0;width:100%;object-fit:contain}
.cinema-ground-shadow{
  position:absolute;left:12%;right:12%;bottom:-8%;height:14%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.72),transparent 68%);filter:blur(10px);transform:rotateX(76deg) translateZ(-80px);opacity:.74;
}
.cinema.playing .cinema-turntable{animation:cinema-volume-flight 3.35s cubic-bezier(.16,.78,.14,1) both}
.cinema.playing .cinema-object{animation:cinema-volume-turn 3.35s cubic-bezier(.2,.68,.12,1) both}
.cinema.playing .cinema-plane-front{animation:cinema-front-visibility 3.35s linear both}
.cinema.playing .cinema-plane-side{animation:cinema-side-visibility 3.35s linear both}
.cinema.playing .cinema-plane-back{animation:cinema-back-visibility 3.35s linear both}
.cinema.playing .cinema-ground-shadow{animation:cinema-shadow-pulse 3.35s ease-in-out both}
@keyframes cinema-volume-flight{
  0%{transform:translate3d(var(--cinema-start-x),var(--cinema-start-y),-260px) scale(var(--cinema-start-scale));opacity:0}
  7%{opacity:1}
  17%{transform:translate3d(0,1%,0) scale(1)}
  42%{transform:translate3d(-3%,2%,155px) scale(1.2)}
  53%{transform:translate3d(4%,4%,230px) scale(1.38)}
  69%{transform:translate3d(0,1%,135px) scale(1.23)}
  82%,93%{transform:translate3d(-5%,0,62px) scale(1.12);opacity:1}
  100%{transform:translate3d(-8%,0,20px) scale(1.06);opacity:0}
}
@keyframes cinema-volume-turn{
  0%,15%{transform:rotateX(1deg) rotateY(0deg)}
  29%{transform:rotateX(-2deg) rotateY(-28deg)}
  43%{transform:rotateX(1deg) rotateY(-63deg)}
  51%,56%{transform:rotateX(0deg) rotateY(-90deg)}
  69%{transform:rotateX(-1deg) rotateY(-127deg)}
  81%,100%{transform:rotateX(0deg) rotateY(-180deg)}
}
@keyframes cinema-front-visibility{0%,34%{opacity:1}42%,100%{opacity:0}}
@keyframes cinema-side-visibility{0%,30%{opacity:0}38%,62%{opacity:1}70%,100%{opacity:0}}
@keyframes cinema-back-visibility{0%,60%{opacity:0}68%,100%{opacity:1}}
@keyframes cinema-shadow-pulse{0%{opacity:0;transform:rotateX(76deg) translateZ(-80px) scale(.55)}24%{opacity:.64}53%{opacity:.94;transform:rotateX(76deg) translateZ(-80px) scale(1.18)}100%{opacity:.2;transform:rotateX(76deg) translateZ(-80px) scale(.9)}}
@media(max-width:700px){
  .cinema-turntable{width:82vw}
  .cinema-plane-front{transform:translateZ(30px)}
  .cinema-plane-back{transform:rotateY(180deg) translateZ(30px)}
  .cinema-plane-side{transform:rotateY(90deg) translateZ(12px)}
}
@media(prefers-reduced-motion:reduce){
  .cinema.playing .cinema-turntable{animation:cinema-curtain 1s both}
  .cinema.playing .cinema-object{animation:none;transform:rotateY(-180deg)}
  .cinema.playing .cinema-plane-front,.cinema.playing .cinema-plane-side{display:none}
  .cinema.playing .cinema-plane-back{animation:none;opacity:1}
}

/* Product facts and premium size guide, added without changing the approved base. */
.size-picker button[hidden]{display:none!important}
.size-guide-trigger{display:inline-flex;align-items:center;margin:-.35rem 0 1rem;padding:.25rem 0;border:0;border-bottom:1px solid currentColor;background:none;color:inherit;font:inherit;font-size:.78rem;font-weight:800;letter-spacing:.08em;cursor:pointer;opacity:.82;transition:opacity .2s,text-shadow .2s}
.size-guide-trigger:hover,.size-guide-trigger:focus-visible{opacity:1;text-shadow:0 0 18px rgba(255,255,255,.55)}
.detail-material{max-width:34rem;margin:.9rem 0 .2rem;color:var(--scene-muted);font-size:.78rem;line-height:1.45;letter-spacing:.025em}
.size-guide[hidden]{display:none}
.size-guide{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1rem;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.size-guide.visible{opacity:1;visibility:visible}
.size-guide-backdrop{position:absolute;inset:0;border:0;background:rgba(1,2,5,.78);backdrop-filter:blur(15px);cursor:default}
.size-guide-dialog{position:relative;width:min(880px,calc(100vw - 2rem));max-height:calc(100svh - 2rem);overflow:auto;padding:clamp(1.5rem,4vw,3.25rem);border:1px solid rgba(255,255,255,.2);background:linear-gradient(145deg,rgba(23,27,35,.96),rgba(4,6,10,.96));box-shadow:0 30px 100px rgba(0,0,0,.65),inset 0 1px rgba(255,255,255,.08);color:#f4f2ed;transform:translateY(22px) scale(.975);transition:transform .42s cubic-bezier(.2,.8,.2,1)}
.size-guide.visible .size-guide-dialog{transform:none}
.size-guide-dialog h2{margin:.35rem 3rem 1.8rem 0;font-size:clamp(2.3rem,5vw,5.3rem);line-height:.88;letter-spacing:-.045em}
.size-guide-close{position:absolute;right:1rem;top:1rem;width:44px;height:44px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(255,255,255,.04);color:white;font-size:1.8rem;cursor:pointer;transition:background .2s,transform .2s}
.size-guide-close:hover{background:rgba(255,255,255,.14);transform:rotate(8deg)}
.size-table{border-top:1px solid rgba(255,255,255,.28)}
.size-row{display:grid;grid-template-columns:1.05fr repeat(3,1fr);align-items:center;min-height:58px;border-bottom:1px solid rgba(255,255,255,.14);transition:background .22s,padding .22s,box-shadow .22s}
.size-row:not(.size-head):hover{padding-inline:.65rem;background:linear-gradient(90deg,rgba(215,25,50,.2),rgba(255,255,255,.04));box-shadow:inset 3px 0 #d71932}
.size-row>*{padding:.75rem .5rem;font-variant-numeric:tabular-nums}
.size-row b{font-size:1.05rem}.size-head{min-height:44px;color:#aeb2bb;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.size-legend{margin:1.4rem 0 0;color:#b9bbc1;font-size:.78rem;line-height:1.7}
.size-guide-open{overflow:hidden}

/* A subtle inner-fibre texture: light brushed cotton, not thick fleece. */
.hoodie-neck::after,.neck-photo::after{content:"";position:absolute;inset:8%;pointer-events:none;opacity:.2;mix-blend-mode:screen;background:repeating-linear-gradient(108deg,transparent 0 3px,rgba(255,255,255,.28) 4px,transparent 5px),radial-gradient(circle at 40% 45%,rgba(255,255,255,.22) 0 1px,transparent 1.5px);background-size:auto,7px 7px;filter:blur(.25px);mask-image:linear-gradient(transparent 5%,#000 30% 78%,transparent)}

/* Cinematic opening on the approved aerial arena. The resting hero remains unchanged. */
.hero{background:#131315 url('./assets/arena-aerial.png') center center/cover no-repeat}
.arena-film{position:absolute;inset:-3%;z-index:-3;overflow:hidden;background:#050b14 url('./assets/arena-aerial.png') center center/cover no-repeat;transform:scale(1.03);will-change:transform,filter}
.arena-glow,.arena-crowd,.arena-haze{position:absolute;inset:0;display:block;pointer-events:none}
.arena-glow{background:radial-gradient(circle at 17% 18%,rgba(239,248,255,.25),transparent 21%),radial-gradient(circle at 82% 18%,rgba(239,248,255,.22),transparent 22%),linear-gradient(110deg,transparent 38%,rgba(218,233,255,.12) 50%,transparent 62%);mix-blend-mode:screen}
.arena-crowd{inset:14% 0 34%;background:repeating-radial-gradient(ellipse at 50% 70%,transparent 0 8px,rgba(217,231,255,.055) 9px 10px,transparent 11px 16px);mix-blend-mode:screen;opacity:.3}
.arena-haze{inset:45% 4% 2%;background:radial-gradient(ellipse at 50% 68%,rgba(218,234,255,.16),transparent 58%);filter:blur(14px);opacity:.45}
.intro-screen{position:fixed;inset:0;z-index:40;pointer-events:none;background:transparent!important;opacity:1;visibility:visible}
.intro-screen span{position:absolute;inset:-20%;display:block;background:linear-gradient(112deg,transparent 38%,rgba(203,222,255,.14) 48%,rgba(255,255,255,.3) 50%,rgba(203,222,255,.1) 53%,transparent 63%);mix-blend-mode:screen;filter:blur(10px);transform:translateX(-70%) skewX(-8deg);animation:none}
.arena-intro .intro-screen span{animation:arena-light-pass 3.1s .15s cubic-bezier(.28,.7,.18,1) both}
.arena-intro .arena-film{animation:arena-camera 3.35s cubic-bezier(.2,.7,.15,1) both}
.arena-intro .arena-glow{animation:arena-lights-live 2.5s .2s ease-in-out both}
.arena-intro .arena-crowd{animation:arena-crowd-live 1.7s .25s ease-in-out infinite alternate}
.arena-intro .arena-haze{animation:arena-haze-live 2.7s .3s ease-in-out both}
.arena-intro .site-header,.arena-intro .hero-content,.arena-intro .hero-scroll{opacity:0}
.arena-intro .site-header{transform:translateY(-16px);animation:arena-ui-reveal .68s 2.62s cubic-bezier(.2,.8,.2,1) forwards}
.arena-intro .hero-content{transform:translateY(18px) scale(.96);animation:arena-ui-reveal .7s 2.38s cubic-bezier(.2,.8,.2,1) forwards}
.arena-intro .hero-scroll{transform:translateY(10px);animation:arena-ui-reveal .62s 2.78s cubic-bezier(.2,.8,.2,1) forwards}
.intro-skipped .hero-hoodies>span{transition:none}
@keyframes arena-camera{0%{transform:scale(1.12) translateY(1.5%);filter:brightness(.72) saturate(.78)}38%{filter:brightness(.86) saturate(.9)}100%{transform:scale(1.03) translateY(0);filter:none}}
@keyframes arena-light-pass{0%{transform:translateX(-75%) skewX(-8deg);opacity:0}18%{opacity:.85}72%{opacity:.55}100%{transform:translateX(75%) skewX(-8deg);opacity:0}}
@keyframes arena-lights-live{0%{opacity:.22;filter:blur(4px)}45%{opacity:.85}72%{opacity:.5}100%{opacity:1;filter:none}}
@keyframes arena-crowd-live{from{opacity:.16;filter:brightness(.7)}to{opacity:.46;filter:brightness(1.18)}}
@keyframes arena-haze-live{0%{opacity:0;transform:translateY(10px)}45%{opacity:.55}100%{opacity:.28;transform:none}}
@keyframes arena-ui-reveal{to{opacity:1;transform:none}}

@media(max-width:700px){
  .size-guide{padding:.55rem}.size-guide-dialog{width:calc(100vw - 1.1rem);max-height:calc(100svh - 1.1rem);padding:1.25rem .9rem}.size-guide-dialog h2{font-size:2.35rem;margin-bottom:1.2rem}.size-row{grid-template-columns:.82fr repeat(3,1fr);min-height:50px}.size-row>*{padding:.65rem .2rem;font-size:.78rem}.size-head>*{font-size:.58rem;letter-spacing:.025em}.size-legend{font-size:.7rem}.detail-material{font-size:.72rem;margin-top:.65rem}
  .arena-intro .arena-crowd{animation:none}.arena-intro .arena-film{animation-duration:3.1s}.arena-intro .intro-screen span{filter:blur(16px);opacity:.65}
}
@media(prefers-reduced-motion:reduce){.size-guide,.size-guide-dialog{transition:none}.size-row{transition:none}.arena-film{transform:none}}

/* Reference-matched opening film: whip-in, macro pass, volumetric side, then back. */
.cinema.playing{animation:cinema-curtain 3.75s both}
.cinema.playing::before,.cinema.playing .cinema-beams,.cinema.playing .cinema-title,.cinema.playing .cinema-index,.cinema.playing .cinema-flare{animation-duration:3.75s}
.cinema::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(circle at 50% 48%,transparent 32%,rgba(0,0,0,.48) 100%);opacity:.8}
.cinema-pulse{position:absolute;left:50%;top:50%;z-index:1;width:18vmin;aspect-ratio:1;border:1px solid color-mix(in srgb,var(--cinema-accent) 78%,white);border-radius:50%;opacity:0;box-shadow:0 0 70px color-mix(in srgb,var(--cinema-accent) 70%,transparent),inset 0 0 60px color-mix(in srgb,var(--cinema-accent) 42%,transparent);transform:translate(-50%,-50%) scale(.15)}
.cinema.playing .cinema-pulse{animation:cinema-pulse 3.75s cubic-bezier(.16,.74,.18,1) both}
.cinema.playing .cinema-turntable{animation:cinema-volume-flight 3.75s linear both}
.cinema.playing .cinema-object{animation:cinema-volume-turn 3.75s linear both}
.cinema.playing .cinema-plane-front{animation:cinema-front-visibility 3.75s linear both}
.cinema.playing .cinema-plane-side{animation:cinema-side-visibility 3.75s linear both}
.cinema.playing .cinema-plane-back{animation:cinema-back-visibility 3.75s linear both}
.cinema.playing .cinema-ground-shadow{animation:cinema-shadow-pulse 3.75s ease-in-out both}
.showroom-copy,.carousel-nav,.showroom-bottom{transition:opacity .42s ease,filter .42s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.is-cinematic .showroom-copy{opacity:0;filter:blur(12px);transform:translate3d(-5%,0,-40px) scale(.96)}
.is-cinematic .carousel-nav{opacity:0;filter:blur(9px);transform:scale(.88)}
.cinema-title{z-index:6;white-space:nowrap}
.cinema-title::before,.cinema-title::after{content:attr(data-text);position:absolute;left:54vw;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.25);opacity:.55}
.cinema-title::before{transform:translateX(-10%) translateY(-95%)}
.cinema-title::after{transform:translateX(8%) translateY(92%)}
.cinema-index{z-index:8}.cinema-camera{z-index:3}.cinema-flare{z-index:5}
@keyframes cinema-curtain{0%{opacity:0}4%,94%{opacity:1}100%{opacity:0}}
@keyframes cinema-sweep{0%,18%{transform:translateX(-72%) skewX(-13deg)}36%{transform:translateX(12%) skewX(-10deg)}66%,100%{transform:translateX(72%) skewX(-13deg)}}
@keyframes cinema-drift{0%{transform:scale(1.12) translateX(0);filter:blur(0)}35%{transform:scale(1.55) translateX(-12%);filter:blur(2px)}58%{transform:scale(1.28) translateX(8%);filter:blur(0)}100%{transform:scale(1.06) translateX(3%)}}
@keyframes cinema-type{0%,57%{opacity:0;transform:translate3d(8%,28px,0)}68%,92%{opacity:.92;transform:translate3d(0,0,0)}100%{opacity:0;transform:translate3d(-3%,0,0)}}
@keyframes cinema-index{0%,9%{opacity:0;transform:translateY(-8px)}18%,88%{opacity:.78;transform:none}100%{opacity:0}}
@keyframes cinema-flash{0%,19%,27%,48%,57%,100%{opacity:0}23%{opacity:.68}52%{opacity:.32}}
@keyframes cinema-pulse{0%,12%{opacity:0;transform:translate(-50%,-50%) scale(.12)}20%{opacity:.78}42%{opacity:.1;transform:translate(-50%,-50%) scale(8)}100%{opacity:0;transform:translate(-50%,-50%) scale(10)}}
@keyframes cinema-volume-flight{
  0%{transform:translate3d(var(--cinema-start-x),var(--cinema-start-y),-240px) scale(var(--cinema-start-scale));opacity:0;animation-timing-function:cubic-bezier(.18,.72,.14,1)}
  4%{opacity:1}
  16%{transform:translate3d(0,1%,-8px) scale(1);animation-timing-function:cubic-bezier(.12,.72,.08,1)}
  29%{transform:translate3d(-3%,-1%,240px) scale(1.43);animation-timing-function:cubic-bezier(.18,.88,.14,1)}
  37%{transform:translate3d(-13%,-3%,420px) scale(1.74);animation-timing-function:cubic-bezier(.55,.02,.22,1)}
  44%{transform:translate3d(12%,2%,350px) scale(1.61);animation-timing-function:cubic-bezier(.16,.82,.18,1)}
  53%{transform:translate3d(2%,2%,225px) scale(1.39);animation-timing-function:cubic-bezier(.18,.76,.16,1)}
  69%{transform:translate3d(-2%,0,145px) scale(1.25);animation-timing-function:cubic-bezier(.18,.74,.2,1)}
  84%,94%{transform:translate3d(-5%,0,62px) scale(1.12);opacity:1;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
  100%{transform:translate3d(-7%,0,24px) scale(1.075);opacity:0}
}
@keyframes cinema-volume-turn{
  0%,19%{transform:rotateX(1deg) rotateY(0deg);animation-timing-function:cubic-bezier(.2,.78,.18,1)}
  29%{transform:rotateX(-2deg) rotateY(-17deg);animation-timing-function:cubic-bezier(.18,.72,.14,1)}
  38%{transform:rotateX(2deg) rotateY(-47deg);animation-timing-function:cubic-bezier(.26,.52,.14,1)}
  49%{transform:rotateX(0deg) rotateY(-82deg);animation-timing-function:cubic-bezier(.12,.72,.18,1)}
  56%{transform:rotateX(-1deg) rotateY(-94deg);animation-timing-function:cubic-bezier(.24,.62,.2,1)}
  69%{transform:rotateX(1deg) rotateY(-136deg);animation-timing-function:cubic-bezier(.2,.7,.16,1)}
  82%{transform:rotateX(0deg) rotateY(-174deg)}
  88%,100%{transform:rotateX(0deg) rotateY(-180deg)}
}
@keyframes cinema-front-visibility{0%,31%{opacity:1}46%,100%{opacity:0}}
@keyframes cinema-side-visibility{0%,28%{opacity:0}41%,61%{opacity:1}73%,100%{opacity:0}}
@keyframes cinema-back-visibility{0%,57%{opacity:0}70%,100%{opacity:1}}
@keyframes cinema-shadow-pulse{0%{opacity:0;transform:rotateX(76deg) translateZ(-80px) scale(.45)}18%{opacity:.6}39%{opacity:.92;transform:rotateX(76deg) translateZ(-80px) scale(1.45)}62%{opacity:.78;transform:rotateX(76deg) translateZ(-80px) scale(1.12)}100%{opacity:.18;transform:rotateX(76deg) translateZ(-80px) scale(.88)}}

/* Height recommendation calculated from the existing Northline measurement table. */
.height-fit{margin:0 0 1.8rem;padding:1.15rem 1.25rem 1.25rem;border:1px solid rgba(255,255,255,.14);background:linear-gradient(120deg,rgba(255,255,255,.055),rgba(215,25,50,.08));box-shadow:inset 0 1px rgba(255,255,255,.06)}
.height-fit-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.height-fit-heading p{margin:0 0 .15rem;font-size:.8rem;font-weight:900;letter-spacing:.105em}
.height-fit-heading span{color:#aeb2bb;font-size:.74rem}
#height-value{font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;font-size:clamp(2.3rem,5vw,4.4rem);line-height:.78;white-space:nowrap}
#height-value small{font-family:inherit;font-size:.35em;letter-spacing:.05em;color:#c7c9ce}
#height-range{--height-progress:57.14%;width:100%;height:28px;margin:0;appearance:none;background:transparent;cursor:pointer}
#height-range::-webkit-slider-runnable-track{height:5px;border-radius:99px;background:linear-gradient(90deg,#d71932 0 var(--height-progress),rgba(255,255,255,.16) var(--height-progress) 100%);box-shadow:0 0 18px rgba(215,25,50,.2)}
#height-range::-webkit-slider-thumb{appearance:none;width:22px;height:22px;margin-top:-8.5px;border:4px solid #f6f4ef;border-radius:50%;background:#d71932;box-shadow:0 0 0 5px rgba(215,25,50,.18),0 4px 16px #000;transition:transform .15s,box-shadow .15s}
#height-range:hover::-webkit-slider-thumb,#height-range:focus-visible::-webkit-slider-thumb{transform:scale(1.1);box-shadow:0 0 0 7px rgba(215,25,50,.23),0 4px 18px #000}
#height-range::-moz-range-track{height:5px;border-radius:99px;background:rgba(255,255,255,.16)}
#height-range::-moz-range-progress{height:5px;border-radius:99px;background:#d71932}
#height-range::-moz-range-thumb{width:16px;height:16px;border:4px solid #f6f4ef;border-radius:50%;background:#d71932;box-shadow:0 0 0 5px rgba(215,25,50,.18)}
.height-scale{display:flex;justify-content:space-between;color:#81848c;font-size:.66rem;font-weight:800;letter-spacing:.06em}
.height-result{display:flex;align-items:center;gap:1rem;min-height:54px;margin-top:.9rem;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.1)}
.height-result strong{flex:0 0 auto;color:#fff;font-size:1.05rem;letter-spacing:.035em}
.height-result span{color:#bfc1c7;font-size:.74rem;line-height:1.45}
.size-row[data-guide-size]{position:relative}
.size-row[data-guide-size].is-recommended{padding-inline:.65rem;background:linear-gradient(90deg,rgba(215,25,50,.3),rgba(215,25,50,.08) 62%,rgba(255,255,255,.025));box-shadow:inset 3px 0 #d71932,0 8px 26px rgba(0,0,0,.14)}
.size-recommend-badge{position:absolute;right:.55rem;top:.35rem;padding:.22rem .45rem;border:1px solid rgba(255,255,255,.22);border-radius:99px;background:#d71932;color:#fff;font-size:.55rem;font-style:normal;font-weight:900;letter-spacing:.05em;text-transform:uppercase;opacity:0;transform:translateY(5px);transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1)}
.size-row.is-recommended .size-recommend-badge{opacity:1;transform:none}
@media(max-width:700px){
  .height-fit{padding:.9rem;margin-bottom:1rem}.height-fit-heading{align-items:center}.height-fit-heading span{display:none}.height-result{align-items:flex-start;flex-direction:column;gap:.3rem}.height-result span{font-size:.7rem}.size-recommend-badge{right:.2rem;top:.15rem;padding:.17rem .28rem;font-size:.43rem}.size-row[data-guide-size].is-recommended{padding-inline:.2rem}
  .cinema-title::before,.cinema-title::after{left:62vw}.cinema::after{background:radial-gradient(circle at 50% 43%,transparent 28%,rgba(0,0,0,.52) 100%)}
}
@media(prefers-reduced-motion:reduce){.height-fit *,.size-recommend-badge{transition:none!important}.cinema-pulse{display:none}}

/* Performance pass: keep the approved camera/turn choreography, but rasterize far
   fewer full-screen effects while it is running. */
.cinema{contain:layout paint;transform:translateZ(0)}
.cinema-beams{contain:paint;will-change:transform}
.cinema-beams i{
  box-shadow:none;
  background:linear-gradient(90deg,transparent 0 18%,color-mix(in srgb,var(--cinema-accent) 58%,white) 48%,rgba(255,255,255,.5) 52%,transparent 82%);
  opacity:.48;
}
.cinema-beams i:nth-child(2),.cinema-beams i:nth-child(4){display:none}
.cinema-pulse{
  border:0;box-shadow:none;
  background:radial-gradient(circle,transparent 54%,color-mix(in srgb,var(--cinema-accent) 72%,white) 56%,color-mix(in srgb,var(--cinema-accent) 34%,transparent) 58%,transparent 63%);
}
.cinema-turntable,.cinema-plane,.cinema-face{filter:none}
.cinema-plane{contain:paint}
.cinema-ground-shadow{
  filter:none;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.68) 0,rgba(0,0,0,.35) 38%,transparent 72%);
}
.cinema-flare{
  mix-blend-mode:normal;
  background:linear-gradient(110deg,transparent 45%,rgba(255,255,255,.38) 50%,transparent 55%);
}
.showroom-copy,.carousel-nav,.showroom-bottom{transition:opacity .42s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.is-cinematic .showroom-copy{filter:none}
.is-cinematic .carousel-nav{filter:none}
@keyframes cinema-drift{
  0%{transform:scale(1.12) translateX(0)}
  35%{transform:scale(1.55) translateX(-12%)}
  58%{transform:scale(1.28) translateX(8%)}
  100%{transform:scale(1.06) translateX(3%)}
}
@media(max-width:700px){.cinema-beams i:nth-child(3){display:none}}