/* =========================================================
   CLAPPERBOARD INTRO — intro.css
   Every colour is a CSS variable (defined below for dark + light).
   Also uses your existing: --bg, --text, --text-dim, --accent
   ========================================================= */

:root{
  --clap-ink:#0a0a0a;
  --clap-paper:#f2efe9;
  --clap-slate:#1b1b1f;
  --clap-chalk:#f2efe9;
  --clap-role:#d8d3c6;
  --clap-flash:rgba(255,255,255,.9);
  --clap-shadow:rgba(0,0,0,.45);
}
:root[data-theme="light"]{
  --clap-ink:#141416;
  --clap-paper:#efece5;
  --clap-slate:#232327;
  --clap-chalk:#f2efe9;
  --clap-role:#d8d3c6;
  --clap-flash:rgba(255,255,255,.95);
  --clap-shadow:rgba(0,0,0,.3);
}

/* page can't scroll while the intro plays */
html.intro-lock,
html.intro-lock body{overflow:hidden}

.intro{
  position:fixed;inset:0;z-index:2000;
  display:grid;place-items:center;
  padding:env(safe-area-inset-top,0px) 4vw env(safe-area-inset-bottom,0px);
  background:var(--bg);cursor:pointer;
  transition:transform .95s cubic-bezier(.75,0,.2,1);
}
.intro.is-out{transform:translateY(-101%)}

.intro__skip{
  position:absolute;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  padding:14px;background:none;border:0;cursor:pointer;
  color:var(--text-dim);font:600 1.125rem system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;
}

/* ---- the clapperboard ---- */
.intro__clap{
  --open:-16deg;                       /* set by intro.js so the stick always fits on screen */
  --bar-h:clamp(44px,7vw,68px);
  position:relative;width:min(92vw,680px);padding-top:var(--bar-h);
  filter:drop-shadow(0 28px 40px var(--clap-shadow));
  animation:intro-in .7s ease both;
}
.intro__clap.is-clap{animation:intro-in .01s both,intro-thunk .32s ease-out .2s}
@keyframes intro-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes intro-thunk{0%{transform:none}35%{transform:translateY(8px)}100%{transform:none}}

.intro__bar,
.intro__stick{
  height:var(--bar-h);border:3px solid var(--clap-slate);
  background:repeating-linear-gradient(115deg,var(--clap-ink) 0 clamp(24px,4.2vw,40px),var(--clap-paper) 0 clamp(48px,8.4vw,80px));
}
.intro__stick{
  position:absolute;top:0;left:0;right:0;
  transform-origin:20px 100%;transform:rotate(var(--open));
  background:repeating-linear-gradient(65deg,var(--clap-ink) 0 clamp(24px,4.2vw,40px),var(--clap-paper) 0 clamp(48px,8.4vw,80px));
}
.intro__bar{position:relative;z-index:1}
.intro__bar::after{ /* hinge pin: sits inside the clapper, exactly on the pivot */
  content:"";position:absolute;left:12px;top:-9px;width:16px;height:16px;
  border-radius:50%;background:var(--accent);border:2px solid var(--clap-ink);
}
.is-clap .intro__stick{transform:rotate(0);transition:transform .2s cubic-bezier(.65,0,1,.7)}

.intro__slate{
  padding:clamp(16px,3vw,32px);
  background:var(--clap-slate);color:var(--clap-chalk);
  border:3px solid var(--clap-slate);border-top:0;border-radius:0 0 10px 10px;
  font-family:var(--font-mono,"Courier New",ui-monospace,monospace);
}
.intro__row{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-bottom:clamp(12px,2.4vw,24px);border:2px solid var(--clap-chalk);
}
.intro__cell{
  padding:8px 12px;border-right:2px solid var(--clap-chalk);
  color:var(--text-dim);font-size:clamp(.9rem,1.7vw,1.05rem);letter-spacing:.1em;text-transform:uppercase;
}
.intro__cell:last-child{border-right:0}
.intro__cell b{display:block;margin-top:2px;color:var(--clap-chalk);font-size:clamp(1.2rem,2.7vw,1.7rem)}

.intro__name{
  margin:0;color:var(--clap-chalk);
  font:700 clamp(2.4rem,9vw,4.6rem)/.95 var(--font-display,Georgia,serif);letter-spacing:-.02em;
}
.intro__roles{
  display:flex;flex-wrap:wrap;gap:.2em 0;
  margin-top:clamp(10px,2vw,18px);color:var(--clap-role);
  font-size:clamp(1rem,2.1vw,1.35rem);letter-spacing:.1em;text-transform:uppercase;
}
.intro__roles span:not(:last-child)::after{content:"\00b7";margin:0 .6em}

.intro__row,.intro__name,.intro__roles{animation:intro-up .7s cubic-bezier(.2,.7,.2,1) both}
.intro__row{animation-delay:.25s}
.intro__name{animation-delay:.5s}
.intro__roles{animation-delay:.8s}
@keyframes intro-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.intro__flash{position:absolute;inset:0;background:var(--clap-flash);opacity:0;pointer-events:none}
.intro__flash.go{animation:intro-flash .2s ease-out}
@keyframes intro-flash{0%{opacity:.6}100%{opacity:0}}