@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap');

@font-face {
  font-family: "Garamond Regular";
  src: url(fonts/EBGaramond-Regular.ttf);
}

@font-face {
  font-family: "Garamond Regular";
  font-style: italic;
  src: url(fonts/EBGaramond-Italic.ttf);
}

body, html {
  cursor: none;
}

body {
    margin: auto;
    text-align: justify;
    max-width: 78ch;
    font-family: "Bitter", monospace;
    line-height: 1.6;
    font-weight: 270;
    font-size: 1em;
  cursor: none; /* hide default cursor */
  overflow-x: hidden;
    background-image: url("../media/charcoal-bg.jpg");;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

/* === Bottom screen glow === */
body::after {
  content: "";
  position: fixed;
  left: -20vw;              /* extra breed, voorbij schermranden */
  bottom: -40px;            /* echt tegen de onderrand gedrukt */
  width: 140vw;             /* overspant voorbij links + rechts */
  height: 220px;

  background: radial-gradient(
    ellipse at bottom center,
    rgba(120, 220, 255, 0.55) 0%,
    rgba(120, 220, 255, 0.28) 25%,
    rgba(120, 220, 255, 0.12) 45%,
    rgba(0, 0, 0, 0) 75%
  );

  filter: blur(35px);
  pointer-events: none;
  opacity: 0;
  transform: scaleY(0.85);

  transition: opacity 1.4s ease;
  z-index: 9999;
}

/* Alleen zichtbaar aan het einde */
body.bottom-glow::after {
  opacity: 1;
  animation: glowBreath 5.5s ease-in-out infinite;
}

/* Ademend / levend gevoel */
@keyframes glowBreath {
  0% {
    transform: scaleY(0.75) scaleX(0.95) translateY(10px);
    opacity: 0.35;
    filter: blur(45px);
  }

  35% {
    transform: scaleY(0.9) scaleX(1) translateY(0);
    opacity: 0.55;
    filter: blur(38px);
  }

  65% {
    transform: scaleY(1.08) scaleX(1.05) translateY(-6px);
    opacity: 1;
    filter: blur(20px);
  }

  100% {
    transform: scaleY(0.75) scaleX(0.95) translateY(10px);
    opacity: 0.35;
    filter: blur(45px);
  }
}

a { 
    color: #ccc;
    font-style: italic;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

a:hover {
  color: #9fe7ff;
  text-shadow:
    0 0 6px rgba(120, 210, 255, 0.6),
    0 0 12px rgba(120, 210, 255, 0.4);
}

p { 
    color: #ccc;
}

h2 {
    color: #ccc;
    font-size: 2.5em;
    font-family: "Yuji Boku", serif;

}

h3 {
    color: #ccc;
    font-size: 1.7em;
    font-family: "Yuji Boku", serif;
}

h4 {
    color: #ccc;
        font-size: 2.0em;
    font-family: "Yuji Boku", serif;
}

.title{
  padding-top: 60%;;
}

.titlep {
  margin-top: 10%;;
}

/* ✨ Cursor light — bright center fading outward */
#cursor-light {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

.cursor-ghost {
  position: fixed;
  pointer-events: none;
  width: 55px;               /* same base size as your cursor */
  height: 60px;
  border-radius: 40%;
  background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0));
  opacity: 0.35;
  transform: translate(-50%, -50%);
  filter: blur(8px);         /* fluorescent softness */
  transition: opacity 0.7s linear;
  z-index: 999;
}


.title-container {
  position: relative;
  display: inline-block;
  width: 100%; 
  margin: auto;
  margin-top: 40%;
}

.title-image {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  max-width: 1300px;
  height: auto;
  opacity: 0;
  animation: titleBreathingGlow 3.8s ease-out forwards;
  filter: drop-shadow(0 0 0 rgba(255,255,255,0));
}

@keyframes titleBreathingGlow {
  0% {
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(200,240,255,0));
  }

  12% {
    opacity: 0.35;
    filter: drop-shadow(0 0 18px rgba(200,240,255,0.35));
  }

  22% {
    opacity: 0.2;
    filter: drop-shadow(0 0 10px rgba(200,240,255,0.25));
  }

  38% {
    opacity: 0.65;
    filter: drop-shadow(0 0 30px rgba(200,240,255,0.6));
  }

  55% {
    opacity: 0.45;
    filter: drop-shadow(0 0 20px rgba(200,240,255,0.4));
  }

  72% {
  opacity: 1;
  filter: drop-shadow(0 0 85px rgba(200,240,255,0.85));
  }  

85% {
  opacity: 1;
  filter: drop-shadow(0 0 25px rgba(200,240,255,0.3));
}

  100% {
    opacity: 1;
    filter: drop-shadow(0 0 0 rgba(200,240,255,0));
  }
}


.history {
  margin-top: 8%;
}

.evolution {
  margin-top: 8%;
}

.chemical-mechanism {
  margin-top: 8%;
}

.distribution { 
  margin-top: 8%;
}

.pelagic-zone {
  margin-top: 5%;
}

.bacterial-symbioses {
  margin-top: 5%;
}

