@font-face {
  font-family: "Climate Crisis";
  src: url("ClimateCrisis-1979.woff2") format("woff2");
  font-display: swap;
}

:root {
  --page: blue;
  --ink: #f3e9d2;            /* text colour on the blue */
  --ink-accent: #4dff9f;     /* drop cap, matches the video's glow */
  --serif: "Georgia", "Iowan Old Style", "Times New Roman", serif;
  --title-font: "Climate Crisis", var(--serif);
  --drop-cap: 3.2em;         /* size of the first letter */

  --ar: calc(1200 / 2134);   /* the video's aspect ratio */
  --stage-h: 58svh;          /* height of the video */
  --max: 1400px;             /* never upscale past the video's native width */
  /* Video width, shared with the text column so the two always match. */
  --stage-w: min(calc(var(--stage-h) * var(--ar)), var(--max), 100%);
  --footer-h: 1.9rem;        /* height of the footer strip */
}

body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--serif); }

.scroll-anim { position: relative; height: 400vh; }   /* more vh = slower animation */

/* svh = the viewport with the phone's browser bars showing, so nothing ends
   up hidden underneath them. vh is the fallback for older browsers. */
.sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2.5svh clamp(1rem, 4vw, 3rem);
  padding-bottom: calc(2.5svh + var(--footer-h));   /* room for the footer */
  box-sizing: border-box;
  gap: 2svh;
}

/* ---- titles ---- */

.titles { text-align: center; }

.title {
  margin: 0;
  font-family: var(--title-font);
  font-size: clamp(2rem, 6vw, 4.5rem);
  letter-spacing: .0em;
  font-weight: normal;
  color: var(--ink-accent);
}

.subtitle {
  margin: .2em 0 0;
  font-size: clamp(.9rem, 1.6vw, 1.4rem);
  letter-spacing: 0.9em;
  text-transform: uppercase;
  opacity: .85;
  color: var(--ink-accent);
}

/* ---- video ---- */

/* May shrink if the text needs the room, so the text never gets cut off. */
.stage {
  position: relative;
  width: var(--stage-w);
  aspect-ratio: var(--ar);
  flex: 0 1 auto; min-height: 0;
}

#kopekler { display: block; width: 100%; height: 100%; }

/* ---- keyframed text under the video ---- */

/* The panels share one grid cell, so they sit on top of each other for the
   crossfade while the column still takes the height of the longest one. */
.notes {
  width: var(--stage-w);
  display: grid;
}

.panel {
  grid-area: 1 / 1;
  font-size: clamp(0.9rem, 0.2vw, 3.1rem);
  line-height: 1.9;
  opacity: 0; transition: opacity .5s;
}
.panel.active { opacity: 1; }
.panel p { margin: 0; }

/* Illuminated first letter. */
.panel p::first-letter {
  float: left;
  margin: .05em .1em 0 0;
  font-size: var(--drop-cap);
  line-height: .78;
  color: var(--ink-accent);
}

/* ---- footer ---- */

/* A thin strip pinned to the bottom of the stage. The stage is always on
   screen, so the footer is too; a footer after the section would be
   unreachable, since scrolling snaps back to the parts. */
.footer {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--footer-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 clamp(1rem, 4vw, 3rem);
  box-sizing: border-box;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-top: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  opacity: .8;
}

/* On narrow screens the info shortens with an ellipsis; the link stays whole. */
.footer-info { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.footer-link { flex: none; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.footer-link:hover { opacity: .7; }

/* ---- phones ---- */

/* The video is narrow here, so a text column matched to it wraps into a tall
   block and squeezes the video. Give the text the full width and a smaller,
   tighter setting, and let the video take more of the height. */
@media (max-width: 600px) {
  :root { --stage-h: 64svh; }
  .sticky { gap: 1.2svh; }
  .notes { width: 100%; }
  .panel { font-size: .78rem; line-height: 1.55; }
}

/* ---- loading screen ---- */

/* No scrolling underneath while it is up. */
html.loading { overflow: hidden; }

/* A frosted "liquid glass" panel over the whole page: the page shows through
   blurred, with a faint light edge. Fades out once the video is ready. */
.loader {
  position: fixed; inset: 0; z-index: 10;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--page) 20%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
  backdrop-filter: blur(30px) saturate(170%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 18%),
              inset 0 0 160px rgb(255 255 255 / 10%);
  transition: opacity .7s ease;
}
.loader.done { opacity: 0; pointer-events: none; }

.loader-text {
  font-size: .8rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink);
  font-variant-numeric: tabular-nums;   /* digits don't jiggle as they change */
}

/* ---- scroll hint ---- */

/* Tapping the picture moves on to the next part. */
.stage { cursor: pointer; }

/* "Scroll" and a small bobbing chevron at the bottom of the picture. Fades
   out for good after the first scroll, tap or key press. */
.hint {
  position: absolute; left: 50%; bottom: 5%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  color: var(--ink);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgb(0 0 0 / 45%);
  pointer-events: none;
  transition: opacity .6s ease;
}
.hint.gone { opacity: 0; }

.hint-chevron {
  width: .6rem; height: .6rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: 45deg;
  animation: hint-bob 1.6s ease-in-out infinite;
}
@keyframes hint-bob {
  0%, 100% { translate: 0 -2px; opacity: .5; }
  50%      { translate: 0 4px;  opacity: 1; }
}

/* ---- progress dots ---- */

/* A column of dots on the right edge; the current part is filled in. */
.progress {
  position: absolute; right: clamp(.25rem, 2vw, 1.5rem); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column;
  z-index: 2;
}

/* The button is a comfortable touch target; the dot itself is small. */
.dot {
  width: 1.75rem; height: 1.75rem;
  padding: 0; border: 0; background: none;
  display: grid; place-items: center;
  cursor: pointer;
}
.dot::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--ink);
  opacity: .55;
  transition: background-color .3s, border-color .3s, opacity .3s, scale .3s;
}
.dot:hover::before { opacity: 1; }
.dot[aria-current="step"]::before {
  background: var(--ink-accent);
  border-color: var(--ink-accent);
  opacity: 1;
  scale: 1.35;
}
.dot:focus-visible { outline: 1px solid var(--ink); outline-offset: -5px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .hint-chevron { animation: none; }
}