/* ============================================================
   experience and perspective (ep) — site styles
   Edit colors/type/spacing in the :root block below.
   ============================================================ */

@font-face {
  font-family: "Cossette Texte";
  src: url("CossetteTexte-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cossette Texte";
  src: url("CossetteTexte-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colors */
  --bg: #DCDCDC;
  --pink: #FF06C1;

  /* type — uniform size everywhere, including the header */
  --font: "Cossette Texte", -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-size: 18px;

  /* layout */
  --column-width: 650px;
  --side-padding: 20px;

  /* motion (reused everywhere so speeds stay consistent) */
  --fade-fast: 0.25s ease;
  --fade-medium: 0.4s ease;
  --open-close: 0.4s ease;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--pink);
}

body {
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: 1.5;
  text-transform: lowercase; /* "everything lowercase, always" */
  padding: 48px var(--side-padding) 80px;
}

a {
  color: var(--pink);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* focus state used everywhere interactive — kept consistent on purpose */
button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px dashed var(--pink);
  outline-offset: 3px;
}

/* ============================================================
   intro (plays once on load, see script.js)
   ============================================================ */

#introOverlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* NOT var(--pink)/#FF06C1 — browsers decode this mp4's own baked-in background
     as #FF29C4 (a codec color-space quirk, confirmed by sampling the live video
     frame via canvas), so the overlay is matched to what actually renders rather
     than the theoretical hex, or the seam between video and overlay is visible. */
  background: #FF29C4;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.6s ease, opacity 0.6s ease;
}

/* bg-color and opacity fade together, in one step, not sequentially */
#introOverlay.is-done {
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
}

#introVideo {
  width: 60%;
  max-width: 520px;
  height: auto;
  display: block;
}

@media (max-width: 500px) {
  #introVideo {
    width: 80%;
  }
}

/* ============================================================
   header
   ============================================================ */

.site-header {
  display: flex;
  justify-content: center;
  margin-bottom: 56px;
}

.header-phrase {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: var(--font-size);
  color: var(--pink);
  text-transform: lowercase;
  cursor: pointer;
  text-align: center;
  white-space: normal;
  max-width: 100%;
}

/* individual letters, positioned/animated by script.js */
.header-phrase .letter {
  display: inline-block;
  will-change: transform;
}

/* state-change crossfade (see script.js renderPhrase) — the whole phrase moves as
   one soft, unified block (no per-letter stagger/typewriter effect) */
.header-phrase .letter.is-leaving {
  transition: opacity var(--fade-medium), transform var(--fade-medium);
  opacity: 0;
  transform: translateY(-4px) scale(0.97);
}
.header-phrase .letter.is-entering {
  opacity: 0;
  transform: translateY(4px) scale(0.97);
}
.header-phrase .letter.is-entering.is-in {
  transition: opacity var(--fade-medium), transform var(--fade-medium);
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .header-phrase .letter {
    transition: opacity var(--fade-fast) !important;
    transform: none !important;
  }
}

/* ============================================================
   section nav
   ============================================================ */

.section-nav {
  max-width: var(--column-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Nav is static/instant on purpose — no width-reveal or stagger here (that read
   as a "typewriter" effect). Only the answer panel below fades. */
.nav-item {
  display: flex;
}

/* when a section is open, every non-active item just disappears instantly */
.section-nav.is-open .nav-item:not(.is-active) {
  display: none;
}

.nav-btn {
  font: inherit;
  font-size: var(--font-size);
  text-transform: lowercase;
  color: var(--pink);
  background: none;
  border: 1px dotted var(--pink);
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
}

.nav-item.is-active .nav-btn {
  background: var(--pink);
  color: var(--bg);
  font-weight: 700;
  border-color: var(--pink);
}

.nav-rest {
  display: none;
  align-items: center;
  white-space: nowrap;
  border: 1px dotted var(--pink);
  border-left: none;
  padding: 8px 16px;
}

.nav-item.is-active .nav-rest {
  display: inline-flex;
}

@media (max-width: 500px) {
  .nav-rest {
    white-space: normal;
  }
}

/* ============================================================
   answer panels
   ============================================================ */

.panels {
  max-width: var(--column-width);
  margin: 0 auto;
}

/* Closed panels are fully out of layout (display: none). Opening/closing is a
   plain opacity fade of the whole block at its full size — no height/grow
   animation, no per-element reveal. */
.answer-wrapper {
  display: none;
  opacity: 0;
  transition: opacity var(--open-close);
}

.answer-wrapper.is-visible {
  display: block;
  margin-top: 32px;
}

.answer-wrapper.is-visible.open {
  opacity: 1;
}

/* sits inside .nav-item, right after the question fragment — only shown on
   whichever section is currently open (the only visible .nav-item at that point) */
.back-btn-inline {
  display: none;
  background: none;
  border: none;
  font: inherit;
  font-size: var(--font-size);
  color: var(--pink);
  cursor: pointer;
  padding: 8px 0 8px 14px;
  white-space: nowrap;
}

.nav-item.is-active .back-btn-inline {
  display: inline-block;
}

.answer-inner p {
  margin: 0 0 20px;
}

.answer-inner .line-list {
  margin-bottom: 20px;
}

.placeholder-text {
  font-style: italic;
}

/* ============================================================
   images / video
   ============================================================ */

.video-pair {
  display: flex;
  gap: 24px;
  margin: 28px 0;
  flex-wrap: wrap;
}

.video-item {
  flex: 1 1 260px;
  margin: 0;
  text-align: center;
}

.video-item video {
  width: 100%;
  display: block;
  border-radius: 10px;
  pointer-events: none; /* not clickable/zoomable — autoplay/loop is the only behavior */
}

.video-item figcaption {
  margin-top: 10px;
  font-size: 0.85em;
  line-height: 1.4;
}

.single-image {
  margin: 28px 0;
}

/* flush with the text column on both sides — no narrower centered image floating
   in extra whitespace, matches the paragraph's own width exactly */
.single-image img,
.single-image video {
  width: 100%;
  display: block;
  border-radius: 10px;
}

.single-image video {
  pointer-events: none; /* not clickable/zoomable, same as the video-pair clips */
}

.single-image figcaption {
  margin-top: 10px;
  font-size: 0.85em;
  line-height: 1.4;
}

/* the phoebe bridgers article screengrab specifically reverts to its original
   smaller, centered treatment — everything else in .single-image stays flush/full-width */
.single-image.small {
  text-align: center;
}
.single-image.small img {
  max-width: 320px;
  width: 100%;
  display: inline-block;
}

.placeholder-box {
  border: 1px dotted var(--pink);
  border-radius: 10px;
  padding: 40px 20px;
  font-style: italic;
  font-size: 0.85em;
}

/* ============================================================
   mobile
   ============================================================ */

@media (max-width: 500px) {
  body {
    padding: 32px 16px 60px;
  }
  .site-header {
    margin-bottom: 40px;
  }
}