@layer reset, tokens, base, layout, components, utilities, overrides;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
  }
}

@layer tokens {
  :root {
    --color-page: oklch(17% 0.05 262);
    --color-deep-glow: oklch(50% 0.17 258);
    --color-deep: oklch(43.7% 0.178 260.6);
    --color-deep-edge: oklch(40% 0.168 262);
    --color-ember-shade: oklch(42% 0.16 30);
    --color-ember: oklch(60.1% 0.222 31.7);
    --color-marigold-deep: oklch(74.5% 0.171 62);
    --color-marigold: oklch(76.6% 0.174 63.4);
    --color-sky: oklch(81.2% 0.139 206.5);
    --color-flame: oklch(64.7% 0.24 31.5);
    --color-sun: oklch(90.9% 0.189 99.9);
    --color-shadow: oklch(0% 0 0);
    --shadow-sun: color-mix(in oklch, var(--color-shadow) 90%, transparent);

    --scene-rows: 1028;
    --scene-grid: 689;
    --sheet-bleed: 120;

    /* fine paper grain, layered over every sheet and the sun */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0.24'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

@layer base {
  body {
    overflow: hidden;
    background: var(--color-page);
  }
}

@layer components {
  .papercut {
    /* horizontal / vertical grid units stretch the scene to the viewport;
       --u (the smaller one) keeps circles round and sizes proportional */
    --ux: calc(100dvw / var(--scene-grid));
    --uy: calc(100dvh / var(--scene-rows));
    --u: min(var(--ux), var(--uy));

    isolation: isolate;
    position: fixed;
    inset: 0;
    overflow: clip;
    background: radial-gradient(
      in srgb ellipse calc(560 * var(--ux)) calc(560 * var(--uy)) at calc(399 * var(--ux)) calc(510 * var(--uy)),
      var(--color-deep-glow),
      var(--color-deep) 45%,
      var(--color-deep-edge)
    );

    & > * {
      position: absolute;
    }
  }

  /* motion lives in script.js: it writes translate, scale, colour tokens,
     --cut, --sh, --cast-*, --g-* and --sun-x/y inline on every layer */
  :where(.sheet, .sun) {
    /* white → black wash (10 % by default); script.js rotates, widens and narrows it */
    --wash: linear-gradient(
      var(--g-angle, 180deg),
      rgb(255 255 255 / var(--wash-alpha, 0.1)) var(--g-from, 0%),
      rgb(0 0 0 / var(--wash-alpha, 0.1)) var(--g-to, 100%)
    );

    will-change: translate, scale, filter;
  }

  .sheet {
    inset: calc(var(--sheet-bleed) * var(--u) * -1);
    filter: drop-shadow(
      0 calc(var(--cast-y) * var(--u)) calc(var(--cast-blur) * var(--u))
        color-mix(in oklch, var(--color-shadow) calc(var(--cast-alpha) * 100%), transparent)
    );

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--grain), var(--wash), var(--paper);
      clip-path: var(--cut);
    }

    /* two plain veils at the very back, just above the backdrop: no shadow,
       15 % opaque, edge around the middle of the screen */
    &[data-sheet^="veil"] {
      --depth: 1;
      filter: none;
      opacity: 0.15;
    }

    &[data-sheet="veil-top"] {
      --paper: #fff;
      --cut: polygon(0 0, 0 50%, 100% 50%, 100% 0);
    }

    &[data-sheet="veil-bottom"] {
      --paper: #000;
      --cut: polygon(0 100%, 0 50%, 100% 50%, 100% 100%);
    }

    &[data-sheet="ember"] {
      opacity: 0.7; /* deepest upper sheet — 30 % see-through */
      --depth: 1;
      --paper:
        radial-gradient(
          calc(150 * var(--ux)) calc(95 * var(--uy)) at calc(310 * var(--ux)) calc(335 * var(--uy)),
          var(--color-ember-shade),
          transparent
        ),
        var(--color-ember);
      --cast-y: 10;
      --cast-blur: 40;
      --cast-alpha: 0.3;
      --cut: polygon(0 0, 0 35.2%, 1.42% 34.68%, 3.42% 33.95%, 5.2% 33.3%, 6.43% 32.84%, 7.44% 32.46%, 8.45% 32.13%, 9.54% 31.84%, 10.62% 31.6%, 11.7% 31.41%, 12.79% 31.27%, 13.87% 31.18%, 14.95% 31.14%, 16.04% 31.16%, 17.12% 31.23%, 18.21% 31.32%, 19.29% 31.41%, 20.37% 31.52%, 21.46% 31.68%, 22.54% 31.9%, 23.62% 32.18%, 24.71% 32.49%, 25.79% 32.84%, 26.87% 33.23%, 27.96% 33.66%, 29.04% 34.14%, 30.13% 34.65%, 31.21% 35.2%, 32.29% 35.8%, 33.38% 36.44%, 34.46% 37.09%, 35.54% 37.77%, 36.63% 38.47%, 37.71% 39.17%, 38.79% 39.86%, 39.88% 40.55%, 40.96% 41.25%, 42.05% 41.95%, 43.13% 42.65%, 44.21% 43.32%, 45.3% 43.96%, 46.38% 44.57%, 47.46% 45.13%, 48.55% 45.61%, 49.63% 46.03%, 50.72% 46.39%, 51.8% 46.68%, 52.88% 46.92%, 53.97% 47.11%, 55.05% 47.27%, 56.13% 47.39%, 57.22% 47.47%, 58.3% 47.51%, 59.38% 47.51%, 60.47% 47.47%, 61.55% 47.41%, 62.64% 47.32%, 63.72% 47.2%, 64.8% 47.08%, 65.89% 46.93%, 66.97% 46.75%, 68.05% 46.52%, 69.14% 46.25%, 70.22% 45.94%, 71.3% 45.6%, 72.39% 45.23%, 73.47% 44.77%, 74.56% 44.17%, 75.64% 43.49%, 76.72% 42.78%, 77.81% 42.07%, 78.89% 41.34%, 79.97% 40.61%, 81.06% 39.9%, 82.14% 39.19%, 83.22% 38.54%, 84.31% 37.95%, 85.39% 37.4%, 86.48% 36.91%, 87.56% 36.48%, 88.64% 36.09%, 89.73% 35.74%, 90.67% 35.46%, 91.61% 35.21%, 92.98% 34.84%, 95.3% 34.18%, 98.04% 33.41%, 100% 32.85%, 100% 0);
    }

    &[data-sheet="dune-top"] {
      --depth: 2;
      --paper: var(--color-marigold-deep);
      --cast-y: 26;
      --cast-blur: 56;
      --cast-alpha: 0.9;
      --cut: polygon(0 0, 0 31.23%, 1.42% 30.44%, 3.42% 29.33%, 5.2% 28.34%, 6.43% 27.66%, 7.44% 27.1%, 8.45% 26.53%, 9.54% 25.89%, 10.62% 25.23%, 11.7% 24.64%, 12.79% 24.17%, 13.87% 23.77%, 14.95% 23.38%, 16.04% 22.93%, 17.12% 22.49%, 18.21% 22.11%, 19.29% 21.81%, 20.37% 21.58%, 21.46% 21.39%, 22.54% 21.25%, 23.62% 21.16%, 24.71% 21.12%, 25.79% 21.14%, 26.87% 21.2%, 27.96% 21.3%, 29.04% 21.41%, 30.13% 21.56%, 31.21% 21.75%, 32.29% 22%, 33.38% 22.3%, 34.46% 22.65%, 35.54% 23.05%, 36.63% 23.51%, 37.71% 24.01%, 38.79% 24.57%, 39.88% 25.19%, 40.96% 25.81%, 42.05% 26.44%, 43.13% 27.07%, 44.21% 27.71%, 45.3% 28.34%, 46.38% 28.98%, 47.46% 29.6%, 48.55% 30.21%, 49.63% 30.8%, 50.72% 31.41%, 51.8% 32.04%, 52.88% 32.69%, 53.97% 33.3%, 55.05% 33.88%, 56.13% 34.42%, 57.22% 34.93%, 58.3% 35.39%, 59.38% 35.81%, 60.47% 36.19%, 61.55% 36.53%, 62.64% 36.83%, 63.72% 37.09%, 64.8% 37.34%, 65.89% 37.55%, 66.97% 37.73%, 68.05% 37.87%, 69.14% 37.97%, 70.22% 38%, 71.3% 37.93%, 72.39% 37.79%, 73.47% 37.64%, 74.56% 37.48%, 75.64% 37.31%, 76.72% 37.09%, 77.81% 36.82%, 78.89% 36.49%, 79.97% 36.1%, 81.06% 35.65%, 82.14% 35.13%, 83.22% 34.57%, 84.31% 33.95%, 85.39% 33.27%, 86.48% 32.58%, 87.56% 31.86%, 88.64% 31.12%, 89.73% 30.42%, 90.67% 29.84%, 91.61% 29.3%, 92.98% 28.52%, 95.3% 27.18%, 98.04% 25.59%, 100% 24.46%, 100% 0);
    }

    &[data-sheet="sky"] {
      z-index: 2; /* front-most top sheet — above the sun */
      --depth: 3;
      --paper: var(--color-sky);
      --cast-y: 28;
      --cast-blur: 56;
      --cast-alpha: 0.95;
      --cut: polygon(0 0, 0 12.82%, 1.42% 12.76%, 3.42% 12.69%, 5.2% 12.64%, 6.43% 12.61%, 7.44% 12.6%, 8.45% 12.64%, 9.54% 12.74%, 10.62% 12.89%, 11.7% 13.09%, 12.79% 13.32%, 13.87% 13.59%, 14.95% 13.9%, 16.04% 14.25%, 17.12% 14.63%, 18.21% 15.07%, 19.29% 15.57%, 20.37% 16.11%, 21.46% 16.7%, 22.54% 17.33%, 23.62% 18%, 24.71% 18.68%, 25.79% 19.37%, 26.87% 20.06%, 27.96% 20.76%, 29.04% 21.45%, 30.13% 22.15%, 31.21% 22.83%, 32.29% 23.51%, 33.38% 24.17%, 34.46% 24.82%, 35.54% 25.45%, 36.63% 26.06%, 37.71% 26.62%, 38.79% 27.12%, 39.88% 27.56%, 40.96% 27.98%, 42.05% 28.38%, 43.13% 28.74%, 44.21% 29.06%, 45.3% 29.32%, 46.38% 29.53%, 47.46% 29.69%, 48.55% 29.83%, 49.63% 29.92%, 50.72% 29.96%, 51.8% 29.95%, 52.88% 29.88%, 53.97% 29.78%, 55.05% 29.67%, 56.13% 29.53%, 57.22% 29.33%, 58.3% 29.06%, 59.38% 28.73%, 60.47% 28.34%, 61.55% 27.88%, 62.64% 27.37%, 63.72% 26.81%, 64.8% 26.19%, 65.89% 25.52%, 66.97% 24.82%, 68.05% 24.08%, 69.14% 23.32%, 70.22% 22.56%, 71.3% 21.82%, 72.39% 21.08%, 73.47% 20.4%, 74.56% 19.78%, 75.64% 19.2%, 76.72% 18.68%, 77.81% 18.21%, 78.89% 17.8%, 79.97% 17.42%, 81.06% 17.08%, 82.14% 16.79%, 83.22% 16.52%, 84.31% 16.25%, 85.39% 16%, 86.48% 15.79%, 87.56% 15.64%, 88.64% 15.53%, 89.73% 15.43%, 90.67% 15.36%, 91.61% 15.31%, 92.98% 15.25%, 95.3% 15.19%, 98.04% 15.12%, 100% 15.07%, 100% 0);
    }

    &[data-sheet="lagoon"] {
      opacity: 0.7; /* deepest lower sheet — 30 % see-through */
      --depth: 1;
      --paper: var(--color-sky);
      --cast-y: -35;
      --cast-blur: 100;
      --cast-alpha: 0.2;
      --cut: polygon(0 100%, 0 71.39%, 1.42% 71.12%, 3.42% 70.74%, 5.2% 70.4%, 6.43% 70.18%, 7.44% 70%, 8.45% 69.77%, 9.54% 69.45%, 10.62% 69.09%, 11.7% 68.68%, 12.79% 68.24%, 13.87% 67.76%, 14.95% 67.24%, 16.04% 66.67%, 17.12% 66.06%, 18.21% 65.43%, 19.29% 64.79%, 20.37% 64.12%, 21.46% 63.45%, 22.54% 62.76%, 23.62% 62.06%, 24.71% 61.37%, 25.79% 60.69%, 26.87% 60.02%, 27.96% 59.39%, 29.04% 58.78%, 30.13% 58.21%, 31.21% 57.67%, 32.29% 57.16%, 33.38% 56.67%, 34.46% 56.23%, 35.54% 55.82%, 36.63% 55.46%, 37.71% 55.14%, 38.79% 54.89%, 39.88% 54.69%, 40.96% 54.51%, 42.05% 54.36%, 43.13% 54.24%, 44.21% 54.15%, 45.3% 54.1%, 46.38% 54.1%, 47.46% 54.15%, 48.55% 54.28%, 49.63% 54.46%, 50.72% 54.69%, 51.8% 54.98%, 52.88% 55.31%, 53.97% 55.69%, 55.05% 56.09%, 56.13% 56.54%, 57.22% 57.04%, 58.3% 57.6%, 59.38% 58.21%, 60.47% 58.84%, 61.55% 59.51%, 62.64% 60.2%, 63.72% 60.83%, 64.8% 61.36%, 65.89% 61.83%, 66.97% 62.27%, 68.05% 62.71%, 69.14% 63.12%, 70.22% 63.54%, 71.3% 63.96%, 72.39% 64.38%, 73.47% 64.8%, 74.56% 65.22%, 75.64% 65.63%, 76.72% 66.06%, 77.81% 66.57%, 78.89% 67.09%, 79.97% 67.51%, 81.06% 67.75%, 82.14% 67.87%, 83.22% 67.96%, 84.31% 68.02%, 85.39% 68.04%, 86.48% 68.05%, 87.56% 68.06%, 88.64% 68.07%, 89.73% 68.05%, 90.67% 68.02%, 91.61% 67.96%, 92.98% 67.87%, 95.3% 67.7%, 98.04% 67.48%, 100% 67.33%, 100% 100%);
    }

    &[data-sheet="dune"] {
      --depth: 2;
      --paper: var(--color-marigold);
      --cast-y: -25;
      --cast-blur: 80;
      --cast-alpha: 0.5;
      --cut: polygon(0 100%, 0 73.74%, 1.42% 74.45%, 3.42% 75.46%, 5.2% 76.35%, 6.43% 76.99%, 7.44% 77.51%, 8.45% 77.98%, 9.54% 78.4%, 10.62% 78.76%, 11.7% 79.06%, 12.79% 79.3%, 13.87% 79.48%, 14.95% 79.6%, 16.04% 79.68%, 17.12% 79.71%, 18.21% 79.69%, 19.29% 79.64%, 20.37% 79.55%, 21.46% 79.42%, 22.54% 79.28%, 23.62% 79.11%, 24.71% 78.88%, 25.79% 78.57%, 26.87% 78.21%, 27.96% 77.8%, 29.04% 77.36%, 30.13% 76.89%, 31.21% 76.35%, 32.29% 75.75%, 33.38% 75.08%, 34.46% 74.37%, 35.54% 73.61%, 36.63% 72.82%, 37.71% 72.02%, 38.79% 71.24%, 39.88% 70.46%, 40.96% 69.68%, 42.05% 68.89%, 43.13% 68.1%, 44.21% 67.33%, 45.3% 66.58%, 46.38% 65.85%, 47.46% 65.16%, 48.55% 64.51%, 49.63% 63.89%, 50.72% 63.36%, 51.8% 62.94%, 52.88% 62.6%, 53.97% 62.27%, 55.05% 61.95%, 56.13% 61.64%, 57.22% 61.37%, 58.3% 61.16%, 59.38% 60.98%, 60.47% 60.83%, 61.55% 60.67%, 62.64% 60.54%, 63.72% 60.47%, 64.8% 60.49%, 65.89% 60.59%, 66.97% 60.74%, 68.05% 60.95%, 69.14% 61.22%, 70.22% 61.55%, 71.3% 61.94%, 72.39% 62.39%, 73.47% 62.91%, 74.56% 63.5%, 75.64% 64.17%, 76.72% 64.89%, 77.81% 65.67%, 78.89% 66.5%, 79.97% 67.33%, 81.06% 68.15%, 82.14% 68.97%, 83.22% 69.77%, 84.31% 70.52%, 85.39% 71.25%, 86.48% 71.93%, 87.56% 72.55%, 88.64% 73.12%, 89.73% 73.65%, 90.67% 74.05%, 91.61% 74.4%, 92.98% 74.91%, 95.3% 75.81%, 98.04% 76.86%, 100% 77.62%, 100% 100%);
    }

    &[data-sheet="flame"] {
      z-index: 2; /* front-most bottom sheet — above the sun */
      --depth: 3;
      --paper: var(--color-flame);
      --cast-y: -12;
      --cast-blur: 50;
      --cast-alpha: 0.1;
      --cut: polygon(0 100%, 0 89.98%, 1.42% 89.59%, 3.42% 89.03%, 5.2% 88.54%, 6.43% 88.21%, 7.44% 87.94%, 8.45% 87.64%, 9.54% 87.25%, 10.62% 86.83%, 11.7% 86.37%, 12.79% 85.87%, 13.87% 85.32%, 14.95% 84.75%, 16.04% 84.14%, 17.12% 83.51%, 18.21% 82.85%, 19.29% 82.17%, 20.37% 81.47%, 21.46% 80.78%, 22.54% 80.08%, 23.62% 79.38%, 24.71% 78.7%, 25.79% 78.05%, 26.87% 77.41%, 27.96% 76.81%, 29.04% 76.23%, 30.13% 75.68%, 31.21% 75.18%, 32.29% 74.74%, 33.38% 74.35%, 34.46% 74.01%, 35.54% 73.7%, 36.63% 73.43%, 37.71% 73.19%, 38.79% 73.01%, 39.88% 72.86%, 40.96% 72.74%, 42.05% 72.65%, 43.13% 72.59%, 44.21% 72.56%, 45.3% 72.58%, 46.38% 72.64%, 47.46% 72.74%, 48.55% 72.9%, 49.63% 73.11%, 50.72% 73.38%, 51.8% 73.68%, 52.88% 74.04%, 53.97% 74.46%, 55.05% 74.94%, 56.13% 75.49%, 57.22% 76.08%, 58.3% 76.74%, 59.38% 77.44%, 60.47% 78.16%, 61.55% 78.88%, 62.64% 79.62%, 63.72% 80.32%, 64.8% 80.99%, 65.89% 81.63%, 66.97% 82.22%, 68.05% 82.77%, 69.14% 83.28%, 70.22% 83.75%, 71.3% 84.19%, 72.39% 84.58%, 73.47% 84.93%, 74.56% 85.24%, 75.64% 85.51%, 76.72% 85.74%, 77.81% 85.92%, 78.89% 86.07%, 79.97% 86.19%, 81.06% 86.3%, 82.14% 86.39%, 83.22% 86.46%, 84.31% 86.54%, 85.39% 86.61%, 86.48% 86.64%, 87.56% 86.62%, 88.64% 86.56%, 89.73% 86.46%, 90.67% 86.35%, 91.61% 86.21%, 92.98% 86.01%, 95.3% 85.68%, 98.04% 85.3%, 100% 85.02%, 100% 100%);
    }
  }

  .sun {
    z-index: 1; /* tucked under the sky and flame sheets */
    --depth: 4;

    /* --sun-x / --sun-y (viewport %) are animated by script.js */
    inset-inline-start: calc(var(--sun-x, 57.7) * 1dvw - 128.8 * var(--u));
    inset-block-start: calc(var(--sun-y, 49.6) * 1dvh - 128.8 * var(--u));
    inline-size: calc(257.6 * var(--u));
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--grain), var(--wash), var(--color-sun);
    box-shadow: 0 calc(12 * var(--sh, 1) * var(--u)) calc(24 * var(--sh, 1) * var(--u))
      calc(4 * var(--sh, 1) * var(--u)) var(--shadow-sun);
  }
}

