/* ═══════════════ PRELOADER ═══════════════ */
body.is-loading{ overflow:hidden; }

.pre{
  position:fixed; inset:0;
  z-index:9000;
  background:var(--dark-2);
  display:grid;
  place-content:center;
  transform:translateY(0);
  transition:transform 1.15s cubic-bezier(.76,0,.24,1);
  will-change:transform;
}
.pre.is-out{ transform:translateY(-101%); }

/* the curtain carries its own torn edge, hanging below its base */
.pre__tear{
  position:absolute;
  left:0; right:0; top:100%;
  height:clamp(40px,6vw,90px);
  width:100%;
  display:block;
  transform:scaleY(-1);      /* flip so the rip bites upward */
}
.pre__tear path{ fill:var(--dark-2); }

.pre__inner{ text-align:center; padding:2rem; }
.pre__script{
  font-family:var(--f-script);
  font-size:clamp(1.6rem,4vw,3rem);
  color:var(--hl);
  display:block;
  transform:rotate(-5deg);
  animation:preIn .8s var(--ease) both;
}
.pre__word{
  font-family:var(--f-heavy);
  font-size:clamp(2.2rem,8vw,5.5rem);
  color:var(--white);
  letter-spacing:-.035em;
  line-height:1;
  margin-top:.1em;
  animation:preIn .8s var(--ease) .08s both;
}
@keyframes preIn{
  from{ opacity:0; transform:translateY(24px) rotate(-5deg); }
  to  { opacity:1; }
}

.pre__bar{
  display:block;
  position:relative;
  width:min(280px,60vw);
  height:2px;
  border-radius:2px;
  background:rgba(255,255,255,.14);
  margin:1.8rem auto 0;
  overflow:visible;
}
.pre__bar-in{
  position:relative;
  display:block;
  height:100%;
  border-radius:2px;
  background:var(--hl);
  box-shadow:0 0 12px 1px rgba(240,232,60,.55);
  transform:scaleX(0);
  transform-origin:0 50%;
  transition:transform .25s linear;
}
.pre__bar-in::after{
  content:"";
  position:absolute;
  top:50%; right:0;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--hl);
  box-shadow:0 0 8px 3px rgba(240,232,60,.85);
  transform:translate(50%,-50%);
}
.pre__num{
  position:absolute;
  right:clamp(1.2rem,4vw,3.5rem);
  bottom:clamp(1.2rem,4vw,3rem);
  font-family:var(--f-heavy);
  font-size:clamp(2.4rem,9vw,6rem);
  color:transparent;
  -webkit-text-stroke:1.4px var(--hl);
  line-height:.8;
  letter-spacing:-.04em;
}

/* ═══════════════ WORD MASK REVEALS ═══════════════ */
.w{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  /* room for descenders and italic overhang inside the mask */
  padding:0 .06em .14em;
  margin:0 -.06em -.14em;
}
.w__i{
  display:inline-block;
  transform:translateY(115%);
  transition:transform 1s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--i,0) * 55ms);
}
body.is-ready .headline .w__i,
.is-in .w__i{ transform:none; }

/* script faces have deep descenders — give their masks more room */
.foot__thanks .w{ padding-bottom:.34em; margin-bottom:-.34em; }

/* ═══════════════ HERO INTRO ═══════════════ */
.photo{ transform:rotate(-1.4deg) translate3d(0,var(--par,0),0); }
.photo:hover{ transform:rotate(0deg) translate3d(0,var(--par,0),0) scale(1.015); }
.headline,.about,.toc__head,.foot__thanks{
  transform:translate3d(0,var(--par,0),0);
}
.toc__no{ transform:translateY(-50%) translate3d(0,var(--par,0),0); }

body.is-loading .photo__inner{ opacity:0; }
body.is-ready .photo__inner{
  animation:photoIn 1s var(--ease) .25s both;
}
@keyframes photoIn{
  from{ opacity:0; transform:scale(1.06); clip-path:inset(0 0 100% 0); }
  to  { opacity:1; transform:scale(1);    clip-path:inset(0 0 0 0); }
}

body.is-loading .tape{ opacity:0; }
body.is-ready .tape{ animation:tapeIn .55s var(--ease) both; }
.tape--tr{ animation-delay:.85s; }
.tape--bl{ animation-delay:.98s; }
@keyframes tapeIn{
  from{ opacity:0; transform:var(--tape-rot) scale(.6); }
  to  { opacity:1; }
}
.tape--tr{ --tape-rot:rotate(38deg); }
.tape--bl{ --tape-rot:rotate(14deg); }

/* ═══════════════ STAGGERED CHILDREN ═══════════════ */
.stagger > *{
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 65ms);
}
.is-in .stagger > *,
.stagger.is-in > *{ opacity:1; transform:none; }

/* gallery tiles wipe rather than fade */
.gal__grid.stagger > *{
  transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .9s var(--ease), opacity .5s var(--ease);
}
.is-in .gal__grid.stagger > *,
.gal__grid.stagger.is-in > *{ clip-path:inset(0 0 0 0); }

/* ═══════════════ SCROLL PROGRESS ═══════════════ */
.prog{
  position:fixed; top:0; left:0; right:0;
  height:3px;
  z-index:8000;
  background:transparent;
  pointer-events:none;
}
.prog__in{
  display:block; height:100%;
  background:var(--hl);
  transform:scaleX(0);
  transform-origin:0 50%;
}

/* ═══════════════ CURSOR ═══════════════ */
.cur__dot,.cur__ring{
  position:fixed; top:0; left:0;
  z-index:9500;
  pointer-events:none;
  opacity:0;
  mix-blend-mode:difference;
}
.has-cursor .cur__dot,
.has-cursor .cur__ring{ opacity:1; }

.cur__dot{
  width:7px; height:7px;
  background:var(--hl);
  border-radius:50%;
}
.cur__ring{
  width:34px; height:34px;
  border:1px solid var(--hl);
  border-radius:50%;
  transition:width .3s var(--ease), height .3s var(--ease), opacity .3s;
}
.cur-lg .cur__ring{ width:62px; height:62px; }

@media (pointer:coarse){
  .cur__dot,.cur__ring{ display:none; }
}

/* ═══════════════ REDUCED MOTION ═══════════════ */
@media (prefers-reduced-motion: reduce){
  .w__i{ transform:none; transition:none; }
  .stagger > *{ opacity:1; transform:none; transition:none; }
  .gal__grid.stagger > *{ clip-path:none; }
  .pre{ display:none; }
  body.is-ready .photo__inner,
  body.is-ready .tape{ animation:none; opacity:1; }
  .photo,.headline,.about,.toc__head,.foot__thanks{ transform:none; }
  .toc__no{ transform:translateY(-50%); }
}