@font-face{
  font-family:'Saira';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:50% 125%;
  src:url(assets/fonts/saira-latin-wdth.woff2) format('woff2-variations'), url(assets/fonts/saira-latin-wdth.woff2) format('woff2');
}
@font-face{
  font-family:'Saira';font-style:italic;font-display:swap;font-weight:100 900;font-stretch:50% 125%;
  src:url(assets/fonts/saira-latin-wdth-italic.woff2) format('woff2-variations'), url(assets/fonts/saira-latin-wdth-italic.woff2) format('woff2');
}

/* Brand is black + orange (logo), so the page is locked to one dark theme. */
:root{
  --bg:#0b0a0c;
  --surface:#151417;
  --line:rgba(243,242,239,.1);
  --ink:#f3f2ef;
  --ink-2:#aeaca7;
  --accent:#f2711c;
  --accent-ink:#170b03;
  --radius:6px;
  --gutter:clamp(16px,4vw,40px);
  --max:1320px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Saira',system-ui,-apple-system,'Segoe UI',sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;}
figure{margin:0;}
h1,h2,p{margin:0;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}
.icon{width:1.15em;height:1.15em;flex-shrink:0;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.skip-link{
  position:absolute;left:16px;top:-100px;z-index:30;
  padding:.6rem 1rem;border-radius:var(--radius);
  background:var(--accent);color:var(--accent-ink);font-weight:600;text-decoration:none;
}
.skip-link:focus{top:12px;}

/* ---------- Nav (sits on top of the stage) ---------- */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:10;
  height:68px;padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg, rgba(8,7,9,.7), rgba(8,7,9,0));
}
.brand{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-style:italic;font-weight:800;font-stretch:90%;font-size:1.05rem;letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;
}
.brand img{width:36px;height:36px;}
.nav__link{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.94rem;font-weight:500;color:var(--ink-2);text-decoration:none;padding:.5rem 0;
  transition:color .25s var(--ease);
}
.nav__link:hover{color:var(--ink);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:50px;padding:0 1.35rem;
  border-radius:var(--radius);border:1px solid transparent;
  font:inherit;font-size:1rem;font-weight:600;white-space:nowrap;
  text-decoration:none;cursor:pointer;
  transition:transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.btn:active{transform:translateY(1px) scale(.985);}
.btn--primary{background:var(--accent);color:var(--accent-ink);}
.btn--primary:hover{background:#ff8534;}
.btn--ghost{border-color:rgba(243,242,239,.26);color:var(--ink);background:rgba(11,10,12,.4);}
.btn--ghost:hover{border-color:var(--ink);}
.btn--ghost .icon{transition:transform .3s var(--ease);}
.btn--ghost:hover .icon{transform:translate(2px,-2px);}

.text-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-weight:600;text-decoration:none;
  padding-bottom:2px;border-bottom:1px solid var(--accent);
}
.text-link .icon{color:var(--accent);transition:transform .3s var(--ease);}
.text-link:hover .icon{transform:translateX(3px);}

/* ---------- Stage (hero) ---------- */
.stage{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  /* bottom padding reserves room for the scroll cue so it never overlaps the buttons */
  padding:88px var(--gutter) 116px;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255,225,190,.09), transparent 60%),
    linear-gradient(175deg, #070609 0%, #0b0a0e 55%, #0b0a0c 100%);
}
.stage__lights{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;z-index:0;}
.stage__pool{
  position:absolute;top:36%;left:50%;z-index:0;
  width:min(70vw,640px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,232,205,.2) 0%, rgba(242,160,80,.08) 45%, transparent 72%);
  filter:blur(40px);pointer-events:none;
}
.stage__floor{
  position:absolute;left:0;right:0;bottom:0;height:26%;z-index:0;
  background:linear-gradient(0deg, rgba(255,200,140,.05), transparent);pointer-events:none;
}
.stage__vignette{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(125% 100% at 50% 45%, transparent 45%, rgba(4,3,5,.85) 100%);
}
.stage__content{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.stage__logo{
  width:clamp(190px,min(24vw,36vh),320px);
  filter:drop-shadow(0 0 60px rgba(255,214,168,.22)) drop-shadow(0 20px 36px rgba(0,0,0,.55));
}
.stage__title{display:flex;flex-direction:column;align-items:center;margin-top:clamp(20px,3vh,32px);}
.stage__date{
  display:block;padding:0 .08em .06em;
  font-size:clamp(2.6rem,8.4vw,7.6rem);font-style:italic;font-weight:800;font-stretch:84%;
  line-height:1;letter-spacing:-.01em;text-transform:uppercase;
  text-shadow:0 0 40px rgba(255,214,168,.18);
}
.stage__ctas{margin-top:clamp(28px,5vh,48px);display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;}

/* ---------- Scroll cue: two chevrons lighting up in sequence ---------- */
.scroll-cue{
  position:absolute;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:2;
  width:56px;height:56px;margin-left:-28px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0;border:0;background:none;color:var(--ink);cursor:pointer;
  transition:opacity .5s var(--ease), transform .25s var(--ease);
}
.scroll-cue:active{transform:translateY(2px);}
.scroll-cue.is-hidden{opacity:0;pointer-events:none;}
.scroll-cue__chev{width:30px;height:30px;opacity:.55;}
.scroll-cue__chev + .scroll-cue__chev{margin-top:-18px;}
.scroll-cue:hover .scroll-cue__chev{color:var(--accent);opacity:1;}

/* ---------- Zoom (sticky full-bleed photo + countdown) ---------- */
.zoom{position:relative;height:200vh;}
/* Sentinel: enters the viewport once the pinned photo has scrolled ~10vh */
.zoom__trigger{position:absolute;left:0;top:110vh;width:1px;height:1px;pointer-events:none;}
.zoom__sticky{
  position:sticky;top:0;height:100dvh;overflow:hidden;
  display:flex;align-items:flex-end;
}
.zoom__frame{position:absolute;inset:0;}
.zoom__frame img{width:100%;height:100%;object-fit:cover;}
.zoom__frame::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(8,7,9,.88) 0%, rgba(8,7,9,.35) 45%, rgba(8,7,9,.15) 100%);
}
.zoom__count{
  position:relative;z-index:1;width:100%;max-width:var(--max);margin:0 auto;
  padding:0 var(--gutter) clamp(40px,8vh,88px);
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:.25rem clamp(16px,2.5vw,32px);
}
.zoom__num{
  font-size:clamp(6rem,19vw,16rem);font-style:italic;font-weight:800;font-stretch:80%;
  line-height:.82;padding-right:.06em;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--accent);
}
.zoom__label{
  padding-bottom:.4em;max-width:14ch;
  font-size:clamp(1.3rem,2.8vw,2.4rem);font-style:italic;font-weight:800;font-stretch:88%;line-height:1.05;text-transform:uppercase;
}
.zoom[data-state="done"] .zoom__num{display:none;}
.zoom[data-state="done"] .zoom__label{max-width:22ch;}

