/* ==========================================================================
   DARWINISM — Interactive Science Exhibition
   Design tokens
   ========================================================================== */
:root{
  --c-white:#FFFFFF;
  --c-mint:#F4FBF5;
  --c-pale:#E7F6E9;
  --c-card:#CDEBCE;
  --c-soft:#8BCF92;
  --c-btn:#4CAF63;
  --c-btn-hover:#3f9f56;
  --c-heading:#2F7D46;
  --c-deep:#173B24;
  --c-text:#34443A;

  --c-light-trait:#E3C99A;
  --c-medium-trait:#B98548;
  --c-dark-trait:#4A3223;

  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Outfit', 'Segoe UI', system-ui, sans-serif;

  --shadow-soft: 0 10px 30px -12px rgba(23, 59, 36, 0.18);
  --shadow-card: 0 6px 20px -8px rgba(23, 59, 36, 0.14);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;

  --maxw: 1180px;


  --grad-btn: linear-gradient(135deg, #7CF29C 0%, #4CAF63 48%, #2F8F52 100%);
  --grad-btn-hover: linear-gradient(135deg, #8CFCAE 0%, #55C071 48%, #368F55 100%);
  --grad-btn-press: linear-gradient(135deg, #4CAF63 0%, #2F8F52 100%);
  --grad-bg: linear-gradient(180deg, #ffffff 0%, #f2fbf4 38%, #e4f7e9 72%, #d7f2df 100%);
  --grad-card: linear-gradient(160deg, #ffffff 0%, #f2fbf4 100%);
  --glow-btn: 0 6px 20px -6px rgba(47,143,82,.55), 0 0 0 0 rgba(124,242,156,0);
  --glow-btn-hover: 0 10px 30px -6px rgba(47,143,82,.65), 0 0 26px 4px rgba(124,242,156,.55);
  --glow-btn-press: 0 3px 10px -4px rgba(47,143,82,.6), 0 0 10px 1px rgba(124,242,156,.4);
  --c-accent-pink:#ffd9e6;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--c-text);
  background:var(--grad-bg);
  background-attachment:fixed;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
}


body::before{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(circle at 1.5px 1.5px, rgba(76,175,99,0.14) 1.5px, transparent 0);
  background-size:26px 26px;
  opacity:0.55;
}
body::after{
  content:'';
  position:fixed; inset:-10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(38vw 38vw at 8% 6%, rgba(124,242,156,0.30), transparent 60%),
    radial-gradient(34vw 34vw at 96% 18%, rgba(139,207,146,0.26), transparent 60%),
    radial-gradient(42vw 42vw at 12% 92%, rgba(205,235,206,0.35), transparent 60%),
    radial-gradient(30vw 30vw at 90% 96%, rgba(76,175,99,0.16), transparent 60%);
  filter:blur(6px);
  animation:ambientDrift 26s ease-in-out infinite alternate;
}
@keyframes ambientDrift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(-1.5%,1.5%,0) scale(1.04); }
}
main, .site-nav, .deco-layer, footer.site-footer{ position:relative; z-index:1; }

/* Floating biological particle layer — behind all content, above the flat background */
#atmosphereCanvas{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%; display:block;
}
@media (prefers-reduced-motion: reduce){
  #atmosphereCanvas{ display:none; }
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--c-heading); margin:0 0 0.5em; line-height:1.15; }
p{ margin:0 0 1em; }

.section-inner{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.section-inner--wide{ max-width:1320px; }

main{ position:relative; z-index:1; }
.screen{ position:relative; padding:110px 0; }
.screen--curiosity, .screen--lab-intro{ min-height:100vh; display:flex; align-items:center; justify-content:center; }

.eyebrow-soft{
  font-size:0.85rem; letter-spacing:0.08em; color:var(--c-soft);
  text-transform:lowercase; font-weight:600; margin-bottom:0.4em;
}
.section-title{ font-size:clamp(1.9rem, 3.6vw, 2.8rem); font-weight:600; }
.section-subtitle{ font-size:1.1rem; color:var(--c-text); opacity:0.85; max-width:60ch; margin-bottom:2.4em; }

/* alternate section backgrounds */
#darwin, #door-2, #door-4, #lab, #challenge{ background:var(--c-mint); }
#doors, #door-1, #door-3, #door-5, #connect{ background:var(--c-white); }
#quiz{ background:var(--c-mint); }


.btn{
  display:inline-flex; align-items:center; gap:0.5em;
  padding:0.85em 1.7em; border-radius:999px; border:none;
  font-family:var(--font-body); font-weight:600; font-size:1rem;
  text-decoration:none; cursor:pointer;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform 0.28s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease, background 0.3s ease;
}

.btn::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 48%, transparent 66%);
  transform:translateX(-120%); transition:transform 0.7s ease;
}
.btn:hover::before{ transform:translateX(120%); }
.btn > *{ position:relative; z-index:2; }

.btn--primary{
  background:var(--grad-btn); background-size:160% 160%; background-position:0% 50%;
  color:var(--c-white); box-shadow:var(--glow-btn);
}
.btn--primary:hover{
  background:var(--grad-btn-hover); background-position:100% 50%;
  transform:translateY(-3px) scale(1.035); box-shadow:var(--glow-btn-hover);
}
.btn--primary:active{
  background:var(--grad-btn-press); transform:translateY(-1px) scale(0.96);
  box-shadow:var(--glow-btn-press); transition-duration:0.12s;
}
.btn--secondary{
  background:linear-gradient(160deg, #ffffff 0%, #f2fbf4 100%);
  color:var(--c-heading); border:1.5px solid var(--c-card);
  box-shadow:0 4px 14px -8px rgba(23,59,36,.25);
}
.btn--secondary:hover{
  background:linear-gradient(160deg, #f2fbf4 0%, #e2f5e5 100%);
  border-color:var(--c-soft); transform:translateY(-3px) scale(1.03);
  box-shadow:0 10px 24px -10px rgba(76,175,99,.5), 0 0 18px 1px rgba(139,207,146,.35);
}
.btn--secondary:active{ transform:translateY(-1px) scale(0.96); transition-duration:0.12s; }
.btn--large{ padding:1.05em 2.2em; font-size:1.08rem; }
.btn .arrow{ transition:transform 0.25s ease; display:inline-block; }
.btn:hover .arrow{ transform:translateX(5px); }
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible{
  outline:3px solid var(--c-heading); outline-offset:2px;
}


.btn--primary{ animation:btnGlowPulse 3.4s ease-in-out infinite; }
@keyframes btnGlowPulse{
  0%,100%{ box-shadow:var(--glow-btn); }
  50%{ box-shadow:var(--glow-btn-hover); }
}
@media (prefers-reduced-motion: reduce){ .btn--primary{ animation:none; } }


.ripple-fx{
  position:absolute; border-radius:50%; z-index:1; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.25) 55%, transparent 75%);
  transform:translate(-50%,-50%) scale(0); animation:rippleAnim 0.65s ease-out forwards;
}
@keyframes rippleAnim{ to{ transform:translate(-50%,-50%) scale(1); opacity:0; } }

.section-cta{ margin-top:3.2em; text-align:center; display:flex; flex-direction:column; align-items:center; gap:1em; }
.section-cta__lead{ font-size:1.15rem; color:var(--c-heading); font-weight:500; max-width:44ch; }


