/* ============ VARIABLES ============ */
:root{
  --black: #060606;
  --bg: #0b0b0c;
  --bg-alt: #111113;
  --bone: #eae6da;
  --bone-dim: #b8b4a8;
  --grey: #8b8b8f;
  --red: #c41e1e;
  --red-bright: #ff2b2b;
  --red-glow: rgba(255, 43, 43, .45);
  --border: rgba(234, 230, 218, .18);
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-title: 'Big Shoulders Display', 'Oswald', sans-serif;
  --font-body: 'Oswald', sans-serif;

  /* glass panel system */
  --glass: rgba(11,11,13,.80);
  --glass-strong: rgba(9,9,11,.88);
  --glass-border: rgba(234,230,218,.14);
  --glass-shadow: 0 18px 40px rgba(0,0,0,.45);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; background: var(--bg); }
body{
  margin:0;
  background: transparent;      /* the fixed backdrop shows through */
  color: var(--bone);
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* ============ FIXED BACKDROP ============
   A fixed element, not background-attachment:fixed — iOS Safari ignores
   that and the artwork would scroll on every iPhone. Nothing here is
   animated or repainted on scroll, so scrolling stays smooth. */
#bg{
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: -2;
  background-color: var(--bg);
  background-image: url("../assets/bg.jpg");   /* portrait master — phones */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* widescreen composition once the viewport turns landscape, so the
   artwork is never over-cropped or letterboxed */
@media (min-aspect-ratio: 1/1){
  #bg{
    background-image: url("../assets/bg-wide.jpg");
    background-position: center 42%;
  }
}

/* cinematic grade, sits above the art and below every bit of content */
#bg-overlay{
  position: fixed; inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* red atmospheric glow — no white sweeps or gloss, they read as streaks
       behind the CODEFEST lettering */
    radial-gradient(80% 55% at 50% 38%, rgba(196,30,30,.20), transparent 70%),
    /* contrast + readability scrim (kept light; cards do the heavy lifting) */
    linear-gradient(180deg, rgba(6,6,7,.70) 0%, rgba(6,6,7,.78) 45%, rgba(6,6,7,.84) 100%),
    /* vignette */
    radial-gradient(130% 95% at 50% 50%, transparent 42%, rgba(0,0,0,.72) 100%);
}

body.locked{ overflow: hidden; height:100vh; }
img{ max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ font-family: var(--font-display); margin:0; letter-spacing:.02em; }

/* grain overlay across whole site */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index: 5000;
  opacity:.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ SHARED ELEMENTS ============ */
