/* ============================================================
   CANYON DAWN — petroglyph deck
   Palette pulled from a Grand Canyon sunrise.
   Form language: Ancestral Puebloan rock art x eastern minimalism.
   ============================================================ */

@layer reset, tokens, stage, glyph, motion, chrome, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; }
  body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, svg { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
}

@layer tokens {
  :root {
    /* --- rock & pigment --- */
    --night:   #150f26;
    --indigo:  #241a3f;
    --plum:    #4a2545;
    --mulberry:#6b3355;
    --ember:   #8c3b2e;
    --sienna:  #b4442a;
    --rust:    #c85a2b;
    --coral:   #e2703a;
    --amber:   #eb9d3e;
    --gold:    #f5c65a;
    --straw:   #f7dc94;
    --sand:    #e9cfae;
    --bone:    #f7ecdb;
    --turquoise:#3fa9a0;
    --varnish: #0d0916;  /* desert varnish — the dark rock the glyphs are pecked into */

    /* --- type --- */
    --face-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --face-ui: ui-sans-serif, -apple-system, "Segoe UI", Inter, system-ui, sans-serif;

    --step--1: clamp(0.78rem, 0.72rem + 0.3vw, 0.95rem);
    --step-0:  clamp(1rem, 0.94rem + 0.35vw, 1.2rem);
    --step-1:  clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem);
    --step-2:  clamp(1.9rem, 1.4rem + 2.2vw, 3.4rem);
    --step-3:  clamp(2.6rem, 1.7rem + 4vw, 5.6rem);

    --rail: clamp(1.25rem, 4vw, 4.5rem);
    --ease-canyon: cubic-bezier(.22,.61,.36,1);

    color-scheme: dark;
  }

  /* Dawn stages — the deck is one continuous sunrise, slide 1 to slide 11. */
  [data-stage="1"]  { --sky-1:#0c0819; --sky-2:#1b1233; --sky-3:#2a1a3d; --heat:#3a2350; }
  [data-stage="2"]  { --sky-1:#0e0a1d; --sky-2:#241740; --sky-3:#3d2150; --heat:#4d2a58; }
  [data-stage="3"]  { --sky-1:#120c22; --sky-2:#2e1a48; --sky-3:#4f2454; --heat:#65305c; }
  [data-stage="4"]  { --sky-1:#170f28; --sky-2:#3a1e4d; --sky-3:#662c55; --heat:#8a3a52; }
  [data-stage="5"]  { --sky-1:#1c1129; --sky-2:#4a2350; --sky-3:#82344c; --heat:#a8453f; }
  [data-stage="6"]  { --sky-1:#21132a; --sky-2:#5a2a4d; --sky-3:#9c3b40; --heat:#c05733; }
  [data-stage="7"]  { --sky-1:#26152b; --sky-2:#6b3148; --sky-3:#b4472f; --heat:#d96f2f; }
  [data-stage="8"]  { --sky-1:#2b1930; --sky-2:#7c3942; --sky-3:#c85a2b; --heat:#eb9d3e; }
  [data-stage="9"]  { --sky-1:#331e35; --sky-2:#8c443c; --sky-3:#dd7433; --heat:#f5c65a; }
  [data-stage="10"] { --sky-1:#3c243a; --sky-2:#9a5039; --sky-3:#e78f3c; --heat:#f7dc94; }
  [data-stage="11"] { --sky-1:#472d3f; --sky-2:#a75f3b; --sky-3:#f0ab4b; --heat:#faeec6; }

  body {
    background: var(--varnish);
    color: var(--sand);
    font-family: var(--face-ui);
    font-size: var(--step-0);
    line-height: 1.5;
    overflow: hidden;
  }
}

/* ============================================================
   STAGE — fixed sky, canyon, sun. Slides scroll over the top.
   ============================================================ */
@layer stage {
  .sky {
    position: fixed; inset: 0; z-index: 0;
    background:
      radial-gradient(120% 85% at 50% 108%, var(--heat) 0%, transparent 58%),
      linear-gradient(to bottom, var(--sky-1) 0%, var(--sky-2) 46%, var(--sky-3) 100%);
    transition: background 1400ms var(--ease-canyon);
  }

  /* sunray fan — rotates almost imperceptibly */
  .sunrays {
    position: fixed; z-index: 1;
    left: 50%; bottom: -46vmax;
    width: 130vmax; aspect-ratio: 1;
    translate: -50% 0;
    background: conic-gradient(from 0deg,
      transparent 0deg, rgba(245,198,90,.16) 3deg, transparent 7deg,
      transparent 21deg, rgba(245,198,90,.10) 24deg, transparent 29deg,
      transparent 44deg, rgba(226,112,58,.13) 47deg, transparent 52deg,
      transparent 68deg, rgba(245,198,90,.09) 71deg, transparent 76deg,
      transparent 92deg, rgba(245,198,90,.14) 95deg, transparent 100deg,
      transparent 118deg, rgba(226,112,58,.10) 121deg, transparent 126deg,
      transparent 143deg, rgba(245,198,90,.12) 146deg, transparent 151deg,
      transparent 168deg, rgba(245,198,90,.08) 171deg, transparent 176deg,
      transparent 360deg);
    mask-image: radial-gradient(closest-side, #000 12%, rgba(0,0,0,.55) 45%, transparent 78%);
    mix-blend-mode: screen;
    opacity: 0;
    animation: rayTurn 240s linear infinite;
    transition: opacity 2000ms var(--ease-canyon);
  }
  body[data-slide] .sunrays { opacity: calc(0.10 + (var(--stage-n, 1) * 0.032)); }

  /* the sun itself, breaching the rim */
  .sun {
    position: fixed; z-index: 1;
    left: 50%; translate: -50% 0;
    bottom: calc(-24vmin + (var(--stage-n, 1) * 1.9vmin));
    width: 44vmin; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, var(--straw) 0%, var(--gold) 34%, rgba(226,112,58,.55) 62%, transparent 72%);
    filter: blur(2px);
    opacity: calc(0.25 + (var(--stage-n, 1) * 0.055));
    transition: bottom 1600ms var(--ease-canyon), opacity 1600ms var(--ease-canyon);
  }

  /* layered mesas — parallax drift as the deck advances */
  .canyon { position: fixed; inset: auto 0 0 0; z-index: 2; pointer-events: none; }
  .canyon svg { width: 118%; height: auto; }
  .mesa {
    transition: translate 1800ms var(--ease-canyon), opacity 1200ms linear;
    will-change: translate;
  }
  .mesa--far  { translate: calc(var(--stage-n, 1) * -0.55%) 0; opacity: .55; }
  .mesa--mid  { translate: calc(var(--stage-n, 1) * -1.15%) 0; opacity: .8; }
  .mesa--near { translate: calc(var(--stage-n, 1) * -2.1%)  0; opacity: 1; }

  /* rock grain over everything */
  .grain {
    position: fixed; inset: 0; z-index: 3; pointer-events: none;
    opacity: .5; mix-blend-mode: overlay;
    background-image: var(--grain-url);
    background-size: 220px 220px;
  }
  .vignette {
    position: fixed; inset: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(115% 85% at 50% 42%, transparent 42%, rgba(13,9,22,.72) 100%);
  }
}

/* ============================================================
   SLIDES
   ============================================================ */
@layer stage {
  .deck {
    position: relative; z-index: 4;
    height: 100dvh; overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    overscroll-behavior-y: contain;
  }
  .deck::-webkit-scrollbar { display: none; }

  .slide {
    scroll-snap-align: start; scroll-snap-stop: always;
    min-height: 100dvh;
    display: grid; align-content: center;
    padding: clamp(3rem, 9vh, 6rem) var(--rail) clamp(4.5rem, 11vh, 7rem);
    gap: clamp(1.25rem, 3vh, 2.5rem);
  }

  .slide__inner {
    width: min(100%, 1180px); margin-inline: auto;
    display: grid; gap: clamp(1.5rem, 4vh, 3rem);
    align-items: center;
  }
  .slide--split .slide__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 5rem);
  }
  .slide--center .slide__inner { justify-items: center; text-align: center; }

  .eyebrow {
    font-family: var(--face-ui);
    font-size: var(--step--1);
    letter-spacing: .34em; text-transform: uppercase;
    color: var(--gold); opacity: .78;
    display: flex; align-items: center; gap: .8em;
  }
  .eyebrow::before {
    content: ""; width: clamp(1.5rem, 4vw, 3.25rem); height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
  }
  .slide--center .eyebrow { justify-content: center; }
  .slide--center .eyebrow::after {
    content: ""; width: clamp(1.5rem, 4vw, 3.25rem); height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
  }

  h1, h2 {
    font-family: var(--face-display);
    font-weight: 400; line-height: 1.02;
    letter-spacing: -0.018em;
    margin: 0;
    color: var(--bone);
    text-wrap: balance;
  }
  h1 { font-size: var(--step-3); }
  h2 { font-size: var(--step-2); }

  .lede {
    font-family: var(--face-display);
    font-size: var(--step-1); line-height: 1.34;
    color: var(--sand); opacity: .88;
    max-width: 34ch; margin: 0;
    text-wrap: pretty;
  }
  .slide--center .lede { margin-inline: auto; }

  .note {
    font-size: var(--step--1); letter-spacing: .02em;
    color: var(--sand); opacity: .6; max-width: 46ch; margin: 0;
  }

  /* beat list — anchors for the spoken track, never a script */
  .beats { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; max-width: 40ch; }
  .beats li {
    display: grid; grid-template-columns: auto 1fr; gap: .85em;
    align-items: baseline;
    font-size: var(--step-0); color: var(--sand);
    opacity: 0; translate: 0 12px;
  }
  .beats li::before {
    content: ""; width: .5rem; height: .5rem; margin-top: .1em;
    background: var(--turquoise);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  }
  .is-active .beats li { animation: rise 900ms var(--ease-canyon) forwards; }
  .is-active .beats li:nth-child(1) { animation-delay: .55s; }
  .is-active .beats li:nth-child(2) { animation-delay: .75s; }
  .is-active .beats li:nth-child(3) { animation-delay: .95s; }
  .is-active .beats li:nth-child(4) { animation-delay: 1.15s; }
  .is-active .beats li:nth-child(5) { animation-delay: 1.35s; }

  .plate {
    position: relative;
    display: grid; place-items: center;
    width: 100%;
  }
  .plate svg { width: 100%; height: auto; overflow: visible; }
}

/* ============================================================
   GLYPH — the carved look
   ============================================================ */
@layer glyph {
  .carved { filter: url(#peck); }
  .glyph {
    fill: none;
    stroke: var(--bone);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }
  .glyph--solid { fill: var(--bone); stroke: none; }
  .glyph--ochre { stroke: var(--gold); }
  .glyph--ochre-solid { fill: var(--gold); stroke: none; }
  .glyph--rust { stroke: var(--coral); }
  .glyph--rust-solid { fill: var(--coral); stroke: none; }
  .glyph--turq { stroke: var(--turquoise); }
  .glyph--turq-solid { fill: var(--turquoise); stroke: none; }
  .glyph--faint { opacity: .3; }
  .glyph--hair { stroke-width: 1.5; }
  .glyph--thick { stroke-width: 4.5; }

  /* the pecked panel the glyphs sit on */
  .panel-rock { fill: url(#rockface); opacity: .5; }
}

/* ============================================================
   MOTION — flicker, whisper, sunray, canyon
   Everything keys off .is-active so each slide replays on entry.
   ============================================================ */
@layer motion {
  @keyframes rayTurn { to { rotate: 360deg; } }

  @keyframes rise { to { opacity: 1; translate: 0 0; } }

  /* firelight on stone */
  @keyframes flicker {
    0%,100% { opacity: 1; }
    8%  { opacity: .82; }
    11% { opacity: .97; }
    24% { opacity: .88; }
    27% { opacity: 1; }
    52% { opacity: .79; }
    56% { opacity: .95; }
    71% { opacity: .9; }
    74% { opacity: 1; }
    90% { opacity: .86; }
  }
  .fx-flicker { animation: flicker 7.5s ease-in-out infinite; }
  .fx-flicker--slow { animation-duration: 13s; }

  /* whisper — a breath moving through the panel */
  @keyframes whisper {
    0%,100% { opacity: .55; translate: 0 0; }
    50%     { opacity: 1;   translate: 0 -.45%; }
  }
  .fx-whisper { animation: whisper 9s ease-in-out infinite; }
  .fx-whisper--b { animation-duration: 12.5s; animation-delay: -3s; }
  .fx-whisper--c { animation-duration: 16s;   animation-delay: -7s; }

  /* carve — a line pecking itself into the rock */
  .fx-carve {
    stroke-dasharray: var(--len, 100);
    stroke-dashoffset: var(--len, 100);
  }
  .is-active .fx-carve {
    animation: carve var(--dur, 2.2s) var(--ease-canyon) var(--delay, 0s) forwards;
  }
  @keyframes carve { to { stroke-dashoffset: 0; } }

  /* ensō — the stroke stops just short of closing */
  .is-active .fx-enso { animation: enso var(--dur, 2.6s) var(--ease-canyon) var(--delay, 0s) forwards; }
  @keyframes enso { to { stroke-dashoffset: 7; } }

  /* emerge — a solid glyph surfacing */
  .fx-emerge { opacity: 0; transform-box: fill-box; transform-origin: center; scale: .72; }
  .is-active .fx-emerge {
    animation: emerge 1100ms var(--ease-canyon) var(--delay, 0s) forwards;
  }
  @keyframes emerge { to { opacity: 1; scale: 1; } }

  /* fade in place */
  .fx-fade { opacity: 0; }
  .is-active .fx-fade { animation: fadeIn var(--dur, 1.4s) ease-out var(--delay, 0s) forwards; }
  @keyframes fadeIn { to { opacity: 1; } }

  /* slow drift, used on herds and rivers */
  @keyframes drift { 0%,100% { translate: -1.2% 0; } 50% { translate: 1.2% 0; } }
  .fx-drift { animation: drift 22s ease-in-out infinite; }

  /* --- slide 1: seed to fruit --- */
  .fx-seed-drop { opacity: 0; transform-box: fill-box; transform-origin: center; }
  .is-active .fx-seed-drop { animation: seedDrop 1.6s cubic-bezier(.5,.05,.6,1) .5s forwards; }
  @keyframes seedDrop {
    0%   { opacity: 0; translate: 0 -170px; rotate: -25deg; }
    18%  { opacity: 1; }
    72%  { translate: 0 0; rotate: 4deg; }
    84%  { translate: 0 -9px; rotate: -2deg; }
    100% { opacity: 1; translate: 0 0; rotate: 0deg; }
  }

  .fx-soil-ring { opacity: 0; transform-box: fill-box; transform-origin: center; }
  .is-active .fx-soil-ring { animation: soilRing 1.5s ease-out 1.9s forwards; }
  @keyframes soilRing {
    0%   { opacity: .9; scale: .35; }
    100% { opacity: 0;  scale: 1.9; }
  }

  .fx-fruit { opacity: 0; transform-box: fill-box; transform-origin: center top; }
  .is-active .fx-fruit {
    animation:
      fruitSwell 1.2s var(--ease-canyon) var(--delay, 9s) forwards,
      fruitHum   .155s linear var(--hum, 10.6s) 18,
      fruitPicked 1.9s cubic-bezier(.4,0,.2,1) var(--pick, 12.9s) forwards;
  }
  @keyframes fruitSwell { 0% { opacity: 0; scale: 0; } 62% { scale: 1.16; } 100% { opacity: 1; scale: 1; } }
  @keyframes fruitHum {
    0%,100% { translate: 0 0; }
    25%     { translate: 1.6px -1px; }
    50%     { translate: -1.4px .8px; }
    75%     { translate: .9px 1.3px; }
  }
  @keyframes fruitPicked {
    0%   { opacity: 1; translate: 0 0; scale: 1; }
    16%  { translate: 0 6px; scale: 1.06; }
    100% { opacity: 0; translate: 74px -168px; scale: .8; }
  }

  .fx-hand { opacity: 0; }
  .is-active .fx-hand { animation: handReach 3.4s var(--ease-canyon) 11.4s forwards; }
  @keyframes handReach {
    0%   { opacity: 0; translate: 96px -138px; }
    22%  { opacity: .95; }
    42%  { opacity: 1; translate: 0 0; }
    62%  { opacity: 1; translate: 0 0; }
    100% { opacity: 0; translate: 96px -150px; }
  }

  .fx-glow { opacity: 0; transform-box: fill-box; transform-origin: center; }
  .is-active .fx-glow { animation: glowPulse 2.4s ease-in-out 10.2s 2; }
  @keyframes glowPulse {
    0%,100% { opacity: 0; scale: .8; }
    50%     { opacity: .5; scale: 1.25; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
    }
    .fx-carve { stroke-dashoffset: 0; }
    .fx-emerge, .fx-fade, .fx-seed-drop, .fx-fruit, .beats li { opacity: 1; scale: 1; translate: 0 0; }
    .fx-hand, .fx-soil-ring, .fx-glow { opacity: 0; }
    .sunrays { animation: none; }
  }
}

/* ============================================================
   CHROME — rail, dots, hint, progress
   ============================================================ */
@layer chrome {
  .rail {
    position: fixed; z-index: 20;
    right: clamp(.65rem, 2vw, 1.6rem); top: 50%; translate: 0 -50%;
    display: grid; gap: .85rem; justify-items: center;
  }
  .rail button {
    width: 26px; height: 26px; display: grid; place-items: center;
    border-radius: 50%;
    transition: scale 260ms var(--ease-canyon);
  }
  .rail button::after {
    content: ""; width: 7px; height: 7px;
    background: var(--sand); opacity: .3;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transition: opacity 320ms, background 320ms, scale 320ms var(--ease-canyon);
  }
  .rail button:hover::after { opacity: .7; }
  .rail button[aria-current="true"]::after { opacity: 1; background: var(--gold); scale: 1.6; }
  .rail button:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 2px; }

  .meta {
    position: fixed; z-index: 20;
    left: var(--rail); bottom: clamp(1rem, 3.5vh, 2.2rem);
    display: flex; align-items: baseline; gap: .75rem;
    font-family: var(--face-ui); font-size: var(--step--1);
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--sand); opacity: .5;
  }
  .meta__n { color: var(--gold); opacity: .95; font-variant-numeric: tabular-nums; }

  .hint {
    position: fixed; z-index: 20;
    left: 50%; translate: -50% 0; bottom: clamp(1rem, 3.5vh, 2.2rem);
    font-size: var(--step--1); letter-spacing: .18em; text-transform: uppercase;
    color: var(--sand); opacity: .34;
    transition: opacity 700ms;
  }
  body[data-slide]:not([data-slide="1"]) .hint { opacity: 0; }

  .progress {
    position: fixed; z-index: 21; left: 0; top: 0; height: 2px;
    width: 100%; transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--coral), var(--gold));
    scale: var(--progress, 0) 1;
    transition: scale 700ms var(--ease-canyon);
  }

  /* ambient sound toggle */
  .sound {
    position: fixed; z-index: 22;
    right: var(--rail); bottom: clamp(.85rem, 3.2vh, 2rem);
    width: 46px; height: 38px;
    display: grid; place-items: center;
    opacity: .42;
    transition: opacity 400ms var(--ease-canyon), scale 260ms var(--ease-canyon);
  }
  .sound:hover, .sound:focus-visible { opacity: .95; scale: 1.06; }
  .sound:focus-visible { outline: 2px solid var(--turquoise); outline-offset: 4px; border-radius: 6px; }
  .sound svg { width: 100%; height: auto; overflow: visible; }

  .sound__slash { opacity: 1; transition: opacity 400ms; }
  .sound__wave { opacity: 0; transition: opacity 500ms; }

  .sound[aria-pressed="true"] { opacity: .72; }
  .sound[aria-pressed="true"] .sound__slash { opacity: 0; }
  .sound[aria-pressed="true"] .sound__wave { opacity: 1; }
  .sound[aria-pressed="true"] .sound__wave--1 { animation: soundPulse 3.4s ease-in-out infinite; }
  .sound[aria-pressed="true"] .sound__wave--2 { animation: soundPulse 3.4s ease-in-out .5s infinite; }
  @keyframes soundPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

  /* the toggle is offered once, quietly, on the opening slide */
  .sound::after {
    content: "sound";
    position: absolute; right: calc(100% + .6rem); top: 50%; translate: 0 -50%;
    font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase;
    color: var(--gold); white-space: nowrap; opacity: 0;
    transition: opacity 700ms;
  }
  body[data-slide="1"] .sound:not([aria-pressed="true"])::after { opacity: .55; }

  .skip {
    position: fixed; left: -999px; top: 0; z-index: 40;
    background: var(--night); color: var(--bone); padding: .6rem 1rem;
  }
  .skip:focus { left: .5rem; top: .5rem; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@layer responsive {
  @media (max-width: 900px) {
    .slide--split .slide__inner { grid-template-columns: 1fr; }
    .slide--split .plate { order: -1; }
    .lede, .beats { max-width: none; }
    .rail { gap: .5rem; right: .45rem; }
    .rail button { width: 20px; height: 20px; }
  }
  @media (max-width: 560px) {
    .hint { display: none; }
    .plate { max-width: 26rem; }
  }
  @media (min-width: 1600px) {
    .slide__inner { width: min(100%, 1360px); }
  }
  /* short + wide: presenting on a projector */
  @media (max-height: 560px) and (orientation: landscape) {
    .slide { padding-block: 2rem 3rem; }
    .slide--split .slide__inner { grid-template-columns: 1fr 1fr; }
  }
}

/* rock grain, generated inline so the deck stays a single dependency-free folder */
:root {
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='0.42'/%3E%3C/svg%3E");
}