/* UTOPIA suit real-light videos: "two pieces = one suit". Each colour's video shows the hoodie, then the pants.
   While it plays, the side list follows it (01 hoodie, + 02 pants, = the suit at 1100 instead of 1200 bought apart).
   Changing colour joins the two halves of the next video (top from the right, bottom from the left), like the two pieces of a suit.
   No overlay on the video itself (no gloss / grain). Fonts: USU Orbitron / USU Panchang from the suit hero.css, Arabic = the store's Alexandria. */

.usv{--usv-hdr:var(--utopia-header-height,104px);--usv-ink:#00033D;--usv-blue:#0033FF;
  position:relative;width:var(--usv-vw,100vw);margin-inline:calc(50% - var(--usv-vw,100vw) / 2);height:120svh;min-height:640px;overflow:clip;background:#fff;isolation:isolate}
@media (max-width:767px){.usv{--usv-hdr:var(--utopia-header-height,64px)}}
.usv *{box-sizing:border-box;margin:0}
/* 120svh runway: the one-screen stage stays pinned under the store header for the last 20svh */
.usv__stage{position:sticky;top:var(--usv-hdr);margin-top:var(--usv-hdr);height:calc(100svh - var(--usv-hdr));min-height:520px;overflow:hidden;container-type:size;touch-action:pan-y;
  --usv-gut:3.8vw;--usv-dock:112px;--usv-pad:4svh;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:end;column-gap:4vw;padding:var(--usv-pad) var(--usv-gut) var(--usv-dock)}
/* a very light blue air at the sides, so the section melts into the white hero above */
.usv__stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 70% at 50% 55%,rgba(0,51,255,.06),rgba(0,51,255,0) 70%)}

/* ---- the video ---- */
.usv__media{height:100%;display:flex;align-items:flex-end;justify-content:center;min-height:0}
.usv__frame{position:relative;height:100%;max-height:100%;aspect-ratio:9 / 16;max-width:100%;border-radius:18px;overflow:hidden;background:#111;
  box-shadow:0 40px 70px -30px rgba(0,3,61,.45),0 0 0 1px rgba(0,3,61,.08);user-select:none;-webkit-user-select:none}
.usv__frame video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}

/* the colour change: the next video's first frame arrives in two halves (hoodie = top from the right, pants = bottom from the left)
   that meet on a blue seam, then the video takes over under them */
.usv__join{position:absolute;inset:0;z-index:2;pointer-events:none;visibility:hidden}
.usv--join .usv__join{visibility:visible}
.usv__half{position:absolute;inset:0;background:var(--usv-next) center / cover no-repeat;will-change:transform}
.usv__half--top{clip-path:inset(0 0 50% 0)}
.usv__half--bot{clip-path:inset(50% 0 0 0)}
.usv__seam{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--usv-blue);box-shadow:0 0 14px rgba(0,51,255,.7);transform:scaleX(0);opacity:0}