/* ---- settings panel --------------------------------------------------- */
@layer components {
  .settings-toggle {
    position: fixed;
    z-index: 11;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 0.18);
    border-radius: 50%;
    background: rgb(12 14 24 / 0.55);
    backdrop-filter: blur(10px);
    color: #f2f3f8;
    cursor: pointer;
    transition: background 0.2s, rotate 0.4s ease;

    &:hover {
      background: rgb(12 14 24 / 0.8);
    }

    &[aria-expanded="true"] {
      rotate: 90deg;
    }

    & svg {
      inline-size: 20px;
      block-size: 20px;
    }
  }

  .settings {
    position: fixed;
    z-index: 10;
    inset-block: 0;
    inset-inline-end: 0;
    display: flex;
    flex-direction: column;
    inline-size: min(320px, 100vw - 32px);
    padding: 72px 20px 20px;
    overflow-y: auto;
    background: rgb(12 14 24 / 0.78);
    backdrop-filter: blur(16px);
    border-inline-start: 1px solid rgb(255 255 255 / 0.1);
    color: #e9ebf3;
    font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
    translate: 100% 0;
    transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1);

    &.is-open {
      translate: 0 0;
    }

    & h3 {
      margin: 18px 0 6px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgb(233 235 243 / 0.55);
    }
  }

  .setting {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px 8px;
    padding-block: 5px;

    & output {
      font-variant-numeric: tabular-nums;
      color: rgb(233 235 243 / 0.65);
    }

    & input {
      grid-column: 1 / -1;
      inline-size: 100%;
      margin: 0;
      accent-color: #ffd34d;
    }
  }

  .settings-actions {
    display: flex;
    gap: 8px;
    margin-block-start: 20px;

    & button {
      flex: 1;
      padding: 9px 10px;
      border: 1px solid rgb(255 255 255 / 0.2);
      border-radius: 8px;
      background: rgb(255 255 255 / 0.08);
      color: inherit;
      font: inherit;
      cursor: pointer;

      &:hover {
        background: rgb(255 255 255 / 0.16);
      }
    }
  }
}