.btn-red, .btn-outline, .btn-enter{
  display:inline-block;
  font-family: var(--font-body);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.85rem;
  padding: .95em 2em;
  cursor:pointer;
  border-radius: 2px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-red{
  background: linear-gradient(135deg, var(--red), #7a0e0e);
  color: var(--bone);
  border: 1px solid var(--red-bright);
  box-shadow: 0 0 18px var(--red-glow);
}
.btn-red:hover{ transform: translateY(-2px); box-shadow: 0 4px 28px var(--red-glow); }
.btn-outline{
  background: transparent;
  color: var(--bone);
  border: 1px solid var(--border);
}
.btn-outline:hover{ border-color: var(--bone); background: rgba(255,255,255,.04); }

.kicker{
  color: var(--red-bright);
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: .75rem;
  margin: 0 0 .6em;
}
.section-head{ text-align:center; max-width: 720px; margin: 0 auto 3rem; padding: 0 1.5rem; }
.section-head h2{ font-size: clamp(1.8rem, 5vw, 2.8rem); text-transform: uppercase; }
.section-head h2 span{ color: var(--red-bright); }
.rule{ width:70px; height:3px; margin: 1.2rem auto 0; background: linear-gradient(90deg, var(--red), var(--red-bright)); }

/* ============ LOGO LOCKUP (skull + CODE / FEST / year) ============ */
/* Shared wordmark used at gate, intro and hero scale — brochure-style
   distressed poster type: bold condensed caps, dripping/icicle bottom
   edge per line, cracked-texture overlay, skull overlapping the two lines. */
.lockup{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Wordmark: the real brochure artwork at assets/codefest-logo.png.
   If that file is missing, a drawn SVG stand-in is shown instead. */
.wordmark-slot{ position:relative; line-height:0; display:flex; justify-content:center; width:100%; }
.wordmark-img{ display:block; width:auto; height:auto; }

/* the artwork is taller than it is wide, so cap by viewport height too */
.wordmark-gate .wordmark-img{ max-width: min(210px, 62vw); max-height: 34vh; }
.wordmark-hero .wordmark-img{ max-width: min(400px, 78vw); max-height: 52vh; }
/* Smaller on phones on purpose: it opens up a wider gap beside the logo
   for the reaper guardians to actually be visible at a real size, instead
   of the logo eating almost the full width and squeezing them to a
   barely-there sliver. */
@media (max-width: 640px){
  .wordmark-hero .wordmark-img{ max-width: min(300px, 56vw); }
}

/* ---- blood dripping from the hero wordmark ----
   Each drip is a hand-shaped organic streak (irregular tapered ribbon with
   a glossy highlight and a bulbous tip) that reveals top-down once on load,
   plus a teardrop that keeps detaching from the tip and falling — stretching
   as it accelerates, like gravity pulling on a real drop. Position/length/
   timing per drip come from inline custom properties on the wrapper. */
.logo-blood{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
.blood-drip-wrap{
  position:absolute;
  left: var(--x); top: var(--top);
  width: 11px; height: var(--len);
}
.blood-drip{
  display:block; width:100%; height:100%;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.55));
}
@media (prefers-reduced-motion: no-preference){
  .blood-drip{
    clip-path: inset(0 0 100% 0);
    animation: dripReveal 1.4s ease-out forwards;
    animation-delay: var(--delay);
  }
}
@keyframes dripReveal{
  to{ clip-path: inset(0 0 0% 0); }
}

.blood-drop{
  position:absolute;
  left:50%; top:100%;
  width:9px; height:11px;
  margin-left:-4.5px;
  transform-origin: 50% 0%;
  opacity:0;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
@media (prefers-reduced-motion: no-preference){
  .blood-drop{
    animation: dripFall var(--dur) cubic-bezier(.55,.06,.68,.19) infinite;
    animation-delay: calc(var(--delay) + 1.2s);
  }
}
@keyframes dripFall{
  0%{ opacity:0; transform: translateY(0) scale(1,.7); }
  8%{ opacity:1; transform: translateY(2px) scale(1,1); }
  68%{ opacity:.95; transform: translateY(32px) scale(.9,1.4); }
  92%{ opacity:.5; transform: translateY(45px) scale(.78,1.55); }
  100%{ opacity:0; transform: translateY(50px) scale(.78,1.55); }
}

/* ============ INTRO GATE ============ */
#gate{
  position: fixed; inset:0; z-index: 3000;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at center, #151515 0%, var(--black) 75%);
  transition: opacity .6s ease;
}
#gate.hidden{ opacity:0; pointer-events:none; }
.gate-noise{
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.08; mix-blend-mode: overlay;
}
.gate-content{ position:relative; text-align:center; padding: 1.5rem; }
.btn-enter{
  margin-top: 2rem;
  background: transparent; color: var(--bone);
  border: 1px solid var(--red);
  padding: 1em 2.6em;
  position:relative;
  animation: flicker 3.5s infinite;
}
.btn-enter:hover{ background: var(--red); box-shadow: 0 0 30px var(--red-glow); }
.gate-hint{ margin-top: 1.4rem; font-size:.72rem; letter-spacing:.15em; color: var(--grey); text-transform:uppercase; }

@keyframes flicker{
  0%,19%,21%,23%,80%,100%{ opacity:1; }
  20%,22%,79%{ opacity:.55; }
}

/* ============ INTRO VIDEO ============ */
#intro{
  position: fixed; inset:0; z-index: 2500;
  background: #000;
  display:none;
  align-items:center; justify-content:center;
  overflow:hidden;
}
#intro.playing{ display:flex; }
#intro.fade-out{ animation: introFadeOut .7s ease forwards; }
@keyframes introFadeOut{ to{ opacity:0; visibility:hidden; } }

/* the clip is portrait, so contain it rather than cropping the artwork away */
.intro-video{
  width:100%; height:100%;
  object-fit: contain;
  background:#000;
}

/* ============ SITE REVEAL ============ */
#site{ opacity:0; position:relative; z-index:1; }
body.site-ready #site{ opacity:1; animation: siteFadeIn .8s ease forwards; }
@keyframes siteFadeIn{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none; } }

