/* The opening (Nov 2026). The hero rests as one screen, like a product page: a real capture of the app in a
   plain window frame, the take cards it led to beside it, and under them the name, the headline, the lead,
   See plans and Play with sound. Below the fold, the LAYRS wordmark with its letter sounds.
   intro.js plays the way in once per load: a sound ring, the ring opening into the window, the window
   settling into its place, the words rising, the take cards sliding in from the right. Everything here is
   the resting state; the motion only adds transforms and opacity on top of it, so reduced motion and no
   JavaScript show this directly.

   The hero is the one centred composition on the page (DESIGN.md, section 5): the MacBook with the take-cards
   window in front of its right quarter, centred as a pair, then the icon, the name, the headline, the lead,
   the actions and the requirements, each centred under the last. The rest of the page keeps the grid. */

.hero{padding:8px var(--gutter) var(--section);position:relative}

/* The stage: the Mac about 880 px wide at 1440 (64.5% of the pair), the take-cards window 51% wide starting
   at 49% of the pair, a quarter of the way down the screen and in front of it; the pair is centred. */
.intro-stage{position:relative;width:min(100%,1364px);margin:0 auto var(--stage-gap,calc(var(--space) - 11px))}
/* At 1440 by 900 the whole Mac must sit under LAYRS on the first screen, so short viewports take a smaller pair. */
@media (min-width:801px) and (max-height:980px){.intro-stage{width:min(100%,1180px)}}
/* The MacBook (space black), drawn with gradients, no outlines. The base is the device's footprint on the
   grid; the screen sits 3% inside it on each side, as on the real thing. Proportions follow a 16:10 display
   with a thin uniform bezel, the camera notch at the top centre, a thin aluminium hinge band, a shallow
   wedge of a base with the thumb notch on its front lip, and a soft contact shadow on the black ground. */