.deco-layer{ position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden; }
.deco-item{
  position:absolute; opacity:0.5; will-change:transform;
  animation:floaty linear infinite;
}
@keyframes floaty{
  0%{ transform:translateY(0) translateX(0) rotate(0deg); }
  50%{ transform:translateY(-26px) translateX(10px) rotate(8deg); }
  100%{ transform:translateY(0) translateX(0) rotate(0deg); }
}
.deco-dot{ width:6px; height:6px; border-radius:50%; background:var(--c-soft); }
.deco-star{ width:10px; height:10px; background:var(--c-card); clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.deco-leaf{ width:14px; height:14px; background:var(--c-soft); border-radius:0 60% 0 60%; }


.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px; background:rgba(255,255,255,0.82); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--c-pale);
}
.nav-brand{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:var(--c-heading); text-decoration:none; }
.nav-links{ list-style:none; display:flex; align-items:center; gap:26px; margin:0; padding:0; }
.nav-links a{ text-decoration:none; color:var(--c-text); font-weight:500; font-size:0.95rem; position:relative; padding-bottom:4px; }
.nav-links a.is-active{ color:var(--c-heading); }
.nav-links a.is-active::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--c-btn); border-radius:2px; }
.exhibition-toggle{
  background:linear-gradient(160deg,#ffffff,#eef8ee); border:1px solid var(--c-card); color:var(--c-heading);
  padding:8px 16px; border-radius:999px; font-weight:600; font-size:0.85rem;
  position:relative; overflow:hidden; transition:all 0.25s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 3px 10px -6px rgba(23,59,36,.3);
}
.exhibition-toggle:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 8px 18px -8px rgba(76,175,99,.5); }
.exhibition-toggle.is-on{ background:var(--grad-btn); color:#fff; border-color:var(--c-btn); box-shadow:var(--glow-btn-hover); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; border-radius:8px; transition:background 0.2s ease, transform 0.2s ease; }
.nav-toggle span{ width:22px; height:2px; background:var(--c-heading); border-radius:2px; transition:background 0.2s ease; }
.nav-toggle:hover{ background:var(--c-pale); transform:scale(1.06); }

@media (max-width:900px){
  .nav-toggle{ display:flex; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0; background:var(--c-white);
    flex-direction:column; align-items:flex-start; padding:18px 28px; gap:16px;
    border-bottom:1px solid var(--c-pale); display:none;
  }
  .nav-links.is-open{ display:flex; }
}


.progress-widget{ position:fixed; right:22px; bottom:22px; z-index:90; }
.progress-widget__handle{
  width:52px; height:52px; border-radius:50%; background:linear-gradient(160deg,#ffffff,#eef8ee);
  border:1px solid var(--c-card); box-shadow:var(--shadow-card);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; transition:transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease;
}
.progress-widget__handle:hover{ transform:translateY(-3px) scale(1.06); box-shadow:var(--glow-btn-hover); }
.progress-widget__handle:active{ transform:scale(0.94); }
.progress-ring svg{ width:34px; height:34px; transform:rotate(-90deg); }
.progress-ring__bg{ fill:none; stroke:var(--c-pale); stroke-width:3; }
.progress-ring__fg{ fill:none; stroke:var(--c-btn); stroke-width:3; stroke-dasharray:100.5; stroke-dashoffset:100.5; stroke-linecap:round; transition:stroke-dashoffset 0.4s ease; }
.progress-widget__panel{
  position:absolute; bottom:64px; right:0; width:220px; background:var(--c-white);
  border:1px solid var(--c-pale); border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
  padding:16px 18px; opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity 0.2s ease, transform 0.2s ease;
}
.progress-widget__panel h3{ font-size:0.95rem; margin-bottom:0.6em; }
.progress-widget.is-open .progress-widget__panel{ opacity:1; pointer-events:auto; transform:translateY(0); }
#progressList{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
#progressList li{ font-size:0.85rem; color:var(--c-text); opacity:0.55; position:relative; padding-left:20px; }
#progressList li::before{ content:''; position:absolute; left:0; top:4px; width:12px; height:12px; border-radius:50%; border:2px solid var(--c-card); }
#progressList li.is-done{ opacity:1; color:var(--c-heading); font-weight:600; }
#progressList li.is-done::before{ background:var(--c-btn); border-color:var(--c-btn); }


.screen--welcome{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(165deg, #ffffff 0%, #f2fbf4 32%, #e2f6e7 68%, #cdeece 100%);
  background-size:220% 220%; animation:heroGradientShift 16s ease-in-out infinite;
  text-align:center; padding-top:80px; overflow:hidden; position:relative;
}
@keyframes heroGradientShift{
  0%,100%{ background-position:0% 30%; }
  50%{ background-position:100% 70%; }
}
@media (prefers-reduced-motion: reduce){ .screen--welcome{ animation:none; } }
.welcome-inner{ max-width:760px; padding:0 24px; position:relative; z-index:3; }


.hero-float-layer{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero-float{
  position:absolute; will-change:transform; opacity:0.85;
  filter:drop-shadow(0 8px 16px rgba(23,59,36,0.16));
  animation:heroFloat ease-in-out infinite;
}
@keyframes heroFloat{
  0%{ transform:translateY(0) translateX(0) rotate(0deg); }
  50%{ transform:translateY(-30px) translateX(14px) rotate(10deg); }
  100%{ transform:translateY(0) translateX(0) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce){ .hero-float{ animation:none; } }


.hero-badges{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hero-badge{
  position:absolute; display:inline-flex; align-items:center; gap:0.4em;
  background:rgba(255,255,255,0.65); backdrop-filter:blur(6px);
  border:1px solid rgba(139,207,146,0.5); color:var(--c-heading);
  font-size:0.82rem; font-weight:600; padding:0.5em 1em; border-radius:999px;
  box-shadow:0 6px 16px -8px rgba(23,59,36,.2);
  animation:heroFloat ease-in-out infinite;
}
@media (max-width:900px){ .hero-badges{ display:none; } }
@media (max-width:640px){
  .hero-float-layer img:nth-of-type(2),
  .hero-float-layer img:nth-of-type(5){ display:none; }
  .hero-float{ opacity:0.55; }
}
.welcome-title{
  font-size:clamp(3.2rem, 10vw, 6.4rem); font-weight:700; color:var(--c-deep);
  letter-spacing:-0.01em; margin-bottom:0.15em;
}
.welcome-subtitle{ font-size:clamp(1.1rem, 2.4vw, 1.5rem); color:var(--c-heading); font-weight:500; margin-bottom:0.5em; }
.welcome-tagline{ font-size:1.02rem; opacity:0.75; margin-bottom:2em; }
.welcome-team{ margin-top:4em; }
.welcome-team__label{ font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--c-soft); font-weight:700; margin-bottom:1em; }
.welcome-team__members{ display:flex; gap:2.4em; justify-content:center; flex-wrap:wrap; }
.team-member__name{ font-weight:600; color:var(--c-heading); margin-bottom:0.15em; }
.team-member__role{ font-size:0.9rem; opacity:0.7; margin:0; }
.scroll-cue{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); }
.scroll-cue span{ display:block; width:22px; height:34px; border:2px solid var(--c-card); border-radius:12px; position:relative; }
.scroll-cue span::before{ content:''; position:absolute; top:6px; left:50%; width:4px; height:8px; background:var(--c-btn); border-radius:2px; transform:translateX(-50%); animation:scrollcue 1.6s ease infinite; }
@keyframes scrollcue{ 0%{ opacity:1; transform:translate(-50%,0);} 70%{opacity:0; transform:translate(-50%,10px);} 100%{opacity:0;} }


.screen--curiosity{ background:var(--c-deep); color:var(--c-white); text-align:center; }
.curiosity-stage{ max-width:820px; padding:0 24px; position:relative; min-height:220px; }
.curiosity-question{
  font-family:var(--font-display); font-size:clamp(1.5rem,4vw,2.4rem); color:var(--c-white);
  opacity:0; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  transition:opacity 0.6s ease;
}
.curiosity-question.is-visible{ opacity:1; position:relative; }
.curiosity-reveal{ opacity:0; transition:opacity 0.8s ease; position:relative; }
.curiosity-reveal.is-visible{ opacity:1; }
.curiosity-reveal__text{ font-family:var(--font-display); font-size:clamp(1.4rem,3.2vw,2rem); color:var(--c-soft); margin-bottom:1em; }


.image-card{
  background:var(--c-white); border:1px solid var(--c-pale); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card); padding:14px; margin:0;
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.image-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-soft); border-color:var(--c-card); }
.image-card img{ border-radius:calc(var(--radius-md) - 8px); width:100%; height:auto; object-fit:contain; transition:transform 0.45s ease; }
.image-card:hover img{ transform:scale(1.015); }
.image-card--wide img{ object-fit:cover; aspect-ratio:16/9; }
.image-card--portrait{ max-width:280px; }
.image-card--portrait img{ aspect-ratio:1/1; object-fit:contain; }


.darwin-intro, .darwin-voyage, .darwin-finches{
  display:grid; grid-template-columns:280px 1fr; gap:2.4em; align-items:center; margin-bottom:3em;
}
.darwin-intro__text, .darwin-voyage__text, .darwin-finches__text{ font-size:1.05rem; }
.darwin-mini-timeline{
  display:flex; flex-direction:column; align-items:center; gap:0.4em;
  background:var(--c-white); border-radius:var(--radius-lg); padding:2.4em 1.5em;
  margin:3em 0; box-shadow:var(--shadow-card);
}
.mtl-item{ text-align:center; }
.mtl-item--highlight .mtl-label{ color:var(--c-btn); font-weight:700; font-size:1.15rem; }
.mtl-year{ display:block; font-family:var(--font-display); font-size:1.4rem; color:var(--c-heading); font-weight:600; }
.mtl-label{ font-size:0.98rem; max-width:34ch; }
.mtl-arrow{ color:var(--c-card); font-size:1.3rem; }

.darwin-idea-card{
  background:var(--c-white); border-radius:var(--radius-lg); padding:2.6em;
  box-shadow:var(--shadow-card); margin-top:2em;
}
.darwin-idea-card h3{ font-size:1.3rem; }
.idea-list{ padding-left:1.3em; margin:0 0 1.4em; }
.idea-list li{ margin-bottom:0.6em; }
.idea-note{ background:var(--c-pale); border-radius:var(--radius-sm); padding:1em 1.2em; font-size:0.95rem; margin:0; }

@media (max-width:760px){
  .darwin-intro, .darwin-voyage, .darwin-finches{ grid-template-columns:1fr; }
  .image-card--portrait{ margin:0 auto; }
}


.fund-timeline{ position:relative; display:flex; justify-content:space-between; gap:1.4em; padding:2em 0; }
.fund-timeline__line{ position:absolute; top:100px; left:5%; right:5%; height:2px; background:var(--c-card); z-index:0; }
.fund-node{
  position:relative; z-index:1; flex:1; text-align:center; background:var(--c-white);
  border-radius:var(--radius-md); padding:1.6em 1.1em; box-shadow:var(--shadow-card);
  border:1px solid var(--c-pale); opacity:0; transform:translateY(24px);
  transition:opacity 0.6s ease, transform 0.6s ease, box-shadow 0.25s ease;
}
.fund-node.is-visible{ opacity:1; transform:translateY(0); }
.fund-node:hover{ box-shadow:var(--shadow-soft); }
.fund-node__img{ width:78px; height:78px; margin:0 auto 0.8em; }
.fund-node__img img{ width:100%; height:100%; object-fit:contain; transition:transform 0.3s ease; }
.fund-node:hover .fund-node__img img{ transform:scale(1.07); }
.fund-node__num{ display:block; font-family:var(--font-display); font-size:1.6rem; color:var(--c-card); font-weight:700; margin-bottom:0.2em; }
.fund-node__title{ font-size:1rem; margin-bottom:0.5em; }
.fund-node__desc{ font-size:0.88rem; opacity:0.8; margin:0; }

@media (max-width:920px){
  .fund-timeline{ flex-direction:column; }
  .fund-timeline__line{ top:5%; bottom:5%; left:38px; right:auto; width:2px; height:auto; }
  .fund-node{ display:grid; grid-template-columns:78px 1fr; gap:1.2em; text-align:left; align-items:center; margin-left:0; }
  .fund-node__img{ margin:0; }
}


.doors-scene{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1.6em; padding:2em 0 1em;
  background:var(--c-mint); border-radius:var(--radius-lg); padding:3em 2em;
}
.door{
  background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:0.7em;
  padding:0.6em; position:relative;
}
.door__frame{ position:relative; width:100%; aspect-ratio:3/4; display:block; }
.door__img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 18px rgba(23,59,36,0.18)); transition:transform 0.35s ease, filter 0.35s ease; }
.door__handle-glow{
  position:absolute; right:14%; top:48%; width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle, rgba(139,207,146,0.9), transparent 70%);
  opacity:0; transition:opacity 0.3s ease;
}
.door:hover .door__img{ transform:scale(1.045) rotateY(-6deg); filter:drop-shadow(0 16px 26px rgba(47,125,70,0.3)); }
.door:hover .door__handle-glow{ opacity:1; }
.door__number{ font-family:var(--font-display); font-weight:700; color:var(--c-card); font-size:1.1rem; transition:color 0.3s ease; }
.door:hover .door__number{ color:var(--c-btn); }
.door__label{ font-size:0.92rem; font-weight:600; color:var(--c-heading); text-align:center; }
.door.is-visited .door__img{ filter:drop-shadow(0 10px 18px rgba(23,59,36,0.18)) saturate(1.15); }
.door.is-visited .door__number{ color:var(--c-btn); }
.door.is-opening .door__img{ animation:doorOpen 0.7s ease forwards; }
@keyframes doorOpen{
  0%{ transform:scale(1) rotateY(0); }
  40%{ transform:scale(1.08) rotateY(-24deg); }
  100%{ transform:scale(1.14) rotateY(-46deg); opacity:0.3; }
}

