/* ==========================================================================
   Pikett · home 05 · Always on (the ring of 8,760 lights)
   Stage: a full-bleed cinematic frame. The ring is the scene and the copy sits
   inside it, in the hole. The scene measures the hole on every resize and sets
   --ring-hole-y / --ring-hole-h on the stage, so the headline sizes itself to
   fit. The month marks, the now marker and the tooltip float above the canvas.
   ========================================================================== */

.ring-sec { padding-top: clamp(24px, 4vw, 64px); }

.ring__stage {
  --ring-hole-y: 50%;
  --ring-hole-h: 34vh;
  position: relative; isolation: isolate; overflow: hidden;
  height: 100vh; height: 100svh; min-height: 640px; max-height: 1100px;
}
.ring__scene { position: absolute; inset: 0; z-index: 0; touch-action: pan-y; }
.ring__stage.is-dragging .ring__scene { cursor: grabbing; }
.ring__fallback {
  background:
    radial-gradient(46% 9% at 50% 76%, rgba(255, 90, 31, .55), transparent 72%),
    radial-gradient(40% 7% at 50% 22%, rgba(255, 90, 31, .32), transparent 72%),
    radial-gradient(60% 30% at 50% 50%, rgba(255, 90, 31, .08), transparent 70%),
    var(--bg);
}

/* soft edges: the stage melts into the page above and below */
.ring__stage::before, .ring__stage::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none;
}
.ring__stage::before { top: 0; height: 9%; background: linear-gradient(var(--bg), rgba(10, 10, 12, 0)); }
.ring__stage::after { bottom: 0; height: 7%; background: linear-gradient(rgba(10, 10, 12, 0), var(--bg)); }

/* copy, centred in the ring's hole */
.ring__copy {
  position: absolute; left: 0; right: 0; top: var(--ring-hole-y); z-index: 3;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  pointer-events: none;
}
.ring__title {
  margin-top: clamp(10px, calc(var(--ring-hole-h) * .045), 22px);
  max-width: 10ch;
  font-size: clamp(34px, min(5.6vw, calc(var(--ring-hole-h) * .25)), 104px);
}
.ring__lead {
  margin-top: clamp(12px, calc(var(--ring-hole-h) * .055), 26px);
  max-width: 30ch;
  font-size: clamp(15px, min(1.45vw, calc(var(--ring-hole-h) * .056)), 23px);
}

/* month marks + the now marker, positioned by the scene every frame */
.ring__labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ring__mark { position: absolute; left: 0; top: 0; visibility: hidden; will-change: transform, opacity; }
.ring__mark::before {
  content: ""; position: absolute; left: -.5px; bottom: 0; width: 1px; height: 12px;
  background: linear-gradient(rgba(243, 242, 238, .55), rgba(243, 242, 238, 0));
}
.ring__mark-text {
  position: absolute; left: 0; bottom: 15px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-2); white-space: nowrap;
}
.ring__mark--now .ring__mark-text { color: var(--fg); }
.ring__mark--now::before { height: 14px; background: linear-gradient(var(--accent), rgba(255, 90, 31, 0)); }

/* tooltip: dark glass pill that follows the pointer */
.ring__tooltip {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  display: grid; gap: 5px; padding: 10px 14px 11px; border-radius: 12px;
  background: rgba(16, 16, 20, .76);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--line-2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  font-size: 12px; line-height: 1.25; letter-spacing: .02em; color: var(--fg); white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility 0s .2s;
}
.ring__tooltip.is-on { opacity: 1; visibility: visible; transition: opacity .2s var(--ease); }
.ring__tip-when { color: var(--fg-2); }
.ring__tip-state { display: inline-flex; align-items: center; gap: 8px; }
.ring__tip-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none;
  box-shadow: 0 0 10px rgba(255, 90, 31, .9);
}

/* below the stage: reply targets */
.ring__after { margin-top: clamp(40px, 6vw, 96px); }
.ring__stat-name { display: flex; margin-bottom: 18px; }
.ring__cta { margin-top: clamp(36px, 4vw, 56px); }

@media (max-width: 760px) {
  .ring__stage { min-height: 600px; max-height: 920px; }
  .ring__title { font-size: clamp(32px, min(10.4vw, calc(var(--ring-hole-h) * .2)), 52px); max-width: 9ch; }
  .ring__lead { font-size: clamp(15px, min(4.3vw, calc(var(--ring-hole-h) * .07)), 18px); max-width: 26ch; padding-inline: 8px; }
  .ring__mark-text { font-size: 10px; }
}