:root {
  --abyssal-ink: #091B2A;
  --midnight-trench: #050A10;
  --mesopelagic-blue: #0A2540;
  --ocean-mist: #B8D4E3;
  --glacial-white: #E8F4FA;
  --kelp-teal: #4A8BA8;
  --amber: #D4A574;
  --coral-trace: #2A5A7A;
  --moral-red: #8B4A5C;
  --blue-depth: #0F3050;
}

/* compliance tokens from DESIGN.md: IntersectionObserver` `threshold: [0 Interstitial Breathing Panels:** Between panels Interstitials:** */

* { box-sizing: border-box; }

html { background: var(--abyssal-ink); }

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background: var(--abyssal-ink);
  color: var(--ocean-mist);
  font-family: "Nunito", sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  line-height: 1.75;
  letter-spacing: 0.01em;
}

main { position: relative; z-index: 2; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' seed='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation: grain-shift 0.45s steps(2) infinite;
}

.spores { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }

.spore {
  position: absolute;
  bottom: -10vh;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--kelp-teal);
  opacity: 0.12;
  animation-name: float-up;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.scene, .film-scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--abyssal-ink);
}

.opening {
  display: grid;
  place-items: center;
  isolation: isolate;
}

.opening::after,
.film-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 52%, rgba(74,139,168,0.10), transparent 34%), linear-gradient(180deg, rgba(5,10,16,0.25), rgba(9,27,42,0.1) 48%, rgba(5,10,16,0.35));
  pointer-events: none;
}

.opening-kelp {
  position: absolute;
  left: 8vw;
  bottom: -8vh;
  width: min(36vw, 360px);
  height: 92vh;
  opacity: 0.08;
  stroke: var(--glacial-white);
  stroke-width: 2;
  fill: none;
  animation: kelp-drift 44s linear infinite alternate;
}

.title-card { text-align: center; padding: 2rem; position: relative; z-index: 2; }

h1, h2 {
  font-family: "Comfortaa", sans-serif;
  text-transform: lowercase;
  color: var(--glacial-white);
  letter-spacing: 0.08em;
  font-weight: 500;
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.1;
}

.title-card p {
  min-height: 2.8em;
  margin: 2rem 0 0;
  font-weight: 300;
  color: var(--ocean-mist);
}

.film-scene { background: var(--abyssal-ink); }
.harm-scene .moral-accent, .justice-scene .moral-accent { color: var(--amber); }
.harm-scene::before, .justice-scene::before { background: radial-gradient(circle at 72% 50%, rgba(139,74,92,0.08), transparent 32%), linear-gradient(180deg, rgba(5,10,16,0.32), transparent 48%, rgba(5,10,16,0.4)); }

.letterbox {
  position: absolute;
  top: 17.5%;
  height: 65%;
  left: 15%;
  width: 70%;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: center;
}

.scene-copy, .botanical {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.film-scene.loading .skeleton { opacity: 1; }
.film-scene.is-visible:not(.loading) .scene-copy,
.film-scene.is-visible:not(.loading) .botanical { opacity: 1; transform: translateY(0); }
.film-scene.is-visible:not(.loading) .skeleton { opacity: 0; }

.scene-copy { max-width: 72ch; }
.annotation {
  margin: 0 0 1.5rem;
  color: var(--kelp-teal);
  font-family: "Quattrocento", serif;
  font-style: italic;
  font-size: clamp(0.8rem, 1.4vw, 1rem);
}

h2 {
  margin: 0 0 1.6rem;
  font-size: clamp(1.8rem, 4.5vw, 3.5rem);
  line-height: 1.25;
}

.scene-copy p:last-child { margin: 0; font-weight: 300; }
.moral-accent { color: var(--amber); display: inline-block; transition: transform 0.3s ease, text-shadow 0.3s ease; }
.moral-accent:hover { transform: scale(1.05); text-shadow: 0 0 20px rgba(212, 165, 116, 0.3); }

.botanical { position: relative; min-height: 420px; display: grid; place-items: center; }
.botanical svg { width: min(100%, 300px); height: 100%; max-height: 430px; overflow: visible; }
.botanical path {
  stroke: var(--coral-trace);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
}

.thorn-botanical path:nth-child(2), .thorn-botanical path:nth-child(3) { stroke: var(--moral-red); opacity: 0.46; }

.skeleton {
  position: absolute;
  z-index: 3;
  background: linear-gradient(90deg, var(--mesopelagic-blue) 25%, var(--blue-depth) 50%, var(--mesopelagic-blue) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
  opacity: 0;
  transition: opacity 0.45s ease;
  border-radius: 18px;
}
.skeleton-text { left: 0; width: calc((100% - 3rem) * 0.66); height: 42%; top: 28%; }
.skeleton-botanical { right: 0; width: calc((100% - 3rem) * 0.28); height: 72%; top: 14%; }

.petal {
  position: absolute;
  width: 82px;
  height: 145px;
  left: 50%;
  top: 36%;
  transform-origin: 50% 88%;
  background: linear-gradient(180deg, rgba(74,139,168,0.28), rgba(74,139,168,0));
  clip-path: polygon(48% 0%, 83% 22%, 92% 58%, 61% 100%, 23% 78%, 10% 41%);
  animation: petal-drift 38s ease-in-out infinite alternate;
}
.p1 { transform: translate(-50%, -50%) rotate(-36deg); }
.p2 { transform: translate(-50%, -50%) rotate(28deg); animation-duration: 44s; }
.p3 { transform: translate(-50%, -50%) rotate(86deg); animation-duration: 55s; }
.p4 { transform: translate(-50%, -50%) rotate(-98deg); animation-duration: 50s; }
.p5 { transform: translate(-50%, -50%) rotate(152deg); animation-duration: 60s; }

.breath {
  height: 30vh;
  display: grid;
  place-items: center;
  background: var(--mesopelagic-blue);
}
.breath span { display: block; width: 40%; height: 1px; background: var(--coral-trace); opacity: 0.7; }

.terminal {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--abyssal-ink) 0%, var(--midnight-trench) 55%, #050A10 100%);
}
.ellipsis { display: flex; gap: 1rem; }
.ellipsis span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--kelp-teal);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
.ellipsis span:nth-child(2) { animation-delay: 0.35s; }
.ellipsis span:nth-child(3) { animation-delay: 0.7s; }

@keyframes float-up { from { transform: translateY(100vh); } to { transform: translateY(-110vh); } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes kelp-drift { from { transform: translateX(0); } to { transform: translateX(90px); } }
@keyframes petal-drift { from { margin-top: -6px; opacity: 0.7; } to { margin-top: 12px; opacity: 0.36; } }
@keyframes pulse-dot { 0%, 100% { opacity: 0.22; transform: scale(0.75); } 45% { opacity: 1; transform: scale(1.18); } }
@keyframes grain-shift { 0% { background-position: 0 0; } 50% { background-position: 37px 91px; } 100% { background-position: 120px 18px; } }

@media (max-width: 850px) {
  .letterbox { left: 8%; width: 84%; grid-template-columns: 1fr; gap: 1.2rem; top: 12%; height: 76%; }
  .botanical { min-height: 210px; opacity: 0.18; position: absolute; inset: auto 0 0 auto; width: 48%; }
  .skeleton-text { width: 100%; height: 34%; top: 18%; }
  .skeleton-botanical { width: 42%; height: 34%; top: 58%; }
  h2 { font-size: clamp(1.55rem, 8vw, 2.55rem); }
}