/* UTOPIA hoodie colours: one model, a blue scan line (the visor's colour) sweeps across and repaints him in the next colour.
   Uses UH Orbitron from hero.css; its own small Conde Sans is embedded below; Arabic uses the store's Alexandria. Full-bleed, one screen. */

/* Conde Sans, only the letters of the six colour names (hero.css carries only U T O P I A) */
@font-face{font-family:"UC Conde";src:url(data:font/woff2;base64,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) format("woff2");font-weight:700;font-display:swap}

.uc{--uc-hdr:var(--utopia-header-height,104px);--uc-ink:#00033D;--uc-blue:#0033FF;--uc-gut:3.8cqw;
  position:relative;width:var(--uc-vw,100vw);margin-inline:calc(50% - var(--uc-vw,100vw) / 2);height:120svh;min-height:640px;overflow:hidden;overflow:clip;background:#fff;isolation:isolate}
@media (max-width:767px){.uc{--uc-hdr:var(--utopia-header-height,64px)}}
.uc *{box-sizing:border-box;margin:0}
/* 120svh runway: the one-screen stage stays pinned (sticky) under the store header for the last 20svh, so the visitor pauses on it.
   overflow:clip on the section (not hidden) keeps sticky working */
.uc__stage{position:sticky;top:var(--uc-hdr);margin-top:var(--uc-hdr);height:calc(100svh - var(--uc-hdr));min-height:520px;overflow:hidden;container-type:size;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.uc__model img{-webkit-user-drag:none;pointer-events:none}

/* one layer per colour: the giant name behind, the model in front. Only the current one shows;
   the incoming one is revealed by clip-path behind the scan line. */
.uc__layer{position:absolute;inset:0;visibility:hidden}
.uc__layer.is-on,.uc__layer.is-in{visibility:visible}
.uc__layer.is-in{z-index:2;background:#fff}

/* three layers, back to front: the colour name at the top, the X ribbons crossing behind his head, the model in front */
.uc__word{position:absolute;left:3.8cqw;right:3.8cqw;top:2cqh;display:flex;justify-content:space-between;direction:ltr;
  font:700 min(24cqh,40cqw)/.8 "UC Conde",sans-serif;color:var(--uc-c);-webkit-text-stroke:.012em var(--uc-c);
  transform:scaleY(1.12);transform-origin:50% 0;pointer-events:none}

/* X marquee: two ribbons crossing behind his head, under the colour name (built by colours.js inside every layer, so the scan reveals them too).
   Black ribbon with white type, white ribbon with black type; no blue at all (the visor stays the only blue in the frame). Pure CSS motion, never empties:
   the track holds the text twice and slides exactly half its width, then loops. */
.uc__x{position:absolute;left:-15%;right:-15%;top:35cqh;height:0;pointer-events:none;--uc-rh:clamp(30px,5cqh,46px)}
.uc__rib{position:absolute;left:0;right:0;top:0;height:var(--uc-rh);translate:0 -50%;overflow:hidden;display:flex;align-items:center;direction:ltr}
.uc__rib--a{rotate:-4.5deg;background:#000;color:#fff}
.uc__rib--b{rotate:4.5deg;background:#fff;color:#000;box-shadow:inset 0 0 0 1.5px #000}
.uc__track{display:flex;align-items:center;flex:none;white-space:nowrap;animation:uc-run var(--uc-dur,40s) linear infinite;will-change:transform}
.uc__rib--b .uc__track{animation-direction:reverse}
.uc__track span{padding:0 .85em;font:600 calc(var(--uc-rh) * .4)/1 "UH Panchang",sans-serif;letter-spacing:.06em;direction:ltr}
.uc__track i{flex:none;width:calc(var(--uc-rh) * .16);height:calc(var(--uc-rh) * .16);border-radius:50%;background:currentColor}
@keyframes uc-run{to{transform:translateX(-50%)}}
.uc--off .uc__track{animation-play-state:paused}

/* same size and place as the hero model, with the same short fade on the image itself */
.uc__model{--uc-f0:69%;--uc-f1:80.5%;position:absolute;left:50%;top:-1.2cqh;height:125cqh;aspect-ratio:2/3;translate:-49% 0}
.uc__model img{--uc-fd:calc(var(--uc-f1) - var(--uc-f0));display:block;width:100%;height:100%;object-fit:contain;
  -webkit-mask-image:linear-gradient(180deg,#000 var(--uc-f0),rgba(0,0,0,.9) calc(var(--uc-f0) + var(--uc-fd) * .2),rgba(0,0,0,.62) calc(var(--uc-f0) + var(--uc-fd) * .45),rgba(0,0,0,.28) calc(var(--uc-f0) + var(--uc-fd) * .7),rgba(0,0,0,.07) calc(var(--uc-f0) + var(--uc-fd) * .9),transparent var(--uc-f1));
  mask-image:linear-gradient(180deg,#000 var(--uc-f0),rgba(0,0,0,.9) calc(var(--uc-f0) + var(--uc-fd) * .2),rgba(0,0,0,.62) calc(var(--uc-f0) + var(--uc-fd) * .45),rgba(0,0,0,.28) calc(var(--uc-f0) + var(--uc-fd) * .7),rgba(0,0,0,.07) calc(var(--uc-f0) + var(--uc-fd) * .9),transparent var(--uc-f1))}

/* the scan line: thin electric-blue core with a soft glow, full height; moved by colours.js (transform only) */
.uc__scan{position:absolute;top:0;bottom:0;left:0;width:2px;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(0,51,255,0),var(--uc-blue) 12%,#4D7BFF 50%,var(--uc-blue) 88%,rgba(0,51,255,0));
  box-shadow:0 0 10px 1px rgba(0,51,255,.55),0 0 34px 6px rgba(0,51,255,.22)}
.uc__scan::after{content:"";position:absolute;top:0;bottom:0;left:2px;width:9cqw;background:linear-gradient(90deg,rgba(0,51,255,.1),rgba(0,51,255,0))}

/* swipe hint: two arrows at the sides that nudge outward until the first swipe or tap (class uc--used stops them) */
.uc__arr{position:absolute;top:56cqh;z-index:4;width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.92);border:1px solid rgba(0,3,61,.12);box-shadow:0 6px 18px rgba(0,3,61,.1);-webkit-tap-highlight-color:transparent}
.uc__arr svg{width:18px;height:18px;fill:none;stroke:var(--uc-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.uc__arr--prev{right:calc(50% - 25cqw - 20px)}.uc__arr--next{left:calc(50% - 25cqw - 20px)}
.uc__arr--prev svg{animation:uc-nudge-r 1.6s ease-in-out infinite}.uc__arr--next svg{animation:uc-nudge-l 1.6s ease-in-out infinite}
@keyframes uc-nudge-r{50%{transform:translateX(4px)}}@keyframes uc-nudge-l{50%{transform:translateX(-4px)}}
.uc--used .uc__arr svg{animation:none}
.uc__arr:focus-visible{outline:2px solid var(--uc-blue);outline-offset:2px}

/* small UI */
.uc__label{position:absolute;z-index:4;font:500 clamp(9px,.75cqw,11px)/1 "UH Orbitron",sans-serif;letter-spacing:.32em;text-transform:uppercase;direction:ltr;color:rgba(0,3,61,.7)}
.uc__label b{font-weight:600;color:var(--uc-blue)}
.uc__label--tr{right:var(--uc-gut);bottom:2.6cqh}
/* scroll hint, bottom left: clear of the buy dock, which sits centred at the bottom (330px wide) */
.uc__hint{position:absolute;left:var(--uc-gut);bottom:2.6cqh;z-index:4;max-width:calc(50% - 180px);font:500 clamp(12px,1.7cqh,14px)/1.5 Alexandria,sans-serif;color:rgba(0,3,61,.75)}
.uc__hint span{display:inline-block;margin-right:.3em;animation:uc-down 1.8s ease-in-out infinite}
@keyframes uc-down{50%{transform:translateY(3px)}}
.uc__side{position:absolute;right:var(--uc-gut);top:79cqh;translate:0 -50%;width:clamp(190px,17cqw,260px);z-index:4;text-align:right}
.uc__side-k{font:500 10px/1 "UH Orbitron",sans-serif;letter-spacing:.3em;color:rgba(0,3,61,.5);direction:ltr;text-align:right;margin-bottom:14px}
.uc__side-t{font:500 clamp(14px,1.25cqw,18px)/1.6 Alexandria,sans-serif;color:var(--uc-ink)}

/* picker: one compact white pill (readable over every hoodie colour) */
.uc__pick{position:absolute;left:var(--uc-gut);bottom:7cqh;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.uc__name{font:600 clamp(20px,3.4cqh,30px)/1 Alexandria,sans-serif;color:var(--uc-ink)}
.uc__dots{display:flex;gap:6px;padding:7px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid rgba(0,3,61,.1);box-shadow:0 6px 20px rgba(0,3,61,.08);direction:rtl}
.uc__dots button{position:relative;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.uc__dots button::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--uc-d);box-shadow:inset 0 0 0 1px rgba(0,3,61,.16);transition:inset .3s cubic-bezier(.2,.7,.2,1)}
.uc__dots button::after{content:"";position:absolute;inset:1px;border-radius:50%;border:1.5px solid #000;opacity:0;transition:opacity .3s}
.uc__dots button[aria-pressed="true"]::before{inset:5px}
.uc__dots button[aria-pressed="true"]::after{opacity:1}
.uc__dots button:focus-visible{outline:2px solid var(--uc-blue);outline-offset:2px}

/* the store forces its own font on span/p/button/h2: lock ours */
/* every colour name has the same height; a long name (BURGUNDY) only narrows its letters to fit (--uc-fit, set by colours.js) */
/* desktop: letters widen into the gaps (up to 2.4x) so the name reads as one word, not scattered letters */
.uc__word span{--uc-sx:2.4;display:inline-block;transform:scaleX(min(var(--uc-sx,1),var(--uc-fit,9)))}
.uc__word span:first-child{transform-origin:0 50%}.uc__word span:last-child{transform-origin:100% 50%}
.uc .uc__word span{font-family:"UC Conde",sans-serif!important}
.uc .uc__track span{font-family:"UH Panchang",sans-serif!important}
.uc .uc__label,.uc .uc__label b,.uc .uc__side-k{font-family:"UH Orbitron",sans-serif!important}
.uc .uc__side-t,.uc .uc__name,.uc .uc__hint,.uc .uc__hint span{font-family:Alexandria,sans-serif!important}

/* portrait: the model rises from behind the word, the picker sits centred at the bottom above the buy dock */
@container (max-aspect-ratio:4/5){
    /* the name fills the space above his head and ends where the hood starts, on every phone height */
  .uc__word{top:1.5cqh;font-size:min(43cqw,calc((90cqh - min(74cqh,130cqw) * .92) / 1.2));-webkit-text-stroke:.022em var(--uc-c);transform:scaleY(1.5);transform-origin:50% 0}
  .uc__word span{--uc-sx:1.3}
  /* smaller than the hero so the whole figure reads as a swipeable card: swipe left/right changes the colour */
  .uc__model{--uc-dock:62px;--uc-f1:min(74cqh,130cqw);--uc-f0:calc(min(74cqh,130cqw) - var(--uc-dock) - 40px);height:min(74cqh,130cqw);top:calc(90cqh - min(74cqh,130cqw));translate:-50% 0}
  /* edge labels would sit on the hoodie, and white text fails on pink and grey: hidden on portrait */
  .uc__label{display:none}
  .uc__side{display:none}
  .uc__x{top:calc(90cqh - min(74cqh,130cqw) * .75);left:-45%;right:-45%;--uc-rh:clamp(26px,4.4cqh,36px)}
  .uc__rib--a{rotate:-17deg}.uc__rib--b{rotate:17deg}
  .uc__arr{top:calc(90cqh - min(74cqh,130cqw) * .34);width:38px;height:38px}
  .uc__arr--prev{right:3cqw}.uc__arr--next{left:3cqw}
  .uc__pick{left:50%;translate:-50% 0;bottom:calc(62px + 34px);align-items:center;gap:10px}
  /* phone: the dock fills the bottom width, so the hint sits just above it, on the left, with the picker above the hint */
  .uc__hint{bottom:66px;max-width:none;right:var(--uc-gut);font-size:12px;text-align:left}
  .uc__name{padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.92);font-size:15px}
}
@media (min-width:1024px){@container (max-aspect-ratio:4/5){.uc__model{--uc-dock:80px}.uc__pick{bottom:calc(80px + 34px)}.uc__hint{bottom:84px}}}
@media (prefers-reduced-motion:reduce){.uc__arr svg,.uc__track,.uc__hint span{animation:none}}