/* ============================================================
   JMP Media · opening sequence (intro.css)
   Homepage only. ~3.4s of hard editorial cuts into the hero:
   F01 slate · F02 "J" · F03 "JM" · F04 "JMP" · JMP turns into a window
   onto the hero video · a centre shutter opens and the footage becomes the page.
   Uses site.css tokens only. Hidden unless html.jmp-intro is set
   by the inline head script, and self-removes at 6s even if
   intro.js never runs, so the page can never get stuck behind it.
   ============================================================ */
.intro{display:none;}
html.jmp-intro{overflow:hidden;}
html.jmp-intro .intro{
  display:block;position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--bone);
  clip-path:inset(0 0 0 0);cursor:pointer;
  animation:introKill 0s linear 6s forwards;
}
@keyframes introKill{to{opacity:0;pointer-events:none;}} /* opacity, not visibility: children set visibility:visible */
/* hold hero entrance animations until the shutter opens; keep the footage clean (no scrim, no nav)
   while it is showing through the letters, then bring both back as the headline lands */
html.jmp-intro .hero .rv,html.jmp-intro .hero__masthead .ln>span{animation-play-state:paused;}
html.jmp-intro .hero__scrim,html.jmp-intro .nav,html.jmp-intro .scrollcue{opacity:0;}
.hero__scrim{transition:opacity .7s ease;}
.nav{transition:opacity .6s ease .15s,background .35s ease,box-shadow .35s ease,padding .35s ease;}
html.jmp-intro.jmp-intro-out{overflow:auto;}
html.jmp-intro.jmp-intro-out .hero .rv,html.jmp-intro.jmp-intro-out .hero__masthead .ln>span{animation-play-state:running;}
html.jmp-intro.jmp-intro-out .hero__scrim,html.jmp-intro.jmp-intro-out .nav,html.jmp-intro.jmp-intro-out .scrollcue{opacity:1;}

/* ---------- frames ---------- */
.intro__f{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;visibility:hidden;}
.intro[data-f="1"] .intro__f--1,
.intro[data-f="2"] .intro__f--2,
.intro[data-f="3"] .intro__f--3,
.intro[data-f="4"] .intro__f--4{visibility:visible;}
.intro__f--1,.intro__f--4{background:var(--ink);}
.intro__f--2{background:var(--bone);color:var(--ink);}
.intro__f--3{background:var(--claret);color:var(--bone);}

/* ---------- F01 · slate ---------- */
.intro__slate{display:flex;flex-direction:column;gap:12px;width:min(340px,78vw);opacity:0;transition:opacity .25s ease;}
.intro[data-f="1"].is-on .intro__slate{opacity:1;}
.intro__row{display:flex;gap:10px;align-items:stretch;}
.intro__brk{position:relative;display:flex;align-items:center;justify-content:center;padding:14px 16px;}
.intro__brk::before,.intro__brk::after{content:'';position:absolute;top:0;bottom:0;width:7px;border:1px solid rgba(245,239,227,.42);}
.intro__brk::before{left:0;border-right:0;}
.intro__brk::after{right:0;border-left:0;}
.intro__brk--mk{font-family:var(--serif);font-weight:600;font-size:19px;letter-spacing:.04em;line-height:1;}
.intro__brk--mk span{color:var(--brass-lt);}
.intro__brk--lbl{flex:1;font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--bone);}
.intro__rec{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--claret);box-shadow:0 0 0 3px rgba(92,21,24,.45);margin-right:12px;animation:introRec .5s steps(2,jump-none) infinite;}
@keyframes introRec{50%{opacity:.25;}}
.intro__meta{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:rgba(245,239,227,.5);}
.intro__tc{color:var(--brass-lt);font-variant-numeric:tabular-nums;letter-spacing:.12em;}
.intro__bar{height:1px;background:rgba(184,147,90,.22);overflow:hidden;}
.intro__bar i{display:block;height:100%;width:100%;background:var(--brass);transform:scaleX(0);transform-origin:left;}
.intro[data-f="1"].is-on .intro__bar i{transform:scaleX(1);transition:transform var(--slate,900ms) cubic-bezier(.65,0,.35,1);}

