/* AMIN APAC - hero-style.css
   The hero style switch on index.html, prefix hs-. Pairs with js/hero-style.js.
   Three heroes share the top of <main>; one shows at a time:
     1  Binary: the street-level walk (section.hb132#hero, css/js hero-street)
     2  Miniature, the model valley (section.hb46#hero-mini, css/js hero-mini, from v4.6; js loaded on first pick)
     3  Aerial, the lit cities from the air (section.hb83-run#hero-aerial, css/js hero-aerial, from v8.3; js loaded on first pick)
   The switch is one element; the script moves it into the hero that shows.
   A new style is a section with data-hero-style="N" hidden (memory: index-hero-style-switch). */
/* ---- the headline, one spec for all three heroes (2026-10-29): the same H1 in the same
   spot, so switching style changes the world behind it and nothing else. Each hero's
   sheet reads these; only its text-shadow (tuned to its own ground) stays its own.
   The measure is in em, so the breaks hold at every size:
   "Independent agencies, / moving as one / across Asia-Pacific." ---- */
:root{
  --hs-h-size:clamp(40px,min(5vw,8.4vh),84px);    /* desktop; 72px at 1440x900, 84px from 1920 */
  --hs-h-size-m:clamp(34px,9.6vw,44px);            /* phones held upright */
  --hs-h-size-t:clamp(44px,7.4vw,60px);            /* tablets held upright (600-900) */
  --hs-h-size-l:clamp(24px,8.4vh,38px);            /* phones on their side, short windows */
  --hs-h-lh:1.02;
  --hs-h-track:-.03em;
  --hs-h-measure:10.5em;
  --hs-h-top:clamp(160px,20vh,220px);              /* the headline's top on desktop */
  /* the stop card, one template for all three (2026-10-29): label "City, Country" (no count),
     the agency at the headline size, then its outline button(s), "Meet the agency ->" (two agencies
     in a city: "Meet <name>" each). No description line under the name (her call): buttons instead.
     The --hs-d-* values style .hb83-proof, which no stop shows since Aerial's close lost its sub line too (2026-10-30).
     "Send one brief" stays the bar's (and the close's): one solid purple per screen */
  --hs-k-font:600 13px/1.3 var(--font);            /* label */
  --hs-k-track:.08em;
  --hs-k-color:#D3B9FF;
  --hs-k-gap:12px;                                 /* label to name */
  --hs-stop-measure:12em;                          /* the agency name */
  --hs-d-size:clamp(16px,1.25vw,19px);             /* what the agency does */
  --hs-d-size-m:15px;
  --hs-d-size-l:13.5px;
  --hs-d-lh:1.5;
  --hs-d-measure:27em;
  --hs-d-color:rgb(255 255 255 / .94);
  --hs-d-gap:20px;                                 /* name to line */
  --hs-go-gap:28px;                                /* name to button */
  --hs-go-h:48px;                                  /* the filled secondary button (no border, 2026-11-05) */
  --hs-go-line:transparent;
  --hs-go-fill:rgb(244 237 255 / .16)
}
.hs{
  --hs-ink:#F4EDFF;--hs-lav:#D3B9FF;--hs-line:rgb(211 185 255 / .10);--hs-surface:rgb(40 33 60 / .88);
  position:absolute;z-index:3;top:112px;right:clamp(16px,3vw,40px);
  display:flex;align-items:center;margin:0;padding:3px;   /* 2026-11-09: the "Style" label is gone, so no left room for it */
  border:1px solid transparent;border-radius:var(--r-pill);background:var(--hs-surface);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font:500 13px/1 var(--font);color:var(--hs-ink)
}
.hs[hidden]{display:none}
/* the same pill as the hero bar's: 36px (44px from 1920), 12px semibold lavender, --line border */
.hs-l{margin-right:8px;font-size:12px;letter-spacing:.02em;color:rgb(211 185 255 / .78)}   /* (2026-11-06) .6 measured 4.1-4.4:1 on the bar; .78 is ~6:1 (WCAG AA 4.5:1 for 12px) */
/* the selection is a tint that slides, not a solid fill: the only solid purple in
   the hero stays "Send one brief". js/hero-style.js sets --x and --w. */
.hs-ind{position:absolute;top:3px;bottom:3px;left:0;width:var(--w,0);border-radius:var(--r-pill);
  background:rgb(211 185 255 / .24);
  transform:translateX(var(--x,0));pointer-events:none;
  transition:transform .32s cubic-bezier(.2,.7,.2,1),width .32s cubic-bezier(.2,.7,.2,1)}
.hs.is-still .hs-ind{transition:none}   /* first placement and moves between heroes: no slide */
.hs-b{position:relative;display:inline-flex;align-items:center;height:28px;margin:0;padding:0 12px;
  border:0;border-radius:var(--r-pill);background:none;color:var(--hs-lav);font:600 12px/1 var(--font);letter-spacing:.02em;
  white-space:nowrap;cursor:pointer;transition:color .2s cubic-bezier(.2,.7,.2,1)}