/* two-part progress on top of the video: the hoodie part, then the pants part (widths from each video's split) */
.usv__bar{position:absolute;z-index:3;left:14px;right:14px;top:14px;display:flex;gap:6px;direction:ltr}
.usv__seg{position:relative;display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.35)}
.usv__seg--1{flex:var(--usv-s1,.5) 1 0}.usv__seg--2{flex:calc(1 - var(--usv-s1,.5)) 1 0}
.usv__seg b{position:absolute;inset:0;border-radius:inherit;background:#fff;transform-origin:0 50%;transition:transform .3s linear}
.usv__seg--1 b{transform:scaleX(var(--usv-f1,0))}.usv__seg--2 b{transform:scaleX(var(--usv-f2,0))}
.usv__seg span{position:absolute;left:0;top:9px;font:500 9px/1 "USU Orbitron",sans-serif;letter-spacing:.22em;color:rgba(255,255,255,.6);text-shadow:0 1px 6px rgba(0,0,0,.35);transition:color .3s}
.usv--p1 .usv__seg--1 span,.usv--p2 .usv__seg--2 span{color:#fff}
.usv--p1 .usv__seg--1 b,.usv--p2 .usv__seg--2 b{background:var(--usv-blue)}

/* the colour, running up the left edge */
.usv__vert{position:absolute;z-index:3;left:14px;bottom:18px;writing-mode:vertical-rl;rotate:180deg;
  font:600 clamp(11px,1.4cqh,15px)/1 "USU Panchang",sans-serif;letter-spacing:.16em;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.4)}
/* the trust lines sit on a solid ink plate (no shade washed over the video) */
.usv__lines{position:absolute;z-index:3;right:12px;bottom:14px;max-width:72%;padding:12px 14px;border-radius:12px;background:rgba(0,3,61,.82);display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:right}
.usv__l1{font:800 clamp(16px,2.6cqh,24px)/1.1 Alexandria,sans-serif;color:#fff}
.usv__l2{font:500 clamp(10px,1.35cqh,13px)/1.5 Alexandria,sans-serif;color:rgba(255,255,255,.9)}
.usv__l2 bdi{display:inline-block;padding:0 .45em;border-radius:3px;background:var(--usv-blue);color:#fff;font-weight:700}

/* arrows on the frame's sides; they nudge until the first pick */
.usv__arr{position:absolute;z-index:4;top:50%;margin-top:-18px;width:36px;height:36px;padding:0;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.94);border:1px solid rgba(0,3,61,.12);box-shadow:0 6px 18px rgba(0,3,61,.18);-webkit-tap-highlight-color:transparent}
.usv__arr svg{width:17px;height:17px;fill:none;stroke:var(--usv-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.usv__arr--prev{right:10px}.usv__arr--next{left:10px}
.usv__arr--prev svg{animation:usv-nudge-r 1.6s ease-in-out infinite}.usv__arr--next svg{animation:usv-nudge-l 1.6s ease-in-out infinite}
@keyframes usv-nudge-r{50%{transform:translateX(3px)}}@keyframes usv-nudge-l{50%{transform:translateX(-3px)}}
.usv--used .usv__arr svg{animation:none}
.usv__arr:focus-visible{outline:2px solid var(--usv-blue);outline-offset:2px}

/* ---- side columns ---- */
.usv__k{font:500 10px/1 "USU Orbitron",sans-serif;letter-spacing:.3em;color:rgba(0,3,61,.5);direction:ltr}
.usv__intro,.usv__index{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:380px;width:100%}
.usv__intro{justify-self:start}
.usv__index{justify-self:end}
.usv__t{font:700 clamp(26px,3.3cqw,48px)/1.25 Alexandria,sans-serif;color:var(--usv-ink)}
.usv__t span{color:var(--usv-blue)}
.usv__legal{padding-top:14px;border-top:1px solid rgba(0,3,61,.14);font:400 clamp(11px,.95cqw,13px)/1.85 Alexandria,sans-serif;color:rgba(0,3,61,.66)}

/* the sum: it follows the video. 01 lights while the hoodie plays, 02 while the pants play, then the total lands */
.usv__sum{list-style:none;padding:0;width:100%;display:flex;flex-direction:column;gap:6px}
.usv__pc{position:relative;display:flex;align-items:baseline;gap:12px;padding:8px 0 12px;color:rgba(0,3,61,.32);transition:color .35s}
.usv__n{font:500 10px/1 "USU Orbitron",sans-serif;letter-spacing:.2em}
.usv__pc b{font:700 clamp(18px,1.7cqw,24px)/1.2 Alexandria,sans-serif}
.usv__fill{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(0,3,61,.1)}
.usv__fill::after{content:"";position:absolute;inset:0;background:var(--usv-blue);transform-origin:100% 50%;transition:transform .3s linear}
.usv__pc--1 .usv__fill::after{transform:scaleX(var(--usv-f1,0))}.usv__pc--2 .usv__fill::after{transform:scaleX(var(--usv-f2,0))}
.usv--p1 .usv__pc--1,.usv--p2 .usv__pc--2{color:var(--usv-ink)}
.usv--p1 .usv__pc--1 .usv__n,.usv--p2 .usv__pc--2 .usv__n{color:var(--usv-blue)}
.usv--p2 .usv__pc--1{color:rgba(0,3,61,.62)}
.usv__op{font:300 22px/1 "USU Orbitron",sans-serif;color:rgba(0,3,61,.3);padding-inline-start:2px}
.usv__tot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding-top:6px;color:rgba(0,3,61,.32);transition:color .35s}
.usv__tot>b{font:700 clamp(18px,1.7cqw,24px)/1.2 Alexandria,sans-serif}
.usv__was{font:500 clamp(12px,1cqw,14px)/1 Alexandria,sans-serif}
.usv__was s{position:relative;text-decoration:none;font-weight:700}
.usv__was s::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:2px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .4s .15s cubic-bezier(.2,.7,.2,1)}
.usv__now{flex-basis:100%;font:800 clamp(36px,4.4cqw,64px)/1 Alexandria,sans-serif;letter-spacing:-.01em;transform-origin:100% 100%;transform:scale(.86);opacity:.5;transition:transform .5s cubic-bezier(.3,1.5,.5,1),opacity .35s,color .35s}
.usv--sum .usv__tot{color:var(--usv-ink)}
.usv--sum .usv__was s::after{transform:scaleX(1)}
.usv--sum .usv__now{transform:none;opacity:1;color:var(--usv-blue)}

/* colour picker */
.usv__dots{display:flex;flex-direction:column;width:100%;border-bottom:1px solid rgba(0,3,61,.14)}
.usv__dots button{display:flex;align-items:center;gap:12px;width:100%;padding:11px 2px;border:0;border-top:1px solid rgba(0,3,61,.14);background:none;cursor:pointer;color:rgba(0,3,61,.55);text-align:right;-webkit-tap-highlight-color:transparent;transition:color .3s}
.usv__dots i{width:14px;height:14px;border-radius:50%;background:var(--usv-d);box-shadow:inset 0 0 0 1px rgba(0,3,61,.2);flex:none}
.usv__dots b{font:600 clamp(15px,1.3cqw,19px)/1.2 Alexandria,sans-serif}
.usv__dots button[aria-pressed="true"]{color:var(--usv-ink)}
.usv__dots button[aria-pressed="true"] i{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #000}
.usv__dots button:hover{color:var(--usv-ink)}
.usv__dots button:focus-visible{outline:2px solid var(--usv-blue);outline-offset:2px}
.usv__some{font:500 clamp(12px,1cqw,14px)/1.6 Alexandria,sans-serif;color:rgba(0,3,61,.62)}
.usv__some bdi{font-weight:700;color:var(--usv-ink)}
.usv__play{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:none;cursor:pointer;color:var(--usv-ink);-webkit-tap-highlight-color:transparent}
.usv__play svg{width:30px;height:30px;padding:8px;border-radius:50%;border:1px solid rgba(0,3,61,.2);fill:none;stroke:var(--usv-ink);stroke-width:2.4;stroke-linecap:round}
.usv__play .usv__i-play{display:none;fill:var(--usv-ink);stroke:none}
.usv--paused .usv__play .usv__i-play{display:block}.usv--paused .usv__play .usv__i-pause{display:none}
.usv__time{font:500 10px/1 "USU Orbitron",sans-serif;letter-spacing:.2em;direction:ltr}
.usv__play:focus-visible{outline:2px solid var(--usv-blue);outline-offset:2px}

/* the store forces its own font on span/p/button/h2/b: lock ours */
.usv .usv__vert{font-family:"USU Panchang",sans-serif!important}
.usv .usv__k,.usv .usv__n,.usv .usv__op,.usv .usv__seg span,.usv .usv__time{font-family:"USU Orbitron",sans-serif!important}
.usv .usv__t,.usv .usv__t span,.usv .usv__l1,.usv .usv__l2,.usv .usv__l2 bdi,.usv .usv__legal,.usv .usv__pc b,.usv .usv__tot>b,.usv .usv__was,.usv .usv__was s,.usv .usv__now,.usv .usv__now bdi,
.usv .usv__dots b,.usv .usv__some,.usv .usv__some bdi{font-family:Alexandria,sans-serif!important}
.usv .usv__t{line-height:1.3!important}

/* portrait: one screen = the video as big as it fits, then the sum in one line, the colours in one row, the disclaimer.
   (a container query styles only what is inside the stage, so the sizes go on its children) */
@container (max-aspect-ratio:4/5){
  .usv__stage>*{--usv-g:2cqh}
  .usv__media{order:1;flex:1 1 auto;width:100%;align-items:center}
  .usv__lines{max-width:64%;right:10px;bottom:10px;padding:9px 11px;gap:4px;border-radius:10px}
  .usv__l1{font-size:clamp(14px,2.3cqh,20px)}.usv__l2{font-size:clamp(9.5px,1.25cqh,11.5px)}
  .usv__arr{width:32px;height:32px;margin-top:-16px}
  .usv__intro{display:contents}
  .usv__intro>.usv__k,.usv__t{display:none}
  .usv__sum{order:2;flex-direction:row;align-items:center;justify-content:center;gap:8px;margin-top:var(--usv-g)}
  .usv__pc{padding:4px 0 8px;gap:6px}
  .usv__pc b,.usv__tot>b{font-size:14px}
  .usv__n{display:none}
  .usv__op{font-size:15px;padding:0}
  .usv__tot{flex-wrap:nowrap;align-items:center;gap:8px;padding:0}
  .usv__tot>b{display:none}
  .usv__was{order:2;font-size:12px}
  .usv__was{font-size:0}.usv__was s{font-size:12px}
  .usv__now{flex-basis:auto;font-size:24px;transform-origin:50% 50%}
  .usv__index{order:3;max-width:none;gap:6px;margin-top:var(--usv-g);align-items:center}
  .usv__index>.usv__k,.usv__play{display:none}
  .usv__dots{flex-direction:row;justify-content:center;gap:4px;border:0}
  .usv__dots button{flex:1 1 0;flex-direction:column;gap:5px;padding:7px 0 4px;border:0;border-top:2px solid rgba(0,3,61,.1)}
  .usv__dots button[aria-pressed="true"]{border-top-color:var(--usv-ink)}
  .usv__dots b{font-size:12px}
  .usv__some{font-size:11.5px}
  .usv__legal{order:4;margin-top:6px;padding:0;border:0;text-align:center;font-size:10.5px;line-height:1.55}
}
/* portrait stage: one column of blocks (media query, since the stage is the container itself) */
@media (max-aspect-ratio:4/5){.usv__stage{--usv-dock:62px;display:flex;flex-direction:column;align-items:stretch;padding:2.5svh 4.5vw var(--usv-dock)}}
@media (max-aspect-ratio:4/5) and (min-width:1024px){.usv__stage{--usv-dock:80px}}
@media (prefers-reduced-motion:reduce){.usv__arr svg{animation:none}.usv__seg b,.usv__fill::after,.usv__now{transition:none}}