/* ============================================================
   Sparks of Science — static rebuild
   Palette + type taken from sparksofscience.eu
   ============================================================ */

:root{
  --bg:            #0c0c0c;
  --bg-deep:       #000000;
  --bg-soft:       #0a0a0a;
  --purple:        #9021ff;
  --purple-soft:   #b06bff;
  --white:         #ffffff;
  --off-white:     #f0f0f0;
  --line:          rgba(144, 33, 255, .28);

  --wrap:          1140px;
  --ease:          cubic-bezier(.22, .68, 0, 1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; overflow-x:hidden; background:var(--bg); }

body{
  margin:0;
  background:transparent;
  color:var(--off-white);
  font-family:"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:24px;
}

/* ============================================================
   Animated background — fixed behind the whole page.
   Purely CSS orbs + a lightweight canvas spark field.
   ============================================================ */
.site-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:var(--bg);
}
/* everything else sits above the background layer */
.scroll-progress,
.site-header,
main,
.site-footer{ position:relative; z-index:1; }
.scroll-progress{ position:fixed; z-index:100; }
.site-header{ position:fixed; z-index:90; }

.orb{
  position:absolute;
  display:block;
  border-radius:50%;
  filter:blur(80px);
  will-change:transform;
}
.orb-1{
  width:62vw; height:62vw; max-width:900px; max-height:900px;
  top:-14vw; left:-12vw;
  background:radial-gradient(circle at 50% 50%, rgba(144,33,255,.45), rgba(144,33,255,0) 66%);
  animation:orb1 38s ease-in-out infinite alternate;
}
.orb-2{
  width:52vw; height:52vw; max-width:760px; max-height:760px;
  top:26vh; right:-16vw;
  background:radial-gradient(circle at 50% 50%, rgba(176,107,255,.34), rgba(176,107,255,0) 68%);
  animation:orb2 47s ease-in-out infinite alternate;
}
.orb-3{
  width:46vw; height:46vw; max-width:680px; max-height:680px;
  bottom:-16vh; left:14vw;
  background:radial-gradient(circle at 50% 50%, rgba(144,33,255,.3), rgba(144,33,255,0) 66%);
  animation:orb3 55s ease-in-out infinite alternate;
}
.orb-4{
  width:34vw; height:34vw; max-width:520px; max-height:520px;
  top:52vh; left:34vw;
  background:radial-gradient(circle at 50% 50%, rgba(110,20,210,.26), rgba(110,20,210,0) 70%);
  animation:orb4 63s ease-in-out infinite alternate;
}
@keyframes orb1{
  0%  { transform:translate3d(0,0,0) scale(1); }
  50% { transform:translate3d(8vw, 6vh, 0) scale(1.12); }
  100%{ transform:translate3d(-4vw, 12vh, 0) scale(.96); }
}
@keyframes orb2{
  0%  { transform:translate3d(0,0,0) scale(1.04); }
  50% { transform:translate3d(-10vw, -8vh, 0) scale(.92); }
  100%{ transform:translate3d(-3vw, 9vh, 0) scale(1.14); }
}
@keyframes orb3{
  0%  { transform:translate3d(0,0,0) scale(.98); }
  50% { transform:translate3d(12vw, -10vh, 0) scale(1.16); }
  100%{ transform:translate3d(-6vw, -3vh, 0) scale(1); }
}
@keyframes orb4{
  0%  { transform:translate3d(0,0,0) scale(1.1); }
  50% { transform:translate3d(-9vw, 7vh, 0) scale(.9); }
  100%{ transform:translate3d(6vw, -6vh, 0) scale(1.08); }
}

/* faint static star dust, slowly breathing */
.starfield{
  position:absolute; inset:-10%;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.3px 1.3px at 78% 18%, rgba(176,107,255,.8), transparent),
    radial-gradient(1.1px 1.1px at 32% 68%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.7px 1.7px at 64% 78%, rgba(144,33,255,.75), transparent),
    radial-gradient(1.1px 1.1px at 88% 52%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 6% 56%, rgba(176,107,255,.6), transparent),
    radial-gradient(1.1px 1.1px at 48% 12%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 22% 88%, rgba(144,33,255,.6), transparent),
    radial-gradient(1.2px 1.2px at 92% 84%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.4px 1.4px at 56% 42%, rgba(176,107,255,.5), transparent);
  animation:breathe 9s ease-in-out infinite alternate;
}
@keyframes breathe{
  from{ opacity:.3; transform:translate3d(0,0,0); }
  to  { opacity:.85; transform:translate3d(0,-1.5%,0); }
}

#sparkCanvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:100;
  background:transparent; pointer-events:none;
}
.scroll-progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--purple), var(--purple-soft));
  box-shadow:0 0 12px rgba(144,33,255,.8);
  transition:width .1s linear;
}

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:90;
  padding:14px 0;
  background:rgba(12,12,12,0);
  backdrop-filter:blur(0px);
  transform:translateY(-110%);
  transition:transform .6s var(--ease), background .4s ease, backdrop-filter .4s ease, box-shadow .4s ease;
}
.site-header.is-visible{
  transform:translateY(0);
  background:rgba(12,12,12,.72);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(144,33,255,.18);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand img{ height:34px; width:auto; }
.site-nav{ display:flex; gap:28px; }
.site-nav a{
  position:relative;
  color:var(--off-white);
  text-decoration:none;
  font-family:Raleway, sans-serif;
  font-weight:400;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding-block:4px;
  transition:color .3s ease;
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--purple);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.site-nav a:hover{ color:var(--purple-soft); }
.site-nav a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:120px 0 90px;
  overflow:hidden;
}
.hero-glow{
  position:absolute; inset:-20% -10% auto -10%; height:120%;
  background:
    radial-gradient(48% 42% at 50% 22%, rgba(144,33,255,.28), transparent 70%),
    radial-gradient(38% 34% at 12% 72%, rgba(144,33,255,.16), transparent 72%),
    radial-gradient(34% 30% at 88% 60%, rgba(176,107,255,.14), transparent 72%);
  filter:blur(6px);
  animation:drift 22s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes drift{
  from{ transform:translate3d(-2%, -1%, 0) scale(1); }
  to  { transform:translate3d(2%, 2%, 0) scale(1.08); }
}

.hero-inner{ position:relative; z-index:2; }
.hero-logo{
  width:min(420px, 74vw);
  margin:0 auto 34px;
}
.eyebrow{
  margin:0 0 26px;
  font-family:"Open Sans", sans-serif;
  font-weight:400;
  font-size:clamp(18px, 2.2vw, 27px);
  line-height:1.1;
  letter-spacing:.06em;
  color:var(--purple);
  text-transform:uppercase;
}
.hero-title{
  margin:0 0 38px;
  font-family:Poppins, sans-serif;
  font-weight:200;
  font-size:clamp(30px, 5.6vw, 62px);
  line-height:1.12;
  letter-spacing:.02em;
  color:var(--white);
}
.hero-title .line{ display:block; }

.scroll-cue{
  position:relative; z-index:2;
  margin-top:56px;
  height:52px; width:1px;
  background:linear-gradient(to bottom, transparent, rgba(144,33,255,.5));
  overflow:hidden;
}
.scroll-cue-line{
  position:absolute; top:-50%; left:0;
  width:100%; height:50%;
  background:var(--purple);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{
  0%{ transform:translateY(0); opacity:0; }
  25%{ opacity:1; }
  100%{ transform:translateY(300%); opacity:0; }
}

/* ---------- shared type ---------- */
.statement{
  margin:0 0 22px;
  font-family:"Open Sans", sans-serif;
  font-weight:600;
  font-size:clamp(16px, 1.6vw, 22px);
  line-height:1.35;
  color:var(--off-white);
}
.hero .statement{
  max-width:900px;
  margin-inline:auto;
  font-weight:600;
}
.question{
  margin:0 0 34px;
  font-family:"Open Sans", sans-serif;
  font-weight:400;
  font-size:clamp(19px, 2.1vw, 27px);
  line-height:1.1;
  color:var(--purple);
  text-align:right;
}
.section-title{
  margin:0 0 30px;
  font-family:Poppins, sans-serif;
  font-weight:300;
  font-size:clamp(32px, 4.4vw, 50px);
  line-height:1.1;
  color:var(--purple);
  letter-spacing:.01em;
}
.body-text{
  margin:0 0 20px;
  font-family:Raleway, sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  color:var(--white);
}
.body-text.lead{ max-width:840px; font-size:17px; }

/* ---------- dividers ---------- */
.divider{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
  transform-origin:center;
}
.divider.reveal{ transform:scaleX(0); opacity:1; transition:transform 1.1s var(--ease); }
.divider.reveal.in{ transform:scaleX(1); }

/* ---------- splits ---------- */
.split{ padding:70px 0; }
.split-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}
.questions{ display:flex; flex-direction:column; align-items:flex-end; }

/* ---------- marquee ---------- */
.marquee-section{ padding:40px 0 60px; }
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex;
  gap:18px;
  width:max-content;
  animation:scroll-x 46s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes scroll-x{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(calc(-50% - 9px),0,0); }
}
.shot{
  margin:0;
  flex:0 0 auto;
  height:210px;
  border-radius:4px;
  overflow:hidden;
  filter:grayscale(.35) brightness(.82);
  transition:filter .5s ease, transform .5s var(--ease), box-shadow .5s ease;
}
.shot img{ height:100%; width:auto; object-fit:cover; }
.shot:hover{
  filter:grayscale(0) brightness(1);
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(144,33,255,.22);
}