.hs-b:hover{color:#fff}
.hs-b[aria-checked="true"]{color:#fff}
.hs-b:focus-visible{outline:2px solid var(--hs-lav);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .hs-ind{transition:none} }
/* in a hero's own bar (the street hero's [data-hs-slot]) the bar places it */
[data-hs-slot] .hs{position:relative;top:auto;right:auto;bottom:auto;left:auto}
section[data-hero-style][hidden]{display:none!important}   /* a hero's own display rule never shows a hidden style */
/* the bar's pills grow at 1920px (css/hero-street.css); the switch grows with them */
@media (min-width:1920px){
  .hs{font-size:14px}
  .hs-l,.hs-b{font-size:14px}
  .hs-b{height:36px;padding:0 16px}
}

/* desktop: bottom-left, on the hero bar's row and the logo's left edge (the script
   sets --hs-left); the street hero's scroll hint steps up a row to make room */
@media (min-width:901px) and (min-height:521px){
  .hs{top:auto;right:auto;bottom:clamp(16px,3vw,32px);left:var(--hs-left,clamp(24px,6vw,104px))}
  .hb132-hint{bottom:calc(clamp(16px,3vw,32px) + 52px)}
}
/* where the bar fills the row (tablet widths, the altitude pill back at 1100+), the label goes */
@media (min-width:901px) and (max-width:1000px){ .hs-l{display:none} .hs{padding-left:3px} }

/* below 900px the header is static above the hero, so the switch sits at the stage's top:
   the foot is the street hero's two rows of controls, and the street needs the rest */
@media (max-width:900px){
  .hs{top:12px;right:12px}
  .hs-b{height:38px;padding:0 11px}   /* with the pill's 3px + border, a 46px touch row */
}
@media (max-width:360px){ .hs-l{display:none} .hs{padding-left:3px} }
@media (orientation:landscape) and (max-height:520px){
  .hs{top:12px}
}

/* ---- the scroll cue, the same in all three heroes: a dark pill with the word, then a
   short line with a light running down it into a chevron that nods. Each hero's own
   sheet places it (.hb132-cue, .hb46-cue, .hb83-cue) and its script fades it out. ---- */
.hs-cue{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0;pointer-events:none;
  font:600 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.hs-cue>span{padding:8px 12px 8px 13px;border-radius:var(--r-pill);background:rgb(13 10 22 / .72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}   /* white on Miniature's grass measured 1.2:1 bare */
.hs-cue-a{display:flex;flex-direction:column;align-items:center;gap:2px}
.hs-cue-a>b{position:relative;width:2px;height:24px;border-radius:1px;overflow:hidden;background:rgb(13 10 22 / .5)}
.hs-cue-a>b::before{content:"";position:absolute;left:0;top:0;width:100%;height:10px;border-radius:1px;background:#fff;
  animation:hs-cue-run 2s cubic-bezier(.45,0,.2,1) infinite}
.hs-cue-a::after{content:"";width:7px;height:7px;margin-top:-4px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
  filter:drop-shadow(0 0 2px rgb(13 10 22 / .8));animation:hs-cue-nod 2s cubic-bezier(.45,0,.2,1) infinite}
@keyframes hs-cue-run{0%{transform:translateY(-10px)}60%,100%{transform:translateY(24px)}}
@keyframes hs-cue-nod{0%,45%{transform:translateY(0) rotate(45deg)}62%{transform:translateY(3px) rotate(45deg)}80%,100%{transform:translateY(0) rotate(45deg)}}
@media (prefers-reduced-motion:reduce){ .hs-cue-a>b::before,.hs-cue-a::after{animation:none} .hs-cue-a>b::before{transform:none;height:100%;opacity:.6} }
@media (min-width:1920px){ .hs-cue{font-size:12px} .hs-cue>span{padding:10px 14px 10px 15px} }

/* ---- a hero's loading mark (.hs-load): the AMIN icon's six arms fly in from outside and lock
   into the mark ("moving as one"), a lavender glow breathes behind it, they drift apart and come
   back. Only transform and opacity move, on their own layers, so it keeps running while three.js
   holds the main thread at start-up. Each hero places it and hides it once it has drawn.
   The arms are the icon (assets/logo/amin-logo-icon.webp, inlined: a mask or url() from file://
   is blocked) clipped to 60-degree wedges; the gaps between arms fall on the wedges' edges ---- */
.hs-load{display:flex;flex-direction:column;align-items:center;gap:18px;margin:0;pointer-events:none;
  font:600 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#fff}
/* it shows only if the wait is real: 300 ms in (a quick start never flashes it). On the children,
   so the hero's own hide (opacity on .hs-load) still wins over the animation's fill */
.hs-load>*{animation:hs-load-in .35s ease .3s both}
@keyframes hs-load-in{from{opacity:0}}
/* where it sits: where each hero's world appears, right of centre (Binary's map, Miniature's valley,
   Aerial's plaza), clear of the headline; centred on phones. Each hero adds its own hide */
.hb132-load,.hb46-load{position:absolute;left:67%;top:52%;z-index:1;transform:translate(-50%,-50%);
  transition:opacity .45s ease,visibility 0s 0s}
@media (max-width:860px) and (orientation:portrait){ .hb132-load,.hb46-load{left:50%;top:56%} }
.hs-load-mark{position:relative;width:64px;height:64px;font-size:64px}   /* em = the mark's size */
.hs-load-mark>i{position:absolute;inset:0;will-change:transform,opacity;
  background:url(data:image/webp;base64,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) center/100% 100% no-repeat;
  animation:hs-arm 2.6s cubic-bezier(.22,.7,.2,1) infinite both}
.hs-load-mark>i:first-child{inset:-40%;clip-path:none;background:radial-gradient(closest-side,rgb(211 185 255 / .55),rgb(144 79 255 / .18) 55%,rgb(144 79 255 / 0));
  animation:hs-glow 2.6s ease-in-out infinite both}
.hs-load-mark>i:nth-child(2){--dx:0.48em;--dy:-0.27em;animation-delay:0.00s;clip-path:polygon(50% 50%,150.0% 50.0%,100.0% -36.6%)}
.hs-load-mark>i:nth-child(3){--dx:0.00em;--dy:-0.55em;animation-delay:0.07s;clip-path:polygon(50% 50%,100.0% -36.6%,0.0% -36.6%)}
.hs-load-mark>i:nth-child(4){--dx:-0.48em;--dy:-0.27em;animation-delay:0.14s;clip-path:polygon(50% 50%,0.0% -36.6%,-50.0% 50.0%)}
.hs-load-mark>i:nth-child(5){--dx:-0.48em;--dy:0.28em;animation-delay:0.21s;clip-path:polygon(50% 50%,-50.0% 50.0%,-0.0% 136.6%)}
.hs-load-mark>i:nth-child(6){--dx:-0.00em;--dy:0.55em;animation-delay:0.28s;clip-path:polygon(50% 50%,-0.0% 136.6%,100.0% 136.6%)}
.hs-load-mark>i:nth-child(7){--dx:0.48em;--dy:0.28em;animation-delay:0.35s;clip-path:polygon(50% 50%,100.0% 136.6%,150.0% 50.0%)}
@keyframes hs-arm{
  0%{opacity:0;transform:translate(var(--dx),var(--dy))}
  32%,70%{opacity:1;transform:none}
  100%{opacity:0;transform:translate(calc(var(--dx) * .6),calc(var(--dy) * .6))}}
@keyframes hs-glow{0%,22%{opacity:0;transform:scale(.7)}48%{opacity:1;transform:scale(1)}78%,100%{opacity:0;transform:scale(1.15)}}
.hs-load-t{padding:8px 12px 8px 13px;border-radius:var(--r-pill);background:rgb(13 10 22 / .6);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
@media (prefers-reduced-motion:reduce){
  .hs-load>*{animation:none}
  .hs-load-mark>i{animation:none;opacity:1;transform:none}
  .hs-load-mark>i:first-child{opacity:.6}
}

/* the switch's slot keeps 16px before the next control: 8px read as one shape when the next is a
   pill too (Aerial's camera modes, her note 2026-10-30) */
[data-hs-slot]:not(:empty){margin-right:8px}

/* Miniature (css/hero-mini.css) puts its copy at the top on phones, where the switch
   sits: the copy steps down below it (46px pill at 12px, plus a 14px gap) */
@media (max-width:900px) and (orientation:portrait){
  .hb46-stage:has(> .hs) .hb46-copy{padding-top:72px}
}
/* Aerial (css/hero-aerial.css) does the same on phones: its copy starts 40px down */
@media (max-width:900px) and (orientation:portrait){
  .hb83:has(> .hs) .hb83-copy{padding-top:72px}
}
/* ---- changing look (2026-11-09): one cross-fade over the whole screen, no movement (js/hero-look.js
   choose(); page changes keep their own lift in css/pixel-ui.css). The old screen stays solid under the
   new one as it fades in (normal blending, not plus-lighter), so nothing can dip or flash mid-way; the
   hero's own dissolve plays live in the new */
html.vt-look::view-transition-old(root),html.vt-look::view-transition-old(site-hdr){animation:hs-vt-hold .6s linear both;mix-blend-mode:normal}
html.vt-look::view-transition-new(root),html.vt-look::view-transition-new(site-hdr){animation:hs-vt-in .6s cubic-bezier(.22,.61,.36,1) both;mix-blend-mode:normal}
html.vt-look::view-transition-group(site-hdr){animation-duration:.6s}
@keyframes hs-vt-hold{from{opacity:1}to{opacity:1}}
@keyframes hs-vt-in{from{opacity:0}to{opacity:1}}
/* the controls whose labels change font with the look (mono in Binary and Pixel, sans in 3D) swap at once:
   cross-faded, the two widths of each word showed doubled mid-way ("BINARYY") */
html.vt-look #heroLook{view-transition-name:hs-switch}
html.vt-look .hb132-bar{view-transition-name:hs-bar}
html.vt-look::view-transition-old(hs-switch),html.vt-look::view-transition-old(hs-bar){display:none}
html.vt-look::view-transition-new(hs-switch),html.vt-look::view-transition-new(hs-bar){animation:none}
html.vt-look::view-transition-group(hs-switch),html.vt-look::view-transition-group(hs-bar){animation:none}