/* ============ NAV ============ */
.nav{
  position: sticky; top:0; z-index: 1000;
  background: rgba(8,8,9,.62);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--border);
}
.nav-inner{
  max-width: 1200px; margin:0 auto; padding: 1rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav-logo{ font-family: var(--font-display); font-size:1.3rem; text-transform:uppercase; letter-spacing:.03em; display:flex; align-items:center; gap:.55em; }
.nav-badge{ height:34px; width:auto; flex-shrink:0; display:block; }
.nav-wordmark{ color: var(--bone); }
.nav-logo span span{ color: var(--red-bright); }
.nav-logo small{ font-family: var(--font-body); font-size:.55rem; color: var(--grey); letter-spacing:.15em; }
.nav-links{ display:flex; gap: 2rem; flex:1; justify-content:center; }
.nav-links a{ font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; color: var(--bone-dim); transition: color .2s; }
.nav-links a:hover{ color: var(--red-bright); }
.nav-cta{ padding: .6em 1.5em; font-size:.75rem; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; }
.nav-toggle span{ width:24px; height:2px; background: var(--bone); }

/* ============ HERO ============ */
.hero{
  position: relative;
  min-height: 92vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding: 4rem 1.5rem 3rem;
  background:
    radial-gradient(ellipse 60% 45% at 50% 22%, rgba(196,30,30,.16), transparent 62%);
  overflow:hidden;
}
/* keep every real hero element (text, logo, buttons, countdown) above the
   reaper guardians, regardless of flex stacking order */
.hero > *:not(.hero-reaper){ position:relative; z-index:2; }

/* ============ HERO REAPERS ============
   Decorative side guardians. The source art is pre-cut to a real RGBA
   alpha channel (transparent background + feathered edges), so it composites
   cleanly over any backdrop with no blend-mode tricks needed. */
.hero-reaper{
  --nx: 0px; --ny: 0px;
  position:absolute;
  top:50%;
  width: clamp(130px, 19vw, 280px);
  transform: translate(var(--nx), calc(-50% + var(--ny)));
  z-index:1;
  pointer-events:none;
  transition: transform .4s ease-out;
}
.hero-reaper-l{ left: clamp(.5rem, 3vw, 2.5rem); }
.hero-reaper-r{ right: clamp(.5rem, 3vw, 2.5rem); }
.reaper-figure{ position:relative; }
.hero-reaper img{
  display:block; width:100%; height:auto;
  filter: drop-shadow(0 0 22px rgba(196,30,30,.30));
}

@media (prefers-reduced-motion: no-preference){
  .hero-reaper-l .reaper-figure{ animation: reaperFloatL 6s ease-in-out infinite; }
  .hero-reaper-r .reaper-figure{ animation: reaperFloatR 5.5s ease-in-out infinite; }
}
@keyframes reaperFloatL{
  0%, 100%{ transform: translate(0,0) rotate(0deg); }
  50%{ transform: translate(-10px,-16px) rotate(-2.5deg); }
}
@keyframes reaperFloatR{
  0%, 100%{ transform: translate(0,0) rotate(0deg); }
  50%{ transform: translate(10px,16px) rotate(2.5deg); }
}

/* ---- eyes: two small embers glowing in the skull's hood shadow ---- */
.reaper-eyes{ position:absolute; inset:0; pointer-events:none; }
.reaper-eyes::before, .reaper-eyes::after{
  content:"";
  position:absolute;
  width:3.4%; aspect-ratio:1;
  border-radius:50%;
  background: radial-gradient(circle, #ffcf9e 0%, #ff2b2b 45%, transparent 75%);
  transform: translate(-50%,-50%);
  filter: blur(1px);
}
.reaper-eyes::before{ left:46.9%; top:15.7%; }
.reaper-eyes::after { left:53.3%; top:15.6%; }

/* ---- ember: a small flame glowing above the open palm ---- */
.reaper-ember{
  position:absolute;
  width:7%; aspect-ratio:1;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,190,130,.95) 0%, rgba(255,60,40,.65) 45%, transparent 75%);
  filter: blur(2.5px);
  transform: translate(-50%,-50%);
  pointer-events:none;
}
.hero-reaper-l .reaper-ember{ left:80.6%; top:35%; }
.hero-reaper-r .reaper-ember{ left:19.4%; top:35%; }

@media (prefers-reduced-motion: no-preference){
  .reaper-eyes::before, .reaper-eyes::after{ animation: emberPulse 2.4s ease-in-out infinite; }
  .reaper-eyes::after{ animation-delay:.5s; }
  .reaper-ember{ animation: emberFlicker 1.9s ease-in-out infinite; }
}
@keyframes emberPulse{
  0%, 100%{ opacity:.55; transform: translate(-50%,-50%) scale(.85); }
  50%{ opacity:1; transform: translate(-50%,-50%) scale(1.2); }
}
@keyframes emberFlicker{
  0%, 100%{ opacity:.5; transform: translate(-50%,-50%) scale(.88); }
  35%{ opacity:.95; transform: translate(-50%,-50%) scale(1.08); }
  55%{ opacity:.65; transform: translate(-50%,-50%) scale(.98); }
  75%{ opacity:1; transform: translate(-50%,-50%) scale(1.15); }
}

/* ---- smoke: soft mist curling up from the ground around the robe ---- */
.reaper-smoke{ position:absolute; inset:0; pointer-events:none; overflow:visible; }
.smoke-puff{
  position:absolute;
  width:32%; aspect-ratio:1;
  border-radius:50%;
  background: radial-gradient(circle, rgba(218,212,205,.32) 0%, rgba(218,212,205,.14) 45%, transparent 72%);
  filter: blur(7px);
  mix-blend-mode: screen;
  opacity:0;
  transform: translate(-50%,-50%) scale(.6);
}
.smoke-puff.p1{ left:36%; top:90%; }
.smoke-puff.p2{ left:56%; top:93%; }
.smoke-puff.p3{ left:47%; top:86%; }

@media (prefers-reduced-motion: no-preference){
  .smoke-puff.p1{ animation: smokeRise1 9s ease-in infinite; }
  .smoke-puff.p2{ animation: smokeRise2 11s ease-in infinite; animation-delay: 3s; }
  .smoke-puff.p3{ animation: smokeRise3 13s ease-in infinite; animation-delay: 6.5s; }
}
@keyframes smokeRise1{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.6); }
  18%{ opacity:.5; }
  55%{ opacity:.3; }
  100%{ opacity:0; transform: translate(-80%,-260%) scale(1.9); }
}
@keyframes smokeRise2{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.55); }
  20%{ opacity:.45; }
  55%{ opacity:.25; }
  100%{ opacity:0; transform: translate(-25%,-280%) scale(2.1); }
}
@keyframes smokeRise3{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.65); }
  16%{ opacity:.4; }
  55%{ opacity:.22; }
  100%{ opacity:0; transform: translate(-60%,-240%) scale(1.7); }
}

/* Below 900px the hero's content stack (logo, tagline, buttons, countdown)
   grows taller than the viewport, so a reaper can drift beside any of it
   vertically. Anchoring to the wordmark's own band (it's narrower than the
   hero's content column at this width, via max-width:78vw) gives a wide,
   safe gap either side of it — wide enough to show the whole figure at a
   real size instead of a sliver, without reaching into the logo, tagline,
   buttons or countdown. */
