/* ═══ THE CHROME TITLE (2026-10-18) — only under html.ct. Same values as the door loader (#vpIntro, index.html):
   800 italic capitals, .06em tracking, --chrome-grad per letter, the viLetter rise, the viGhost converge, the mono line,
   the bar. See showcase-hometitle.js. ═══ */
html.ct .is-heroc-h.ct-on{font:italic 800 clamp(40px,5.6vw,104px)/1.02 var(--sans,-apple-system,sans-serif);letter-spacing:.06em;
  text-transform:uppercase;color:transparent;text-shadow:none;display:flex;flex-direction:column;align-items:center;gap:.06em}
html.ct .ct-row{position:relative;display:inline-block;white-space:nowrap}
html.ct .ct-word{position:relative;display:inline-block;white-space:nowrap;vertical-align:middle}
/* the shimmer is clipped PER LETTER — a parent-level background-clip:text vanishes the moment a child transforms */
html.ct .ct-l{display:inline-block;transform-origin:50% 100%;
  background:var(--chrome-grad,linear-gradient(180deg,#F4F6F8 0%,#C9D0D6 32%,#8D97A2 48%,#E8ECEF 54%,#767E88 78%,#A9B2BC 100%));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
html.ct .ct-sp{display:inline-block;width:.32em}
/* VISIBLE BY DEFAULT (10-18: Michael came back to Home and the headline was gone — Safari can drop a finished
   forwards-fill when the layer is hidden and shown): the entrance only plays, backwards-filled */
html.ct .ct-run .ct-l{animation:ctLetter .62s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(.10s + var(--i) * .034s)}
/* ends on NO filter at all: Safari renders a filtered, text-clipped letter blurred for good (10-18 — the loader's own
   viLetter ends on blur(0); a drop-shadow here left SONO's headline smeared in Safari) */
@keyframes ctLetter{from{opacity:0;transform:translateY(.42em) rotateX(-62deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
/* legibility on a busy photo comes from a soft shade behind the words, not from a shadow on each letter */
html.ct #isHeroC .is-heroc-h.ct-on{position:relative}
html.ct #isHeroC .is-heroc-h.ct-on::before{content:"";position:absolute;inset:-28% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(4,8,12,.5),rgba(4,8,12,0))}
/* the chromatic ghost: an offset silver copy that converges onto the word, then leaves */
html.ct .ct-ghost{position:absolute;inset:0;z-index:-1;white-space:nowrap;pointer-events:none;color:var(--accent,#d7dfe5);-webkit-text-fill-color:currentColor;
  mix-blend-mode:screen;opacity:0}
html.ct .ct-run .ct-ghost{animation:ctGhost .78s cubic-bezier(.16,1,.3,1) forwards}
@keyframes ctGhost{0%{opacity:.85;transform:translate3d(-14px,0,0) skewX(9deg);filter:blur(3px)}55%{opacity:.35}100%{opacity:0;transform:none;filter:blur(0)}}
/* the loader's mono line and bar */
html.ct .ct-line{margin:clamp(20px,3.2vh,34px) 0 0;font:500 clamp(9.5px,.72vw,12px)/1 var(--mono,ui-monospace,monospace);letter-spacing:.32em;
  text-transform:uppercase;color:rgba(238,242,246,.62)}
html.ct .ct-run .ct-line{animation:ctFade .5s cubic-bezier(.16,1,.3,1) .35s backwards}
html.ct .ct-bar{width:min(380px,70%);height:2px;margin:12px auto 0;background:rgba(215,223,229,.15);overflow:hidden}
html.ct .ct-bar i{display:block;height:100%;width:100%;background:var(--accent,#d7dfe5);box-shadow:0 0 14px rgba(215,223,229,.55)}
html.ct .ct-run .ct-bar i{animation:ctLoad .74s cubic-bezier(.16,1,.3,1) .42s backwards}
@keyframes ctFade{from{opacity:0}to{opacity:1}}
@keyframes ctLoad{from{width:0}to{width:100%}}
html.ct .ct-run ~ .is-heroc-sub,html.ct .ct-run .is-heroc-sub{animation-delay:.6s}
@media (prefers-reduced-motion:reduce){
  html.ct .ct-l{opacity:1;transform:none;filter:none;animation:none!important}
  html.ct .ct-ghost{display:none}html.ct .ct-line{opacity:1;animation:none!important}html.ct .ct-bar i{width:100%;animation:none!important}}

/* ═══ THE SPINNING EMBLEM (10-18) — only under html.ct-spin. A thick chrome coin: the face plus seven darkening copies
   stepped back in depth, so the edge shows as it turns. It spins in once (1½ turns, landing on the house curve) while
   the first line slides in beside it, then breathes ±9° — the one breathing figure on the screen (MOTION.md §3). ═══ */
html.ct-spin .ct-row{display:inline-flex;align-items:center;justify-content:center}
html.ct-spin .ct-emb{flex:none;width:1.32em;height:1.32em;margin-right:.22em;perspective:700px}
html.ct-spin .ct-emb-s{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d}
html.ct-spin .ct-emb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:visible;-webkit-backface-visibility:visible}
html.ct-spin .ct-edge{transform:translateZ(calc(var(--k) * -1.6px));filter:brightness(calc(.62 - var(--k) * .05)) contrast(1.1)}
html.ct-spin .ct-face{transform:translateZ(0)}
/* slow enough to READ as a turning object (the house curve finished the turn in ~0.3 s — a flash, not a spin) */
html.ct-spin .ct-run .ct-emb-s{animation:ctSpin 2.4s cubic-bezier(.25,.6,.3,1) backwards,ctBreathe 6s ease-in-out 2.5s infinite alternate}
@keyframes ctSpin{0%{opacity:0;transform:rotateY(-540deg) rotateX(16deg) scale(.5)}18%{opacity:1}100%{opacity:1;transform:rotateY(-9deg) rotateX(0) scale(1)}}
@keyframes ctBreathe{from{transform:rotateY(-9deg)}to{transform:rotateY(9deg)}}
/* the first line SLIDES in beside the turning emblem (Voltaic), the second rises as the loader's do */
html.ct-spin .ct-run .ct-row:first-child .ct-l{animation-name:ctSlide;animation-duration:.8s;animation-delay:calc(.55s + var(--i) * .07s)}
html.ct-spin .ct-run .ct-row:not(:first-child) .ct-l{animation-delay:calc(.9s + var(--i) * .034s)}
@keyframes ctSlide{from{opacity:0;transform:translateX(-.55em);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){html.ct-spin .ct-emb-s{animation:none!important;transform:none}}


/* the record's own wordmark image as the title (experience.titleImage — SONO 10-20: the real chrome logo) */
html.ct .ct-logo{display:inline-block;height:1em;width:auto;vertical-align:middle;filter:drop-shadow(0 .03em .1em rgba(0,0,0,.45))}
html.ct .ct-run .ct-logo{animation:ctLogoIn .9s cubic-bezier(.2,.7,.2,1) .5s backwards}
@keyframes ctLogoIn{from{opacity:0;transform:translateY(.1em) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){html.ct .ct-run .ct-logo{animation:none}}