/* ============================================================================
   NextGen Summit — The Experience
   A sequence of scenes rather than a stack of sections. Composition only: every
   colour, face and easing comes from site.css.
   ========================================================================= */

/* The film. Grey noise at full alpha, blended over the picture rather than laid on top of
   the page: at overlay, mid grey is neutral, so only the deviation shows and the grain lands
   in the midtones the way it does on 35mm. Nothing animates it. */
:root{--film:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23f)'/%3E%3C/svg%3E")}
.exh__media::after,.exe__media::after,.stg__shots picture::after,.sn > picture::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:var(--film);background-size:140px 140px;opacity:.19;mix-blend-mode:overlay}
@media (max-width:860px){
  .exh__media::after,.exe__media::after,.sn > picture::after{background-size:104px 104px;opacity:.22}
}

/* ---------- the entrance ----------
   Black, then the wordmark, then the light comes up on it, then it dissolves into the room.
   Nothing travels across the screen and nothing is clipped: the turquoise arrives by fading
   a second copy of the wordmark over the first, which is a change in light, not a stripe. */
.intro{display:none}
html.is-intro .intro{display:grid;position:fixed;inset:0;z-index:500;place-items:center;
  background:#04090A;pointer-events:none;transition:opacity 1.15s var(--ease),visibility 1.15s}
.intro__wm{position:relative;font-size:clamp(66px,11vw,170px);line-height:.9;white-space:nowrap;
  opacity:0;transform:scale(.982);
  transition:opacity .62s var(--ease),transform 1.7s var(--ease)}
/* the house light behind it, raised with the colour rather than swept across it */
.intro__wm::before{content:"";position:absolute;left:50%;top:50%;width:190%;height:420%;
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .9s var(--ease);
  background:radial-gradient(50% 50% at 50% 50%,rgba(31,199,190,.17) 0%,rgba(31,199,190,.05) 46%,rgba(31,199,190,0) 72%)}
.intro__off{display:block;color:#fff}
.intro__off > span,.intro__on > span{display:inline-block}
/* each letter rises out of a soft blur, one after another */
.intro__off > span{opacity:0;transform:translate3d(0,.3em,0);filter:blur(10px)}
html.in-1 .intro__off > span{opacity:1;transform:none;filter:blur(0);
  transition:opacity .55s var(--ease) calc(var(--i) * 65ms),transform .95s var(--ease) calc(var(--i) * 65ms),filter .7s var(--ease) calc(var(--i) * 65ms)}
/* the colour: the brand's turquoise and print plates as one gradient flowing through the letters.
   The gradient repeats once across a background twice the width, so sliding it by exactly one
   repeat loops without a seam. The letters here never move, so the clip to text holds. */
/* the box reaches below the baseline (padding-bottom) so the tail of the g takes the colour too */
.intro__on{position:absolute;left:0;top:0;padding-bottom:.4em;white-space:nowrap;color:transparent;opacity:0;
  background:linear-gradient(90deg,var(--accent),var(--cyan) 12.5%,var(--magenta) 25%,var(--yellow) 37.5%,var(--accent) 50%,var(--cyan) 62.5%,var(--magenta) 75%,var(--yellow) 87.5%,var(--accent));
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  animation:intro-flow 2.6s linear infinite;transition:opacity .8s var(--ease)}
@keyframes intro-flow{from{background-position:0% 50%}to{background-position:100% 50%}}
/* SUMMIT, tucked under the end of the wordmark as in the flyer lockup, drawing its tracking in */
.intro__summit{position:absolute;right:0;top:91%;margin-right:-.62em;font:700 max(10px,.095em)/1 var(--f-sans);
  letter-spacing:1.3em;text-transform:uppercase;color:#fff;opacity:0;
  transition:opacity .7s var(--ease),letter-spacing 1.1s var(--ease)}
html.in-1 .intro__wm{opacity:1;transform:scale(1)}
html.in-2 .intro__on{opacity:1}
html.in-2 .intro__summit{opacity:1;letter-spacing:.62em}
html.in-2 .intro__wm::before{opacity:1}
@media (prefers-reduced-motion:reduce){
  .intro__off > span,.intro__summit{transition:none!important;transform:none;filter:none}
  .intro__summit{letter-spacing:.62em}
  .intro__on{animation:none}
}
/* the dissolve: the wordmark goes as the room arrives, and they overlap while it happens */
html.in-3 .intro{opacity:0;visibility:hidden}
html.in-3 .intro__wm{opacity:0;transform:scale(1.035);
  transition:opacity .92s var(--ease),transform 1.5s var(--ease)}
html.is-intro .exh__media img{opacity:0;transform:scale(1.075)}
html.in-3 .exh__media img{opacity:1;transform:none;
  transition:opacity 1.25s var(--ease),transform 2.4s var(--ease)}
html.is-intro .exh__in{opacity:0;transform:translate3d(0,14px,0)}
html.in-3 .exh__in{opacity:1;transform:none;
  transition:opacity .72s .5s var(--ease),transform .9s .5s var(--ease)}

/* ---------- 01 the hero: the Gordon Center ---------- */
.exh{position:relative;min-height:100svh;display:grid;align-items:end;overflow:clip;background:#0B0B0F;color:#fff}
.exh__media{position:absolute;inset:0;margin:0}
.exh__media img{width:100%;height:100%;object-fit:cover;object-position:50% 48%}
.exh__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(4,9,10,.5) 0%,rgba(4,9,10,.06) 32%,rgba(4,9,10,.4) 70%,rgba(4,9,10,.88) 100%)}
.exh__in{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:calc(var(--nav-h) + 40px) var(--gutter) clamp(42px,7vh,84px)}
.exh__t{margin-top:clamp(16px,2.6vh,26px);font-size:clamp(52px,9vw,148px);line-height:1.06;letter-spacing:-.04em;
  text-shadow:0 2px 40px rgba(4,9,10,.5)}
.exh__meta{margin-top:clamp(20px,3vh,32px);font:700 clamp(11px,1vw,13px)/1.7 var(--f-sans);
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.exh__cue{margin-top:clamp(22px,3.4vh,34px);font:700 11px/1 var(--f-sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent)}

/* ---------- 02 the shape of the day ---------- */
.exo{max-width:var(--maxw);margin:0 auto;padding:clamp(66px,12vh,150px) var(--gutter)}
.exo__t{margin-top:clamp(14px,2.2vh,22px);font-size:clamp(46px,7.4vw,118px);line-height:1.06;letter-spacing:-.04em}
.exo__p{margin-top:clamp(22px,3.2vh,34px);max-width:44ch;font:500 clamp(17px,1.5vw,23px)/1.5 var(--f-sans);color:var(--ink-2)}
.exo__two{list-style:none;margin:clamp(34px,5.5vh,66px) 0 0;padding:0;border-top:1px solid var(--rule)}
.exo__two li{display:grid;grid-template-columns:minmax(6.5rem,8rem) minmax(0,1fr);gap:4px clamp(22px,3.4vw,54px);
  padding:clamp(20px,3vh,30px) 0;border-bottom:1px solid var(--rule);align-items:baseline}
.exo__k{font:800 clamp(14px,1.3vw,18px)/1.2 var(--f-sans);letter-spacing:.1em;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.exo__n{font:800 clamp(19px,2vw,30px)/1.2 var(--f-sans);letter-spacing:-.01em}
.exo__v{grid-column:2;font:500 clamp(15px,1.2vw,17.5px)/1.55 var(--f-sans);color:var(--ink-2)}
.exo__fine{margin-top:clamp(20px,3vh,28px);font:600 13px/1.5 var(--f-sans);color:var(--ink-3)}
@media (max-width:620px){.exo__two li{grid-template-columns:1fr;gap:3px}.exo__v{grid-column:1}}

/* ---------- 03 the living agenda ----------
   One stage. The photograph is held while the scenes pass over it, and between scenes the
   lights go down, a turquoise cue crosses, and they come back up on the next one. Every
   part of that is opacity and transform on four elements that already exist. */
.stg{position:relative;background:#06090A}
.stg__frame{position:sticky;top:0;height:100svh;overflow:clip;background:#06090A}
.stg__shots{position:absolute;inset:0}
.stg__shots picture{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.1s var(--ease)}
.stg__shots picture.is-on{opacity:1}
.stg__shots img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
  filter:grayscale(1) contrast(1.02) brightness(1.08);transform:scale(1.07);transition:transform 2.6s var(--ease)}
.stg__shots picture.is-on img{transform:none}
/* dark at the edges, open in the middle: the seam between one scene and the next is then
   black meeting black, and the people are visible in between */
.stg__veil{position:absolute;inset:0;z-index:1;background:
  linear-gradient(180deg,rgba(6,9,10,.9) 0%,rgba(6,9,10,.16) 24%,rgba(6,9,10,.14) 58%,rgba(6,9,10,.84) 100%),
  radial-gradient(142% 100% at 50% 46%,rgba(6,9,10,0) 44%,rgba(6,9,10,.5) 100%)}
/* No cue crosses the frame any more. The change is the two pictures overlapping while one
   fades out and the other fades in, which is what a dissolve is. */
/* The house lights. Between the acts the picture goes out entirely and the act stands on a
   field of its own: black for the first, paper for the second. It sits above the pictures and
   the playbill, and below .stg__flow, so the act title reads on top of it. */
.stg__curtain{position:absolute;inset:0;z-index:2;opacity:0;background-color:#06090A;
  transition:opacity .85s var(--ease),background-color .85s var(--ease)}
.stg.is-card .stg__curtain{opacity:1}
.stg.is-card--paper .stg__curtain{background-color:var(--paper)}
/* grain over the card too, the way a title card carries it; less of it on paper, where dark
   noise would read as dirt rather than film */
.stg.is-card--paper .stg__grain{opacity:.05}
/* a finer film grain than the page carries, for the dark scenes only */
.stg__grain{position:absolute;inset:0;z-index:3;opacity:.13;background-size:160px 160px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 1.4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E")}

/* the playbill: where you are, at the edge of the frame */
.stg__meta{position:absolute;left:var(--gutter);bottom:clamp(22px,4vh,38px);display:flex;align-items:baseline;gap:14px;
  font:800 10.5px/1 var(--f-sans);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.stg__act{color:var(--accent)}
.stg__n{font-variant-numeric:tabular-nums}
.stg__rule{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(14px,2.4vh,22px);height:1px;
  background:rgba(255,255,255,.16);overflow:hidden}
.stg__rule i{display:block;height:100%;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:0 50%;
  transition:transform .6s var(--ease)}

/* the words, over the held frame */
.stg__flow{position:relative;z-index:1;margin-top:-100svh;max-width:var(--maxw);margin-inline:auto;
  padding:0 var(--gutter);color:#fff}
/* The act no longer shares the frame with a photograph, so it needs no pool of shade. It is
   taller than the screen and its contents stick, which is what holds the title still in the
   middle while the field is up: the card is read, not scrolled past. */
.act{position:relative;min-height:126svh}
.act__in{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
/* the title arrives after the field has gone out, and opens as it comes */
.act__k,.act__t{opacity:0;transform:scale(.84);transition:opacity .85s var(--ease),transform 1.5s var(--ease)}
.act.is-on .act__k{opacity:1;transform:none;transition-delay:.42s}
.act.is-on .act__t{opacity:1;transform:none;transition-delay:.54s}
.act__k{font:800 clamp(12px,1.25vw,16px)/1 var(--f-sans);letter-spacing:.34em;text-transform:uppercase;color:var(--accent)}
.act__t{margin-top:clamp(18px,3vh,32px);font-size:clamp(46px,8vw,132px);line-height:.95;letter-spacing:-.04em}
/* the second act is announced in ink on paper, so the accent takes its readable tone */
.act[data-card="paper"] .act__k{color:var(--accent-ink)}
.act[data-card="paper"] .act__t{color:var(--ink)}
/* nothing of the scenes shows through a card */
.stg.is-card .sn{opacity:0}

.sn{position:relative;min-height:88svh;display:flex;flex-direction:column;justify-content:center;max-width:32rem;
  --sx:30%;opacity:.26;transform:translate3d(0,14px,0);
  transition:opacity .7s var(--ease),transform .9s var(--ease)}
.sn.is-on{opacity:1;transform:none}
/* a pool of shade under the lit scene, so the words hold against whatever the picture is
   doing behind them. It arrives with the scene and leaves with it. */
.sn::before{content:"";position:absolute;inset:-8vh -7vw;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(58% 58% at var(--sx) 50%,rgba(5,8,9,.78) 0%,rgba(5,8,9,.42) 54%,rgba(5,8,9,0) 100%);
  transition:opacity .7s var(--ease)}
.sn.is-on::before{opacity:1}
.sn--right{--sx:70%;margin-left:auto;text-align:right}
.sn--big{max-width:40rem}
.sn__k{font:800 10.5px/1.4 var(--f-sans);letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.sn__t{margin-top:clamp(12px,1.8vh,18px);font-size:clamp(38px,5.4vw,84px);line-height:1;letter-spacing:-.035em;
  text-shadow:0 2px 36px rgba(4,9,10,.52)}
.sn--big .sn__t{font-size:clamp(42px,6.4vw,104px)}
.sn__when{margin-top:clamp(14px,2vh,20px);font:800 clamp(13px,1.15vw,16px)/1 var(--f-sans);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.sn__p{margin-top:clamp(12px,1.8vh,18px);font:500 clamp(16px,1.3vw,19px)/1.55 var(--f-sans);color:rgba(255,255,255,.88)}
.sn__go{margin-top:clamp(16px,2.2vh,22px)}
.sn__go a{color:#fff;font:800 12px/1 var(--f-sans);letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:6px;transition:color .4s var(--ease)}
@media (hover:hover){.sn__go a:hover{color:var(--accent)}}
.stg__fine{padding-bottom:clamp(70px,12vh,140px);max-width:44ch;font:600 13px/1.6 var(--f-sans);color:rgba(255,255,255,.62)}
.stg__note{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) clamp(44px,7vh,80px);
  font:600 12px/1.6 var(--f-sans);color:rgba(255,255,255,.42)}

/* Phones keep the held frame. It is the only way the scenes genuinely dissolve into one
   another: one picture surface that crossfades, rather than a stack of photographs each
   ending in its own black. Only the proportions change. */
@media (max-width:860px){
  .act{min-height:116svh}
  .act__in{padding:0 4vw}
  .act__k{letter-spacing:.3em}
  .act__t{font-size:clamp(40px,11.5vw,62px)}
  .sn{min-height:84svh;max-width:none;text-align:left}
  .sn--right{margin-left:0;text-align:left}
  .sn--big{max-width:none}
  .sn::before{inset:-6vh -12vw;background:radial-gradient(70% 50% at 36% 62%,rgba(5,8,9,.82) 0%,rgba(5,8,9,.46) 56%,rgba(5,8,9,0) 100%)}
  .sn__t{font-size:clamp(34px,10vw,52px)}
  .sn__p{font-size:16px}
  .stg__shots img{transform:none}
  .stg__shots picture.is-on img{transform:none}
  .stg__meta{font-size:9.5px;letter-spacing:.2em;gap:10px}
  .stg__fine{margin-top:clamp(26px,5vh,40px)}
}

@media (prefers-reduced-motion:reduce){
  .sn{opacity:1;transform:none}
  .stg.is-card .sn{opacity:0}
  .stg__shots img,.stg__shots picture.is-on img{transform:none;transition:none}
  /* the card still appears, because it is the structure of the section and not an effect;
     it simply does not travel or open */
  .act__k,.act__t{transform:none;transition:opacity .2s linear}
  .act.is-on .act__k,.act.is-on .act__t{transition-delay:.1s}
  .stg__curtain{transition:opacity .25s linear,background-color .25s linear}
}

/* ---------- 05 what is still to come ---------- */
.exs{max-width:var(--maxw);margin:0 auto;padding:clamp(66px,12vh,150px) var(--gutter)}
.exs__t{margin-top:clamp(14px,2.2vh,22px);font-size:clamp(42px,6.6vw,104px);line-height:1.06;letter-spacing:-.04em}
.exs__p{margin-top:clamp(20px,3vh,30px);max-width:46ch;font:500 clamp(16px,1.4vw,21px)/1.55 var(--f-sans);color:var(--ink-2)}
.exs__list{list-style:none;margin:clamp(34px,5.5vh,64px) 0 0;padding:0;border-top:1px solid var(--rule);max-width:70ch}
.exs__list > li{display:grid;grid-template-columns:minmax(10rem,16rem) minmax(0,1fr);gap:6px clamp(20px,3vw,48px);
  padding:clamp(16px,2.4vh,24px) 0;border-bottom:1px solid var(--rule)}
.exs__q{font:800 clamp(13px,1.1vw,15px)/1.35 var(--f-sans);letter-spacing:.04em}
.exs__a{font:500 clamp(15px,1.2vw,17.5px)/1.55 var(--f-sans);color:var(--ink-2)}
@media (max-width:640px){.exs__list > li{grid-template-columns:1fr;gap:5px}}

/* ---------- 06 the seat ---------- */
.exe{position:relative;min-height:100svh;display:grid;align-items:end;overflow:clip;background:#0B0B0F;color:#fff}
.exe__media{position:absolute;inset:0;margin:0}
.exe__media img{width:100%;height:100%;object-fit:cover;object-position:54% 58%}
.exe__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,9,10,.3) 0%,rgba(4,9,10,.46) 46%,rgba(4,9,10,.92) 100%)}
.exe__in{position:relative;z-index:1;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:clamp(80px,16vh,190px) var(--gutter) clamp(50px,9vh,110px)}
.exe__t{margin-top:clamp(14px,2.2vh,24px);font-size:clamp(46px,7.6vw,124px);line-height:1.06;letter-spacing:-.04em;
  text-shadow:0 2px 44px rgba(4,9,10,.56)}
.exe__m{margin-top:clamp(20px,3vh,30px);font:700 clamp(11px,1vw,13px)/1.7 var(--f-sans);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.8)}
.exe__cta{margin-top:clamp(26px,4vh,42px)}
@media (max-width:560px){.exe__cta .btn{width:100%;justify-content:center}}

/* the header sits over photography for most of this page, so it carries its own shade here
   and headlines passing beneath it read as behind glass instead of colliding with it */
html:has(.stg) .nav::after{content:"";position:absolute;left:0;right:0;top:-1px;z-index:-1;pointer-events:none;
  height:calc(var(--nav-h) + 30px);opacity:0;transition:opacity .5s var(--ease);
  background:linear-gradient(180deg,rgba(5,8,9,.8) 0%,rgba(5,8,9,.45) 52%,rgba(5,8,9,0) 100%)}
html:has(.stg) .nav.on-photo::after{opacity:1}