.doors-tracker{ text-align:center; margin-top:2.6em; }
.doors-tracker p{ font-weight:600; color:var(--c-heading); margin-bottom:0.6em; }
.doors-tracker__dots{ display:flex; gap:10px; justify-content:center; }
.dot{ width:12px; height:12px; border-radius:50%; background:var(--c-card); transition:background 0.3s ease, transform 0.3s ease; }
.dot.is-on{ background:var(--c-btn); transform:scale(1.2); }
.doors-complete{ text-align:center; margin-top:2.4em; }
.doors-complete p{ font-weight:700; color:var(--c-heading); font-size:1.2rem; margin-bottom:0.2em; }
.doors-complete__sub{ font-weight:400 !important; opacity:0.8; font-size:1rem !important; margin-bottom:1.2em !important; }

.door-transition{ position:fixed; inset:0; background:var(--c-white); z-index:200; opacity:0; pointer-events:none; }
.door-transition.is-active{ animation:doorFlash 0.7s ease; }
@keyframes doorFlash{ 0%{ opacity:0;} 45%{opacity:1;} 100%{opacity:0;} }

@media (max-width:920px){
  .doors-scene{ grid-template-columns:repeat(2,1fr); padding:2em 1.4em; }
}
@media (max-width:520px){
  .doors-scene{ grid-template-columns:1fr; }
}


.door-detail__tag{ display:inline-block; font-size:0.8rem; letter-spacing:0.08em; color:var(--c-soft); font-weight:700; margin-bottom:0.6em; }
.door-detail__layout{ display:grid; grid-template-columns:340px 1fr; gap:2.4em; align-items:center; margin:2em 0 2.6em; }
.door-detail__text{ font-size:1.05rem; }
.fine-note{ font-size:0.9rem; opacity:0.75; background:var(--c-pale); border-radius:var(--radius-sm); padding:0.9em 1.1em; }
.fine-note.center{ text-align:center; max-width:60ch; margin:1.4em auto 0; }
@media (max-width:820px){ .door-detail__layout{ grid-template-columns:1fr; } }

.demo-label{ font-weight:700; color:var(--c-heading); font-size:0.95rem; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.8em; }