/* ---------- F02-F04 · oversized letters ---------- */
.intro__word{
  font-family:var(--serif);font-weight:900;font-stretch:condensed;line-height:1.3;letter-spacing:-.01em;white-space:nowrap;
  font-size:var(--fs,40vw);display:block;
}
.intro__mask{display:block;overflow:hidden;}
.intro__mask--open{overflow:visible;}
.intro__in{display:block;will-change:transform;}
/* F02: J rises out of a mask */
.intro__f--2 .intro__in{transform:translateY(105%);}
.intro[data-f="2"] .intro__f--2 .intro__in{transform:none;transition:transform .34s cubic-bezier(.16,1,.3,1);}
/* F03: JM slides in from the right, hard */
.intro__f--3 .intro__in{transform:translateX(18%);}
.intro[data-f="3"] .intro__f--3 .intro__in{transform:none;transition:transform .32s cubic-bezier(.16,1,.3,1);}
/* F04: JMP lands with a very slight settle in scale */
.intro__f--4 .intro__in{transform:scale(1.07);}
.intro[data-f="4"] .intro__f--4 .intro__in{transform:none;transition:transform .9s cubic-bezier(.16,1,.3,1);}
.intro__f--4 .intro__word .p{color:var(--bone);}

/* brass seam under JMP, drawn left to right */
.intro__seam{position:absolute;left:0;right:0;top:calc(50% + var(--seam,30vh));height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;}
.intro[data-f="4"] .intro__seam{transform:scaleX(1);transition:transform .55s cubic-bezier(.65,0,.35,1) .08s;}

/* ---------- editorial frame furniture (corner marks + frame no.) ---------- */
.intro__fur{position:absolute;inset:clamp(16px,3vw,32px);pointer-events:none;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;}
.intro__fur b{position:absolute;width:14px;height:14px;border:0 solid currentColor;opacity:.5;}
.intro__fur b:nth-child(1){top:0;left:0;border-top-width:1px;border-left-width:1px;}
.intro__fur b:nth-child(2){top:0;right:0;border-top-width:1px;border-right-width:1px;}
.intro__fur b:nth-child(3){bottom:0;left:0;border-bottom-width:1px;border-left-width:1px;}
.intro__fur b:nth-child(4){bottom:0;right:0;border-bottom-width:1px;border-right-width:1px;}
.intro__fur span{position:absolute;opacity:.62;}
.intro__fur .tl{top:2px;left:26px;}
.intro__fur .tr{top:2px;right:26px;}
.intro__fur .bl{bottom:2px;left:26px;}
.intro__f--1 .intro__fur,.intro__f--4 .intro__fur{color:var(--brass-lt);}

/* ---------- F04b + exit · JMP becomes a window onto the hero video ----------
   .intro__win is an ink rect masked by JMP (and later by the opening shutter band),
   so the hero video underneath shows through. The DOM letters hand over on a hard cut. */
.intro__win{position:absolute;inset:0;width:100%;height:100%;display:none;overflow:visible;}
.intro__win text{font-family:var(--serif);font-weight:900;font-stretch:condensed;letter-spacing:-.01em;text-anchor:middle;}
.intro__win .o{fill:none;stroke:var(--brass-lt);}
html.jmp-intro .intro.is-window{background:transparent;}
.intro.is-window .intro__f--4{background:transparent;}
.intro.is-window .intro__win{display:block;}
.intro.is-window .intro__f--4>*:not(.intro__win){visibility:hidden;}
.intro.is-out{pointer-events:none;}
.intro.is-gone{display:none!important;}

@media (prefers-reduced-motion:reduce){ html.jmp-intro .intro{display:none;} html.jmp-intro{overflow:auto;} html.jmp-intro .hero .rv,html.jmp-intro .hero__masthead .ln>span{animation-play-state:running;} html.jmp-intro .hero__scrim,html.jmp-intro .nav,html.jmp-intro .scrollcue{opacity:1;} }