/* S11 2026-10-11: the intro at / (mockup C, record 2026-10-11-change-s11-intro.md). Loaded only on the intro. */
@font-face{font-family:Montserrat;font-style:normal;font-weight:400 700;font-display:swap;src:url(../../../astra-local-fonts/montserrat/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format("woff2")}
@property --hm-hue{syntax:'<angle>';inherits:true;initial-value:0deg}
:root{--sky:#000d19;--surface:#06182b;--star:#E8F1FF;--dusk:#9FB3CC;--haze:#7F93AD;--gold:#d9a156;--gold-b:#e3b06b;--ease:cubic-bezier(.16,1,.3,1);--mx:50%;--my:50%;--rx:0deg;--ry:0deg}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body.hm-intro{background:var(--sky);color:var(--star);font-family:Montserrat,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
.hm-intro ::selection{background:var(--gold);color:var(--sky)}
.hm-intro :focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hm-in{position:relative;height:100vh;height:100svh;display:grid;place-items:center;align-content:center;gap:clamp(20px,4vh,34px);padding:16px;perspective:1100px}
.hm-in-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.hm-in-sky{position:absolute;inset:0;width:100%;height:100%}
.hm-in-sky .dust circle{fill:var(--star)}
.hm-in-sky .edge{fill:none;stroke:var(--star);stroke-opacity:.14;stroke-width:1;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:hm-draw 2.4s var(--ease) forwards;animation-delay:var(--d);transition:stroke-opacity .8s var(--ease)}
.hm-open .hm-in-sky .edge{stroke-opacity:.3}
@keyframes hm-draw{to{stroke-dashoffset:0}}
.hm-in-sky .node{opacity:0;transform-box:fill-box;transform-origin:center;animation:hm-ign 1.4s var(--ease) forwards;animation-delay:var(--d)}
@keyframes hm-ign{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.hm-in-card{touch-action:pan-y;position:relative;z-index:2;transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .6s var(--ease),opacity 1.2s var(--ease);border-radius:28px;padding:clamp(14px,2.2vw,22px);
 background:conic-gradient(from var(--hm-hue) at 50% 50%,#2fbf71,#1aa6b7,#2b4fd8,#7a2fd0,#c2238f,#e0452b,#f08a1c,#2fbf71);animation:hm-spin 14s linear infinite;
 box-shadow:0 30px 60px rgba(0,13,25,.75),0 2px 0 rgba(255,255,255,.08) inset}
.js .hm-in-card{opacity:0}.js .hm-in-card.in{opacity:1}
@keyframes hm-spin{to{--hm-hue:360deg}}
.hm-in-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:overlay;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.95),rgba(255,255,255,.35) 22%,rgba(255,255,255,0) 52%),repeating-linear-gradient(115deg,rgba(255,255,255,0) 0 12px,rgba(255,255,255,.16) 12px 15px)}
.hm-in-tray{--tx:0;--ty:0;position:relative;background:#0a0f16;border-radius:18px;padding:clamp(8px,1.2vw,12px);display:flex;gap:clamp(6px,1vw,12px);box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
.hm-in-slot{width:clamp(58px,9vw,108px);aspect-ratio:1;perspective:600px;
 transform:perspective(520px) translate3d(calc(var(--tx) * 7px),calc(var(--ty) * 6px),0) rotateY(calc(var(--tx) * (16deg + var(--i) * 2deg))) rotateX(calc(var(--ty) * -14deg))}
.hm-in-slot{--i:0}.hm-in-slot:nth-child(2){--i:1}.hm-in-slot:nth-child(3){--i:2}.hm-in-slot:nth-child(4){--i:3}.hm-in-slot:nth-child(5){--i:4}
.hm-in-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .9s var(--ease);transition-delay:calc(var(--i)*90ms)}
.hm-in-face{position:absolute;inset:0;border-radius:14px;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:linear-gradient(160deg,#3a4250,#232a35);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 14px rgba(0,0,0,.45)}
/* the shine also sweeps across each tile, from the same point as on the frame */
.hm-in-face::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.28),rgba(255,255,255,.08) 35%,rgba(255,255,255,0) 60%),linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.07) 48%,rgba(255,255,255,0) 66%)}
.hm-in-front{display:none;font-weight:700;font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--star);line-height:1}
.js .hm-in-front{display:grid}
.hm-in-back{text-decoration:none;color:var(--star);gap:6px;align-content:center;box-shadow:inset 0 0 0 1.5px var(--c),inset 0 1px 0 rgba(255,255,255,.12),0 6px 14px rgba(0,0,0,.45)}
.js .hm-in-back{transform:rotateY(180deg)}
.hm-in-back svg{width:clamp(22px,3vw,34px);height:clamp(22px,3vw,34px);fill:currentColor}
.hm-in-name{font-weight:600;font-size:clamp(.62rem,1vw,.74rem);letter-spacing:.04em;color:var(--dusk);text-align:center;line-height:1.15;padding:0 4px}
.hm-in-back:hover,.hm-in-back:focus-visible{background:linear-gradient(160deg,#4a5465,#2a3240)}
.hm-in-back:hover .hm-in-name,.hm-in-back:focus-visible .hm-in-name{color:var(--star)}
.hm-open .hm-in-flip{transform:rotateY(180deg)}
.js .hm-open .hm-in-front,.js body:not(.hm-open) .hm-in-back{pointer-events:none}
.hm-in-line{position:relative;z-index:2;margin:0;font-size:clamp(1rem,2.1vw,1.2rem);color:var(--dusk);text-align:center}
.js .hm-in-line{opacity:0;animation:hm-fade 1.2s var(--ease) 2s forwards}
@keyframes hm-fade{to{opacity:1}}
.hm-in-row{position:relative;z-index:2;display:none;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.js .hm-in-row{display:flex;opacity:0;animation:hm-fade 1s var(--ease) 2.3s forwards}
.hm-in-btn{font:600 1rem/1 Montserrat,sans-serif;height:52px;border-radius:999px;padding:0 30px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.hm-in-enter{color:var(--sky);background:var(--gold);border:0}.hm-in-enter:hover{background:var(--gold-b)}
.hm-open .hm-in-enter{color:var(--star);background:var(--sky);border:1px solid rgba(232,241,255,.3)}
.hm-in-warp{--cx:50%;--cy:50%;visibility:hidden;position:fixed;inset:0;z-index:9;background:var(--surface);clip-path:circle(0 at var(--cx) var(--cy));transition:clip-path .55s var(--ease)}
.hm-in-warp.go{visibility:visible;clip-path:circle(150% at var(--cx) var(--cy))}
@media (max-width:520px){.hm-in-tray{flex-direction:column}.hm-in-slot{width:clamp(64px,16vw,84px)}.hm-in-card{border-radius:24px}}
@media (prefers-reduced-motion:reduce){.hm-intro *,.hm-intro *::before,.hm-intro *::after{animation-duration:1ms!important;animation-delay:0s!important;transition-duration:1ms!important;transition-delay:0s!important}.hm-in-card{animation:none}.hm-in-card::after{display:none}}