.benthic-zone {
  margin-top: 5%;
}

.uses-in-nature {
  margin-top: 8%;
}

.light-production {
  margin-top: 5%;
}

.atp-bioluminescence {
  margin-top: 5%;
}

.zeeschelp {
  display: block;
  position: relative;
  max-width: 1150px;
  width: 1150px;
  margin-left: -28%;
}

.bacterial {
  display: block;
  position: relative;
  max-width: 1150px;
  width: 1150px;
  margin-left: -20%;
}

.surface-illustration {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 60%;
}

.surface-illustration img.surface {
  width: 85%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Stack images */
.surface-illustration .surface.base {
  position: relative;
  z-index: 1;
}

.surface-illustration .surface.hover-light {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  max-width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1.7s ease;
  z-index: 2;
}

/* Hover reveal */
.surface-illustration:hover .surface.hover-light {
  opacity: 1;
}

/* --- BLINDING GLOW ON HOVER --- */
.surface-illustration::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;

  background: radial-gradient(
    circle,
    rgba(200,240,255,0.95) 0%,
    rgba(200,240,255,0.6) 20%,
    rgba(200,240,255,0.25) 40%,
    rgba(200,240,255,0.1) 55%,
    rgba(200,240,255,0) 70%
  );

  filter: blur(40px);           /* zachter */
  transition:
    opacity 2.8s ease-out,      /* langzamer uitdoven */
    transform 3.2s ease-out;

  opacity: 0;
  z-index: 5; /* BOVEN beide images */
  filter: blur(12px);
}

/* trigger */
.surface-illustration:hover::after {
  animation: surfaceFlash 1.4s ease-out forwards;
}

@keyframes surfaceFlash {
  0% {
    opacity: 0;
    width: 20px;
    height: 20px;
  }
  20% {
    opacity: 1;
    width: 900px;
    height: 900px;
  }
  55% {
    opacity: 0.6;
    width: 1100px;
    height: 1100px;
  }
  100% {
    opacity: 0;
    width: 1300px;
    height: 1300px;
  }
}


.luci {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 110px auto;      /* space above and below */
  max-width: 1300px;      /* overall width limit */
}

.luci img {
  width: 1400px;
  max-width: 1400px;       /* keeps it from getting too large */
  height: auto;
  display: block;
}


.darwin-quote {
    padding-top:17px;
    font-family: 'Zapfino', cursive;
    line-height: 2.2;
    font-size: 0.9rem; 
  margin-top: 60px;
  margin-bottom: 8px;
  white-space: pre-wrap;
  text-shadow: none;
  color: #ccc;
}

.darwin-quote span {
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* ✨ Fluorescent blue flash */
.darwin-quote span.visible {
  opacity: 1;
  animation: writeBlue 0.2s ease;
}

@keyframes writeBlue {
  0% {
    color: #4cc2ff;   /* deep fluorescent blue start */
  }
  40% {
    color: #66ebff;   /* bright cool blue midpoint */
  }
  100% {
    color: #ccc;   /* fade back to white */
  }
}

.evolution {
  position: relative;
}

.harvey-glow {
  color: #b6ff3b; /* fluorescent groen */
  text-shadow:
    0 0 6px rgba(182, 255, 59, 0.8),
    0 0 14px rgba(182, 255, 59, 0.6);
}

.harvey-section {
  float: left;
  width: 60%;
  max-width: 100%;
  margin-left: -5%;
  margin-bottom: 1rem;
  position: relative;
}

.reveal-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 3 / 4; 
  overflow: hidden;
}


.reveal-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}

/* Top layer masked to reveal "Under" through light */
.reveal-container .top {
  z-index: 2;
  -webkit-mask-image: radial-gradient(circle 0px at center center, transparent 0%, black 100%);
  mask-image: radial-gradient(circle 0px at center center, transparent 0%, black 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: -webkit-mask-image 1s ease, mask-image 1s ease;
}

.reveal-container .under {
  z-index: 1;
}

/* soft transition for entering/exiting */
.reveal-container.smooth-transition .top {
  transition: mask-image 1.5s ease-in-out, -webkit-mask-image 1.5s ease-in-out;
}


.history {
  position: relative;
}

.history-lamp {
  position: relative;
}

/* Side-floating image */
.history-side {
  position: absolute;
  top: -650px;         /* aligns it with the first lines of text */
  right: -750px;     /* move image to the right of your text column */
  width: 1200px;      /* adjust size as needed */
  height: auto;
  pointer-events: none; /* prevents it from interfering with cursor reveal */
}

.history-light {
  position: absolute;
  top: -650px;        
  right: -750px;  
  width: 1200px;  
  height: auto;
  opacity: 0;             /* hidden until visible in viewport */
  pointer-events: none;
  mix-blend-mode: screen; /* gives a true “light source” look */
  transition: opacity 0.2s ease;
}


.darwin-reveal {
  position: relative;
  display: block;
  width: 1300px;        /* keeps the current width and alignment you already placed */
  height: auto;
  overflow: visible;
  margin-bottom: 100%;
  left: 45%;
  transform: translateX(-50%);
}

/* Force absolute stacking and ignore other global image rules */
.darwin-reveal img {
  position: absolute !important;
  display: block;
  top: 0; 
  left: 0; 
  width: 1300px;
  height: auto;
}

/* Under image starts fully hidden; we will fade it in with JS */
.darwin-under {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  pointer-events: none; /* don't let it steal pointer events from the top */
}

/* Top image stays on top and covers the under image */
.darwin-top {
  background: #000; 
  z-index: 2;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  /* Start fully opaque (no reveal) */
  mask-image: radial-gradient(circle 0px at center, transparent 0%, black 100%);
  -webkit-mask-image: radial-gradient(circle 0px at center, transparent 0%, black 100%);
}

/* Visual soft light that follows the pointer inside the darwin-reveal */
.darwin-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --lx: 50%;
  --ly: 50%;
  --lr: 0px;
  background: radial-gradient(circle var(--lr) at var(--lx) var(--ly),
              rgba(180, 240, 255, 0.20) 0%, rgba(120, 200, 255, 0.06) 35%, rgba(0,0,0,0) 80%);
  mix-blend-mode: screen;
  opacity: 0; /* toggled on hover via JS for smoother control */
  transition: opacity 0.45s ease;
  z-index: 2; /* sits above under, below top so it looks like illumination */
}

