/* UTOPIA hoodie real-light videos: each colour's video is the cover of a future fashion magazine (masthead, issue line,
   cover lines, barcode). Changing colour turns the cover like a page (spine on the left, so a left swipe turns it with the hand).
   Fonts: UH Conde / UH Orbitron / UH Panchang from hero.css, Arabic is the store's Alexandria. */

.uv{--uv-hdr:var(--utopia-header-height,104px);--uv-ink:#00033D;--uv-blue:#0033FF;
  position:relative;width:var(--uv-vw,100vw);margin-inline:calc(50% - var(--uv-vw,100vw) / 2);height:120svh;min-height:640px;overflow:hidden;overflow:clip;background:#fff;isolation:isolate}
@media (max-width:767px){.uv{--uv-hdr:var(--utopia-header-height,64px)}}
.uv *{box-sizing:border-box;margin:0}
/* 120svh runway: the one-screen stage stays pinned under the store header for the last 20svh (overflow:clip keeps sticky working) */
.uv__stage{position:sticky;top:var(--uv-hdr);margin-top:var(--uv-hdr);height:calc(100svh - var(--uv-hdr));min-height:520px;overflow:hidden;container-type:size;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  /* the cover: top, height, and a 3:4 magazine width */
  --uv-gut:3.8cqw;--uv-dock:112px;--uv-top:4cqh;--uv-h:calc(96cqh - var(--uv-dock));--uv-w:calc(var(--uv-h) * 3 / 4)}
/* the page itself: a faint 12-column layout grid, like an editorial spread */
.uv__stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(0,3,61,.045) 0 1px,transparent 1px calc(100cqw / 12))}

/* the issue: covers stacked on two paper sheets; perspective for the page turn */
.uv__book{position:absolute;left:50%;top:var(--uv-top);width:var(--uv-w);height:var(--uv-h);translate:-50% 0;perspective:calc(var(--uv-w) * 4);
  /* a real object in space: leaning a little, its free (left) side towards us so the page block reads as thickness */
  transform:perspective(calc(var(--uv-w) * 6)) rotateY(9deg) rotateX(3deg)}
/* soft contact shadow on the "table" under the issue */
.uv__book::after{content:"";position:absolute;left:2%;right:-6%;bottom:-26px;height:42px;z-index:-1;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,3,61,.32),rgba(0,3,61,0))}
/* it must read as a magazine before the first turn: a block of page edges on the free sides (right and bottom, the spine is
   on the left), a bound spine on each cover, and the bottom-right corner of the cover slightly curled up, inviting a turn */
.uv__sheet{position:absolute;inset:0;border-radius:1.5px;background:#fff}
.uv__sheet:nth-child(1){z-index:0;box-shadow:2px 2px 0 #fff,3px 3px 0 rgba(0,3,61,.2),5px 5px 0 #fff,6px 6px 0 rgba(0,3,61,.18),8px 8px 0 #fff,9px 9px 0 rgba(0,3,61,.16),
  11px 11px 0 #fff,12px 12px 0 rgba(0,3,61,.16),14px 14px 0 #f6f7fa,15px 15px 0 rgba(0,3,61,.22)}
.uv__sheet:nth-child(2){translate:15px 15px;box-shadow:0 34px 60px rgba(0,3,61,.18),0 8px 18px rgba(0,3,61,.1)}
/* the binding: a soft crease along the left edge of every cover */
.uv__spine{position:absolute;top:0;bottom:0;left:0;width:7%;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.12) 18%,rgba(255,255,255,.16) 34%,rgba(255,255,255,0) 52%,rgba(0,0,0,.1) 70%,rgba(0,0,0,0))}
/* page curl on the free bottom-right corner: the lower half shows the white page under it, the upper half is the lifted flap.
   It breathes until the visitor turns once (uv--used), and grows a little on hover */