/* ---------- Recap collage ---------- */
.recap{max-width:var(--max);margin:0 auto;padding:clamp(80px,12vw,160px) var(--gutter) clamp(64px,10vw,120px);}
.recap__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;margin-bottom:clamp(40px,6vw,80px);}
.recap__head h2{
  font-size:clamp(2.6rem,7vw,6rem);font-style:italic;font-weight:800;font-stretch:84%;
  line-height:1;padding-right:.08em;letter-spacing:-.02em;text-transform:uppercase;
}
.collage{
  display:grid;grid-template-columns:1fr 1.45fr 1fr;align-items:start;
  gap:clamp(12px,1.6vw,20px);
}
.collage__col{display:flex;flex-direction:column;gap:clamp(12px,1.6vw,20px);}
.collage__col--a{margin-top:clamp(40px,8vw,120px);}
.collage__col--c{margin-top:clamp(80px,14vw,200px);}
.shot{position:relative;}
.shot img{width:100%;border-radius:var(--radius);background:var(--surface);}
.shot figcaption{
  margin-top:.8rem;font-size:clamp(1.1rem,1.6vw,1.4rem);font-style:italic;font-weight:800;font-stretch:90%;line-height:1.2;text-transform:uppercase;
}
.shot figcaption span{display:block;margin-bottom:.2rem;font-size:.8rem;font-weight:600;font-stretch:100%;letter-spacing:.14em;color:var(--accent);}

/* ---------- Footer ---------- */
.footer{
  max-width:var(--max);margin:0 auto;padding:40px var(--gutter) max(32px,env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.5rem;
}
.footer__links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 2rem;}
.footer__links a{text-decoration:none;font-weight:500;border-bottom:1px solid transparent;transition:border-color .25s var(--ease);}
.footer__links a:hover{border-color:var(--accent);}
.footer__legal{margin-left:auto;font-size:.85rem;color:var(--ink-2);}