.overproduction-demo{ background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:2em; text-align:center; }
.overproduction-demo__stage{ position:relative; height:220px; margin:1em auto; max-width:640px; overflow:hidden; }
.overproduction-demo__stage img{ position:absolute; width:26px; height:auto; }
.overproduction-demo__count{ font-family:var(--font-display); font-size:2rem; color:var(--c-btn); font-weight:700; margin-bottom:1em; }
.overproduction-demo__steps{ display:flex; justify-content:center; gap:0.7em; flex-wrap:wrap; }
.chip-btn{
  background:linear-gradient(160deg,#ffffff,var(--c-pale)); border:1.5px solid var(--c-card); color:var(--c-heading);
  padding:0.6em 1.3em; border-radius:999px; font-weight:600;
  position:relative; overflow:hidden;
  transition:transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.chip-btn:hover{ background:linear-gradient(160deg,#ffffff,var(--c-card)); transform:translateY(-2px) scale(1.04); box-shadow:0 8px 18px -8px rgba(76,175,99,.45); }
.chip-btn:active{ transform:translateY(0) scale(0.95); }
.chip-btn.is-active{ background:var(--grad-btn); border-color:var(--c-btn); color:#fff; box-shadow:var(--glow-btn-hover); }
.chip-btn--light{ border-color:var(--c-light-trait); }
.chip-btn--medium{ border-color:var(--c-medium-trait); }
.chip-btn--dark{ border-color:var(--c-dark-trait); }
.overpop-reference{ max-width:420px; margin:1.6em auto 0; }
.chip-btn--light.is-active{ background:var(--c-light-trait); border-color:var(--c-light-trait); color:var(--c-deep); }
.chip-btn--medium.is-active{ background:var(--c-medium-trait); border-color:var(--c-medium-trait); color:#fff; }
.chip-btn--dark.is-active{ background:var(--c-dark-trait); border-color:var(--c-dark-trait); color:#fff; }


.struggle-demo{ background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:2em; }
.slider-row{ display:flex; align-items:center; gap:1em; font-size:0.9rem; }
.slider-row input[type="range"]{ flex:1; accent-color:var(--c-btn); }
.struggle-demo__stage{ position:relative; margin-top:1.4em; border-radius:var(--radius-md); overflow:hidden; height:260px; background:linear-gradient(180deg, #f2f9f0 0%, #e3f2e2 60%, #d8ecd6 100%); border:1px solid var(--c-pale); }
.struggle-demo__flies{ position:absolute; inset:0; }
.struggle-demo__flies img{ position:absolute; width:34px; transition:opacity 0.4s ease; }
.struggle-demo__readout{ text-align:center; margin-top:1em; font-weight:600; color:var(--c-heading); }
.struggle-demo__realworld{ margin-top:1.6em; }
.struggle-demo__realworld figcaption{ margin-top:0.8em; }


.camo-demo{ background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:2em; }
.camo-demo__envs{ display:flex; gap:0.8em; justify-content:center; margin-bottom:1.4em; }
.env-btn{
  background:linear-gradient(160deg,#ffffff,var(--c-pale)); border:1.5px solid var(--c-card); color:var(--c-heading);
  padding:0.6em 1.4em; border-radius:999px; font-weight:600; position:relative; overflow:hidden;
  transition:transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s ease, background 0.22s ease;
}
.env-btn:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 8px 16px -8px rgba(76,175,99,.4); }
.env-btn:active{ transform:translateY(0) scale(0.96); }
.env-btn.is-active{ background:var(--grad-btn); border-color:var(--c-btn); color:#fff; box-shadow:var(--glow-btn-hover); }
.camo-demo__stage{ position:relative; border-radius:var(--radius-md); overflow:hidden; height:280px; }
.camo-demo__bg{ width:100%; height:100%; object-fit:cover; }
.camo-demo__flies{ position:absolute; inset:0; }
.camo-demo__flies img{ position:absolute; width:30px; }
.camo-demo__caption{ text-align:center; font-size:0.92rem; opacity:0.8; margin-top:1em; }
.important-note{ background:var(--c-pale); border-left:4px solid var(--c-btn); border-radius:var(--radius-sm); padding:1em 1.3em; margin-top:1.4em; font-size:0.94rem; }
.logic-chain{ display:flex; flex-wrap:wrap; align-items:center; gap:0.5em; justify-content:center; margin-top:1.6em; font-size:0.88rem; font-weight:600; color:var(--c-heading); }
.logic-chain span:not(.logic-arrow){ background:var(--c-pale); padding:0.5em 0.9em; border-radius:999px; }
.logic-arrow{ color:var(--c-card); font-weight:400; }


.variation-row{ background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:2em; text-align:center; margin-bottom:2em; }
.variation-row__flies{ display:flex; justify-content:center; gap:2.4em; align-items:flex-end; }
.variation-row__flies img{ width:100px; }
.heredity-demo{ margin-bottom:2em; }
.equation-card{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0.7em;
  background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
  padding:1.6em; font-weight:600; color:var(--c-heading); text-align:center;
}
.equation-plus, .equation-equals{ color:var(--c-card); font-size:1.3rem; }
.equation-result{ background:var(--c-btn); color:#fff; padding:0.5em 1.1em; border-radius:999px; }

/* islands demo */
.islands-demo{ background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:2em; margin-bottom:2em; }
.islands-demo__grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.6em; }
.island-card h4{ margin:0.8em 0 0.2em; font-size:1.05rem; }
.island-card p{ font-size:0.9rem; opacity:0.85; }
.islands-demo__controls{ display:flex; align-items:center; gap:1.4em; justify-content:center; margin-top:1.4em; }
.islands-demo__gen{ font-weight:600; color:var(--c-heading); }
@media (max-width:700px){ .islands-demo__grid{ grid-template-columns:1fr; } }

.fly-lifecycle{ text-align:center; }


.screen--lab-intro{ background:var(--c-deep); color:var(--c-white); text-align:center; }
.lab-intro-stage{ max-width:640px; padding:0 24px; }
.lab-intro__line{ font-family:var(--font-display); font-size:1.4rem; margin-bottom:0.6em; opacity:0.9; }
.lab-intro__line--big{ font-size:1.7rem; color:var(--c-soft); margin-top:1em; }
.lab-intro__line--shout{ font-size:clamp(1.8rem,5vw,2.6rem); font-weight:700; color:var(--c-white); letter-spacing:0.02em; margin-bottom:1.2em; }


.lab-disclaimer{ background:var(--c-pale); border-radius:var(--radius-sm); padding:1em 1.3em; font-size:0.9rem; max-width:80ch; }
.lab-unlock-banner{ background:#FFF6E0; border:1px solid #F0DDA0; color:#8a6d1f; border-radius:var(--radius-sm); padding:1em 1.3em; margin-bottom:1.6em; font-size:0.92rem; }

.meet-organism{ margin-bottom:2em; }
.meet-organism__row{ display:flex; gap:1.6em; flex-wrap:wrap; }
.meet-organism__row figure{ background:var(--c-white); border:1px solid var(--c-pale); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:1em; margin:0; text-align:center; width:130px; }
.meet-organism__row img{ width:80px; height:80px; object-fit:contain; margin:0 auto; }
.meet-organism__row figcaption{ font-size:0.8rem; margin-top:0.5em; color:var(--c-heading); font-weight:600; }

.prediction-card{ background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:2em; margin:2em 0; }
.prediction-card__options{ display:flex; gap:0.8em; margin-top:1em; }
.prediction-card__status{ margin-top:1em; font-weight:600; color:var(--c-heading); min-height:1.4em; }

.lab-grid{ display:grid; grid-template-columns:240px 1fr 300px; gap:1.6em; margin:2em 0; align-items:start; }
.lab-panel{ background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:1.6em; }
.lab-panel h4{ font-size:1rem; margin-bottom:1em; }
.control-label{ font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--c-soft); margin-bottom:0.6em; }
.control-group{ margin-bottom:1.6em; }
.control-buttons{ display:flex; flex-direction:column; gap:0.6em; margin-bottom:0.6em; }
.pill-btn{
  background:linear-gradient(160deg,#ffffff,var(--c-pale)); border:1.5px solid var(--c-card); color:var(--c-heading);
  padding:0.65em 1em; border-radius:12px; font-weight:600; font-size:0.9rem; text-align:left;
  position:relative; overflow:hidden;
  transition:transform 0.22s cubic-bezier(.34,1.56,.64,1), box-shadow 0.22s ease, background 0.22s ease;
}
.pill-btn:hover{ background:linear-gradient(160deg,#ffffff,var(--c-card)); transform:translateY(-2px) scale(1.02); box-shadow:0 8px 16px -8px rgba(76,175,99,.45); }
.pill-btn:active{ transform:translateY(0) scale(0.97); }
.pill-btn.is-active{ background:var(--grad-btn); border-color:var(--c-btn); color:#fff; box-shadow:var(--glow-btn-hover); }
.pill-btn--action{ background:linear-gradient(160deg,#ffffff,#fbfffb); border-color:var(--c-card); }
.pill-btn--action:hover{ background:linear-gradient(160deg,#ffffff,var(--c-pale)); }
.pill-btn--reset{ border-color:#e3b3b3; color:#a34242; }
.pill-btn--reset:hover{ background:#fdeeee; box-shadow:0 8px 16px -8px rgba(163,66,66,.35); }

.lab-panel--stage{ display:flex; flex-direction:column; align-items:center; }
.lab-stage-header{ width:100%; display:flex; justify-content:center; margin-bottom:1em; }
.gen-counter{ background:var(--c-pale); padding:0.5em 1.2em; border-radius:999px; font-weight:600; color:var(--c-heading); }
#labCanvas{ width:100%; max-width:640px; height:auto; aspect-ratio:640/420; background:linear-gradient(180deg,#fbfff9,#eef8ee); border-radius:var(--radius-md); border:1px solid var(--c-pale); }

.data-cards{ display:grid; grid-template-columns:1fr 1fr; gap:0.7em; margin-bottom:1.4em; }
.data-card{ background:var(--c-pale); border-radius:var(--radius-sm); padding:0.8em 1em; }
.data-card__label{ display:block; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.03em; opacity:0.7; margin-bottom:0.2em; }
.data-card__value{ font-family:var(--font-display); font-size:1.3rem; color:var(--c-heading); font-weight:600; }
.data-card--light .data-card__value{ color:#a9832f; }
.data-card--medium .data-card__value{ color:var(--c-medium-trait); }
.data-card--dark .data-card__value{ color:var(--c-dark-trait); }

.lab-chart{ width:100%; height:auto; background:var(--c-mint); border-radius:var(--radius-sm); }
.lab-chart path{ opacity:0; animation:chartLineIn 0.45s ease forwards; }
@keyframes chartLineIn{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .lab-chart path{ animation:none; opacity:1; }
}
.data-card__value{ transition:color 0.2s ease; }
.chart-legend{ display:flex; gap:1.2em; justify-content:center; margin-top:0.8em; font-size:0.82rem; }
.legend-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; }
.legend-dot--light{ background:var(--c-light-trait); }
.legend-dot--medium{ background:var(--c-medium-trait); }
.legend-dot--dark{ background:var(--c-dark-trait); }

@media (max-width:1050px){
  .lab-grid{ grid-template-columns:1fr; }
}

.prediction-result{ background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:2em; margin:2em 0; text-align:center; }
.prediction-result__row{ display:flex; justify-content:center; gap:3em; margin:1em 0; flex-wrap:wrap; }
.prediction-result__label{ display:block; font-size:0.8rem; text-transform:uppercase; opacity:0.65; margin-bottom:0.3em; }
.prediction-result__row > div span:last-child{ font-family:var(--font-display); font-size:1.4rem; color:var(--c-heading); font-weight:600; text-transform:capitalize; }

.comparison-block{ background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:2.2em; margin-top:2em; }
.comparison-cards{ display:grid; grid-template-columns:1fr 1fr; gap:1.4em; margin:1.4em 0; }
.comparison-card{ background:var(--c-pale); border-radius:var(--radius-md); padding:1.4em; text-align:center; }
.comparison-card h4{ font-size:1rem; margin-bottom:0.4em; }
.comparison-card__env{ font-weight:600; color:var(--c-heading); margin-bottom:0.6em; }
.comparison-note{ font-size:0.9rem; opacity:0.8; text-align:center; margin:0; }
@media (max-width:640px){ .comparison-cards{ grid-template-columns:1fr; } }


.connect-chain{ display:flex; flex-wrap:wrap; gap:1em; justify-content:center; margin-bottom:2em; }
.connect-node{
  display:flex; align-items:center; gap:0.6em; background:linear-gradient(160deg,#ffffff,#f4fbf5); border:1.5px solid var(--c-card);
  border-radius:999px; padding:0.8em 1.4em; font-weight:600; color:var(--c-heading); box-shadow:var(--shadow-card);
  position:relative; overflow:hidden;
  transition:transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.connect-node:hover{ transform:translateY(-3px) scale(1.03); box-shadow:0 10px 22px -8px rgba(76,175,99,.5); }
.connect-node:hover, .connect-node.is-active{ background:var(--grad-btn); color:#fff; border-color:var(--c-btn); }
.connect-node.is-active{ box-shadow:var(--glow-btn-hover); }
.connect-node__num{ font-family:var(--font-display); }
.connect-reveal{
  background:var(--c-mint); border-radius:var(--radius-lg); padding:2em 2.4em; min-height:100px;
  font-size:1.08rem; color:var(--c-heading); text-align:center; transition:opacity 0.3s ease;
}


.challenge-card{ background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:2.4em; max-width:760px; margin:0 auto; }
.challenge-card__index{ font-size:0.85rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--c-soft); font-weight:700; }
.challenge-card__scenario{ font-size:1.05rem; }
.challenge-card__question{ font-weight:600; color:var(--c-heading); font-size:1.1rem; }
.challenge-card__options{ display:flex; gap:0.8em; flex-wrap:wrap; margin-bottom:1.4em; }
.challenge-card__result{ background:var(--c-pale); border-radius:var(--radius-sm); padding:1.2em 1.4em; margin:1em 0; }
.challenge-card__result strong{ color:var(--c-heading); }


.quiz-box{ background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:2.4em; max-width:760px; margin:0 auto; }
.quiz-progress{ display:flex; flex-direction:column; gap:0.5em; margin-bottom:1.6em; }
.quiz-progress__bar{ background:var(--c-pale); border-radius:999px; height:8px; overflow:hidden; }
.quiz-progress__fill{ background:var(--c-btn); height:100%; width:0%; transition:width 0.3s ease; }
.quiz-question{ font-size:1.2rem; font-weight:600; color:var(--c-heading); margin-bottom:1.2em; }
.quiz-options{ display:flex; flex-direction:column; gap:0.7em; margin-bottom:1.4em; }
.quiz-option{
  text-align:left; background:linear-gradient(160deg,#ffffff,var(--c-pale)); border:1.5px solid transparent; border-radius:var(--radius-sm);
  padding:0.9em 1.2em; font-size:0.98rem; position:relative; overflow:hidden;
  transition:transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  animation:optionPopIn 0.45s cubic-bezier(.22,1,.36,1) backwards;
}
.challenge-card__options .chip-btn{
  animation:optionPopIn 0.45s cubic-bezier(.22,1,.36,1) backwards;
}
@keyframes optionPopIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .quiz-option, .challenge-card__options .chip-btn{ animation:none; }
}
.quiz-option:hover{ border-color:var(--c-soft); transform:translateX(4px); box-shadow:0 6px 16px -8px rgba(76,175,99,.4); }
.quiz-option:active{ transform:translateX(4px) scale(0.985); }
.quiz-option.is-correct{ background:linear-gradient(160deg,#eafcec,#dff3e2); border-color:var(--c-btn); box-shadow:0 0 16px 1px rgba(76,175,99,.35); animation:quizCorrectPop 0.4s ease; }
.quiz-option.is-incorrect{ background:linear-gradient(160deg,#fdecec,#fbe4e4); border-color:#d98b8b; animation:quizShake 0.4s ease; }
@keyframes quizCorrectPop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.025); } 100%{ transform:scale(1); } }
@keyframes quizShake{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }
@media (prefers-reduced-motion: reduce){
  .quiz-option.is-correct, .quiz-option.is-incorrect{ animation:none; }
}
.quiz-option[disabled]{ cursor:default; }
.quiz-option[disabled]:hover{ transform:none; }
.quiz-feedback{ background:var(--c-mint); border-radius:var(--radius-sm); padding:1.1em 1.3em; margin-bottom:1.2em; font-size:0.95rem; }
.quiz-feedback strong{ color:var(--c-heading); }

.quiz-result{ max-width:600px; margin:0 auto; text-align:center; background:var(--c-white); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:3em; }
.quiz-result__score{ font-family:var(--font-display); font-size:2.4rem; color:var(--c-btn); font-weight:700; }
.quiz-result__msg{ font-size:1.1rem; color:var(--c-heading); margin-bottom:1.6em; }


.screen--completion{ background:linear-gradient(180deg, var(--c-deep) 0%, #0f2a1a 100%); color:var(--c-white); text-align:center; display:flex; align-items:center; justify-content:center; min-height:100vh; }
.completion-stage{ max-width:640px; padding:0 24px; }
.completion-badge{ display:inline-block; background:rgba(139,207,146,0.15); border:1px solid rgba(139,207,146,0.4); padding:0.5em 1.2em; border-radius:999px; font-weight:600; margin-bottom:1em; }
.completion-title{ color:var(--c-white); font-size:clamp(2.2rem,5vw,3rem); }
.completion-list{ list-style:none; padding:0; margin:1.6em 0; display:flex; flex-direction:column; gap:0.6em; opacity:0.9; }
.completion-statement{ font-family:var(--font-display); font-size:1.2rem; color:var(--c-soft); margin:1.6em 0 2em; }
.completion-actions{ display:flex; gap:1em; justify-content:center; flex-wrap:wrap; }
.screen--completion .btn--secondary{ background:transparent; color:var(--c-white); border-color:rgba(255,255,255,0.3); }
.screen--completion .btn--secondary:hover{ background:rgba(255,255,255,0.08); }


.exhibition-overlay{ position:fixed; left:0; right:0; bottom:0; z-index:300; display:flex; justify-content:center; padding:20px; pointer-events:none; }
.exhibition-overlay[hidden]{ display:none; }
.exhibition-overlay__panel{
  pointer-events:auto; background:var(--c-deep); color:#fff; border-radius:var(--radius-lg);
  padding:1.4em 1.8em; max-width:640px; width:100%; box-shadow:0 20px 50px rgba(0,0,0,0.35);
}
.exhibition-overlay__step{ font-size:0.8rem; opacity:0.7; margin-bottom:0.4em; }
.exhibition-overlay__text{ font-size:1.05rem; margin-bottom:1em; }
.exhibition-overlay__controls{ display:flex; gap:0.6em; flex-wrap:wrap; }
.exhibition-overlay__controls button{ background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); color:#fff; padding:0.5em 1em; border-radius:999px; font-size:0.85rem; }
.exhibition-overlay__controls button:hover{ background:rgba(255,255,255,0.22); }


.reveal{ opacity:0; transform:translateY(20px); transition:opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }


/* ==========================================================================
   SCROLL-REVEAL SYSTEM — entrance transitions for headings, text, cards,
   images and timeline items. Elements start slightly hidden/offset and
   settle into place once, as they enter the viewport (see main.js).
   Uses a soft organic easing curve rather than linear/bouncy motion.
   ========================================================================== */
.reveal-item{
  --reveal-ease: cubic-bezier(.22,1,.36,1);
  transition:
    opacity 0.75s var(--reveal-ease),
    transform 0.75s var(--reveal-ease),
    filter 0.75s var(--reveal-ease);
  will-change:opacity, transform;
}

/* Headings: fade + gentle rise + a touch of letter-spacing settling in */
.reveal-item--heading{
  opacity:0;
  transform:translateY(22px);
  letter-spacing:0.01em;
  filter:blur(4px);
}
.reveal-item--heading.is-visible{
  opacity:1;
  transform:translateY(0);
  letter-spacing:normal;
  filter:blur(0);
}

/* Supporting text (eyebrows, subtitles, taglines): simple, slightly delayed opacity+rise */
.reveal-item--text{
  opacity:0;
  transform:translateY(14px);
}
.reveal-item--text.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Images/figures: soft blur-to-clear scale-in */
.reveal-item--scale{
  opacity:0;
  transform:scale(0.94);
  filter:blur(6px);
}
.reveal-item--scale.is-visible{
  opacity:1;
  transform:scale(1);
  filter:blur(0);
}

/* General cards/containers: fade + upward movement */
.reveal-item--up{
  opacity:0;
  transform:translateY(26px);
}
.reveal-item--up.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Small chips/list items: subtler, quicker rise */
.reveal-item--up-sm{
  opacity:0;
  transform:translateY(12px);
  transition-duration:0.55s;
}
.reveal-item--up-sm.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Timeline-style items: alternate small horizontal movement */
.reveal-item--alt{
  opacity:0;
  transform:translateX(-16px);
}
.reveal-item--alt.is-visible{
  opacity:1;
  transform:translateX(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal-item{ transition:opacity 0.4s ease !important; filter:none !important; }
  .reveal-item--heading,
  .reveal-item--text,
  .reveal-item--scale,
  .reveal-item--up,
  .reveal-item--up-sm,
  .reveal-item--alt{ transform:none !important; }
}


[hidden]{ display:none !important; }


@media (max-width:600px){
  .screen{ padding:80px 0; }
  .section-inner{ padding:0 18px; }
  .welcome-team__members{ flex-direction:column; gap:1em; }
}


.site-footer{
  background:linear-gradient(180deg, #0f2a1a 0%, var(--c-deep) 100%);
  color:rgba(255,255,255,0.85); padding:64px 0 32px; text-align:center; position:relative; overflow:hidden;
}
.site-footer::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(139,207,146,0.18) 1px, transparent 0);
  background-size:24px 24px; opacity:0.6; pointer-events:none;
}
.site-footer__inner{ max-width:760px; margin:0 auto; padding:0 24px; position:relative; z-index:1; }
.site-footer__brand{ font-family:var(--font-display); font-size:1.5rem; color:#fff; margin-bottom:0.3em; }
.site-footer__tagline{ opacity:0.75; font-size:0.98rem; margin-bottom:1.6em; }
.site-footer__links{ display:flex; gap:1.6em; justify-content:center; flex-wrap:wrap; margin-bottom:2em; }
.site-footer__links a{
  color:rgba(255,255,255,0.85); text-decoration:none; font-weight:600; font-size:0.92rem;
  padding:0.4em 0.2em; border-bottom:1.5px solid transparent; transition:border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  display:inline-block;
}
.site-footer__links a:hover{ color:var(--c-soft); border-color:var(--c-soft); transform:translateY(-2px); }
.site-footer__note{ font-size:0.8rem; opacity:0.5; margin:0; }


/* ==========================================================================
   CUSTOM DARWINISM CURSOR
   Enabled only via JS on devices with a real mouse (hover:hover + pointer:fine);
   touch/tablet devices keep native touch behaviour untouched (see enhance.js).
   The glow/scale live on the wrapper (#customCursor) rather than the <img>
   itself, since <img> elements elsewhere are forced filter:none for
   readability — keeping it on the wrapper avoids that rule entirely.
   ========================================================================== */
html.custom-cursor-active,
html.custom-cursor-active *{
  cursor:none !important;
}

#customCursor{
  position:fixed;
  top:0; left:0;
  width:30px;
  pointer-events:none;
  z-index:99999;
  opacity:0;
  transform:translate3d(-100px,-100px,0);
  transition:opacity 0.2s ease, filter 0.2s ease;
  filter:drop-shadow(0 3px 8px rgba(23,59,36,.4));
}
#customCursor.is-ready{ opacity:1; }
#customCursor.is-hover{
  filter:drop-shadow(0 3px 8px rgba(23,59,36,.4)) drop-shadow(0 0 12px rgba(124,242,156,.8));
}
#customCursor img{
  display:block; width:100%; height:auto;
  transform:scale(1);
  transform-origin:30% 16%;
  transition:transform 0.16s cubic-bezier(.34,1.56,.64,1);
}
#customCursor.is-hover img{ transform:scale(1.2); }
#customCursor.is-click img{ transform:scale(0.8); transition-duration:0.08s; }

@media (prefers-reduced-motion: reduce){
  #customCursor{ transition:opacity 0.2s ease; }
  #customCursor img{ transition:none; }
}

/* Easter-egg surprise moments — cute characters that appear once per visit */
.easter-egg{
  position:fixed; left:0; right:0; bottom:26px; z-index:9500;
  display:flex; justify-content:center; padding:0 20px;
  pointer-events:none;
}
.easter-egg__card{
  display:flex; align-items:center; gap:10px; max-width:480px;
  opacity:0; transform:translateY(40px) scale(0.9);
  transition:opacity 0.55s cubic-bezier(.22,1,.36,1), transform 0.55s cubic-bezier(.22,1,.36,1);
}
.easter-egg.is-visible .easter-egg__card{ opacity:1; transform:translateY(0) scale(1); }
.easter-egg.is-leaving .easter-egg__card{
  opacity:0; transform:translateY(-18px) scale(0.94);
  transition:opacity 0.4s ease, transform 0.4s ease;
}
.easter-egg__char{
  width:150px; height:auto; flex-shrink:0;
  filter:drop-shadow(0 10px 18px rgba(23,59,36,.28));
  animation:easterEggFloat 3.6s ease-in-out infinite;
}
@keyframes easterEggFloat{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%{ transform:translateY(-9px) rotate(2deg); }
}
.easter-egg__bubble{
  position:relative; background:var(--c-white); border:1px solid var(--c-card);
  border-radius:var(--radius-md); box-shadow:var(--shadow-soft);
  padding:1em 1.2em; pointer-events:auto;
}
.easter-egg__bubble::after{
  content:''; position:absolute; left:-8px; bottom:22px;
  width:16px; height:16px; background:var(--c-white);
  border-left:1px solid var(--c-card); border-bottom:1px solid var(--c-card);
  transform:rotate(45deg); border-radius:0 0 0 4px;
}
.easter-egg__text{
  margin:0 0 0.7em; font-family:var(--font-display); font-weight:600;
  color:var(--c-heading); font-size:1.02rem;
  opacity:0; transform:translateY(6px);
  transition:opacity 0.4s ease 0.35s, transform 0.4s ease 0.35s;
}
.easter-egg.is-visible .easter-egg__text{ opacity:1; transform:translateY(0); }
.easter-egg__actions{
  display:flex; gap:0.6em; flex-wrap:wrap;
  opacity:0; transform:translateY(6px);
  transition:opacity 0.4s ease 0.6s, transform 0.4s ease 0.6s;
}
.easter-egg.is-visible .easter-egg__actions{ opacity:1; transform:translateY(0); }
.easter-egg__btn{
  background:linear-gradient(160deg,#ffffff,var(--c-pale)); border:1.5px solid var(--c-card);
  color:var(--c-heading); font-weight:600; font-size:0.85rem;
  padding:0.5em 1em; border-radius:999px;
  transition:transform 0.2s cubic-bezier(.34,1.56,.64,1), box-shadow 0.2s ease, background 0.2s ease;
}
.easter-egg__btn:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 8px 16px -8px rgba(76,175,99,.4); background:linear-gradient(160deg,#ffffff,var(--c-card)); }
.easter-egg__btn:active{ transform:translateY(0) scale(0.96); }
@media (max-width:640px){
  .easter-egg{ bottom:16px; padding:0 14px; }
  .easter-egg__card{ flex-direction:column; align-items:center; text-align:center; }
  .easter-egg__char{ width:120px; }
  .easter-egg__bubble{ padding:0.85em 1em; }
  .easter-egg__bubble::after{ display:none; }
  .easter-egg__text{ font-size:0.94rem; }
  .easter-egg__actions{ justify-content:center; }
}
@media (prefers-reduced-motion: reduce){
  .easter-egg__char{ animation:none; }
  .easter-egg__card, .easter-egg__text, .easter-egg__actions{ transition:opacity 0.3s ease; transform:none !important; }
}

.easter-trigger{ position:relative; height:1px; }


/* ==========================================================================
   DARWINISM — FINAL PARTICLE-SAFE GLASS / READABILITY LAYER
   This block is intentionally LAST in the stylesheet.
   It keeps particles visible around content while putting a soft,
   blurred "glass shield" behind text and images.
   ========================================================================== */

/* ---------- master stacking ---------- */
html, body {
  min-height: 100% !important;
}

body {
  background: transparent !important;
  background-image: none !important;
}

/* Remove the old dotted + blurred ambient background layers.
   The particle canvas is now the background visual. */
body::before,
body::after {
  display: none !important;
  content: none !important;
}

/* Particle systems stay behind the readability layer. */
#particles-js,
#atmosphereCanvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* The decorative floating layer must NEVER sit above readable content. */
.deco-layer {
  z-index: 1 !important;
  pointer-events: none !important;
}

main,
.site-nav,
footer.site-footer {
  position: relative !important;
  z-index: 2 !important;
}


/* ---------- transparent sections ---------- */
.screen {
  background: transparent !important;
  position: relative !important;
  isolation: isolate !important;
}

/* ---------- universal glass shield behind normal section content ----------
   IMPORTANT: blur is applied to ::before, NOT to the content.
   Therefore text and images remain sharp. */
.section-inner {
  position: relative !important;
  isolation: isolate !important;
  z-index: 1 !important;
}

.section-inner::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;

  top: -34px !important;
  right: -34px !important;
  bottom: -34px !important;
  left: -34px !important;

  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 34px !important;

  box-shadow:
    0 18px 55px rgba(23, 59, 36, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;

  backdrop-filter: blur(14px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(115%) !important;
}


/* ---------- dark-section glass shields ---------- */
.screen--curiosity .curiosity-stage,
.screen--lab-intro .lab-intro-stage,
.screen--completion .completion-stage {
  position: relative !important;
  isolation: isolate !important;
}

.screen--curiosity .curiosity-stage::before,
.screen--lab-intro .lab-intro-stage::before,
.screen--completion .completion-stage::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;

  top: -42px !important;
  right: -42px !important;
  bottom: -42px !important;
  left: -42px !important;

  background: rgba(10, 39, 23, 0.72) !important;
  border: 1px solid rgba(139, 207, 146, 0.16) !important;
  border-radius: 34px !important;

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;

  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}


/* ---------- welcome glass shield ---------- */
.screen--welcome {
  background: transparent !important;
  isolation: isolate !important;
}

.welcome-inner {
  position: relative !important;
  isolation: isolate !important;
  z-index: 3 !important;
}

.welcome-inner::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;

  top: -42px !important;
  right: -56px !important;
  bottom: -42px !important;
  left: -56px !important;

  background: rgba(255, 255, 255, 0.70) !important;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  border-radius: 40px !important;

  box-shadow:
    0 24px 70px rgba(23, 59, 36, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;

  backdrop-filter: blur(16px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
}


/* ---------- navbar: glass, but text stays sharp ---------- */
.site-nav {
  background: rgba(255, 255, 255, 0.82) !important;
  border-bottom: 1px solid rgba(139, 207, 146, 0.55) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.site-nav * {
  filter: none !important;
  -webkit-filter: none !important;
}


/* ---------- text readability cards ----------
   These create a small glass shield specifically around longer text
   blocks instead of changing opacity on the text itself. */
.darwin-intro__text,
.darwin-voyage__text,
.darwin-finches__text,
.door-detail__text,
.darwin-idea-card,
.darwin-mini-timeline,
.lab-disclaimer,
.lab-unlock-banner,
.important-note,
.logic-chain,
.connect-reveal,
.challenge-card,
.quiz-box,
.quiz-result {
  position: relative !important;
  isolation: isolate !important;
}

/* Soft glass behind text groups */
.darwin-intro__text::before,
.darwin-voyage__text::before,
.darwin-finches__text::before,
.door-detail__text::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;
  inset: -16px !important;

  background: rgba(255, 255, 255, 0.64) !important;
  border: 1px solid rgba(255, 255, 255, 0.72) !important;
  border-radius: 22px !important;

  backdrop-filter: blur(12px) saturate(115%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(115%) !important;

  box-shadow: 0 10px 28px rgba(23, 59, 36, 0.07) !important;
}


/* ---------- images: readable glass backing ---------- */
.image-card {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid rgba(205, 235, 206, 0.95) !important;
  position: relative !important;
  isolation: isolate !important;
  z-index: 1 !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.image-card img {
  position: relative !important;
  z-index: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}


/* ---------- door images: glass halo behind transparent PNG ---------- */
.door__frame {
  position: relative !important;
  isolation: isolate !important;
}

.door__frame::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;
  inset: 7% !important;

  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
  border-radius: 26px !important;

  box-shadow:
    0 12px 28px rgba(23, 59, 36, 0.09),
    inset 0 1px 0 rgba(255,255,255,.8) !important;

  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.door__img {
  position: relative !important;
  z-index: 1 !important;
}


/* ---------- fundamental cards ---------- */
.fund-node {
  background: rgba(255, 255, 255, 0.90) !important;
  border: 1px solid rgba(205, 235, 206, 0.95) !important;
  position: relative !important;
  isolation: isolate !important;
  z-index: 1 !important;
}

.fund-node__img {
  position: relative !important;
  isolation: isolate !important;
}

.fund-node__img::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;
  inset: -6px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.72) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.fund-node__img img {
  position: relative !important;
  z-index: 1 !important;
}


/* ---------- curiosity sequence ----------
   Let the original JS control the question sequence, but make
   the visible question perfectly sharp. */
.curiosity-question.is-visible,
.curiosity-reveal.is-visible {
  filter: none !important;
  -webkit-filter: none !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.20) !important;
}

.curiosity-question.is-visible {
  opacity: 1 !important;
}

.curiosity-reveal.is-visible {
  opacity: 1 !important;
}


/* ---------- standard demo cards ---------- */
.darwin-mini-timeline,
.overproduction-demo,
.struggle-demo,
.camo-demo,
.variation-row,
.equation-card,
.islands-demo,
.prediction-card,
.lab-panel,
.prediction-result,
.comparison-block,
.challenge-card,
.quiz-box,
.quiz-result {
  background: rgba(255, 255, 255, 0.90) !important;
  border: 1px solid rgba(205, 235, 206, 0.88) !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
}


/* ---------- demo stages stay crisp ----------
   Do NOT blur canvases, photos, or fly animations themselves. */
.overproduction-demo__stage,
.struggle-demo__stage,
.camo-demo__stage,
#labCanvas,
.lab-chart {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
  -webkit-filter: none !important;
}


/* ---------- organism images ---------- */
.meet-organism__row figure {
  background: rgba(255,255,255,.90) !important;
  border: 1px solid rgba(205,235,206,.90) !important;
  backdrop-filter: blur(9px) !important;
  -webkit-backdrop-filter: blur(9px) !important;
}

.meet-organism__row img,
.variation-row__flies img,
.island-card img,
.fund-node__img img {
  filter: none !important;
  -webkit-filter: none !important;
}


/* ---------- controls: NEVER transparent ---------- */
button,
.btn,
.chip-btn,
.env-btn,
.pill-btn,
.connect-node,
.exhibition-toggle,
.progress-widget__handle,
.easter-egg__btn {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

.btn--primary {
  background: var(--grad-btn) !important;
  color: #fff !important;
}

.btn--secondary {
  background: linear-gradient(160deg, #ffffff 0%, #f2fbf4 100%) !important;
  color: var(--c-heading) !important;
}

.chip-btn,
.env-btn,
.pill-btn {
  background: linear-gradient(160deg, #ffffff 0%, var(--c-pale) 100%) !important;
  color: var(--c-heading) !important;
}

.chip-btn.is-active,
.env-btn.is-active,
.pill-btn.is-active,
.connect-node.is-active,
.exhibition-toggle.is-on {
  background: var(--grad-btn) !important;
  color: #fff !important;
}


/* ---------- text itself: never inherit transparency ---------- */
.section-title,
.section-subtitle,
.eyebrow-soft,
.welcome-title,
.welcome-subtitle,
.welcome-tagline,
.welcome-team__label,
.team-member__name,
.team-member__role,
.door-detail__tag,
.door__number,
.door__label,
.demo-label,
.data-card__label,
.data-card__value,
.camo-demo__caption,
.island-card p,
.prediction-result__label,
.prediction-result__row > div span,
.comparison-note,
.completion-title,
.completion-list,
.completion-statement {
  filter: none !important;
  -webkit-filter: none !important;
}


/* ---------- lower-opacity descriptive text gets a readability floor ----------
   This changes only intentionally faded descriptive text, not animations.
   (.section-subtitle / .welcome-tagline are handled by the reveal system
   below instead, so their entrance fade isn't fought by a fixed opacity.) */
.team-member__role,
.fund-node__desc,
.fine-note,
.camo-demo__caption,
.island-card p,
.comparison-note,
.prediction-result__label {
  opacity: 0.92 !important;
}

.section-subtitle.is-visible,
.welcome-tagline.is-visible{ opacity:0.92; }


/* ---------- progress widget ---------- */
.progress-widget__handle,
.progress-widget__panel {
  filter: none !important;
  -webkit-filter: none !important;
}

.progress-widget__panel {
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}


/* ---------- completion section ---------- */
.screen--completion {
  background: transparent !important;
  color: #fff !important;
}

.screen--completion .btn--secondary {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
}


/* ---------- footer ---------- */
.site-footer {
  position: relative !important;
  z-index: 2 !important;
}

.site-footer::before {
  opacity: .28 !important;
}

.site-footer__inner {
  position: relative !important;
  z-index: 2 !important;
}


/* ---------- don't let overlays accidentally blur the page ---------- */
.exhibition-overlay,
.exhibition-overlay__panel,
.easter-egg__bubble {
  filter: none !important;
  -webkit-filter: none !important;
}

.exhibition-overlay__panel {
  background: rgba(23,59,36,.96) !important;
}


/* ---------- images/canvas remain sharp ---------- */
img,
canvas,
svg {
  filter: none !important;
  -webkit-filter: none !important;
}


/* ---------- accessibility: keep hidden attribute truly hidden ---------- */
[hidden] {
  display: none !important;
}


/* ---------- mobile: smaller glass margins ---------- */
@media (max-width: 700px) {
  .section-inner::before {
    top: -20px !important;
    right: -12px !important;
    bottom: -20px !important;
    left: -12px !important;
    border-radius: 26px !important;
  }

  .welcome-inner::before {
    top: -22px !important;
    right: -12px !important;
    bottom: -22px !important;
    left: -12px !important;
    border-radius: 28px !important;
  }

  .screen--curiosity .curiosity-stage::before,
  .screen--lab-intro .lab-intro-stage::before,
  .screen--completion .completion-stage::before {
    top: -24px !important;
    right: -14px !important;
    bottom: -24px !important;
    left: -14px !important;
    border-radius: 28px !important;
  }

  .darwin-intro__text::before,
  .darwin-voyage__text::before,
  .darwin-finches__text::before,
  .door-detail__text::before {
    inset: -10px !important;
  }
}


/* ---------- FINAL SAFETY RULES ---------- */
main,
main * {
  box-sizing: border-box !important;
}

/* No ancestor of the main content should blur the foreground. */
main,
.screen,
.section-inner,
.welcome-inner,
.curiosity-stage,
.lab-intro-stage,
.completion-stage {
  filter: none !important;
  -webkit-filter: none !important;
}

/* The ONLY blur used by this override is on dedicated background
   glass layers, never on foreground text/images. */