/* ============================================================================
   TOMORROW — events & more
   Scroll-slide site built from TOMORROW.indd / TOMORROW.pdf (1920×1080 artboards)
   All metrics below are the literal design values, scaled by --s.
   ========================================================================== */

@font-face{font-family:Affogato;src:url("../fonts/Affogato-Light.woff2")   format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Affogato;src:url("../fonts/Affogato-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Affogato;src:url("../fonts/Affogato-Medium.woff2")  format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Affogato;src:url("../fonts/Affogato-Bold.woff2")    format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ─── tokens ─────────────────────────────────────────────────────────────── */
:root{
  --red:#EF0606;          /* 0.937 0.024 0.024 — the one accent */
  --off:#EFEEE8;          /* 0.937 0.933 0.910 — wordmark ivory */
  --ink:#FFFFFF;
  --bg:#000000;

  /* 1 design pixel, expressed as a length. Width-led, height-capped. */
  --s:min(100vw / 1920, 100vh / 900);

  /* live values written by JS every frame */
  --beat:0;               /* 0…1  heart envelope   */
  --breath:0;             /* -1…1 slow respiration */
  --dark:0;               /* 0…1  contact-slide dim */

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

html{
  background:var(--bg);
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-y:none;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:Affogato,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

::selection{background:var(--red);color:#000}

/* a grey scrollbar on pure black is a blemish — keep the affordance, lose the chrome */
html{scrollbar-width:thin;scrollbar-color:rgba(239,6,6,.45) transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(239,6,6,.40);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(239,6,6,.68)}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ─── living background ──────────────────────────────────────────────────── */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg)}
.bg__canvas{display:block;width:100%;height:100%}
.js .bg__canvas{opacity:0;transition:opacity 1.6s ease .15s}
.is-lit .bg__canvas{opacity:1}

/* CSS-only stand-in when WebGL is unavailable */
.bg__fallback{
  position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease;
  background:
    repeating-radial-gradient(circle at -2% 122%,
      rgba(239,6,6,.30) 0 1.5px, rgba(239,6,6,0) 1.5px 49px),
    repeating-radial-gradient(circle at 102% -22%,
      rgba(239,6,6,.30) 0 1.5px, rgba(239,6,6,0) 1.5px 49px),
    radial-gradient(60% 60% at -5% 115%, rgba(239,6,6,.10), transparent 70%),
    radial-gradient(60% 60% at 105% -15%, rgba(239,6,6,.10), transparent 70%);
  -webkit-mask-image:
    radial-gradient(85% 85% at 0% 100%, #000 0%, transparent 72%),
    radial-gradient(85% 85% at 100% 0%, #000 0%, transparent 72%);
  mask-image:
    radial-gradient(85% 85% at 0% 100%, #000 0%, transparent 72%),
    radial-gradient(85% 85% at 100% 0%, #000 0%, transparent 72%);
  animation:fallbackBreathe 6.8s ease-in-out infinite;
}
.no-js .bg__fallback,
.no-webgl .bg__fallback{opacity:1}
@keyframes fallbackBreathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.035)}
}

/* the contact-slide dim */
.bg__veil{
  position:absolute;inset:0;
  background:radial-gradient(125% 95% at 50% 64%, rgba(0,0,0,.45) 0%, #000 76%);
  opacity:calc(var(--dark) * .72);
}

/* ─── slide rail ─────────────────────────────────────────────────────────── */
.rail{
  position:fixed;z-index:30;
  right:calc(46 * var(--s));top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;
  gap:calc(16 * var(--s));
}
.js .rail{opacity:0;transition:opacity 1s ease 1.9s}
.js.is-lit .rail{opacity:1}
.rail__tick{
  display:block;padding:calc(4 * var(--s)) calc(9 * var(--s));
  -webkit-tap-highlight-color:transparent;
}
.rail__tick span{
  display:block;width:calc(2 * var(--s));min-width:1px;
  height:calc(20 * var(--s));
  background:rgba(255,255,255,.22);
  transition:height .55s var(--ease),background .55s ease,box-shadow .55s ease;
}
.rail__tick:hover span{background:rgba(255,255,255,.5)}
.rail__tick.is-on span{
  height:calc(40 * var(--s));
  background:var(--red);
  box-shadow:0 0 calc(9 * var(--s)) rgba(239,6,6,.75);
}

/* ─── deck ───────────────────────────────────────────────────────────────── */
.deck{position:relative;z-index:10}
.slide{
  position:relative;
  height:100vh;height:100svh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.lyr{will-change:transform,opacity}

/* ═══ 01 · hero ═══════════════════════════════════════════════════════════ */
.lyr--mark{display:flex;align-items:center;justify-content:center}

/* the mark: circle r100 + bar ±160, stroke 2.2222 — exact PDF geometry */
.mark{position:relative;line-height:0}
.mark__svg{display:block;overflow:visible}
.mark__svg circle,.mark__svg line{
  fill:none;stroke:var(--red);stroke-width:2.2222;
}
.mark--hero .mark__svg{width:calc(463 * var(--s));height:auto}
.mark--lock .mark__svg{width:calc(216.7 * var(--s));height:auto}

.mark__svg--core{
  position:relative;z-index:2;
  transform:scale(calc(1 + .0055 * var(--beat)));
  transform-origin:50% 50%;
  filter:
    drop-shadow(0 0 calc(2.5 * var(--s)) rgba(239,6,6,.95))
    drop-shadow(0 0 calc(8   * var(--s)) rgba(239,6,6,.55));
}
.mark__svg--glow{
  position:absolute;inset:0;z-index:1;
  filter:blur(calc(13 * var(--s)));
  opacity:calc(.30 + .55 * var(--beat));
  transform:scale(calc(1 + .014 * var(--beat)));
  transform-origin:50% 50%;
}
.mark--lock .mark__svg--core{filter:none}
.mark--lock .mark__svg--glow{
  filter:blur(calc(6 * var(--s)));
  opacity:calc(.10 + .34 * var(--beat));
}

/* draw-on */
.js .mark__ring{stroke-dasharray:628.319;stroke-dashoffset:628.319}
.js .mark__bar{stroke-dasharray:160;stroke-dashoffset:160}
.js .mark.is-drawn .mark__ring{animation:drawRing 1.6s var(--ease) forwards}
.js .mark.is-drawn .mark__bar{animation:drawBar 1.05s var(--ease) .55s forwards}
@keyframes drawRing{to{stroke-dashoffset:0}}
@keyframes drawBar {to{stroke-dashoffset:0}}

.js .mark--hero{
  opacity:0;transform:scale(.965);
  transition:opacity 1.2s ease,transform 1.6s var(--ease);
}
.js.is-lit .mark--hero{opacity:1;transform:none}

/* scroll cue — design: x≈centre, y 990→1052, 3.1 wide, 62 tall */
.lyr--cue{
  position:absolute;left:50%;bottom:calc(28 * var(--s));
  margin-left:calc(-1.55 * var(--s));
}
.cue{
  display:block;padding:calc(14 * var(--s)) calc(16 * var(--s)) 0;
  margin:calc(-14 * var(--s)) calc(-16 * var(--s)) 0;
  -webkit-tap-highlight-color:transparent;
}
.cue__line{
  display:block;position:relative;overflow:hidden;
  width:calc(3.1 * var(--s));min-width:1px;
  height:calc(62 * var(--s));
  background:rgba(239,6,6,.34);
  transform:scaleY(calc(1 + .10 * var(--beat)));
  transform-origin:50% 100%;
}
.cue__line::after{
  content:"";position:absolute;left:0;right:0;top:0;height:100%;
  background:linear-gradient(to bottom,transparent,var(--red) 55%,var(--red));
  animation:cueRun 2.6s var(--ease-io) infinite;
}
@keyframes cueRun{
  0%  {transform:translateY(-100%);opacity:0}
  22% {opacity:1}
  70% {transform:translateY(100%);opacity:0}
  100%{transform:translateY(100%);opacity:0}
}
.js .cue{opacity:0;transition:opacity 1.1s ease 1.75s}
.js.is-lit .cue{opacity:1}

/* ═══ 02 · statement ══════════════════════════════════════════════════════ */
.statement{
  width:calc(1444 * var(--s));
  max-width:100%;
  margin-inline:auto;
  display:grid;
  grid-template-columns:calc(692 * var(--s)) calc(752 * var(--s));
  align-items:center;
}

/* Affogato Medium 43.8189 pt · tracking 450/1000 · leading 1.2 · red */
.head{
  margin:0;
  font-weight:500;
  font-size:calc(43.8189 * var(--s));
  line-height:1.2;
  letter-spacing:.45em;
  color:var(--red);
  white-space:nowrap;
}
.head__ln{display:block}

/* Affogato Regular 21.4713 pt · leading 1.2 · white · paragraph skip 2.4 em */
.copy{
  font-size:calc(21.4713 * var(--s));
  line-height:1.2;
  color:var(--ink);
}
.copy__p{margin:0}
.copy__p + .copy__p{margin-top:1.2em}
.copy .ln{display:block}
.copy strong{font-weight:700}

/* ═══ 03 · contact ════════════════════════════════════════════════════════ */
.contact{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) translateY(calc(28.46 * var(--s)));
  text-align:center;
  width:100%;
}
/* Affogato Medium 57.4027 pt · tracking 450/1000 · leading 1.2 · white */
.hail{
  margin:0 -.45em 0 0;          /* cancel the trailing track so ink stays centred */
  font-weight:500;
  font-size:calc(57.4027 * var(--s));
  line-height:1.2;
  letter-spacing:.45em;
  color:var(--ink);
  white-space:nowrap;
}
.hail__ln{display:block}

.mails{
  list-style:none;margin:calc(140.23 * var(--s)) 0 0;padding:0;
  font-size:calc(21.4713 * var(--s));
  line-height:1.2;
}
.mails__i--gap{margin-top:1.2em}
.mails a{
  color:var(--ink);text-decoration:none;
  transition:color .5s ease,text-shadow .5s ease;
}
.mails a span{
  display:inline-block;position:relative;
}
.mails a span::after{           /* rule: 1.22 pt, 2.44 pt under the baseline */
  content:"";position:absolute;left:0;right:0;
  top:1.0806em;height:.0568em;min-height:1px;
  background:currentColor;
  transform-origin:0 50%;
  transition:transform .95s var(--ease) var(--d,0s),box-shadow .5s ease;
}
.js .mails a span::after{transform:scaleX(0)}
.js .is-active .mails a span::after{transform:scaleX(1)}
.mails a:hover,.mails a:focus-visible{
  color:var(--red);
  text-shadow:0 0 calc(14 * var(--s)) rgba(239,6,6,.55);
}
.mails a:hover span::after{box-shadow:0 0 calc(10 * var(--s)) rgba(239,6,6,.7)}

.lock{display:flex;flex-direction:column;align-items:center}
.lock .mark{margin-top:calc(98.25 * var(--s))}

/* Affogato Regular 24.882 pt · tracking 700/1000 · ivory */
.lock__word{
  margin:calc(37 * var(--s)) 0 0;
  font-weight:400;
  font-size:calc(24.882 * var(--s));
  line-height:1;
  letter-spacing:.70em;
  margin-right:-.70em;          /* cancel the trailing track so ink stays centred */
  color:var(--off);
  white-space:nowrap;
}
/* Affogato Regular 16.17 pt · tracking 400/1000 · red */
.lock__tag{
  margin:calc(16.45 * var(--s)) 0 0;
  font-weight:400;
  font-size:calc(16.17 * var(--s));
  line-height:1;
  letter-spacing:.40em;
  margin-right:-.40em;
  color:var(--red);
  white-space:nowrap;
}

/* ─── reveal choreography ────────────────────────────────────────────────── */
.js .ch{
  display:inline-block;
  white-space:pre;
  font-style:inherit;font-weight:inherit;
  opacity:0;
  transform:translateY(.42em) scale(.92);
  transition:
    opacity .85s var(--ease) calc(var(--i,0) * 24ms),
    transform 1.05s var(--ease) calc(var(--i,0) * 24ms);
}
.js .is-active .ch{opacity:1;transform:none}

.js .copy .ln{
  opacity:0;
  transform:translateY(calc(14 * var(--s)));
  transition:
    opacity .95s ease calc(320ms + var(--i,0) * 62ms),
    transform 1.15s var(--ease) calc(320ms + var(--i,0) * 62ms);
}
.js .is-active .copy .ln{opacity:1;transform:none}

.js .hail .ch{transition-delay:calc(var(--i,0) * 26ms)}

.js .mails__i{
  opacity:0;transform:translateY(calc(16 * var(--s)));
  transition:
    opacity .9s ease calc(340ms + var(--i,0) * 120ms),
    transform 1.1s var(--ease) calc(340ms + var(--i,0) * 120ms);
}
.js .is-active .mails__i{opacity:1;transform:none}

.js .lock .mark{
  opacity:0;transform:scale(.9);
  transition:opacity 1.1s ease .78s,transform 1.4s var(--ease) .78s;
}
.js .is-active .lock .mark{opacity:1;transform:none}

.js .lock__word .ch{transition-delay:calc(950ms + var(--i,0) * 34ms)}
.js .lock__tag  .ch{transition-delay:calc(1200ms + var(--i,0) * 22ms)}

/* ─── mobile / portrait ──────────────────────────────────────────────────── */
@media (max-width:900px),(orientation:portrait) and (max-width:1100px){
  :root{--s:min(100vw / 900, 100vh / 620)}

  .rail{right:calc(14px + env(safe-area-inset-right,0px));gap:12px}
  .rail__tick{padding:5px 8px}
  .rail__tick span{width:2px;height:16px}
  .rail__tick.is-on span{height:32px}

  .mark--hero .mark__svg{width:min(60vw,330px)}
  .mark--lock .mark__svg{width:min(31vw,160px)}
  .mark__svg--glow{filter:blur(min(2.4vw,13px))}
  .mark--lock .mark__svg--glow{filter:blur(min(1.2vw,7px))}
  .lyr--cue{bottom:calc(26px + env(safe-area-inset-bottom,0px));margin-left:-1px}
  .cue__line{width:2px;height:46px}

  /* extra right gutter so the copy clears the slide rail */
  .slide{padding-inline:clamp(20px,5.6vw,44px) clamp(38px,10.5vw,66px)}

  .statement{
    display:block;width:100%;max-width:640px;
  }
  .head{
    font-size:clamp(19px,7.1vw,34px);
    letter-spacing:.30em;
  }
  .copy{
    margin-top:clamp(26px,7vw,54px);
    font-size:clamp(13px,3.85vw,17px);
    line-height:1.42;
  }
  .copy__p + .copy__p{margin-top:1.42em}
  .copy .ln{display:block}

  .contact{
    transform:translate(-50%,-50%) translateY(2vh);
    padding-inline:clamp(20px,5.6vw,44px);
  }
  .hail{
    font-size:clamp(21px,8.4vw,44px);
    letter-spacing:.30em;
    margin-right:-.30em;
  }
  .mails{margin-top:clamp(30px,8.5vh,80px);font-size:clamp(13px,4.15vw,19px);line-height:1.5}
  .mails__i--gap{margin-top:1.5em}
  .mails a span::after{top:1.22em}
  .lock .mark{margin-top:clamp(38px,8.5vh,92px)}
  .lock__word{
    margin-top:clamp(20px,4.4vh,38px);
    font-size:clamp(11px,3.3vw,16px);
    letter-spacing:.62em;margin-right:-.62em;
  }
  .lock__tag{
    margin-top:clamp(9px,1.9vh,17px);
    font-size:clamp(7.5px,2.15vw,10.5px);
    letter-spacing:.36em;margin-right:-.36em;
  }
}

@media (max-width:900px) and (orientation:landscape){
  .contact{transform:translate(-50%,-50%) translateY(0)}
  .hail{font-size:clamp(18px,5vw,30px)}
  .mails{margin-top:clamp(18px,5vh,40px)}
  .lock .mark{margin-top:clamp(20px,5vh,48px)}
}

/* wide screens: don't let the type balloon past the artboard proportion */
@media (min-width:2200px){
  :root{--s:min(100vw / 2100, 100vh / 960)}
}

/* ─── reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-snap-type:y proximity;scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0ms!important;
  }
  .js .ch,.js .copy .ln,.js .mails__i,.js .lock .mark{opacity:1;transform:none}
  .mails a span::after{transform:scaleX(1)}
  .bg__fallback{animation:none}
  .mark--hero{opacity:1;transform:none}
  .lyr--cue,.rail{opacity:1}
  .js .mark__ring,.js .mark__bar{stroke-dashoffset:0}
}