/* ==========================================================================
   Corelis — story site styles
   --------------------------------------------------------------------------
   Two modes:
   - "no-js" (default): the sections stack and scroll like a normal page.
   - "js" (set in <head>): every section is a full-screen slide stacked on
     top of the others; main.js shows one at a time.
   ========================================================================== */


/* ---------- Font -------------------------------------------------------- */
/* ITC Blair Medium — the only weight used on the site. */
@font-face {
  font-family: "ITC Blair";
  src: url("../assets/fonts/itc-blair-medium.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* ---------- Design tokens ----------------------------------------------- */
:root {
  --font: "ITC Blair", "Helvetica Neue", Arial, sans-serif;
  --black: #000;
  --white: #fff;
  --muted: rgba(255, 255, 255, 0.35);

  /* Space kept free around the text (bigger on large screens) and the
     phone's notch / home bar areas ("safe areas") */
  --gutter: clamp(40px, 8vw, 120px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}


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

html {
  background: var(--black);
  color: var(--white);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 1px solid var(--white);
  outline-offset: 4px;
}

/* Text that only screen readers "see" */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ---------- Slides (shared by both modes) ------------------------------- */
.slide {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* never wider than the screen */
  place-items: center;
  overflow: hidden;
}

/* Background layer. The placeholder gradient (--placeholder, set per slide
   below) shows until real media is configured. */
.slide__bg {
  position: absolute;
  inset: 0;
  background: var(--placeholder, var(--black));
}

/* The video / image / placeholder element created by main.js */
.slide__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--placeholder, var(--black));
}

/* A light dark veil over the media keeps white text readable on bright footage */
.slide__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.slide__content {
  position: relative;
  z-index: 1;
  width: 100%;
  padding:
    calc(var(--gutter) + var(--safe-top))
    calc(var(--gutter) + var(--safe-right))
    calc(var(--gutter) + var(--safe-bottom))
    calc(var(--gutter) + var(--safe-left));
  text-align: center;
  /* Text exactly in the middle looks slightly low to the eye, so lift it a
     little ("optical centre"). Set to 0 for the exact middle. */
  transform: translateY(-2.5vh);
}

.slide__text {
  max-width: 34em;
  margin: 0 auto;
  font-size: clamp(0.85rem, 0.55rem + 1.3vw, 1.9rem);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-transform: uppercase;    /* remove this line for mixed case */
  text-wrap: balance;
}

/* Each sentence starts on its own line */
.sentence {
  display: block;
}

.sentence + .sentence {
  margin-top: 0.4em;
}

/* Two sentences on a slide: the first sits a bit left of the centre, the
   second a bit right. A single sentence stays centred. The logo is never
   shifted. --stagger sets how far (smaller on phones, see below). */
.slide__text {
  --stagger: 0em; /* 2em */
}

.sentence:first-child:not(:last-child):not(.logo) {
  transform: translateX(calc(-1 * var(--stagger)));
}

.sentence:not(.logo) + .sentence {
  transform: translateX(var(--stagger));
}

@media (max-width: 600px) {
  .slide__text {
    --stagger: 0em; /* 1.2em */
  }
}

/* Wordmark + logo (assets/img/wordmark_and_logo.svg) */
.logo + .sentence {
  margin-top: 1.6em;
}

.logo img {
  display: block;
  width: min(72vw, 480px);
  height: auto;
  margin: 0 auto;
}


/* ---------- Email sign-up (last slide) ---------------------------------- */
/* A pill-shaped box: [ your email | subscribe ], with a small headline above.
   Deliberately much smaller than the slide text. */
/* The slide's content area fills the whole slide here, so the text stays in
   the centre (like on every other slide) and the form can sit near the bottom. */
.slide__content:has(.subscribe) {
  align-self: stretch;
  display: grid;
  align-content: center;
}

.subscribe {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(110px + var(--safe-bottom));   /* above the timer logo */
  margin: 0 auto;
  width: min(300px, 100% - 2 * var(--gutter));
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.subscribe__title {
  margin: 0 0 1em;
  color: rgba(255, 255, 255, 0.75);
}

/* "Coming soon" note shown under the box after pressing Subscribe. It sits
   below the form without taking space, so the box doesn't move. */
.subscribe__note {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin: 1.2em 0 0;
  color: rgba(255, 255, 255, 0.75);
  visibility: hidden;
}

.subscribe__box {
  display: flex;
  align-items: stretch;
  height: 40px;
  font-size: 0.6rem;   /* slightly smaller than the headline */
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
  transition: border-color 0.3s ease;
}

.subscribe__box:focus-within {
  border-color: var(--white);
}

.subscribe__input {
  flex: 1;
  min-width: 0;
  padding: 0 1.4em;
  border: 0;
  background: transparent;
  color: var(--white);
  font: inherit;
  letter-spacing: inherit;
  outline: none;
}

.subscribe__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}

.subscribe__button {
  padding: 0 1.4em;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  letter-spacing: inherit;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.subscribe__button:hover,
.subscribe__button:focus-visible {
  background: rgba(255, 255, 255, 0.15);
  outline: none;
}

/* Phones: 16px text in the field stops iPhones zooming in when it's tapped */
@media (max-width: 600px) {
  .subscribe__input {
    font-size: 16px;
    letter-spacing: 0.04em;
    padding-bottom: 5px;   /* lifts the smaller placeholder level with "Subscribe" */
  }

  .subscribe__input::placeholder {
    font-size: 0.6rem;
    letter-spacing: 0.12em;
  }
}


/* ---------- Placeholder backgrounds ------------------------------------- */
/* DELETE or ignore once real media is in place — media covers these. */
.slide:nth-of-type(1) { --placeholder: radial-gradient(120% 90% at 30% 40%, #1c1f25 0%, #08090b 55%, #000 100%); }
.slide:nth-of-type(2) { --placeholder: radial-gradient(110% 90% at 70% 65%, #221c17 0%, #0a0807 55%, #000 100%); }
.slide:nth-of-type(3) { --placeholder: radial-gradient(120% 100% at 25% 75%, #13202a 0%, #070b0e 55%, #000 100%); }
.slide:nth-of-type(4) { --placeholder: radial-gradient(120% 90% at 75% 30%, #1e1e20 0%, #0a0a0b 55%, #000 100%); }
.slide:nth-of-type(5) { --placeholder: radial-gradient(110% 100% at 50% 90%, #1d1912 0%, #090806 55%, #000 100%); }
.slide:nth-of-type(6) { --placeholder: radial-gradient(120% 90% at 20% 30%, #121a1e 0%, #06090a 55%, #000 100%); }
.slide:nth-of-type(7) { --placeholder: radial-gradient(90% 80% at 50% 50%, #18181b 0%, #070708 60%, #000 100%); }


/* ---------- Shared background (experiment) ------------------------------ */
/* One image behind all slides (index.html, "SHARED BACKGROUND"). It is a bit
   larger than the screen so main.js can drift it slowly; the visible crop
   always covers most of the picture. To undo: delete the .backdrop element
   in index.html and this block. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--black);
}

.backdrop img {
  /* The image's size in pixels — keep in sync with width/height in index.html */
  --img-w: 2426;
  --img-h: 1724;
  /* 15 % larger than the screen in both directions */
  --w: max(115vw, calc(115vh * var(--img-w) / var(--img-h)));
  --h: calc(var(--w) * var(--img-h) / var(--img-w));
  position: absolute;
  width: var(--w);
  height: var(--h);
  max-width: none;
  /* centred; main.js moves it from here */
  left: calc(50% - var(--w) / 2);
  top: calc(50% - var(--h) / 2);
}

/* Same light veil as on per-slide media, for readable text */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}

/* Per-slide backgrounds are not shown while the shared one is used */
.slide__bg {
  display: none;
}


/* ---------- Slideshow mode (JavaScript running) -------------------------- */
/* Lock the page in place: no normal scrolling, no pull-to-refresh, no
   rubber-band bounce. Pinch-zoom stays allowed for accessibility. */
html.js,
html.js body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html.js body {
  position: fixed;
  inset: 0;
  touch-action: pinch-zoom;
}

/* All slides sit on top of each other; main.js shows the active one */
html.js .slide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  visibility: hidden;
}

/* In slideshow mode the gradient lives on .slide__media (so it can slowly zoom) */
html.js .slide__bg {
  background: var(--black);
}


/* ---------- Progress indicator ------------------------------------------ */
.progress {
  position: fixed;
  z-index: 10;
  top: 50%;
  right: calc(12px + var(--safe-right));
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.progress__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each button has a generous invisible click area around a thin line */
.progress__dot {
  display: block;
  padding: 5px 12px;
}

.progress__dot::before {
  content: "";
  display: block;
  width: 1px;
  height: 22px;
  background: var(--white);
  opacity: 0.3;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transform-origin: center;
}

.progress__dot:hover::before {
  opacity: 0.7;
}

.progress__dot[aria-current="true"]::before {
  opacity: 1;
  transform: scaleX(2);
}

.progress__counter {
  margin: 0;
  font-size: 9px;
  letter-spacing: 0.15em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.progress__current {
  color: var(--white);
  /* Fixed width: in this font "1" is narrower than other digits, which made
     the counter (and the lines above it) shift when the number changed */
  display: inline-block;
  inline-size: 2.3em;
  text-align: end;
}

/* Phones: a bit more compact */
@media (max-width: 600px) {
  .progress {
    right: calc(4px + var(--safe-right));
  }

  .progress__dot {
    padding: 4px 10px;
  }

  .progress__dot::before {
    height: 16px;
  }

  .progress__counter {
    writing-mode: vertical-rl;   /* keeps the counter narrow on phones */
  }
}


/* ---------- Auto-advance timer (logo at the bottom) --------------------- */
/* The symbol from logo_only.svg is used as a mask (its white shape shows,
   its black background hides). Inside it: translucent white, plus a "comet"
   (::before) — solid white at angle --head, fading out over --trail degrees
   behind it. main.js moves --head counter-clockwise and fades the comet in
   and out with --trail-opacity. */
.timer {
  --head: 0deg;
  --trail: 0.1deg;
  --trail-opacity: 0;   /* main.js fades the comet in when the countdown starts */
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: calc(28px + var(--safe-bottom));
  width: 40px;
  aspect-ratio: 83.308 / 50.293;   /* proportions of logo_only.svg */
  transform: translateX(-50%);
  pointer-events: none;
  background: rgba(255, 255, 255, 0.3);
  mask: url("../assets/img/logo_only.svg") center / contain no-repeat luminance;
}

/* The comet: solid at the head, fading out clockwise (= behind it, since it
   travels counter-clockwise). Ahead of the head the trail has fully faded. */
.timer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from var(--head),
    var(--white) 0deg,
    rgba(255, 255, 255, 0.45) calc(var(--trail) * 0.4),
    rgba(255, 255, 255, 0) var(--trail)
  );
  opacity: var(--trail-opacity);
}

/* Very old browsers can't use the logo file as a mask; hide the timer there */
@supports not (mask-mode: luminance) {
  .timer { display: none; }
}


/* ---------- Scroll hint -------------------------------------------------- */
.hint {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: calc(84px + var(--safe-bottom));   /* sits above the timer logo */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 9px;
  letter-spacing: 0.3em;
  margin-right: -0.3em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}

/* "Scroll" on computers, "Swipe" on touch screens */
.hint__label--swipe { display: none; }

@media (hover: none) and (pointer: coarse) {
  .hint__label--scroll { display: none; }
  .hint__label--swipe { display: inline; }
}

/* Thin line with a small highlight travelling down it */
.hint__line {
  position: relative;
  width: 1px;
  height: 40px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.2);
}

.hint__line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40%;
  background: var(--white);
  animation: hint-travel 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes hint-travel {
  from { transform: translateY(-100%); }
  to   { transform: translateY(250%); }
}


/* ---------- Reduced motion ---------------------------------------------- */
/* Slide transitions are simplified in main.js; here we stop CSS animation. */
@media (prefers-reduced-motion: reduce) {
  .hint__line::after {
    animation: none;
    transform: translateY(75%);
  }

  .progress__dot::before {
    transition: none;
  }
}