/* ==========================================================================
   tol.ga — style.css
   No build step. Modern CSS only: cascade layers, @property-registered
   custom properties (so gradient colours transition), oklch/color-mix,
   nesting, container-relative sizing, dvh, prefers-reduced-motion.

   Layers (lowest → highest priority):
     reset → tokens → base → scene → layout → motion → a11y
   ========================================================================== */
@layer reset, tokens, base, scene, layout, motion, a11y;

/* --------------------------------------------------------------------------
   Fonts (self-hosted, subset to Latin + Turkish, ~125 KB total)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url("fonts/instrument-serif-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("fonts/instrument-serif.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/inter-variable.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Registered properties — this is what lets the whole scene cross-fade
   between phases: SVG gradient stops, the halo, the dial, all interpolate.
   -------------------------------------------------------------------------- */
@property --sky-1   { syntax: "<color>"; inherits: true; initial-value: #22103f; }
@property --sky-2   { syntax: "<color>"; inherits: true; initial-value: #6a3bc7; }
@property --sky-3   { syntax: "<color>"; inherits: true; initial-value: #e86cc1; }
@property --sky-4   { syntax: "<color>"; inherits: true; initial-value: #ffcf9e; }
@property --sun     { syntax: "<color>"; inherits: true; initial-value: #ffe2a8; }
@property --glow    { syntax: "<color>"; inherits: true; initial-value: #ffb072; }
@property --sea-1   { syntax: "<color>"; inherits: true; initial-value: #d8b9e6; }
@property --sea-2   { syntax: "<color>"; inherits: true; initial-value: #4fa8d6; }
@property --sea-3   { syntax: "<color>"; inherits: true; initial-value: #14213f; }
@property --mtn-far { syntax: "<color>"; inherits: true; initial-value: #5a3a8f; }
@property --mtn-near{ syntax: "<color>"; inherits: true; initial-value: #2c1a52; }
@property --land    { syntax: "<color>"; inherits: true; initial-value: #0f0a1f; }
@property --cloud-hi{ syntax: "<color>"; inherits: true; initial-value: #b06ad8; }
@property --cloud-lo{ syntax: "<color>"; inherits: true; initial-value: #f79ad0; }
@property --mark    { syntax: "<color>"; inherits: true; initial-value: #fbf4ec; }
@property --stars   { syntax: "<number>"; inherits: true; initial-value: 0.35; }
@property --glint   { syntax: "<number>"; inherits: true; initial-value: 0.6; }
@property --cloud-op{ syntax: "<number>"; inherits: true; initial-value: 0.85; }
@property --sun-dy  { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --sun-s   { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --halo-op { syntax: "<number>"; inherits: true; initial-value: 0.65; }

/* ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { margin: 0; }
  h1, p, ul { margin: 0; }
  ul { padding: 0; list-style: none; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }
  svg { display: block; }
  a { color: inherit; }
}

/* ========================================================================== */
@layer tokens {
  :root {
    color-scheme: dark;

    /* page */
    --ink:    oklch(12% 0.028 300);
    --bone:   oklch(95% 0.012 80);
    --bone-2: oklch(72% 0.022 300);
    --line:   oklch(95% 0.012 80 / 0.14);

    /* type */
    --serif: "Instrument Serif", ui-serif, "Iowan Old Style", Georgia, serif;
    --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --step--1: clamp(0.8125rem, 0.78rem + 0.18vw, 0.9375rem);
    --step-0:  clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    --step-3:  clamp(2.25rem, 1.55rem + 3.2vw, 3.9rem);

    /* rhythm */
    --gutter: clamp(1.1rem, 0.5rem + 3vw, 3rem);
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --phase-fade: 1.6s;

    /* ---- Dusk (default) ------------------------------------------------ */
    --sky-1: oklch(22% 0.11 300);
    --sky-2: oklch(48% 0.22 305);
    --sky-3: oklch(73% 0.19 340);
    --sky-4: oklch(88% 0.11 62);
    --sun:   oklch(93% 0.12 78);
    --glow:  oklch(80% 0.17 48);
    --sea-1: oklch(80% 0.08 320);
    --sea-2: oklch(60% 0.13 232);
    --sea-3: oklch(20% 0.07 268);
    --mtn-far:  oklch(40% 0.14 302);
    --mtn-near: oklch(24% 0.10 296);
    --land:     oklch(11% 0.05 300);
    --cloud-hi: oklch(56% 0.19 308);
    --cloud-lo: oklch(76% 0.17 338);
    --mark:  oklch(97% 0.012 80);
    --stars: 0.4;
    --glint: 0.65;
    --cloud-op: 0.85;
    --sun-dy: 0px;
    --sun-s: 1;
    --halo-op: 0.85;
  }

  :root[data-phase="dawn"] {
    --sky-1: oklch(30% 0.10 272);
    --sky-2: oklch(56% 0.13 300);
    --sky-3: oklch(80% 0.11 22);
    --sky-4: oklch(93% 0.08 74);
    --sun:   oklch(96% 0.10 84);
    --glow:  oklch(88% 0.15 58);
    --sea-1: oklch(86% 0.05 62);
    --sea-2: oklch(64% 0.10 230);
    --sea-3: oklch(28% 0.08 262);
    --mtn-far:  oklch(48% 0.09 292);
    --mtn-near: oklch(31% 0.08 286);
    --land:     oklch(14% 0.04 290);
    --cloud-hi: oklch(66% 0.10 300);
    --cloud-lo: oklch(86% 0.09 24);
    --mark:  oklch(97% 0.012 80);
    --stars: 0.5;
    --glint: 0.55;
    --cloud-op: 0.9;
    --sun-dy: 16px;
    --sun-s: 1.05;
    --halo-op: 0.8;
  }

  :root[data-phase="day"] {
    --sky-1: oklch(58% 0.16 252);
    --sky-2: oklch(72% 0.13 236);
    --sky-3: oklch(86% 0.07 224);
    --sky-4: oklch(95% 0.03 200);
    --sun:   oklch(99% 0.05 96);
    --glow:  oklch(96% 0.07 86);
    --sea-1: oklch(88% 0.05 212);
    --sea-2: oklch(70% 0.10 226);
    --sea-3: oklch(40% 0.10 246);
    --mtn-far:  oklch(62% 0.08 250);
    --mtn-near: oklch(44% 0.09 258);
    --land:     oklch(22% 0.06 268);
    --cloud-hi: oklch(90% 0.02 230);
    --cloud-lo: oklch(99% 0.005 220);
    --mark:  oklch(15% 0.06 275);
    --stars: 0;
    --glint: 0.35;
    --cloud-op: 0.95;
    --sun-dy: -230px;
    --sun-s: 0.8;
    --halo-op: 0.7;
  }

  :root[data-phase="night"] {
    --sky-1: oklch(10% 0.05 282);
    --sky-2: oklch(19% 0.09 286);
    --sky-3: oklch(28% 0.10 300);
    --sky-4: oklch(38% 0.10 318);
    --sun:   oklch(97% 0.02 92);
    --glow:  oklch(60% 0.09 252);
    --sea-1: oklch(44% 0.08 262);
    --sea-2: oklch(27% 0.08 262);
    --sea-3: oklch(10% 0.04 270);
    --mtn-far:  oklch(21% 0.06 286);
    --mtn-near: oklch(14% 0.05 286);
    --land:     oklch(7% 0.03 290);
    --cloud-hi: oklch(24% 0.06 290);
    --cloud-lo: oklch(34% 0.06 300);
    --mark:  oklch(96% 0.012 80);
    --stars: 1;
    --glint: 0.45;
    --cloud-op: 0.7;
    --sun-dy: -150px;
    --sun-s: 0.62;
    --halo-op: 0.55;
  }

  /* Phase changes cross-fade once the page has settled (set by app.js). */
  :root[data-ready] {
    transition:
      --sky-1 var(--phase-fade), --sky-2 var(--phase-fade), --sky-3 var(--phase-fade), --sky-4 var(--phase-fade),
      --sun var(--phase-fade), --glow var(--phase-fade),
      --sea-1 var(--phase-fade), --sea-2 var(--phase-fade), --sea-3 var(--phase-fade),
      --mtn-far var(--phase-fade), --mtn-near var(--phase-fade), --land var(--phase-fade),
      --cloud-hi var(--phase-fade), --cloud-lo var(--phase-fade), --mark var(--phase-fade),
      --stars var(--phase-fade), --glint var(--phase-fade), --cloud-op var(--phase-fade),
      --halo-op var(--phase-fade),
      --sun-dy calc(var(--phase-fade) * 1.4) var(--ease-in-out),
      --sun-s calc(var(--phase-fade) * 1.4) var(--ease-in-out);
  }
}

/* ========================================================================== */
@layer base {
  html {
    background: var(--ink);
    color: var(--bone);
    font: 400 var(--step-0) / 1.55 var(--sans);
    font-feature-settings: "cv11";
    -webkit-font-smoothing: antialiased;
    scrollbar-gutter: stable;
  }

  body {
    position: relative;
    isolation: isolate;
    min-block-size: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding:
      max(var(--gutter), env(safe-area-inset-top))
      max(var(--gutter), env(safe-area-inset-right))
      max(var(--gutter), env(safe-area-inset-bottom))
      max(var(--gutter), env(safe-area-inset-left));
    background:
      radial-gradient(120% 70% at 50% 112%, color-mix(in oklch, var(--sea-3), var(--ink) 55%), transparent 62%),
      var(--ink);
    overflow-x: clip;
  }

  /* Fine film grain over the whole page — data: SVG, allowed by the CSP. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
  }

  ::selection {
    background: color-mix(in oklch, var(--sun), transparent 35%);
    color: var(--ink);
  }
}

/* ========================================================================== */
@layer scene {
  .orb {
    --orb: min(62vmin, 34rem);
    --mx: 0;
    --my: 0;
    position: relative;
    inline-size: var(--orb);
    aspect-ratio: 1;
    flex: none;
  }

  /* Ambilight — the scene's own palette, blurred and leaking into the page.
     A conic sweep of the current phase colours behind the disc, blurred hard
     so its Gaussian edge becomes the glow (plus a wider wash on .orb::before). */
  .halo {
    position: absolute;
    inset: -4%;
    z-index: -1;
    border-radius: 50%;
    background: conic-gradient(
      from 215deg,
      var(--sky-2), var(--sky-3), var(--glow), var(--sky-4), var(--sea-1), var(--sea-2), var(--sky-1), var(--sky-2)
    );
    filter: blur(calc(var(--orb) * 0.22)) saturate(1.2);
    opacity: var(--halo-op);
    scale: 1.1;
    translate: calc(var(--mx) * -1.2%) calc(var(--my) * -1.2%);
    will-change: transform;
  }
  .orb::before {
    content: "";
    position: absolute;
    inset: -70%;
    z-index: -2;
    border-radius: 50%;
    background: radial-gradient(
      circle closest-side,
      color-mix(in oklch, var(--sky-2), transparent 40%),
      color-mix(in oklch, var(--sky-1), transparent 70%) 40%,
      transparent 72%
    );
    opacity: calc(var(--halo-op) * 0.55);
    pointer-events: none;
  }

  .scene {
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50%;
    overflow: hidden;
    box-shadow:
      0 40px 90px -30px oklch(5% 0.02 300 / 0.9),
      inset 0 0 0 1px oklch(95% 0.012 80 / 0.12);
  }

  /* ---- gradient stops driven by the phase palette --------------------- */
  .st-sky1 { stop-color: var(--sky-1); }
  .st-sky2 { stop-color: var(--sky-2); }
  .st-sky3 { stop-color: var(--sky-3); }
  .st-sky4 { stop-color: var(--sky-4); }
  .st-sea1 { stop-color: var(--sea-1); }
  .st-sea2 { stop-color: var(--sea-2); }
  .st-sea3 { stop-color: var(--sea-3); }
  .st-glow { stop-color: var(--glow); }
  .st-cloud-hi { stop-color: var(--cloud-hi); }
  .st-cloud-lo { stop-color: var(--cloud-lo); }

  /* ---- layers (each nudged by the pointer via --mx/--my) --------------- */
  .stars { opacity: var(--stars); fill: var(--mark); }
  .star  { opacity: 0.85; }

  .sun {
    transform: translate(calc(var(--mx) * 5px), calc(var(--sun-dy) + var(--my) * 3px));
  }
  .sun__disc {
    fill: var(--sun);
    transform: scale(var(--sun-s));
    transform-box: fill-box;
    transform-origin: center;
  }
  .sun__glow {
    transform: scale(var(--sun-s));
    transform-box: fill-box;
    transform-origin: center;
    mix-blend-mode: screen;
  }

  .clouds-layer { opacity: var(--cloud-op); transform: translate(calc(var(--mx) * 9px), calc(var(--my) * 5px)); }
  .cloud { fill: url(#g-cloud); }

  .range--far  { fill: var(--mtn-far);  transform: translate(calc(var(--mx) * 13px), calc(var(--my) * 6px)); }
  .range--near { fill: var(--mtn-near); transform: translate(calc(var(--mx) * 20px), calc(var(--my) * 9px)); }

  .reflection__ranges { opacity: 0.32; }
  .glint { fill: var(--sun); opacity: var(--glint); mix-blend-mode: screen; }

  .horizon {
    fill: var(--sky-4);
    opacity: 0.55;
    mix-blend-mode: screen;
  }

  .shore { transform: translate(calc(var(--mx) * 30px), calc(var(--my) * 14px)); }
  .land  { fill: var(--land); }

  .mark {
    font: italic 172px / 1 var(--serif);
    letter-spacing: -0.012em;
    fill: var(--mark);
    transform: translate(calc(var(--mx) * 16px), calc(var(--my) * 8px));
    filter: drop-shadow(0 4px 22px color-mix(in oklch, var(--sky-1), transparent 45%));
  }
  .mark-reflection {
    opacity: 0.32;
    filter: blur(1.6px);
  }

  .grain { opacity: 0.07; mix-blend-mode: soft-light; }
  .vignette { pointer-events: none; }
  .rim { fill: none; stroke: oklch(95% 0.012 80 / 0.1); }
}

/* ========================================================================== */
@layer layout {
  .top {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 2;
  }

  /* Time-of-day control: a tiny horizon dial + label */
  .phase {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.85rem 0.45rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: oklch(95% 0.012 80 / 0.04);
    color: var(--bone-2);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: color 0.3s, border-color 0.3s, background-color 0.3s;

    &:hover { color: var(--bone); border-color: oklch(95% 0.012 80 / 0.3); background: oklch(95% 0.012 80 / 0.07); }
    &:active .phase__dial { scale: 0.92; }
  }
  .phase__dial {
    inline-size: 1.2rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(
      to bottom,
      var(--sky-2) 0 44%, var(--sky-4) 44% 51%, var(--sea-1) 51% 60%, var(--sea-3) 100%
    );
    box-shadow:
      0 0 0 1px oklch(95% 0.012 80 / 0.12),
      0 0 12px color-mix(in oklch, var(--glow), transparent 55%);
    transition: scale 0.2s var(--ease-out);
  }
  .phase__label { min-inline-size: 3.2ch; text-align: start; }

  .stage {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: clamp(2.2rem, 3vw + 1rem, 4.5rem);
    padding-block: clamp(1.5rem, 4vh, 3rem);
  }

  .intro {
    max-inline-size: 30rem;
    text-align: center;
    display: grid;
    gap: 1.1rem;
    position: relative;
    z-index: 2;
  }
  .intro h1 {
    font: 400 var(--step-3) / 1.02 var(--serif);
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  .intro p {
    color: var(--bone-2);
    text-wrap: pretty;
    max-inline-size: 26rem;
    margin-inline: auto;
  }

  .links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.5rem;
    margin-block-start: 0.4rem;
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.01em;

    & a {
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.32em;
      text-decoration-color: color-mix(in oklch, var(--sun), transparent 60%);
      color: var(--bone);
      transition: text-decoration-color 0.25s, text-underline-offset 0.25s var(--ease-out);

      &:hover {
        text-decoration-color: var(--sun);
        text-underline-offset: 0.42em;
      }
    }
  }

  .foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    color: var(--bone-2);
    font-size: var(--step--1);
    position: relative;
    z-index: 2;
  }

  /* Wide screens: disc on the left, words on the right, sharing the horizon. */
  @media (min-width: 64rem) {
    .stage {
      grid-template-columns: auto minmax(0, 24rem);
      justify-content: center;
      align-items: center;
      gap: clamp(3rem, 6vw, 7rem);
    }
    .intro { text-align: start; justify-items: start; }
    .intro p { margin-inline: 0; }
    .links { justify-content: flex-start; }
  }

  /* Small phones: let the disc breathe but never crowd the words. */
  @media (max-width: 40rem) {
    .orb { --orb: min(84vw, 56dvh); }
    .halo { filter: blur(calc(var(--orb) * 0.2)) saturate(1.2); }
  }

  /* Short landscape (phones rotated): shrink the disc rather than scroll. */
  @media (max-height: 34rem) and (orientation: landscape) {
    .orb { --orb: min(70vh, 22rem); }
  }
}

/* ========================================================================== */
@layer motion {
  /* One orchestrated entrance: the disc irises open, the halo warms up,
     the wordmark surfaces from below the horizon, then the words arrive. */
  .scene { animation: iris 1.4s cubic-bezier(0.3, 0.55, 0.15, 1) backwards; } /* backwards: no lingering clip-path */
  .halo  { animation: halo-in 1.8s var(--ease-out) both, halo-turn 90s linear 1.8s infinite; }
  .mark  { animation: surface 1.3s 0.35s var(--ease-out) both; }
  .mark-reflection { animation: surface-mirror 1.3s 0.35s var(--ease-out) both; }
  .intro, .top, .foot { animation: settle 1s 0.55s var(--ease-out) both; }

  @keyframes iris {
    from { clip-path: circle(0% at 50% 50%); }
    to   { clip-path: circle(72% at 50% 50%); }
  }
  @keyframes halo-in {
    from { opacity: 0; scale: 0.9; }
    to   { opacity: var(--halo-op); scale: 1.1; }
  }
  @keyframes halo-turn {
    to { rotate: 1turn; }
  }
  @keyframes surface {
    from { opacity: 0; translate: 0 44px; }
    to   { opacity: 1; translate: 0 0; }
  }
  @keyframes surface-mirror {
    from { opacity: 0; translate: 0 -44px; }
    to   { opacity: 0.32; translate: 0 0; }
  }
  @keyframes settle {
    from { opacity: 0; translate: 0 10px; }
    to   { opacity: 1; translate: 0 0; }
  }

  /* Ambient life: slow cloud drift + star twinkle. */
  .cloud--a { animation: drift 140s var(--ease-in-out) infinite alternate; }
  .cloud--b { animation: drift 180s var(--ease-in-out) -60s infinite alternate-reverse; }
  .cloud--c { animation: drift 120s var(--ease-in-out) -30s infinite alternate; }
  @keyframes drift {
    from { translate: -18px 0; }
    to   { translate: 18px 0; }
  }

  .star { animation: twinkle 4.5s var(--ease-in-out) infinite alternate; }
  .star--1 { animation-delay: -1.1s; animation-duration: 5.2s; }
  .star--2 { animation-delay: -2.3s; animation-duration: 3.9s; }
  .star--3 { animation-delay: -3.1s; animation-duration: 6.1s; }
  .star--4 { animation-delay: -0.6s; animation-duration: 4.8s; }
  @keyframes twinkle {
    from { opacity: 0.35; }
    to   { opacity: 1; }
  }
}

/* ========================================================================== */
@layer a11y {
  :focus-visible {
    outline: 2px solid var(--sun);
    outline-offset: 4px;
    border-radius: 4px;
  }
  .phase:focus-visible { border-radius: 999px; }

  .sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition-duration: 0.01ms !important;
    }
    :root { --phase-fade: 0.01ms; }
    .halo { opacity: var(--halo-op); }
    .mark-reflection { opacity: 0.32; }
  }

  @media (prefers-contrast: more) {
    .intro p, .foot, .phase { color: var(--bone); }
    .links a { text-decoration-color: var(--sun); }
  }
}