/* ==========================================================================
   Marvans "depth" layer (overnight, Oct 26 2026) — the Pronto ideas, made classy.
   Loads in <head> right after style.css. Only adds depth + motion; colours, sizes and layout stay the page's own.
   Motion is transform/opacity only. Everything moving is switched off for prefers-reduced-motion.
   JS partner: js/depth.js (start-up, card tilt, scroll reveals). To undo: remove the depth.css + depth.js lines and the start-up script/veil in builder/layout.html.
   ========================================================================== */

/* ---- 1. big headings (Oct 26 day: deeper, 7 layers ~.07em instead of 3; js/depth.js tags every heading 34px+ with x3d-dark or x3d-light by its text colour): a short, quiet 3D edge + soft drop shadow (Apple-like, not cartoony) ----
   dark text on light backgrounds: a light-grey side + soft shadow; light text on dark: a silver side. Sizes in em, so depth grows with the letters. */
.x3d-light{text-shadow:0 .01em 0 #d1d1d6,0 .02em 0 #c1c1c6,0 .03em 0 #b1b1b6,0 .04em 0 #a1a1a6,0 .05em 0 #919196,0 .06em 0 #808085,0 .07em 0 #6e6e73,0 .08em .02em rgba(0,0,0,.5),0 .15em .26em rgba(0,0,0,.5),0 .3em .6em rgba(0,0,0,.3)}
.x3d-dark{text-shadow:0 .01em 0 #e1e1e6,0 .02em 0 #d6d6db,0 .03em 0 #cbcbd0,0 .04em 0 #c0c0c5,0 .05em 0 #b5b5ba,0 .06em 0 #aaaaaf,0 .07em 0 #9e9ea3,0 .08em .02em rgba(0,0,0,.16),0 .13em .16em rgba(0,0,0,.10),0 .24em .4em rgba(0,0,0,.05)}

/* ---- 2. start-up (Nov 1 redesign, Sir: "really good and the same colour as the top bar"), once per visit ----
   Shoji White glass veil. The deep-black Marvans logo sharpens in (blur -> sharp, slight scale) inside a small shoji glass
   pill in the middle of the screen; the pill then grows into the real floating top bar while the logo travels to its spot
   in the bar, and the veil lifts away upward to show the page. ~2 s. Transforms / opacity / clip-path (+ one small blur).
   First part is pure CSS (starts at first paint); js/depth.js intro() measures the real bar and does the morph.
   CSS safety net: everything hides itself at 2.7 s even if no script runs. Never takes clicks (pointer-events:none). */
.mv-veil,.mv-veil-logo,.mv-veil-pill{display:none}
html.mv-intro .mv-veil{display:block;position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,#FBFAF6 0%,#F5F4EE 55%,#EFEEE7 100%);
  animation:mv-veil-out .5s cubic-bezier(.4,0,.2,1) 2.2s both}
html.mv-intro .mv-veil-pill{display:block;position:fixed;z-index:9998;pointer-events:none;top:10px;left:50%;
  width:min(1120px,calc(100vw - 32px));height:56px;margin-left:calc(min(1120px,calc(100vw - 32px)) / -2);border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(245,244,238,.72) 55%,rgba(245,244,238,.84) 100%);
  outline:1px solid rgba(11,11,11,.20);outline-offset:-1px;
  box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 rgba(11,11,11,.10),inset 2px 0 0 rgba(255,255,255,.6),inset -2px 0 0 rgba(11,11,11,.06),
    inset 0 12px 18px -12px rgba(255,255,255,.95),inset 0 -10px 16px -12px rgba(11,11,11,.14),
    0 1px 0 rgba(11,11,11,.08),0 3px 6px rgba(11,11,11,.12),0 10px 20px -6px rgba(11,11,11,.18),0 26px 48px -18px rgba(11,11,11,.38);
  --mv-cy:calc(50vh - 38px);--mv-pw:min(120px,34vw);
  transform:translateY(var(--mv-cy)) scale(1.5);transform-origin:50% 50%;will-change:transform,clip-path,opacity;
  clip-path:inset(0 calc(50% - var(--mv-pw)) 0 calc(50% - var(--mv-pw)) round 999px);
  animation:mv-pill-in .75s cubic-bezier(.16,1,.3,1) .1s both,mv-fade-out .3s ease 2.3s forwards}
@media (max-width:833px){html.mv-intro .mv-veil-pill{height:52px;--mv-cy:calc(50vh - 36px);transform:translateY(var(--mv-cy)) scale(1.35)}}
html.mv-intro .mv-veil-logo{display:block;position:fixed;left:50%;top:50%;z-index:9999;pointer-events:none;
  width:190px;height:auto;margin:-26.95px 0 0 -95px;                         /* logo is 797 x 226 */
  will-change:transform,opacity,filter;
  animation:mv-logo-in 1s cubic-bezier(.16,1,.3,1) .25s both,mv-fade-out .3s ease 2.3s forwards}
@media (max-width:833px){html.mv-intro .mv-veil-logo{width:150px;margin:-21.3px 0 0 -75px}}
@keyframes mv-pill-in{
  0%{opacity:0;clip-path:inset(0 50% 0 50% round 999px)}
  100%{opacity:1;clip-path:inset(0 calc(50% - var(--mv-pw)) 0 calc(50% - var(--mv-pw)) round 999px)}}
@keyframes mv-logo-in{
  0%{opacity:0;filter:blur(14px);transform:scale(.88)}
  60%{opacity:1}
  100%{opacity:1;filter:blur(0);transform:none}}
html.mv-intro .gnav-in{opacity:0;animation:mv-fade-in .3s ease 2.3s forwards}
@keyframes mv-veil-out{to{opacity:0;visibility:hidden}}
@keyframes mv-fade-out{to{opacity:0;visibility:hidden}}
@keyframes mv-fade-in{to{opacity:1}}
@keyframes mv-hide{to{visibility:hidden}}

/* ---- 3. pointer tilt (desktop mouse only; js/depth.js sets --rx/--ry while the pointer is over a card) ---- */
@media (hover:hover) and (pointer:fine){
  .mv-tilt{transform:perspective(var(--tp,1000px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale3d(var(--ts,1.01),var(--ts,1.01),1)!important;
    transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .3s ease!important}
  /* the phone picture inside a home repair tile rises a touch toward you */
  .hgrid-tile .hgrid-pic img{transition:scale .6s cubic-bezier(.22,1,.36,1),translate .6s cubic-bezier(.22,1,.36,1)}
  .hgrid-tile:hover .hgrid-pic img{scale:1.035;translate:0 -6px}
  /* category icons (Store + Book a Repair): the device turns toward you in 3D and lifts */
  /* (perspective lives inside the transform: a perspective on the parent would break the repair photos' multiply blend) */
  /* (Oct 26 day) category icons now live on 3D turntables, see §7 */
}

/* ---- 4. "Coming soon" Marvans star: turns slowly in 3D like a product on a turntable ---- */
:is(#pgrid,#st-latest) .stx-noimg .st-pimg{perspective:360px}
:is(#pgrid,#st-latest) .stx-noimg .st-pimg img{animation:mv-turn 7s ease-in-out infinite;animation-delay:calc(var(--mv-i,0) * -.9s);
  filter:drop-shadow(0 8px 6px rgba(0,0,0,.14));backface-visibility:visible}
@keyframes mv-turn{0%,100%{transform:rotateY(-28deg) rotateX(8deg)}50%{transform:rotateY(28deg) rotateX(8deg)}}

/* ---- 5. chips and tabs: a small press-in when tapped (uses scale, so it never fights the page's own transforms) ---- */
:is(.st-chip,.stx-tab,.bk-chip span,.bk-dev,.acx-tab,.stx-cat,.st-add,.stx-qpill):active{scale:.965}

/* ==========================================================================
   Oct 26 (day): MORE 3D. Sir wanted it clearly bolder, still Apple-like. Partner code: js/depth.js §5–§9.
   Same rules: transform/opacity (plus the individual translate/rotate/scale properties, which stack on top of the
   page's own transforms instead of fighting them), phones get less, reduced motion gets none.
   ========================================================================== */

/* ---- 6. thick 3D cards ("slabs"): js/depth.js tags cards with mv-slab (light) or mv-slab mv-slab-d (dark).
   The visible edge is a stack of 1px shadows, lighter at the top, darker at the bottom, like the side of a thick
   white (or graphite) tile. :is(#mv,…) only lifts the specificity so it beats id-based card rules; nothing has id "mv". ---- */
.mv-slab{--slab-e:0 1px 0 #ebebf0,0 2px 0 #e3e3e8,0 3px 0 #dbdbe0,0 4px 0 #d3d3d8,0 5px 0 #cbcbd0,0 6px 0 #c3c3c8,0 7px 0 #bbbbc0;
  --slab-in:0 0 0 0 transparent;
  --slab:var(--slab-in),var(--slab-e),0 12px 12px -5px rgba(0,0,0,.13),0 30px 44px -20px rgba(0,0,0,.30);
  --slab-h:var(--slab-in),var(--slab-e),0 20px 20px -8px rgba(0,0,0,.15),0 50px 70px -28px rgba(0,0,0,.38)}
.mv-slab-d{--slab-e:0 1px 0 #48484a,0 2px 0 #404042,0 3px 0 #38383a,0 4px 0 #313133,0 5px 0 #2a2a2c,0 6px 0 #242426,0 7px 0 #1e1e20;
  --slab-in:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.06)}
.mv-slab.mv-slab:is(#mv,.mv-slab){box-shadow:var(--slab);translate:0 0;
  transition:transform .5s cubic-bezier(.22,1,.36,1),translate .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1)}
@media (hover:hover) and (pointer:fine){
  .mv-slab.mv-slab:is(#mv,.mv-slab):is(:hover,:focus-within){box-shadow:var(--slab-h);translate:0 -6px}
  .mv-tilt{transition:transform .5s cubic-bezier(.22,1,.36,1),translate .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1)!important}
}
@media (max-width:734px){   /* phones: a thinner edge, lighter shadow */
  .mv-slab{--slab-e:0 1px 0 #e6e6eb,0 2px 0 #dcdce1,0 3px 0 #d2d2d7,0 4px 0 #c8c8cd;
    --slab:var(--slab-in),var(--slab-e),0 10px 18px -10px rgba(0,0,0,.26)}
  .mv-slab-d{--slab-e:0 1px 0 #444446,0 2px 0 #38383a,0 3px 0 #2e2e30,0 4px 0 #242426}
}
/* room for the edge where a card sits in a sideways scroller that clips its bottom (same height kept) */
.hwhy-scroller{padding-bottom:16px;margin-bottom:-16px}

/* ---- 7. turntables: product pictures stand on a 3D stage with a soft floor shadow (a mirror reflection was tried: it
   looked messy under these renders, so it's out), turn slowly,
   and (computers) follow the pointer. js/depth.js adds mv-tt to the picture box and sets --tx/--ty while hovered.
   The slow turn animates the separate "rotate" property, so it never fights the picture's own transform. ---- */
@keyframes mv-sway{0%,100%{rotate:y calc(var(--tt-a,12deg) * -1)}50%{rotate:y var(--tt-a,12deg)}}
.mv-tt{position:relative;perspective:var(--tt-p,800px);perspective-origin:50% 35%;isolation:isolate}
.mv-tt>img{transform-origin:50% 90%;animation:mv-sway var(--tt-t,9s) ease-in-out infinite;animation-delay:calc(var(--mv-i,0) * -1.6s);
  transform:translateY(var(--tt-lift,0px)) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) scale(var(--tt-s,1));
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.mv-tt::after{content:"";position:absolute;z-index:-1;left:50%;bottom:var(--tt-floor,0px);width:var(--tt-fw,72%);height:var(--tt-fh,16px);translate:-50% 50%;
  border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.26),rgba(0,0,0,.08) 60%,rgba(0,0,0,0));pointer-events:none}
.mv-tt.is-on{--tt-lift:-8px;--tt-s:1.06}
.acx-chap-list a:hover .acx-chap-ic.mv-tt>img{transform:translateY(var(--tt-lift,0px)) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) scale(var(--tt-s,1))}
/* per place: how far it turns, how deep the stage is, where the floor sits */
.stx-cat-img.mv-tt{--tt-a:16deg;--tt-p:420px;--tt-floor:12px;--tt-fw:80%;--tt-fh:12px}
.acx-chap-ic.mv-tt{--tt-a:16deg;--tt-p:420px;--tt-fw:80%;--tt-fh:10px}
.acx-card-pic.mv-tt{--tt-a:11deg;--tt-p:900px;--tt-fh:22px;--tt-fw:64%}
.acx-media-pic.mv-tt{--tt-a:8deg;--tt-p:1400px;--tt-fh:30px;--tt-fw:46%}
.hgrid-pic.mv-tt{--tt-a:7deg;--tt-p:1200px;--tt-floor:7%;--tt-fw:44%;--tt-fh:26px}
.hgrid-pic.mv-tt>img{transform:translateX(-50%) translateY(var(--tt-lift,0px)) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) scale(var(--tt-s,1))}
.hgrid-dark .hgrid-pic.mv-tt::after,.hgrid-glow .hgrid-pic.mv-tt::after{background:radial-gradient(closest-side,rgba(255,255,255,.10),rgba(255,255,255,0))}
.st-pimg.mv-tt{--tt-a:10deg;--tt-p:900px;--tt-floor:14%;--tt-fw:56%;--tt-fh:18px}
@media (max-width:734px){ .mv-tt{--tt-a:7deg} .hgrid-pic.mv-tt{--tt-a:5deg} }

