/* UTOPIA pharaonic colours: night (black hoodie, basalt wall, torch) and day (white hoodie, limestone wall, sun),
   split by a gold carved line the visitor drags. Full-bleed. Fonts "UH Orbitron" come from the hoodie hero CSS in the head. */
.upc{--upc-hdr:var(--utopia-header-height,104px);--upc-gold:#D9A441;--upc-ivory:#EDE3CF;--upc-ink:#2A1E12;--upc-gut:3.8cqw;--upc-x:50%;
  position:relative;width:var(--upc-vw,100vw);margin-inline:calc(50% - var(--upc-vw,100vw) / 2);height:120svh;min-height:650px;background:#0b0907;isolation:isolate;overflow:clip}
@media (max-width:767px){.upc{--upc-hdr:var(--utopia-header-height,64px)}}
.upc *{box-sizing:border-box;margin:0}
.upc__stage{position:sticky;top:0;height:100svh;min-height:540px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.upc__bg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
/* content starts under the store's fixed header; the walls and the line run behind it */
/* coming from the hero: the walls start in the same darkness and light up (dawn) as the section rises */
.upc__dawn{position:absolute;inset:0;z-index:0;pointer-events:none}
.upc__dawn::before,.upc__dawn::after{content:"";position:absolute;left:0;right:0;top:0}
.upc__dawn::before{bottom:0;background:#0b0907;opacity:calc(var(--upc-dawn,0) * .85)}
/* the top edge melts into the hero's dark bottom, so there is no line between the two sections */
.upc__dawn::after{height:55%;background:linear-gradient(180deg,#0b0907,rgba(11,9,7,.85) 25%,rgba(11,9,7,.4) 60%,rgba(11,9,7,0));opacity:min(1,calc(var(--upc-dawn,0) * 2.6))}
/* the bottom sinks into the dark the video section rises out of (under the names and the line) */
.upc__stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,9,7,0),rgba(11,9,7,.7) 55%,#0b0907)}
.upc__in{position:absolute;left:0;right:0;bottom:0;top:var(--upc-hdr);z-index:1;container-type:size}
.upc:not(.upc--on) .upc__in{opacity:0;animation:upc-fb .2s 8s forwards}
@keyframes upc-fb{to{opacity:1}}
/* places for the two carved ankhs (drawn by WebGL) */
.upc__ankh{position:absolute;top:8cqh;height:78cqh;aspect-ratio:760/1064;translate:-50% 0;pointer-events:none}
.upc__ankh--a{left:17%}.upc__ankh--b{left:83%}

/* each side shows only its part of the screen */
.upc__side{position:absolute;inset:0;pointer-events:none}
.upc__side--day{clip-path:inset(0 calc(100% - var(--upc-x)) 0 0)}
.upc__side--night{clip-path:inset(0 0 0 var(--upc-x))}
.upc__model{position:absolute;left:50%;top:2cqh;height:100cqh;aspect-ratio:904/1386;translate:-50% 0}
.upc__model img{display:block;width:100%;height:100%;object-fit:contain;
  -webkit-mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.55) 89%,transparent 97%);mask-image:linear-gradient(180deg,#000 80%,rgba(0,0,0,.55) 89%,transparent 97%)}
.upc__k{position:absolute;top:4cqh;font:500 clamp(9px,.75cqw,11px)/1 "UH Orbitron",sans-serif;letter-spacing:.32em;direction:ltr}
.upc__name{position:absolute;bottom:7cqh;font:700 clamp(44px,11cqh,104px)/1.3 Alexandria,sans-serif}
.upc__side--night .upc__k,.upc__side--night .upc__name{right:var(--upc-gut);text-align:right}
.upc__side--day .upc__k,.upc__side--day .upc__name{left:var(--upc-gut);text-align:left}
.upc__side--night .upc__k{color:rgba(237,227,207,.62)}.upc__side--night .upc__name{color:var(--upc-gold);text-shadow:0 0 30px rgba(217,164,65,.2)}
.upc__side--day .upc__k{color:rgba(42,30,18,.6)}.upc__side--day .upc__name{color:var(--upc-ink)}

/* the divider: a gold line with a knob; drag anywhere on the stage */
.upc__cut{position:absolute;top:0;bottom:0;left:var(--upc-x);width:0;z-index:4;outline:none;cursor:ew-resize}
.upc__line{position:absolute;top:calc(-1 * var(--upc-hdr));bottom:0;left:-1px;width:2px;background:linear-gradient(180deg,rgba(217,164,65,0),var(--upc-gold) 12%,var(--upc-gold) 88%,rgba(217,164,65,0));box-shadow:0 0 12px rgba(217,164,65,.45);opacity:calc(1 - var(--upc-dawn,0) * .9)}
.upc__knob{position:absolute;top:50%;left:0;translate:-50% -50%;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#14100b;border:1.5px solid var(--upc-gold);box-shadow:0 0 0 6px rgba(217,164,65,.12),0 8px 24px rgba(0,0,0,.45);transition:scale .2s}
.upc__knob svg{width:24px;height:24px;fill:none;stroke:var(--upc-gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.upc--drag .upc__knob,.upc__cut:focus-visible .upc__knob{scale:1.08}
.upc__cut:focus-visible .upc__knob{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--upc-gold)}
/* the knob breathes until the first drag, so the visitor knows it moves */
.upc:not(.upc--used) .upc__knob{animation:upc-breathe 2.2s ease-in-out infinite}
@keyframes upc-breathe{50%{box-shadow:0 0 0 12px rgba(217,164,65,.06),0 8px 24px rgba(0,0,0,.45)}}
.upc__drag{position:absolute;top:calc(50% + 40px);left:0;translate:-50% 0;padding:5px 12px;border-radius:999px;background:rgba(20,16,11,.82);
  font:500 12px/1 Alexandria,sans-serif;color:var(--upc-ivory);white-space:nowrap;transition:opacity .3s}
.upc--used .upc__drag{opacity:0}
.upc__hint{position:absolute;left:50%;translate:-50% 0;top:3cqh;z-index:3;padding:7px 14px;border-radius:999px;background:rgba(20,16,11,.7);
  font:500 clamp(11px,1.6cqh,13px)/1.2 Alexandria,sans-serif;color:var(--upc-ivory);white-space:nowrap;pointer-events:none}
.upc__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* the store forces its own font on span/p: lock ours */
.upc .upc__k{font-family:"UH Orbitron",sans-serif!important}
.upc .upc__name,.upc .upc__drag,.upc .upc__hint{font-family:Alexandria,sans-serif!important}
.upc .upc__name{line-height:1.3!important}

/* portrait: the model fills more, names sit above the floating buy buttons */
@container (max-aspect-ratio:4/5){
  .upc__ankh{top:10cqh;height:62cqh}.upc__ankh--a{left:4%}.upc__ankh--b{left:96%}
  .upc__model{top:9cqh;height:86cqh}
  .upc__k{top:3cqh;font-size:9px;letter-spacing:.22em}
  .upc__name{top:calc(3cqh + 18px);bottom:auto;font-size:clamp(30px,5cqh,44px)}
  .upc__hint{top:auto;bottom:calc(62px + 14px);font-size:12px}
}
@media (min-width:1024px){@container (max-aspect-ratio:4/5){.upc__hint{bottom:calc(80px + 14px)}}}

/* lite mode (weak phones or no WebGL): painted walls instead of the lit relief */
.upc--lite .upc__bg{display:none}
.upc--lite .upc__stage{background-image:linear-gradient(90deg,rgba(0,0,0,0) var(--upc-x),rgba(11,9,7,.86) var(--upc-x)),var(--upc-lime,none);background-size:auto,512px;background-color:#14100b}
@media (prefers-reduced-motion:reduce){.upc__knob{animation:none!important}}

/* EasyOrders adds inline 10px block padding. Remove only the direct
   HTML-block wrapper of this section so the existing dark fades meet. */
div:has(> section[data-utopia-pharaoh-colours]){padding-block:0!important}