.intro-device{--hinge:clamp(4px,.5vw,7px);--base:clamp(9px,1.1vw,16px);position:relative;width:64.5%;margin:0;min-width:0;transform-origin:50% 50%;z-index:2}
.intro-screen{position:relative;width:94%;margin:0 auto;padding:clamp(6px,.75vw,11px);background:linear-gradient(180deg,#121214,#0a0a0b 40%,#070708);border-radius:clamp(10px,1.1vw,16px) clamp(10px,1.1vw,16px) clamp(4px,.4vw,6px) clamp(4px,.4vw,6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px #000}
.intro-notch{position:absolute;left:50%;top:calc(clamp(6px,.75vw,11px) + .55%);width:6.5%;aspect-ratio:3.7;transform:translateX(-50%);background:#050506;border-radius:999px;box-shadow:0 0 0 1px rgba(0,0,0,.6);z-index:2}
.intro-notch::after{content:"";position:absolute;right:16%;top:50%;width:19%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:#15151b;box-shadow:inset 0 0 0 1px #2b2b36,inset 1px 1px 1px rgba(255,255,255,.08)}
.intro-glass{position:relative;aspect-ratio:2000/1254;overflow:hidden;border-radius:clamp(4px,.45vw,7px);background:#181614}
.intro-frame{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.intro-hinge{position:relative;width:94%;height:var(--hinge);margin:0 auto;background:linear-gradient(180deg,#3a3a3d,#242426 55%,#17171a);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.intro-base{position:relative;width:100%;height:var(--base);background:linear-gradient(180deg,#47474a 0,#303033 28%,#1c1c1e 100%);border-radius:0 0 calc(var(--base) * .9) calc(var(--base) * .9) / 0 0 100% 100%;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.6)}
.intro-base::before{content:"";position:absolute;left:50%;top:0;width:11%;height:46%;transform:translateX(-50%);background:linear-gradient(180deg,#111113,#1d1d1f);border-radius:0 0 999px 999px}
.intro-base::after{content:"";position:absolute;left:3%;right:3%;top:70%;height:calc(var(--base) * 1.6);background:radial-gradient(ellipse at 50% 0,rgba(0,0,0,.85),rgba(0,0,0,.35) 45%,transparent 72%);filter:blur(4px);z-index:-1}
/* The playhead over the Studio capture: the ruler runs 0:00 at 11.4% of the picture's width to 1:12 at 81.6%;
   intro.js moves the line with a transform, following the excerpt when it plays and idling over the loop. */
.intro-playhead{position:absolute;left:11.4%;top:11%;bottom:3%;width:70.2%;pointer-events:none;opacity:0;transition:opacity 240ms ease}
.intro-playhead[data-playing=true]{opacity:.9}
/* While the live line shows, the capture's own still playhead (at 0:43) hides under a 3 px strip in the lane colour. */
.intro-playhead::before{content:"";position:absolute;left:59.76%;top:-1%;bottom:0;width:3px;margin-left:-1px;background:#161616;opacity:0}
.intro-playhead[data-playing=true]::before{opacity:1}
.intro-playhead i{position:absolute;left:0;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--ink);box-shadow:0 0 6px rgba(244,245,239,.55);will-change:transform}
.intro-playhead i::before{content:"";position:absolute;left:-4px;top:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--ink)}
.intro-armed .intro-playhead{opacity:0}
.intro-panel{position:absolute;left:48.9%;top:24%;width:51.1%;margin:0;z-index:3;border-radius:22px;overflow:hidden;background:#181614;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 40px 90px rgba(0,0,0,.75),0 12px 28px rgba(0,0,0,.6)}
.intro-panel img{border-radius:22px}
.intro-panel img{width:100%;height:auto}
/* A native macOS window capture brings its own chrome, corners and shadow on transparency: no frame then. */


/* The ring only exists while the opening plays. */
.intro-ring{display:none}

/* The LAYRS wordmark leads the hero, full width under the nav, with its letter sounds; the "Sound on" row sits
   under it, then the Mac. The last letter keeps its full advance, so its ink ends on the right gutter. */
.hero .hero-word{font-family:var(--display);font-weight:700;line-height:.95;margin:4px auto var(--space)}
.hero .hero-word>:last-child{letter-spacing:0}
.hero-meta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);max-width:1800px;margin:0 auto 20px}
.hero-meta>*{grid-column:8/-1;min-width:0}
.hero-meta .wordmark-audio{margin:0;min-height:44px;justify-content:flex-start}

.hero-listen{display:flex;align-items:center;gap:10px;min-width:0}
.listen-toggle{display:inline-flex;align-items:center;gap:12px;min-height:60px;padding:6px 22px 6px 6px;border:1px solid #252623;border-radius:40px;background:#080908;color:var(--ink);text-align:left;transition:border-color 180ms ease,background-color 180ms ease}
.listen-toggle:hover{border-color:#666b54}
.listen-toggle:focus-visible{outline-width:2px;outline-offset:4px}
.listen-ring{position:relative;display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;border-radius:50%}
.listen-ring canvas{position:absolute;inset:0;width:48px;height:48px}
.listen-ring svg{position:relative;width:16px;height:16px;color:var(--ink)}
.listen-pause{display:none}
.hero-listen[data-playing=true] .listen-play{display:none}
.hero-listen[data-playing=true] .listen-pause{display:block}
.listen-text{display:grid;gap:2px;min-width:0}
.listen-text strong{font-size:15px;font-weight:500;line-height:1.2}
.listen-text span{max-width:236px;font-size:12px;color:var(--muted);line-height:1.3;letter-spacing:.01em}
.listen-mute{min-height:44px;padding:8px 16px;border:1px solid #252623;border-radius:30px;background:transparent;color:var(--muted);font-size:13px;font-weight:500;transition:color 180ms ease,border-color 180ms ease}
.listen-mute:hover{color:var(--ink);border-color:#666b54}
.listen-mute[aria-pressed=true]{color:var(--ink)}

/* The words, centred under the devices: icon, name, headline, lead, actions, requirements. */
.hero-intro{display:grid;justify-items:center;text-align:center;max-width:1800px;margin:0 auto}
.hero-icon{width:88px;height:88px;border-radius:20px;margin-bottom:24px}
.hero-name{font-size:48px;font-weight:500;letter-spacing:-.03em;line-height:1.1;margin-bottom:24px}
/* Two lines exactly: the longer, "Describe the music.", is about 13.6 em wide in Panchang, so 6.6vw keeps it
   inside the gutters at every width down to 700 px; below that it wraps naturally, still centred. */
.hero-intro h1{font-size:clamp(34px,5.4vw,96px);line-height:1.04;letter-spacing:-.05em;text-wrap:balance;max-width:100%;margin-bottom:32px}
.hero-intro h1>span{white-space:nowrap}
@media (max-width:700px){.hero-intro h1>span{white-space:normal}}
.hero-intro .lead{font-size:clamp(20px,1.9vw,28px);line-height:1.4;color:var(--muted);max-width:780px;margin-bottom:40px}
.hero-intro .hero-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:0 0 20px}
.hero-intro .hero-actions .button{min-height:60px}
.hero-intro .compatibility{margin:0}

@media (max-width:800px){
  .intro-stage{--stage-gap:var(--space)}
  .intro-device{width:100%}
  .intro-panel{position:static;width:86%;margin:12px auto 0;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
  .intro-panel img{border-radius:14px}
  .hero-icon{width:64px;height:64px;border-radius:14px;margin-bottom:16px}
  .hero-name{font-size:32px;margin-bottom:16px}
  .hero-intro h1{font-size:clamp(34px,6.6vw,64px);margin-bottom:22px}
  .hero-intro .lead{font-size:19px;margin-bottom:28px}
}
@media (max-width:520px){
  .intro-panel{width:100%}
  .hero-intro h1{font-size:clamp(30px,9.6vw,40px);line-height:1.1}
  /* The actions stack as two full-width rows, on purpose, instead of the pill wrapping under the button. */
  .hero-intro .hero-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;width:100%}
  .hero-listen{display:grid;grid-template-columns:minmax(0,1fr) auto}
  .listen-toggle{width:100%}
  .listen-text span{max-width:none}
  .hero-meta>*{grid-column:1/-1}
}

/* While the opening is armed: everything waits, hidden, until intro.js moves it.
   The page itself scrolls and responds the whole time. */
.intro-armed .intro-device,.intro-armed .intro-panel,
.intro-armed .hero-word>*,.intro-armed .hero [data-intro]{opacity:0}
.intro-frame:not(:first-child){opacity:0}
.intro-armed .intro-ring{display:block;position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:1;pointer-events:none}
.intro-armed .site-header{position:relative;z-index:30}

/* The story before the opening: three lines on black, centred, one at a time. */
.intro-story{position:fixed;inset:0;z-index:25;display:grid;place-items:center;padding:0 var(--gutter);background:var(--bg);pointer-events:none}
.intro-story[hidden]{display:none}
/* The page holds still while the story is told (the gutter stays, so nothing shifts when it lets go) */
html.intro-telling{overflow:hidden;scrollbar-gutter:stable}
html.intro-telling body{overflow:hidden}
.intro-story p{grid-area:1/1;opacity:0;max-width:24ch;text-align:center;font-size:clamp(30px,4.4vw,72px);font-weight:500;letter-spacing:-.035em;line-height:1.12;color:var(--ink)}
.intro-story .intro-story-name{font-family:var(--display);font-weight:700;letter-spacing:-.045em;color:var(--accent)}
/* The Mac's screen after the opening: one screen at a time, crossfading */
.intro-slide{position:absolute;inset:0;width:100%;height:100%;max-width:none;opacity:0}
.intro-glass .intro-frame,.intro-glass .intro-slide{transition:opacity .7s ease}
/* The first screen holds LAYRS and the whole Mac at any window height: the wordmark, the gap and the stage
   are sized by the height as well as the width (desktop widths; phones stack the Mac and its window). */
@media (min-width:801px){
  .hero{--word:min(clamp(76px,17.3vw,310px),24vh)}
  .hero .hero-word{font-size:var(--word);max-width:min(1800px,calc(var(--word) * 5.78));margin-bottom:min(var(--space),6vh)}
  .hero .intro-stage{width:min(100%,1364px,calc((100vh - 88px - var(--word) * .95 - 6vh - 40px) / .42))}
}
/* The start button before the story: one press brings the music and the words */
html:not(.intro-armed) .intro-story{display:none}
.intro-gate{grid-area:1/1;display:grid;justify-items:center;gap:16px;pointer-events:auto}
.intro-gate[hidden]{display:none}
.intro-gate button{display:inline-flex;align-items:center;gap:12px;min-height:62px;padding:0 30px;border:0;border-radius:var(--r-pill);background:var(--accent);color:var(--bg);font:500 18px/1 var(--text);cursor:pointer;transition:transform 180ms var(--ease),background-color 180ms ease}
.intro-gate button:hover{background:var(--accent-hover);transform:scale(1.03)}
.intro-gate button svg{width:20px;height:20px}

/* While the story plays: what the music is and how it was made */
.intro-credit{position:absolute;left:50%;bottom:clamp(24px,5vh,48px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:min(92vw,640px);text-align:center;opacity:0;animation:intro-credit-in .8s ease 1.2s forwards}
.intro-credit-label{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.intro-credit-text{color:var(--muted);font-size:var(--small);line-height:1.5;text-wrap:balance}
.intro-credit-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 #c7df5f66;animation:intro-credit-pulse 1.6s ease-out infinite}
.intro-gate:not([hidden]) ~ .intro-credit{display:none}
@keyframes intro-credit-in{to{opacity:1}}
@keyframes intro-credit-pulse{0%{box-shadow:0 0 0 0 #c7df5f66}100%{box-shadow:0 0 0 10px #c7df5f00}}
@media (prefers-reduced-motion:reduce){.intro-credit{animation:none;opacity:1}.intro-credit-dot{animation:none}}

/* the start screen: a line, the button inside slow sound ripples, and the way past it */
.intro-gate{gap:22px}
.intro-gate-eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.intro-gate-stage{position:relative;display:grid;place-items:center;padding:34px 56px}
.intro-gate-stage i{position:absolute;inset:50% auto auto 50%;width:220px;height:84px;border-radius:999px;transform:translate(-50%,-50%) scale(1);border:1px solid #cbb3e855;opacity:0;animation:intro-ripple 3.6s cubic-bezier(.2,.6,.3,1) infinite;pointer-events:none}
.intro-gate-stage i:nth-child(2){border-color:#c7df5f40;animation-delay:1.2s}
.intro-gate-stage i:nth-child(3){animation-delay:2.4s}
.intro-gate-stage button{position:relative;z-index:1;box-shadow:0 0 60px #c7df5f26}
.intro-gate-stage button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.intro-gate-hint{color:var(--muted);font-size:var(--small)}
@keyframes intro-ripple{0%{opacity:.9;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.9,2.6)}}
@media (prefers-reduced-motion:reduce){.intro-gate-stage i{animation:none;opacity:.35}}