/* Aimlink | Rhythm: the sections under the hero are not all one paper (DESIGNDIRECTION 5.2).
   Paper (Three apps, News, the newsletter), mist grey (Built for), paper (About).
   - tones: the sections carry data-theme ("dark", "mist"; light is the default), tokens come from the token file;
   - the contour map (assets/contours.js) is one land that runs under all of them: lines in ink on the light
     sections, in lime on night;
   - the newsletter stays as it was: paper, and a white plate for the form (news.css);
   - the colour pool behind the three devices follows the app in focus.
   Loaded after site.css, devices.css and news/. */

@layer sections {
  :root { --contour: rgb(12 20 28 / 0.085); }
  [data-theme="mist"] { --contour: rgb(12 20 28 / 0.12); }
  [data-theme="dark"] { --contour: rgb(160 224 32 / 0.13); }

  /* ── The map: one canvas per section, behind its content ── */
  .has-contours { position: relative; isolation: isolate; }
  .contours { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
  .contours canvas { position: absolute; left: 0; top: -8%; display: block; width: 100%; height: 116%; }

  /* Built for on the mist: the photos stand dark against it */
  .builtfor[data-theme="mist"] { background: var(--bg); color: var(--text); }
  .builtfor[data-theme="mist"] .tile-ic { background: color-mix(in srgb, var(--c, var(--color-lime)) 34%, var(--color-white)); }

  /* ── Built for as a group (variant C): the three cards land one after the other, each with a ring; the card under the
        sight lifts and the others step back. The sight itself (site.js, initSights) is unchanged. ── */
  .tile { position: relative; transition: opacity 400ms var(--ease-out), transform 600ms var(--ease-out); }
  .sight-ring { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-media); pointer-events: none; transition: transform 600ms var(--ease-out); }
  .tiles.is-landing .tile { animation: tile-land 760ms var(--ease-out) backwards; animation-delay: calc(var(--n, 0) * 160ms); }
  @keyframes tile-land { 0% { opacity: 0; transform: translateY(54px) scale(1.05); } 100% { opacity: 1; transform: none; } }
  @media (hover: hover) and (pointer: fine) {
    .tiles.is-live:has(.tile.is-aimed) .tile:not(.is-aimed) { opacity: 0.55; transform: scale(0.98); }
    .tiles.is-live .sight { transition: transform 600ms var(--ease-out); }
    .tiles.is-live .tile.is-aimed .sight, .tiles.is-live .tile.is-aimed .sight-ring { transform: translateY(-8px); }
    .tiles.is-live .sight img { transition: transform 700ms var(--ease-out); }
    .tiles.is-live .tile.is-aimed .sight img { transform: scale(1.04); }
  }

  /* ── The colour pool behind the three devices: the app in focus lights the page ── */
  .sc-pools { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .sc-pools i {
    position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--ease-out);
    background: radial-gradient(40% 52% at var(--px, 50%) 54%, var(--pc), transparent 72%);
  }
  .sc-pools i[data-app="go"] { --px: 22%; --pc: rgb(160 224 32 / 0.3); }
  .sc-pools i[data-app="club"] { --px: 50%; --pc: rgb(255 150 0 / 0.22); }
  .sc-pools i[data-app="target"] { --px: 78%; --pc: rgb(255 215 0 / 0.3); }
  .sc-pools i[data-app="all"] { --px: 50%; --pc: rgb(160 224 32 / 0.14); opacity: 1; }
  .sc-pools i.is-on { opacity: 1; }
  .sc-pools i[data-app="all"].is-off { opacity: 0; }

  /* ── The label's mark: a hollow ring with a dot; it sends a ring once when its section arrives (impact.js) ── */
  .imp-mark { position: relative; display: inline-block; width: 0.62em; height: 0.62em; margin-right: 0.7em; vertical-align: -0.02em; border-radius: 50%; background: var(--accent-strong); }
  .imp-mark::before { content: ""; position: absolute; inset: -0.34em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent-strong) 55%, transparent); }
}

@layer sections {
  /* ── The sight: one for all three photos, in screen coordinates (site.js initSights). Low key: a thin white ring, a
        thin cross that reaches a little past it, a small lime dot. It is sized by site.js, never scaled, so the lines
        stay hairlines. The photos' corners are rounder. ── */
  .sight, .sight-ring { border-radius: 30px; }
  .scope--shared {
    position: fixed; z-index: 30; display: block; left: 0; top: 0; margin: 0; border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.88), 0 0 0 1px rgb(12 20 28 / 0.28);
  }
  .scope--shared::before, .scope--shared::after { content: ""; position: absolute; background: rgb(255 255 255 / 0.88); -webkit-mask: none; mask: none; margin: 0; }
  .scope--shared::before { left: calc(50% - 0.75px); top: -16%; bottom: -16%; width: 1.5px; }
  .scope--shared::after { top: calc(50% - 0.75px); left: -16%; right: -16%; height: 1.5px; }
  .scope--shared .scope-dot { width: 7px; height: 7px; margin: -3.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-pools i { transition-duration: 0.01ms; }
  .tiles.is-landing .tile { animation: none; }
  .tile, .sight-ring { transition-duration: 0.01ms; }
}