/* ---------- Toast (ICS feedback) ---------- */
.toast{
  position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));z-index:40;
  transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);
  padding:.8rem 1.1rem;border-radius:var(--radius);
  background:#1e1d21;border:1px solid var(--line);font-size:.95rem;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion:no-preference){
  /* Load sequence timed with the spotlights igniting (script.js) */
  .stage__logo{animation:logo-in 1.1s cubic-bezier(.2,.85,.25,1) .3s both;}
  .stage__date{animation:date-in .9s cubic-bezier(.4,0,.1,1) .95s both;}
  .stage__ctas{animation:rise .8s var(--ease) 1.9s both;}
  .nav{animation:fade 1s var(--ease) 2s both;}
  .scroll-cue{animation:rise .9s var(--ease) 2.6s backwards;}
  .scroll-cue__chev{opacity:.32;animation:cue-chev 1.8s ease-in-out 3.4s infinite;}
  .scroll-cue__chev + .scroll-cue__chev{animation-delay:3.65s;}
  .scroll-cue:hover .scroll-cue__chev{animation:none;}
  .stage__pool{animation:fade 2.2s var(--ease) .2s both;}

  /* Fallback reveal for browsers without scroll-driven animations */
  .js .shot, .js .recap__head{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease), transform .9s var(--ease);}
  .js .shot.is-in, .js .recap__head.is-in{opacity:1;transform:none;}

  @supports (animation-timeline: view()){
    /* Photo opens from a framed card to full bleed while the section is pinned */
    .zoom{view-timeline:--zoom block;}
    .zoom__frame{
      animation:zoom-open linear both;
      animation-timeline:--zoom;animation-range:contain 0% contain 55%;
    }
    .zoom__frame img{
      animation:zoom-img linear both;
      animation-timeline:--zoom;animation-range:contain 0% contain 100%;
    }
    .zoom__count{
      animation:rise linear both;
      animation-timeline:--zoom;animation-range:contain 35% contain 60%;
    }

    /* Columns drift at different speeds */
    .js .shot{opacity:1;transform:none;transition:none;}
    .collage{view-timeline:--collage block;}
    .collage__col--a{animation:drift-a linear both;animation-timeline:--collage;animation-range:cover;}
    .collage__col--c{animation:drift-c linear both;animation-timeline:--collage;animation-range:cover;}
    .shot img{animation:photo-in linear both;animation-timeline:view();animation-range:entry 0% entry 90%;}
  }

  .toast{animation:rise .4s var(--ease) both;}
}
/* Each chevron brightens and warms briefly, the lower one follows: reads as "down" */
@keyframes cue-chev{
  0%,100%{opacity:.32;color:var(--ink);}
  30%{opacity:1;color:#ffb27a;}
  60%{opacity:.32;color:var(--ink);}
}
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes logo-in{
  from{opacity:0;transform:translateY(10px) scale(1.15);filter:blur(8px);}
  to{opacity:1;transform:none;filter:drop-shadow(0 0 60px rgba(255,214,168,.22)) drop-shadow(0 20px 36px rgba(0,0,0,.55));}
}
@keyframes date-in{
  from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(8px);}
  to{opacity:1;clip-path:inset(-10% -5% -10% -5%);transform:none;}
}
@keyframes zoom-open{
  from{clip-path:inset(14% 16% 14% 16% round 10px);}
  to{clip-path:inset(0 0 0 0 round 0);}
}
@keyframes zoom-img{from{transform:scale(1.18);}to{transform:scale(1);}}
@keyframes drift-a{from{transform:translateY(60px);}to{transform:translateY(-60px);}}
@keyframes drift-c{from{transform:translateY(140px);}to{transform:translateY(-140px);}}
@keyframes photo-in{from{clip-path:inset(18% 0 0 0);opacity:.2;}to{clip-path:inset(0);opacity:1;}}

/* ---------- Responsive ---------- */
@media (max-width:767px){
  .zoom{height:170vh;}
  .collage{grid-template-columns:1fr 1fr;}
  .collage__col{display:contents;}
  .shot--win{grid-column:1 / -1;order:-1;}
  .collage__col--a,.collage__col--c{margin-top:0;}
  .shot img{aspect-ratio:4/5;object-fit:cover;}
  .shot--win img{aspect-ratio:auto;}
  .collage__col--b .shot:not(.shot--win){grid-column:1 / -1;}
  .collage__col--b .shot:not(.shot--win) img{aspect-ratio:16/10;}
}
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    .collage__col--a,.collage__col--c{animation:none;}
  }
}
@media (max-width:560px){
  .nav__link span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .nav__link .icon{width:24px;height:24px;}
  .stage__ctas{flex-direction:column;align-self:stretch;}
  .stage__content{width:100%;}
  .footer__legal{margin-left:0;width:100%;}
}