/* ---------- about ---------- */
.about{ padding:80px 0 90px; }
.about-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:64px;
  align-items:center;
}
.photo-frame{
  position:relative;
  border-radius:6px;
  overflow:hidden;
  will-change:transform;
}
.photo-frame::after{
  content:"";
  position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(144,33,255,.22);
  border-radius:6px;
  pointer-events:none;
}
.photo-frame img{ width:100%; transition:transform 1.2s var(--ease); }
.photo-frame:hover img{ transform:scale(1.04); }

/* ---------- talks ---------- */
.talks{ padding:80px 0 90px; background:rgba(0,0,0,.5); }
.events{ list-style:none; margin:52px 0 0; padding:0; }
.event{
  display:grid;
  grid-template-columns:170px 340px 1fr;
  align-items:center;
  gap:24px;
  padding:26px 18px;
  border-top:1px solid rgba(144,33,255,.18);
  position:relative;
  overflow:hidden;
  transition:background .45s ease, padding-left .45s var(--ease);
}
.event:last-child{ border-bottom:1px solid rgba(144,33,255,.18); }
.event::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--purple);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--ease);
}
.event:hover{ background:rgba(144,33,255,.06); padding-left:30px; }
.event:hover::before{ transform:scaleY(1); transform-origin:top; }
.event-date{
  font-family:Poppins, sans-serif; font-weight:300;
  font-size:clamp(20px, 2vw, 27px); color:var(--purple);
}
.event-city{
  font-family:Poppins, sans-serif; font-weight:300;
  font-size:clamp(24px, 3vw, 40px); line-height:1.1; color:var(--purple);
}
.event-topic{
  font-family:Poppins, sans-serif; font-weight:300;
  font-size:clamp(17px, 1.9vw, 28px); line-height:1.2; color:var(--white);
}

/* ---------- contact ---------- */
.contact{ padding:90px 0; background:rgba(10,10,10,.42); }
.contact-inner{ display:flex; flex-direction:column; align-items:center; gap:34px; text-align:center; }
.contact-title{
  margin:0;
  font-family:"Open Sans", sans-serif;
  font-weight:400;
  font-size:clamp(19px, 2.2vw, 27px);
  line-height:1.2;
  color:var(--purple);
  text-transform:uppercase;
}
.btn{
  position:relative;
  display:inline-block;
  padding:15px 44px;
  font-family:Raleway, sans-serif;
  font-weight:400;
  font-size:15px;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--white);
  border:1px solid var(--purple);
  border-radius:2px;
  overflow:hidden;
  transition:color .45s ease, box-shadow .45s ease, transform .45s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0;
  background:var(--purple);
  transform:translateY(101%);
  transition:transform .5s var(--ease);
  z-index:-1;
}
.btn span, .btn{ position:relative; z-index:1; }
.btn:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(144,33,255,.3); }
.btn:hover::before{ transform:translateY(0); }

/* ---------- footer ---------- */
.site-footer{ padding:70px 0 30px; background:rgba(12,12,12,.45); }
.footer-inner{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.footer-logo{ width:min(300px, 62vw); opacity:.9; }
.copy{
  margin:0;
  font-family:Raleway, sans-serif; font-weight:300; font-size:14px;
  color:rgba(240,240,240,.6);
}

/* ============================================================
   Scroll reveal
   ============================================================ */
.reveal{
  opacity:0;
  transform:translate3d(0, 34px, 0);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--d, 0) * 110ms);
  will-change:opacity, transform;
}
/* direction variants — must stay above `.in` so the reset wins the cascade */
.questions .reveal{ transform:translate3d(28px, 20px, 0); }
.about-photo.reveal{ transform:translate3d(40px, 24px, 0); }
.event.reveal{ transform:translate3d(-28px, 18px, 0); }

.reveal.in,
.questions .reveal.in,
.about-photo.reveal.in,
.event.reveal.in{ opacity:1; transform:translate3d(0, 0, 0); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .split-grid{ grid-template-columns:1fr; gap:34px; }
  .questions{ align-items:flex-start; }
  .question{ text-align:left; }
  .about-grid{ grid-template-columns:1fr; gap:38px; }
  .about-photo{ order:-1; }
  .event{ grid-template-columns:1fr; gap:8px; padding:22px 14px; }
  .site-nav{ gap:18px; }
  .site-nav a{ font-size:12px; letter-spacing:.1em; }
  .shot{ height:150px; }
}

@media (max-width:900px){
  /* large blurs are expensive on phones — fewer, softer orbs */
  .orb{ filter:blur(56px); }
  .orb-4{ display:none; }
}

@media (max-width:560px){
  .wrap{ padding-inline:18px; }
  .hero{ padding:110px 0 70px; }
  .brand img{ height:26px; }
  .site-nav a{ font-size:11px; }
  .split{ padding:50px 0; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .divider.reveal{ transform:scaleX(1); }
  .marquee-track{ animation:none; }
  /* background keeps its colour, loses its motion */
  .orb, .starfield, .hero-glow{ animation:none; }
  #sparkCanvas{ display:none; }
}