/* small helper so the light is visible when active */
.darwin-reveal.light-active::after {
  opacity: 1;
}


/* --- JET SECTION --- */


.jet-reveal {
  position: relative;
  display: block;
  width: 120%;
  max-width: 120%; 
  height: auto;
  overflow: visible;
  margin-top: 8%;
  margin-bottom: 88%;
  margin-left: -10%;
}

.jet-reveal img {
  position: absolute;
  display: block;
  width: 100%;
  height: auto;
}

.jet-top {
  opacity: 0;
  transition: opacity 1.5s ease-out;
}

.jet-top.flicker-on {
  animation: jetFlicker 2.4s ease-out forwards;
}

/* Keyframes: light flickers quickly then stabilizes */
@keyframes jetFlicker {
  0%   { opacity: 0; }
  10%  { opacity: 0.35; }
  18%  { opacity: 0; }
  26%  { opacity: 0.55; }
  38%  { opacity: 0.1; }
  48%  { opacity: 0.75; }
  60%  { opacity: 0.25; }
  78%  { opacity: 0.9; }
  100% { opacity: 1; }
}


.counter-image {
  display: block;
  width: 1000px;
  max-width: 1000px;
  margin-left: -12%;
  margin-bottom: 5%;
}

.attraction {
  position: relative;
  right: -10rem;
}

.attraction p {
  margin-top: 5%;
}

.attraction-image {
  float: left;
  position: relative;
  margin-left: -30rem;
  width: 80%;
  max-width: 100%;
  padding-right: 8%;
}

.defense {
  position: relative;
  left: -10rem;
  margin-top: 20%;
}

.defense-image {
  float: right;
  width: 85%;
  max-width: 100%;
  margin-right: -38rem;
  padding-left: 5%;
}

.warning {
  margin-top: 10%;
}

.warning-image {
  display: block;
  width: 1000px;
  max-width: 1000px;
  margin-left: -10%;
}

.communication {
  margin-top: 5%;
}

.com-image {
  animation: comFlicker 4.5s ease-in-out infinite;
}

@keyframes comFlicker {
  0%   { opacity: 0.85; }
  15%  { opacity: 1; }
  30%  { opacity: 0.7; }
  45%  { opacity: 0.95; }
  60%  { opacity: 0.8; }
  75%  { opacity: 1; }
  100% { opacity: 0.85; }
}

.com-image.left {
  float: left;
  margin-left: -35rem;
  width: 70%;
  max-width: 100%;
  height: auto;
  position: relative;
  margin-top: 15%;  
  animation: comFlicker 4.5s ease-in-out infinite;
  animation-delay: 0s;
}

.com-image.right {
  float: right;
  margin-right: -20rem;
  width: 35%;
  max-width: 100%;
  height: auto;
  position: relative;
  top: -3rem;
  animation-delay: 1.2s;
}

.mimicry {
  margin-top: 15%;
  margin-bottom: 10%;
}

.mimicry-image {
  display: block;
  width: 1000px;
  max-width: 1000px;
  margin-left: -7%;
}

.illumination-image {
  display: block;
  width: 900px;
  max-width: 1000px;
  margin-left: -10%;
}

.atp-bioluminescence{
  padding-bottom: 20%;
}


.biology-and-medicine {
  position: relative;
  left: -17rem;
  margin-top: 20%;
  margin-bottom: 25%;
}

.microscoop {
  float: right;
  width: 110%;
  max-width: 110%;
  margin-right: -47rem;
  padding-left: 5%;
  margin-top: -10%;
}

.light-production {
  position: relative;
  right: -10rem;
  margin-bottom: 15%;
}

.microlens {
  float: left;
  position: relative;
  margin-left: -33rem;
  width: 80%;
  max-width: 100%;
  padding-right: 8%;
}

.atp-bioluminescence {
  margin-bottom: 15%;
}