/* ---- 8. buttons with a pressable 3D edge: js/depth.js tags them mv-press and sets --edge (a darker shade of the
   button) and --glow. Resting: 4px edge. Hover: rises 1px. Pressed: sinks 3px onto a 1px edge. ---- */
.mv-press{--ed:4px}
.mv-press.mv-press:is(#mv,.mv-press){box-shadow:inset 0 1px 0 rgba(255,255,255,var(--hl,.2)),0 var(--ed) 0 var(--edge),0 calc(var(--ed) + 6px) 14px -6px var(--glow,rgba(0,0,0,.3));
  translate:0 calc(4px - var(--ed));
  transition:translate .18s cubic-bezier(.3,.7,.4,1),box-shadow .18s cubic-bezier(.3,.7,.4,1),background-color .25s ease,border-color .25s ease,color .25s ease,transform .2s ease}
@media (hover:hover) and (pointer:fine){ .mv-press:hover{--ed:5px} }
.mv-press:active{--ed:1px}

/* ---- 9. 3D layered heroes: js/depth.js moves the layers with scroll (and the pointer on computers) using the
   separate translate/rotate properties. Perspective for the tilting stages: ---- */
.mv-hero3d{perspective:1500px;perspective-origin:50% 30%}

@media (prefers-reduced-motion:reduce){
  html.mv-intro :is(.mv-veil,.mv-veil-logo,.mv-veil-pill){display:none}
  html.mv-intro .gnav-in{opacity:1;animation:none}
  .mv-tilt{transform:none!important}
  :is(#pgrid,#st-latest) .stx-noimg .st-pimg img{animation:none;transform:none}
  .stx-cat:hover .stx-cat-img img,.hgrid-tile:hover .hgrid-pic img{transform:none;scale:none;translate:none}
  :is(.st-chip,.stx-tab,.bk-chip span,.bk-dev,.acx-tab,.stx-cat,.st-add,.stx-qpill):active{scale:none}
  .mv-tt>img{animation:none;rotate:none;transform:none}
  .hgrid-pic.mv-tt>img{transform:translateX(-50%)}
  .mv-slab.mv-slab:is(#mv,.mv-slab):is(:hover,:focus-within){translate:none}
  .mv-press.mv-press:is(#mv,.mv-press){translate:none;transition:none}
}

/* ==========================================================================
   Oct 26 (Sir: "just make the text pop, keep the photos"): crisp 3D TEXT in the brand colour. Text only — no photos,
   cards or layout change. Partner code: js/depth.js §0 (tags the text) and §0b (words rise in).
   - Black words on light pages (.x3d-dark): a solid stepped Marvans-burgundy side, slightly diagonal, one soft shadow.
   - White words on dark (.x3d-light): a thin bright top rim + burgundy side + soft shadow + faint burgundy glow.
   - Depth is measured in --u (one step). Big text: --u = .012em but never more than .72px, so 80px titles don't
     turn into fat blobs (max side ≈ 5px). Small headings 24–33px (.x3d-s) get 4 thinner steps (≈1.5–2px).
   - Grey words inside a heading (.x3d-soft, e.g. "Order here.") keep their grey and get a quieter, half-depth
     rose-grey side; gradient-filled words (.x3d-grad, "No delay.") get the same side via drop-shadow.
   - Metallic stats (.x3d-metal, About "2007", Store "Original"): thin burgundy side via drop-shadow (they are
     gradient-filled, a text-shadow would paint over them). Eyebrows: a 1px letterpress step.
   Body copy, prices ("Ask for price") and buttons stay plain on purpose.
   ========================================================================== */
.x3d-dark,.x3d-light{--u:min(.012em,.72px)}
.x3d-s{--u:.016em}
.x3d-dark{color:#1d1d1f;text-shadow:
  0 var(--u) 0 #3a3a3c,calc(var(--u)*.5) calc(var(--u)*2) 0 #333335,var(--u) calc(var(--u)*3) 0 #2c2c2e,
  calc(var(--u)*1.5) calc(var(--u)*4) 0 #252527,calc(var(--u)*2) calc(var(--u)*5) 0 #1f1f21,
  calc(var(--u)*2.5) calc(var(--u)*6) 0 #18181a,calc(var(--u)*3) calc(var(--u)*7) 0 #0a0a0a,
  calc(var(--u)*4) calc(var(--u)*12) calc(var(--u)*10) rgba(0,0,0,.24)}
.x3d-dark.x3d-s{text-shadow:
  0 var(--u) 0 #3a3a3c,calc(var(--u)*.5) calc(var(--u)*2) 0 #2c2c2e,var(--u) calc(var(--u)*3) 0 #1f1f21,
  calc(var(--u)*1.5) calc(var(--u)*4) 0 #0a0a0a,calc(var(--u)*2) calc(var(--u)*7) calc(var(--u)*6) rgba(0,0,0,.2)}
.x3d-light{color:#fff;text-shadow:
  0 calc(var(--u)*-.5) 0 rgba(255,255,255,.55),
  0 var(--u) 0 #8e8e93,calc(var(--u)*.5) calc(var(--u)*2) 0 #7c7c80,var(--u) calc(var(--u)*3) 0 #6a6a6e,
  calc(var(--u)*1.5) calc(var(--u)*4) 0 #58585c,calc(var(--u)*2) calc(var(--u)*5) 0 #48484a,
  calc(var(--u)*2.5) calc(var(--u)*6) 0 #3a3a3c,calc(var(--u)*3) calc(var(--u)*7) 0 #2c2c2e,
  calc(var(--u)*4) calc(var(--u)*13) calc(var(--u)*13) rgba(0,0,0,.6),0 0 min(.45em,22px) rgba(255,255,255,.22)}
.x3d-light.x3d-s{text-shadow:
  0 calc(var(--u)*-.5) 0 rgba(255,255,255,.45),
  0 var(--u) 0 #7c7c80,calc(var(--u)*.5) calc(var(--u)*2) 0 #58585c,var(--u) calc(var(--u)*3) 0 #48484a,
  calc(var(--u)*1.5) calc(var(--u)*4) 0 #2c2c2e,calc(var(--u)*2) calc(var(--u)*8) calc(var(--u)*8) rgba(0,0,0,.55)}
/* grey words inside a heading: same grey face, half the depth, a soft rose-grey side (dark rose on dark pages) */
.x3d-dark .x3d-soft{text-shadow:
  0 var(--u) 0 #d8d8dc,calc(var(--u)*.5) calc(var(--u)*2) 0 #cbcbd0,var(--u) calc(var(--u)*3) 0 #bebec3,
  calc(var(--u)*1.5) calc(var(--u)*4) 0 #b1b1b6,calc(var(--u)*2) calc(var(--u)*8) calc(var(--u)*7) rgba(0,0,0,.12)}
.x3d-light .x3d-soft{text-shadow:
  0 var(--u) 0 #3a3a3c,calc(var(--u)*.5) calc(var(--u)*2) 0 #2f2f31,var(--u) calc(var(--u)*3) 0 #252527,
  calc(var(--u)*1.5) calc(var(--u)*4) 0 #1a1a1c,calc(var(--u)*2) calc(var(--u)*8) calc(var(--u)*8) rgba(0,0,0,.5)}
/* gradient-filled words ("No delay.", whose light pass ends in ink): a text-shadow would be painted OVER their face,
   so they get the same burgundy side from drop-shadows instead (each one adds a step under the last) */
.x3d-dark .x3d-grad,.x3d-light .x3d-grad{text-shadow:none;filter:
  drop-shadow(calc(var(--u)*.4) calc(var(--u)*1.75) 0 #3a3a3c) drop-shadow(calc(var(--u)*.4) calc(var(--u)*1.75) 0 #2c2c2e)
  drop-shadow(calc(var(--u)*.4) calc(var(--u)*1.75) 0 #1f1f21) drop-shadow(calc(var(--u)*.4) calc(var(--u)*1.75) 0 #0a0a0a)
  drop-shadow(calc(var(--u)*2) calc(var(--u)*6) calc(var(--u)*5) rgba(0,0,0,.22))}
.x3d-s .x3d-grad{filter:drop-shadow(calc(var(--u)*.5) var(--u) 0 #3a3a3c) drop-shadow(calc(var(--u)*.5) var(--u) 0 #2c2c2e)
  drop-shadow(calc(var(--u)*.5) var(--u) 0 #1f1f21) drop-shadow(calc(var(--u)*.5) var(--u) 0 #0a0a0a)
  drop-shadow(calc(var(--u)*2) calc(var(--u)*5) calc(var(--u)*5) rgba(0,0,0,.2))}
/* metallic gradient stats on dark bands: a thin crisp burgundy side (each drop-shadow adds one step under the last) */
.x3d-metal{filter:drop-shadow(0 min(.02em,1.1px) 0 #8e8e93) drop-shadow(0 min(.02em,1.1px) 0 #636366)
  drop-shadow(min(.01em,.55px) min(.02em,1.1px) 0 #48484a) drop-shadow(0 min(.02em,1.1px) 0 #2c2c2e)
  drop-shadow(0 .08em .1em rgba(0,0,0,.55))}
/* phones: the store/repairs/about title stacks right above its tagline, so give the burgundy side room to breathe */
@media (max-width:734px){ .stx-h1:is(.x3d-dark,.x3d-light){padding-bottom:.1em} }
/* eyebrows ("The Marvans promise", "Visit the shop"): a 1px letterpress step, nothing more */
:is(.hpm-eyebrow,.hvisit-eyebrow,.cox-eyebrow){text-shadow:0 1px 0 rgba(128,0,32,.16),0 2px 3px rgba(128,0,32,.10)}

/* words of a heading rise in with a slight 3D tilt (js/depth.js §0b). Waiting words are hidden only while below
   the screen; they start as soon as the heading edges in and are done in ≤ .5 s. */
.mv-w{display:inline-block;transform-origin:50% 100%}
.mv-wait .mv-w{opacity:0}

/* faster page reveals: the pages' own rise-ins were .7–1 s with .15 s steps, which left sections blank while
   scrolling. js/depth.js also starts them as soon as a section edges into view and shortens their step delays. */
.js [data-in],.hpm-js .hpm-r,.hwhy-js .hwhy-r,.hwhy-js .hwhy-card,.hhow-js .hhow-r,.hvisit.hvisit-armed .hvisit-r,
.hgrid.hgrid-js [data-hgrid-in],.hexplore.hexplore-js [data-hexplore-in]{transition-duration:.45s,.5s!important}
.hvisit.hvisit-armed .hvisit-r{transition-delay:calc(var(--hvisit-i,0) * .06s)!important}

.hexplore.hexplore-js [data-hexplore-in]{transition-delay:calc(var(--hexplore-d,0s) * .4)!important}
@media (prefers-reduced-motion:reduce){ .mv-wait .mv-w{opacity:1} }

/* (Sir, Oct 26 night: "too 3D now — add white") a lighter, shallower side: soft white-grey steps instead of black */
.x3d-dark{text-shadow:0 var(--u) 0 #d8d8dd,calc(var(--u)*.5) calc(var(--u)*2) 0 #c7c7cc,var(--u) calc(var(--u)*3) 0 #b6b6bb,
  calc(var(--u)*1.5) calc(var(--u)*4) 0 #a5a5aa,calc(var(--u)*2) calc(var(--u)*9) calc(var(--u)*8) rgba(0,0,0,.14)}
.x3d-dark.x3d-s{text-shadow:0 var(--u) 0 #d8d8dd,calc(var(--u)*.5) calc(var(--u)*2) 0 #c2c2c7,var(--u) calc(var(--u)*3) 0 #ababb0,
  calc(var(--u)*1.5) calc(var(--u)*6) calc(var(--u)*5) rgba(0,0,0,.12)}
.x3d-light{text-shadow:0 var(--u) 0 #c7c7cc,calc(var(--u)*.5) calc(var(--u)*2) 0 #9a9a9f,var(--u) calc(var(--u)*3) 0 #6e6e73,
  calc(var(--u)*1.5) calc(var(--u)*4) 0 #48484a,calc(var(--u)*2) calc(var(--u)*10) calc(var(--u)*10) rgba(0,0,0,.5)}
.x3d-light.x3d-s{text-shadow:0 var(--u) 0 #b5b5ba,calc(var(--u)*.5) calc(var(--u)*2) 0 #7c7c80,var(--u) calc(var(--u)*3) 0 #48484a,
  calc(var(--u)*1.5) calc(var(--u)*7) calc(var(--u)*7) rgba(0,0,0,.45)}

/* (Sir, Oct 26 night: "take the white out, just light 3D, attention to detail") one quiet, matching edge everywhere:
   3 thin steps of grey just a bit darker than the ink's surroundings, plus a soft contact shadow. "No delay."
   (gradient-filled, so drop-shadows) gets the exact same steps so it matches the words beside it. */
.x3d-dark{text-shadow:0 var(--u) 0 #6e6e73,calc(var(--u)*.4) calc(var(--u)*2) 0 #58585c,calc(var(--u)*.8) calc(var(--u)*3) 0 #48484a,
  calc(var(--u)*1.2) calc(var(--u)*7) calc(var(--u)*6) rgba(0,0,0,.13)}
.x3d-dark.x3d-s{text-shadow:0 var(--u) 0 #6e6e73,calc(var(--u)*.4) calc(var(--u)*2) 0 #48484a,
  calc(var(--u)*1) calc(var(--u)*5) calc(var(--u)*4) rgba(0,0,0,.12)}
.x3d-dark .x3d-grad,.x3d-light .x3d-grad{text-shadow:none;filter:drop-shadow(0 var(--u) 0 #6e6e73)
  drop-shadow(calc(var(--u)*.4) var(--u) 0 #58585c) drop-shadow(calc(var(--u)*.4) var(--u) 0 #48484a)
  drop-shadow(calc(var(--u)*1.2) calc(var(--u)*4) calc(var(--u)*5) rgba(0,0,0,.13))}
.x3d-s .x3d-grad{filter:drop-shadow(0 var(--u) 0 #6e6e73) drop-shadow(calc(var(--u)*.4) var(--u) 0 #48484a)
  drop-shadow(var(--u) calc(var(--u)*3) calc(var(--u)*4) rgba(0,0,0,.12))}
/* ("startup animation", Nov 1) lighter intro: the veil is its own GPU layer (it slides up with transform), and the
   pill keeps only the inner light: its outer shadows were cut off by the clip anyway but still painted every frame */
html.mv-intro .mv-veil{will-change:transform,opacity}
html.mv-intro .mv-veil-pill{box-shadow:inset 0 2px 0 #fff,inset 0 -2px 0 rgba(11,11,11,.10),inset 0 12px 18px -12px rgba(255,255,255,.95),inset 0 -10px 16px -12px rgba(11,11,11,.14) !important;contain:paint}
/* (Sir, Nov 1: "it doesn't match") the start-up now matches the site: a black screen (not cream), and the pill wears
   exactly the real top bar's glass, so when it hands over to the bar there is no change of look */
html.mv-intro .mv-veil:not(#_a){background:radial-gradient(90% 60% at 50% 45%,#1A1A1A 0%,#111 45%,#0B0B0B 100%)}
html.mv-intro .mv-veil-pill:not(#_a){
  background:linear-gradient(180deg,rgba(255,255,255,.58) 0%,rgba(247,246,241,.40) 55%,rgba(247,246,241,.50) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(170%) brightness(1.25);backdrop-filter:blur(22px) saturate(170%) brightness(1.25);
  outline:0;contain:none;
  box-shadow:inset 0 0 0 1px rgba(11,11,11,.42),inset 0 1px 0 1px rgba(11,11,11,.16),inset 0 0 18px 3px rgba(11,11,11,.12),inset 0 0 5px 0 rgba(11,11,11,.1) !important}
/* the bar's glass reads as light silver over the black site; the pill sits on plain black, so it gets that same
   light silver directly instead of a see-through tint (which looked grey on the black start-up screen) */
html.mv-intro .mv-veil-pill:not(#_a){background:linear-gradient(180deg,#E2E1DD 0%,#CFCEC9 55%,#D6D5D0 100%);-webkit-backdrop-filter:none;backdrop-filter:none}
/* measured in Chrome (Nov 1): over the black home page the real bar shows as this mid silver, so the pill wears the
   same colour and the hand-over is invisible */
html.mv-intro .mv-veil-pill:not(#_a){background:linear-gradient(180deg,#A3A29F 0%,#8D8C89 55%,#93928F 100%)}
/* (Nov 1: "make it smoother") the pill's entrance is a fade only (a clip-path entrance repainted every frame while the
   page was still loading), and the JS morph builds the pill from three GPU pieces (.mv-pp, js/depth.js) */
@keyframes mv-pill-in{0%{opacity:0}100%{opacity:1}}
html.mv-intro .mv-veil-pill .mv-pp{position:absolute;top:0;height:100%;box-sizing:border-box;display:block;
  background:linear-gradient(180deg,#A3A29F 0%,#8D8C89 55%,#93928F 100%);
  border:1px solid rgba(11,11,11,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  will-change:transform;backface-visibility:hidden}
/* the start-up logo sits where it will sit in the bar: a little above the pill's middle (js/depth.js sets the exact value) */
html.mv-intro .mv-veil-logo{margin-top:calc(-26.95px - 12px)}
@media (max-width:833px){html.mv-intro .mv-veil-logo{margin-top:calc(-21.3px - 11px)}}