@media (max-width: 900px){
  .hero-reaper{ width: 130px; top: 38%; }
  .hero-reaper-l{ left: 24px; }
  .hero-reaper-r{ right: 24px; }
  .hero-reaper img{
    filter:
      drop-shadow(0 0 8px rgba(255,50,50,.85))
      drop-shadow(0 0 20px rgba(255,50,50,.55))
      brightness(1.3) contrast(1.15);
  }
}
/* On phones the wordmark logo is narrower than the hero's own content
   column (max-width:78vw), which opens up extra side margin beside it
   that nothing else in the stack has. Anchoring the reapers to that band
   (instead of the hero's vertical center) lets them be shown at a size
   that actually reads as a figure, rather than an invisible sliver,
   without reaching into the logo, tagline, buttons or countdown.
   The art's own outer edges fade to transparent (see reaper-left/right.png)
   so, unlike the tablet breakpoint, this shows the whole small figure
   rather than cropping down to a sliver of it — cropping here would mean
   showing only the already-transparent edge of the artwork. */
@media (max-width: 640px){
  .hero-reaper{
    width: 70px;
    top: 29%;
  }
  .hero-reaper-l{ left: -12px; }
  .hero-reaper-r{ right: -12px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference){
  .hero-reaper-l .reaper-figure{ animation-name: reaperFloatMobileL; }
  .hero-reaper-r .reaper-figure{ animation-name: reaperFloatMobileR; }
}
@keyframes reaperFloatMobileL{
  0%, 100%{ transform: translate(0,0) rotate(0deg); }
  50%{ transform: translate(-3px,-5px) rotate(-2deg); }
}
@keyframes reaperFloatMobileR{
  0%, 100%{ transform: translate(0,0) rotate(0deg); }
  50%{ transform: translate(3px,5px) rotate(2deg); }
}

.eyebrow{ position:relative; font-size:.75rem; letter-spacing:.25em; text-transform:uppercase; color: var(--grey); margin:0; }
.eyebrow-sub{ margin: .6rem 0 1.6rem; color: var(--bone-dim); }
.brand-frame{
  display:inline-block;
  border-top:1px solid var(--glass-border);
  border-bottom:1px solid var(--glass-border);
  padding: .5rem 1.6rem;
  background: rgba(10,10,12,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.brand-line{
  margin: .2rem 0;
  font-size:.75rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color: var(--bone-dim);
}
.hero-tagline{ margin: 1.6rem 0 2.2rem; font-size: clamp(.9rem, 2vw, 1.15rem); letter-spacing:.15em; text-transform:uppercase; color: var(--bone-dim); }
.hero-tagline span{ color: var(--red-bright); }
.hero-actions{ display:flex; gap: 1rem; flex-wrap:wrap; justify-content:center; margin-bottom: 3rem; }

/* ============ COUNTDOWN ============
   Wide industrial display modules matching timer.png: double-line frame
   with red corner bleed, cracked metal digits with a red edge-glow, and
   bright segmented red separators between panels. One row on desktop. */
.countdown{
  display:flex; flex-wrap:nowrap;
  align-items:center; justify-content:center;
  gap: clamp(.15rem, 1.1vw, .9rem);
  width:100%; max-width:1240px; margin-inline:auto;
}

.cd-unit{
  --cut: clamp(6px, 1.6vw, 20px);
  position:relative;
  flex:1 1 0;
  max-width: 250px;
  aspect-ratio: 1.7 / 1;
  clip-path: polygon(
    var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut),
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%,
    0 calc(100% - var(--cut)), 0 var(--cut));
  background: #060607;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.65));
}
/* outer line of the double border */
.cd-unit::before{
  content:""; position:absolute; inset:0;
  clip-path: inherit;
  padding:1.5px;
  background: linear-gradient(155deg, rgba(210,208,214,.8), rgba(90,88,94,.25) 45%, rgba(190,188,196,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}
/* red glow kissing the four corners only — small and contained,
   not a wash across the whole panel */
.cd-unit::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  clip-path: inherit;
  background:
    radial-gradient(circle at 4% 4%, rgba(255,35,35,.4), transparent 13%),
    radial-gradient(circle at 96% 4%, rgba(255,35,35,.4), transparent 13%),
    radial-gradient(circle at 4% 96%, rgba(255,35,35,.32), transparent 12%),
    radial-gradient(circle at 96% 96%, rgba(255,35,35,.32), transparent 12%);
}

/* inner line of the double border, offset a few px in */
.cd-inner{
  position:absolute; inset: clamp(2px,.8vw,9px);
  clip-path: polygon(
    calc(var(--cut) - 4px) 0, calc(100% - var(--cut) + 4px) 0, 100% calc(var(--cut) - 4px),
    100% calc(100% - var(--cut) + 4px), calc(100% - var(--cut) + 4px) 100%, calc(var(--cut) - 4px) 100%,
    0 calc(100% - var(--cut) + 4px), 0 calc(var(--cut) - 4px));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: .05em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='5'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 5 -3.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(155deg, #141416 0%, #0a0a0b 55%, #060607 100%);
  background-size: 300px 300px, auto;
  box-shadow:
    inset 0 0 0 1px rgba(200,198,206,.22),
    inset 0 10px 18px rgba(0,0,0,.85);
}
/* red backlight bleeding up from the base, ambient */
.cd-inner::after{
  content:""; position:absolute; left:20%; right:20%; bottom:-6%; height:46%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(220,30,30,.2), transparent 74%);
  pointer-events:none;
}

.cd-num{
  position:relative; z-index:1;
  font-family: var(--font-display);
  font-size: clamp(.85rem, 4.3vw, 3.3rem);
  line-height:.9; letter-spacing:.01em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.035' numOctaves='4' seed='13'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 17 -9.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"), linear-gradient(178deg, #f7f4ee 0%, #ddd9cf 46%, #a9a59a 100%);
  background-size: 220px 220px, auto;
  background-blend-mode: multiply, normal;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  /* red edge-glow: several soft drop-shadows follow the glyph alpha and
     read as a red backlight along every stroke, like the reference */
  filter:
    drop-shadow(0 0 3px rgba(255,40,40,.85))
    drop-shadow(0 0 9px rgba(255,25,25,.55))
    drop-shadow(0 2px 2px rgba(0,0,0,.85));
  transition: transform .2s cubic-bezier(.22,.61,.36,1);
}
.cd-num.cd-tick{ transform: translateY(-1px) scale(1.03); }

.cd-label{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:.4em;
  font-family: var(--font-body); font-weight:500;
  font-size: clamp(.4rem, .68vw, .58rem);
  letter-spacing:.2em; text-transform:uppercase;
  color: rgba(224,220,210,.9);
  white-space:nowrap;
}
.cd-label::before, .cd-label::after{ content:""; width:8px; height:1px; background:rgba(224,220,210,.6); }

/* separators: bright segmented red bars, as in the reference — not a
   single thin tick */
.cd-link{
  flex:0 0 auto; align-self:stretch;
  width: clamp(3px, 1.1vw, 18px);
  position:relative;
}
.cd-link::before{
  content:""; position:absolute; left:50%; top:8%; bottom:8%; width:1px;
  background: rgba(160,158,166,.28);
  transform:translateX(-50%);
}
.cd-link::after{
  content:"";
  position:absolute; left:50%; top:22%; bottom:22%; width:3px;
  transform:translateX(-50%);
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,35,35,.95) 0, rgba(255,35,35,.95) 22%,
    transparent 22%, transparent 44%
  );
  filter: drop-shadow(0 0 6px rgba(255,35,35,.9));
}

/* central skull — untouched sizing/position, no box */
.cd-emblem{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding-inline: clamp(.15rem, 1vw, 1.1rem); align-self:center; }
.cd-emblem img{
  display:block; width: clamp(30px, 10.5vw, 150px); height:auto;
  filter: drop-shadow(0 0 20px rgba(196,30,30,.4)) drop-shadow(0 6px 16px rgba(0,0,0,.85));
}

.cd-live{
  flex:1 0 100%; margin:1.1rem 0 0; text-align:center;
  font-family: var(--font-title); font-weight:800;
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  letter-spacing:.24em; text-transform:uppercase;
  color: var(--red-bright); text-shadow: 0 0 24px rgba(255,43,43,.5);
}

/* The countdown always stays DAYS → HOURS → SKULL → MINUTES → SECONDS in
   one row, at every viewport — it never wraps into a 2x2 grid. Below
   640px the clamp() floors on the unit size, digits, skull and separators
   (set above) are the mechanism: they keep shrinking together instead of
   bottoming out and forcing a wrap, so phones get the exact same
   composition as desktop, just smaller. */

/* ============ ABOUT ============ */
.about{
  max-width: 760px; margin: 6rem auto; padding: 2.5rem 2rem; text-align:center;
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  box-shadow: var(--glass-shadow);
}
.about-copy{ color: var(--bone-dim); line-height:1.8; font-size:1rem; }
.about-tag{
  font-family: var(--font-display);
  letter-spacing:.2em;
  color: var(--red-bright);
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  margin: 0 0 1.2rem;
  text-shadow: 0 0 18px rgba(255,43,43,.35);
}
.about-manifesto{
  font-family: var(--font-title);
  font-weight:500;
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  line-height:1.9;
  color: var(--bone);
  letter-spacing:.01em;
}
.about-checklist{ display:flex; flex-wrap:wrap; justify-content:center; gap: 1.2rem 2rem; margin-top: 1.8rem; }
.about-checklist li{ font-size:.85rem; letter-spacing:.05em; text-transform:uppercase; color: var(--bone); padding-left:1.3em; position:relative; }
.about-checklist li::before{ content:""; position:absolute; left:0; top:.35em; width:9px; height:9px; border:1px solid var(--red-bright); border-radius:50%; }

/* ============ EVENTS ============ */
.events{ max-width: 1200px; margin: 0 auto; padding: 5rem 1.5rem; }
.events-alt{ background: rgba(10,10,12,.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); max-width:none; }
.events-alt > *{ max-width:1200px; margin-left:auto; margin-right:auto; }
.events-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.event-card{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  display:flex; flex-direction:column;
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.event-card:hover{ border-color: rgba(255,43,43,.55); transform: translateY(-4px); box-shadow: 0 22px 50px rgba(0,0,0,.55), 0 0 26px rgba(196,30,30,.18); }

/* poster — sized to the artwork's own proportions so nothing is cropped;
   only the empty placeholder state needs a fixed box. Event number badge
   overlaid top-left. */
.event-poster{
  position:relative;
  background: linear-gradient(155deg, #1a1a1e 0%, #0a0a0c 100%);
  overflow:hidden;
  cursor:pointer;
}
.event-poster:focus-visible{ outline:2px solid var(--red-bright); outline-offset:-2px; }
.event-poster img{
  display:block;
  width:100%; height:auto;
  max-height:420px;
  object-fit:contain;
  transition: transform .45s ease;
}
.event-card:hover .event-poster img{ transform: scale(1.03); }
.event-poster.no-poster img{ display:none; }
.event-poster.no-poster{ aspect-ratio: 16 / 10; border-bottom: 1px dashed var(--border); }
.event-poster.no-poster::after{
  content:"EVENT POSTER";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.62rem; letter-spacing:.22em; color: var(--grey); opacity:.45;
  text-transform:uppercase;
}
.event-num{
  position:absolute; top:.7rem; left:.7rem; z-index:1;
  font-family: var(--font-display);
  color: var(--red-bright);
  font-size:1rem;
  width:34px; height:34px;
  background: rgba(6,6,7,.72);
  backdrop-filter: blur(4px);
  border:1px solid var(--red);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}

.event-body{ flex:1; display:flex; flex-direction:column; gap:1rem; padding: 1.1rem 1.2rem 1.3rem; }
.event-title{
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height:1.15;
  letter-spacing:.01em;
  text-transform:uppercase;
  color: var(--bone);
}

.event-more{
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:.5em;
  padding:.55em 1.05em;
  font-family: var(--font-body); font-weight:600;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--bone-dim);
  background:transparent;
  border:1px solid var(--border);
  border-radius:2px;
  cursor:pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.event-more svg{ width:15px; height:15px; }
.event-more:hover{ border-color: var(--red); background: rgba(196,30,30,.12); color: var(--red-bright); }

/* ============ EVENT DETAILS MODAL ============ */
.event-modal{ position:fixed; inset:0; z-index:4000; display:flex; align-items:center; justify-content:center; padding:1.25rem; }
.event-modal[hidden]{ display:none; }
.event-modal-backdrop{ position:absolute; inset:0; background: rgba(4,4,5,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.event-modal-panel{
  position:relative; z-index:1;
  width:100%; max-width:560px; max-height:88vh; overflow-y:auto;
  background: var(--bg-alt);
  border:1px solid var(--glass-border);
  border-radius:10px;
  box-shadow: 0 30px 70px rgba(0,0,0,.75);
  animation: eventModalIn .25s cubic-bezier(.22,.61,.36,1);
}
@keyframes eventModalIn{ from{ opacity:0; transform: translateY(14px) scale(.98); } to{ opacity:1; transform:none; } }
.event-modal-close{
  position:absolute; top:.7rem; right:.7rem; z-index:2;
  width:36px; height:36px; border-radius:50%;
  background: rgba(6,6,7,.72);
  border:1px solid var(--glass-border);
  color: var(--bone);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.event-modal-close svg{ width:16px; height:16px; }
.event-modal-close:hover{ border-color: var(--red); color: var(--red-bright); }
.event-modal-poster{ position:relative; overflow:hidden; background: linear-gradient(155deg, #1a1a1e 0%, #0a0a0c 100%); }
.event-modal-poster img{ display:block; width:100%; height:auto; max-height:60vh; object-fit:contain; margin:0 auto; }
.event-modal-poster.no-poster{ aspect-ratio:16/9; }
.event-modal-poster.no-poster img{ display:none; }
.event-modal-poster.no-poster::after{
  content:"EVENT POSTER";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.68rem; letter-spacing:.22em; color: var(--grey); opacity:.45;
  text-transform:uppercase;
}
.event-modal-body{ padding: 1.4rem 1.6rem 1.8rem; }
.event-modal-kicker{ margin:0 0 .4rem; color: var(--red-bright); letter-spacing:.25em; text-transform:uppercase; font-size:.68rem; }
.event-modal-title{ margin:0 0 .9rem; font-family: var(--font-display); font-size: clamp(1.4rem, 4vw, 2rem); text-transform:uppercase; color: var(--bone); }
.event-modal-desc{ margin:0; color: var(--bone-dim); line-height:1.8; font-size:.95rem; white-space:pre-line; }

/* ---- avatar lightbox (Built with hands by) ---- */
.avatar-modal{ position:fixed; inset:0; z-index:4000; display:flex; align-items:center; justify-content:center; padding:1.25rem; }
.avatar-modal[hidden]{ display:none; }
.avatar-modal-backdrop{ position:absolute; inset:0; background: rgba(4,4,5,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.avatar-modal-panel{
  position:relative; z-index:1;
  width:100%; max-width:420px;
  background: var(--bg-alt);
  border:1px solid var(--glass-border);
  border-radius:10px;
  box-shadow: 0 30px 70px rgba(0,0,0,.75);
  padding: 1.4rem;
  text-align:center;
  animation: eventModalIn .25s cubic-bezier(.22,.61,.36,1);
}
.avatar-modal-close{
  position:absolute; top:.7rem; right:.7rem; z-index:2;
  width:36px; height:36px; border-radius:50%;
  background: rgba(6,6,7,.72);
  border:1px solid var(--glass-border);
  color: var(--bone);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.avatar-modal-close svg{ width:16px; height:16px; }
.avatar-modal-close:hover{ border-color: var(--red); color: var(--red-bright); }
.avatar-modal-panel img{
  display:block; width:100%; height:auto; max-height:70vh;
  object-fit:contain; border-radius:6px; margin:0 auto 1rem;
  background: linear-gradient(155deg, #1a1a1e 0%, #0a0a0c 100%);
}
.avatar-modal-name{ margin:0; font-family: var(--font-display); font-size:1.2rem; letter-spacing:.06em; text-transform:uppercase; color: var(--bone); }

/* ============ INFO STRIP ============ */
.info-strip{
  max-width: 1000px; margin: 1rem auto 6rem; padding: 1.8rem 2rem;
  border-radius:6px;
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);

  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap: 2rem;
}
.info-item{ display:flex; align-items:center; gap:.8rem; }
.info-icon{ width:26px; height:26px; color: var(--red-bright); flex-shrink:0; }
.info-item label{ display:block; font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color: var(--grey); }
.info-item p{ margin:.2rem 0 0; font-size:.95rem; color: var(--bone); }
.info-divider{ width:1px; height:34px; background: var(--border); }

/* ============ COORDINATORS ============ */
.coordinators{ max-width: 1100px; margin: 0 auto; padding: 5rem 1.5rem; text-align:center; }
.coord-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.5rem; }
.coord-card{
  border-radius:6px; padding: 2rem 1rem;
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(115%);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);

}
.coord-avatar{ width:44px; height:44px; color: var(--grey); margin: 0 auto .9rem; display:block; }
.coord-role{
  margin:0 0 .35rem;
  font-size:.62rem; letter-spacing:.28em; text-transform:uppercase;
  color: var(--red-bright);
}
.coord-name{ margin:0; font-size:.9rem; letter-spacing:.05em; color: var(--bone); }
.coord-contact{ margin:.4rem 0 0; font-size:.78rem; color: var(--grey); }

.coord-actions{ margin-top:.9rem; display:flex; align-items:center; justify-content:center; gap:.5rem; }

/* call button — the number lives only in the tel: href, never on screen */
.coord-call{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-height:40px; padding:.55em 1.4em;
  border:1px solid var(--red); border-radius:2px;
  background: transparent; color: var(--bone);
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.coord-call svg{ width:15px; height:15px; }
.coord-call:hover{ background: var(--red); box-shadow: 0 0 20px var(--red-glow); transform: translateY(-2px); }

.coord-social{
  width:40px; height:40px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:2px;
  color: var(--bone-dim);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.coord-social svg{ width:18px; height:18px; }
.coord-social:hover{ color: var(--red-bright); border-color: var(--red); transform: translateY(-2px); }

/* ============ FAQ ============ */
.faq{ max-width:820px; margin:0 auto; padding: 6rem 1.5rem; }
.faq-list{ display:flex; flex-direction:column; gap:.9rem; }
.faq-item{
  border:1px solid var(--glass-border);
  border-radius:8px;
  background: var(--glass);
  overflow:hidden;
}
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.4rem; background:none; border:none; cursor:pointer;
  color: var(--bone); font-family: var(--font-body); font-size:1rem; text-align:left;
  transition: color .2s ease;
}
.faq-q:hover{ color: var(--red-bright); }
.faq-caret{ width:18px; height:18px; flex-shrink:0; color: var(--grey); transition: transform .3s ease, color .2s ease; }
.faq-item.is-open .faq-caret{ transform: rotate(180deg); color: var(--red-bright); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
.faq-a > p{
  margin:0; padding: 0 1.4rem 1.2rem;
  color: var(--bone-dim); line-height:1.7; font-size:.92rem;
}
.faq-item.is-open .faq-a{ max-height: 320px; }

/* ============ REGISTER CTA ============ */
.register-cta{
  text-align:center; padding: 6rem 1.5rem;
  background: radial-gradient(ellipse at center, rgba(196,30,30,.14), transparent 65%), rgba(6,6,7,.42);
}
.register-cta h2{ font-size: clamp(1.8rem, 5vw, 3rem); text-transform:uppercase; color: var(--bone); }
.register-cta h2 span{ color: var(--red-bright); }
.qr-box{
  width: 160px; height:160px; margin: 2rem auto; padding:10px;
  border: 2px solid var(--border); border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg-alt);
  transition: border-color .2s ease, transform .2s ease;
}
.qr-box:hover{ border-color: var(--red); transform: translateY(-2px); }
.qr-box img{ display:block; width:100%; height:100%; object-fit:contain; }
.register-hint{ margin-top: 2rem; font-size:.75rem; letter-spacing:.3em; color: var(--grey); text-transform:uppercase; }

/* ============ FOOTER ============ */
.footer{ padding: 4rem 1.5rem 2.5rem; border-top: 1px solid var(--border); }

.footer-grid{
  max-width: 1100px; margin: 0 auto;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
}
.footer-head{
  font-family: var(--font-body);
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color: var(--red-bright);
  margin: 0 0 .9rem;
}
.footer-col .footer-head:not(:first-child){ margin-top: 2rem; }
.footer-line-item{
  display:flex; align-items:flex-start; gap:.7rem;
  margin: 0 0 .6rem; font-size:.9rem; color: var(--bone-dim); line-height:1.6;
}
.footer-line-item a:hover{ color: var(--red-bright); }
.footer-icon{ width:18px; height:18px; color: var(--red-bright); flex-shrink:0; margin-top:.2em; }

/* name + round call button; the number stays in the tel: href only */
.footer-person{
  display:flex; align-items:center; gap:.8rem;
  margin: 0 0 .7rem; font-size:.9rem; color: var(--bone-dim);
}
.call-round{
  width:38px; height:38px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--red); border-radius:50%;
  color: var(--red-bright);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.call-round svg{ width:16px; height:16px; }
.call-round:hover{ background: var(--red); color: var(--bone); box-shadow: 0 0 18px var(--red-glow); transform: translateY(-2px); }

.footer-map{
  margin-top: 1.2rem;
  border:1px solid var(--border); border-radius:4px; overflow:hidden;
  aspect-ratio: 16 / 10;
}
.footer-map iframe{
  width:100%; height:100%; border:0; display:block;
  /* flip the light map into the dark theme */
  filter: invert(90%) grayscale(85%) contrast(1.05);
}

.socials{ display:flex; gap:.8rem; }
.social{
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color: var(--bone-dim);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.social svg{ width:20px; height:20px; }
.social:hover{ color: var(--red-bright); border-color: var(--red); transform: translateY(-2px); }

.built-by{ max-width:1100px; margin: 3.5rem auto 0; padding-top: 2.5rem; border-top:1px solid var(--border); text-align:center; }
.built-label{ margin:0 0 1.2rem; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color: var(--grey); }
.built-row{ display:flex; flex-wrap:wrap; justify-content:center; gap: 1.8rem; }
.built-person{ display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.built-avatar{
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--border); background: var(--bg-alt);
  display:flex; align-items:center; justify-content:center;
  color: var(--grey); overflow:hidden;
}
.built-avatar svg{ width:26px; height:26px; }
.built-avatar img{ width:100%; height:100%; object-fit:cover; }
.built-name{ font-size:.75rem; color: var(--bone-dim); letter-spacing:.05em; }

.built-avatar-btn{
  padding:0; font:inherit; cursor:pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.built-avatar-btn:hover, .built-avatar-btn:focus-visible{
  border-color: var(--red); transform: translateY(-2px);
}

.footer-bottom{ text-align:center; margin-top: 3rem; padding-top: 2rem; border-top:1px solid var(--border); }
.footer-tag{ font-size:.75rem; letter-spacing:.3em; text-transform:uppercase; color: var(--bone-dim); }
.footer-tag span{ color: var(--red-bright); }
.footer-line{ margin: .8rem 0; font-family: var(--font-display); letter-spacing:.1em; color: var(--bone); }
.footer-dept{ margin: 0 0 1rem; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color: var(--bone-dim); }
.footer-copy{ font-size:.7rem; color: var(--grey); }


/* type sitting directly on the artwork keeps a soft shadow for contrast */
.section-head h2, .kicker, .hero-tagline, .register-hint,
.footer-tag, .footer-line{ text-shadow: 0 2px 18px rgba(0,0,0,.8); }

/* ============ CINEMATIC HERO TYPE ============ */
.hero-title-sub{
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(1.15rem, 3.2vw, 2rem);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--bone);
  margin: 1.4rem 0 .2rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.75);
}
.brand-line{ font-family: var(--font-title); font-weight:700; }

/* ============ SCROLL REVEAL ============ */
.js [data-reveal]{
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.js [data-reveal].is-visible{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.07s; }
[data-reveal-delay="2"]{ transition-delay:.14s; }
[data-reveal-delay="3"]{ transition-delay:.21s; }
[data-reveal-delay="4"]{ transition-delay:.28s; }
[data-reveal-delay="5"]{ transition-delay:.35s; }
[data-reveal-delay="6"]{ transition-delay:.42s; }

/* no JS / reduced motion: never leave content hidden */

@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1; transform:none; transition:none; }
  .btn-enter{ animation:none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 820px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-links.open{
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background: var(--bg); padding:.75rem 1.5rem 1.25rem; gap:0;
    border-bottom:1px solid var(--border);
  }
  /* full-width rows so each link is a comfortable tap target */
  .nav-links.open a{ padding:.8rem 0; font-size:.95rem; }
  .nav-inner{ gap: .9rem; }
  .nav-logo{ white-space:nowrap; }
  .nav-toggle{
    width:44px; height:44px; margin-right:-10px;
    align-items:center; justify-content:center;
  }
}

@media (max-width: 700px){
  .hero{ padding-top: 2.5rem; }
}

@media (max-width: 600px){
  /* keep the nav on one line: drop the logo's year, tighten the CTA */
  .nav-inner{ padding: .45rem 1.2rem; }
  .nav-logo{ font-size:1.15rem; gap:.45em; }
  .nav-badge{ height:28px; }
  .nav-logo small{ display:none; }
  .nav-cta{ white-space:nowrap; padding:.75em 1.1em; font-size:.68rem; letter-spacing:.05em; }

  .section-head{ margin-bottom: 2.2rem; }
  .events{ padding: 3.5rem 1.25rem; }
  .coordinators{ padding: 3.5rem 1.25rem; }
  .about{ margin: 4rem auto; }

  /* the strip is a bordered box — it needs a gutter, not a full-bleed edge */
  .info-strip{ margin: 1rem 1.25rem 4rem; padding: 1.5rem 1.25rem; }

  .hero-actions{ gap:.75rem; margin-bottom: 2.2rem; }
  .register-cta{ padding: 4rem 1.25rem; }
}

@media (max-width: 480px){
  .info-strip{ flex-direction:column; align-items:flex-start; gap:1.4rem; }
  .info-divider{ display:none; }
  .hero-actions .btn-red, .hero-actions .btn-outline{ flex:1 1 auto; text-align:center; }
}