.uv__curl{position:absolute;right:0;bottom:0;z-index:2;width:calc(var(--uv-w) * .11);height:calc(var(--uv-w) * .11);pointer-events:none;
  transform-origin:100% 100%;transition:transform .35s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(-3px -3px 4px rgba(0,3,61,.35));
  background:linear-gradient(-45deg,#fff 0 50%,transparent 50%),linear-gradient(-45deg,transparent 50%,#b9bfcf 50%,#e9ecf3 66%,#fff 82%,#f2f4f8 100%)}
.uv__curl{animation:uv-curl 2.6s ease-in-out infinite}
@keyframes uv-curl{50%{transform:scale(1.28)}}
.uv--used .uv__curl{animation:none}
.uv__book:hover .uv__cover.is-on .uv__curl{transform:scale(1.45)}
.uv__cover.is-turn .uv__curl{opacity:0}

/* one cover per colour. Spine on the left: a cover turns around its left edge */
.uv__cover{position:absolute;inset:0;overflow:hidden;border-radius:1.5px;background:#111;visibility:hidden;
  transform-origin:0 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 0 0 1px rgba(0,3,61,.08)}
.uv__cover.is-on{visibility:visible;z-index:2}
.uv__cover.is-under{visibility:visible;z-index:1}
/* the turn is driven by video.js (it follows the hand): it sets the page's transform, --uv-tp (0..1 how far it has turned)
   on the moving page and --uv-sh (shadow strength) on the page under it */
.uv__cover.is-turn{visibility:visible;z-index:3;will-change:transform}
.uv__cover.is-shade{visibility:visible}
.uv__cover video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* shade for the cover lines at the bottom */
.uv__cover::before{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;background:linear-gradient(0deg,rgba(0,3,61,.62),rgba(0,3,61,0))}
/* light on the bending page: a bright band and a dark band roll across it as it turns (curved paper) */
.uv__cover::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;background-size:300% 100%;
  background-image:linear-gradient(90deg,rgba(0,3,61,0) 0%,rgba(0,3,61,.08) 30%,rgba(255,255,255,.28) 42%,rgba(0,3,61,.5) 56%,rgba(0,3,61,.12) 75%,rgba(0,3,61,0) 100%)}
.uv__cover.is-turn::after{opacity:1;background-position:calc((1 - var(--uv-tp,0)) * 100%) 0}
/* the turning page throws a shadow on the page under it, deepest by the spine at mid-turn */
.uv__cover.is-shade::after{opacity:var(--uv-sh,0);background:linear-gradient(90deg,rgba(0,3,61,.6),rgba(0,3,61,.18) 35%,rgba(0,3,61,0) 75%)}

/* masthead: issue line + the UTOPIA wordmark across the full cover width */
.uv__mast{position:absolute;left:0;right:0;top:0;padding:calc(var(--uv-w) * .045) calc(var(--uv-w) * .05) calc(var(--uv-w) * .08);direction:ltr;
  background:linear-gradient(180deg,rgba(0,3,61,.5),rgba(0,3,61,0))}
.uv__issue{display:flex;justify-content:space-between;padding-bottom:calc(var(--uv-w) * .02);border-bottom:1px solid rgba(255,255,255,.55);
  font:500 max(8px,calc(var(--uv-w) * .022))/1 "UH Orbitron",sans-serif;letter-spacing:.24em;color:#fff}
.uv__logo{display:flex;justify-content:space-between;margin-top:calc(var(--uv-w) * .03);font:700 calc(var(--uv-w) * .26)/.82 "UH Conde",sans-serif;color:#fff}
.uv__logo span{display:inline-block;transform:scaleX(1.55)}
.uv__logo span:first-child{transform-origin:0 50%}.uv__logo span:last-child{transform-origin:100% 50%}
/* the colour, running up the left edge */
.uv__vert{position:absolute;left:calc(var(--uv-w) * .085);top:calc(var(--uv-w) * .5);writing-mode:vertical-rl;rotate:180deg;
  font:600 calc(var(--uv-w) * .05)/1 "UH Panchang",sans-serif;letter-spacing:.14em;color:#fff;text-shadow:0 0 18px rgba(0,3,61,.35)}
/* cover lines, bottom right */
.uv__lines{position:absolute;right:calc(var(--uv-w) * .055);bottom:calc(var(--uv-w) * .14);max-width:60%;text-align:right;display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--uv-w) * .025)}
.uv__l1{font:800 calc(var(--uv-w) * .1)/1.08 Alexandria,sans-serif;color:#fff}
.uv__l2{font:500 max(11px,calc(var(--uv-w) * .033))/1.5 Alexandria,sans-serif;color:rgba(255,255,255,.92)}
.uv__l2 bdi{display:inline-block;padding:0 .45em;border-radius:3px;background:var(--uv-blue);color:#fff;font-weight:700}
/* barcode plate, bottom left */
.uv__code{position:absolute;left:calc(var(--uv-w) * .085);bottom:calc(var(--uv-w) * .07);width:calc(var(--uv-w) * .16);padding:calc(var(--uv-w) * .014);background:#fff;border-radius:2px;direction:ltr}
.uv__code i{display:block;height:calc(var(--uv-w) * .07);
  background:linear-gradient(90deg,#000 0 4%,transparent 4% 7%,#000 7% 9%,transparent 9% 13%,#000 13% 19%,transparent 19% 21%,#000 21% 23%,transparent 23% 28%,#000 28% 32%,transparent 32% 34%,#000 34% 35%,transparent 35% 40%,#000 40% 46%,transparent 46% 48%,#000 48% 50%,transparent 50% 54%,#000 54% 55%,transparent 55% 58%,#000 58% 64%,transparent 64% 66%,#000 66% 69%,transparent 69% 73%,#000 73% 74%,transparent 74% 77%,#000 77% 83%,transparent 83% 85%,#000 85% 87%,transparent 87% 91%,#000 91% 96%,transparent 96% 97%,#000 97% 100%)}
.uv__code span{display:block;margin-top:3px;text-align:center;font:500 max(6px,calc(var(--uv-w) * .016))/1 "UH Orbitron",sans-serif;letter-spacing:.18em;color:#000}

/* reading progress, a hairline above the issue (the buy dock sits under it) */
.uv__bar{position:absolute;left:0;right:0;top:-14px;height:2px;background:rgba(0,3,61,.1)}
.uv__bar b{display:block;height:100%;background:var(--uv-blue);transform-origin:0 50%;transform:scaleX(var(--uv-p,0));transition:transform .3s linear}

/* arrows at the cover's sides; they nudge outward until the first pick (uv--used) */
.uv__arr{position:absolute;top:calc(var(--uv-top) + var(--uv-h) / 2 - 20px);z-index:4;width:40px;height:40px;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,.1);-webkit-tap-highlight-color:transparent}
.uv__arr svg{width:18px;height:18px;fill:none;stroke:var(--uv-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.uv__arr--prev{right:calc(50% - var(--uv-w) / 2 - 76px)}.uv__arr--next{left:calc(50% - var(--uv-w) / 2 - 64px)}
.uv__arr--prev svg{animation:uv-nudge-r 1.6s ease-in-out infinite}.uv__arr--next svg{animation:uv-nudge-l 1.6s ease-in-out infinite}
@keyframes uv-nudge-r{50%{transform:translateX(4px)}}@keyframes uv-nudge-l{50%{transform:translateX(-4px)}}
.uv--used .uv__arr svg{animation:none}
.uv__arr:focus-visible{outline:2px solid var(--uv-blue);outline-offset:2px}

/* side columns, both aligned to the bottom of the cover */
.uv__k{font:500 10px/1 "UH Orbitron",sans-serif;letter-spacing:.3em;color:rgba(0,3,61,.5);direction:ltr}
.uv__intro,.uv__index{position:absolute;z-index:4;bottom:calc(100cqh - var(--uv-top) - var(--uv-h));width:min(27cqw,calc(50% - var(--uv-w) / 2 - 130px));display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.uv__intro{right:var(--uv-gut)}
.uv__index{left:var(--uv-gut)}
.uv__t{font:700 clamp(24px,3.2cqw,46px)/1.25 Alexandria,sans-serif;color:var(--uv-ink)}
.uv__t span{color:var(--uv-blue)}
.uv__legal{padding-top:14px;border-top:1px solid rgba(0,3,61,.14);font:400 clamp(12px,1cqw,14px)/1.85 Alexandria,sans-serif;color:rgba(0,3,61,.72)}

/* contents of the issue = the colour picker */
.uv__list{list-style:none;padding:0;width:100%;border-bottom:1px solid rgba(0,3,61,.14)}
.uv__list button{width:100%;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:12px;padding:12px 2px;border:0;border-top:1px solid rgba(0,3,61,.14);background:none;cursor:pointer;text-align:right;color:rgba(0,3,61,.55);-webkit-tap-highlight-color:transparent;transition:color .3s}
.uv__list button::before{content:"";grid-column:2;grid-row:1;width:10px;height:10px;border-radius:2px;background:var(--uv-d);box-shadow:inset 0 0 0 1px rgba(0,3,61,.2)}
.uv__n{grid-column:1;grid-row:1;font:500 10px/1 "UH Orbitron",sans-serif;letter-spacing:.2em}
.uv__list b{grid-column:3;font:600 clamp(15px,1.3cqw,19px)/1.2 Alexandria,sans-serif}
.uv__en{grid-column:4;font:500 9px/1 "UH Orbitron",sans-serif;letter-spacing:.24em;opacity:.7}
.uv__list button[aria-pressed="true"]{color:var(--uv-ink)}
.uv__list button[aria-pressed="true"] .uv__n{color:var(--uv-blue)}
.uv__list button:hover{color:var(--uv-ink)}
.uv__list button:focus-visible{outline:2px solid var(--uv-blue);outline-offset:2px}
.uv__some{font:500 clamp(12px,1cqw,14px)/1.6 Alexandria,sans-serif;color:rgba(0,3,61,.62)}
.uv__some bdi{font-weight:700;color:var(--uv-ink)}
.uv__play{display:inline-flex;align-items:center;gap:10px;padding:0;border:0;background:none;cursor:pointer;color:var(--uv-ink);-webkit-tap-highlight-color:transparent}
.uv__play svg{width:30px;height:30px;padding:8px;border-radius:50%;border:1px solid rgba(0,3,61,.2);fill:none;stroke:var(--uv-ink);stroke-width:2.4;stroke-linecap:round}
.uv__play .uv__i-play{display:none;fill:var(--uv-ink);stroke:none}
.uv--paused .uv__play .uv__i-play{display:block}.uv--paused .uv__play .uv__i-pause{display:none}
.uv__time{font:500 10px/1 "UH Orbitron",sans-serif;letter-spacing:.2em;direction:ltr}
.uv__play:focus-visible{outline:2px solid var(--uv-blue);outline-offset:2px}

/* the store forces its own font on span/p/button/h2: lock ours */
.uv .uv__logo span{font-family:"UH Conde",sans-serif!important}
.uv .uv__vert{font-family:"UH Panchang",sans-serif!important}
.uv .uv__k,.uv .uv__issue span,.uv .uv__code span,.uv .uv__n,.uv .uv__en,.uv .uv__time{font-family:"UH Orbitron",sans-serif!important}
.uv .uv__t,.uv .uv__t span,.uv .uv__l1,.uv .uv__l2,.uv .uv__l2 bdi,.uv .uv__legal,.uv .uv__list b,.uv .uv__some,.uv .uv__some bdi{font-family:Alexandria,sans-serif!important}

/* portrait: the cover on top, the contents as one row under it, the disclaimer above the buy dock.
   --uv-info is the height of those two blocks (measured by video.js), so the cover takes all the room that is left.
   (a container query styles only what is inside the stage, so the sizes go on its children) */
@container (max-aspect-ratio:4/5){
  /* the cover + contents sit centred in the room above the disclaimer, so a tall phone shows no empty gap */
    .uv__book{transform:perspective(calc(var(--uv-w) * 6)) rotateY(7deg) rotateX(2deg)}
  .uv__stage>*{--uv-gut:4.5cqw;--uv-dock:62px;--uv-h:min(calc(90cqw * 4 / 3),calc(95cqh - var(--uv-info,170px) - var(--uv-dock) - 18px));--uv-w:calc(var(--uv-h) * 3 / 4);
    --uv-top:calc(2.5cqh + (95cqh - var(--uv-info,170px) - var(--uv-dock) - 18px - var(--uv-h)) / 2)}
  .uv__sheet:nth-child(1){translate:-6px 6px}.uv__sheet:nth-child(2){translate:-11px 11px}
  .uv__bar{top:-10px}
  .uv__arr{width:36px;height:36px}
  .uv__arr--prev{right:2cqw}.uv__arr--next{left:2cqw}
  .uv__index{left:var(--uv-gut);right:var(--uv-gut);width:auto;bottom:auto;top:calc(var(--uv-top) + var(--uv-h) + 24px);display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px}
  .uv__index>.uv__k{display:none}
  .uv__list{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);border:0}
  .uv__list button{grid-template-columns:auto 1fr;gap:3px 6px;padding:8px 2px;border-top:2px solid rgba(0,3,61,.12)}
  .uv__list button[aria-pressed="true"]{border-top-color:var(--uv-ink)}
  .uv__list button::before{grid-column:1;grid-row:2;width:8px;height:8px}
  .uv__n{grid-column:1 / -1;grid-row:1;font-size:9px}
  .uv__list b{grid-column:2;grid-row:2;font-size:13px}
  .uv__en{display:none}
  .uv__some{font-size:12px}
  /* the disclaimer follows the contents directly (--uv-ih = contents height, from video.js), the whole group is centred */
  .uv__intro{left:var(--uv-gut);right:var(--uv-gut);width:auto;bottom:auto;top:calc(var(--uv-top) + var(--uv-h) + 24px + var(--uv-ih,90px) + 12px);gap:0}
  .uv__intro>.uv__k,.uv__t{display:none}
  .uv__legal{padding:0;border:0;text-align:center;font-size:11px;line-height:1.6}
}
@media (min-width:1024px){@container (max-aspect-ratio:4/5){.uv__stage>*{--uv-dock:80px;--uv-h:min(calc(90cqw * 4 / 3),calc(95cqh - var(--uv-info,170px) - 80px - 18px));--uv-w:calc(var(--uv-h) * 3 / 4);--uv-top:calc(2.5cqh + (95cqh - var(--uv-info,170px) - 80px - 18px - var(--uv-h)) / 2)}}}
@media (prefers-reduced-motion:reduce){.uv__arr svg,.uv__curl{animation:none}.uv__cover.is-turn{transition:none}}