/* ==========================================================================
   WIZKET — Final CTA · "Make a wish" (home, #start). Prefix: wx-
   A night sky and one idea orb. Hold it: the stars and the headline stream in,
   the orb leaves as a comet, bursts, and the sparks settle into a WIZKET
   constellation above the real button. The sky itself lives on one canvas
   (js/wish.js); this file is the copy, the orb button and the phase states.
   Tokens only. Orange: the orb, one word per headline, the ring, CTA hover.
   ========================================================================== */
.wx {
  --wx-gutter: clamp(1rem, 3vw, 3rem);
  position: relative; isolation: isolate; overflow: clip;
  height: clamp(700px, 100svh, 1100px);
  display: grid; grid-template-rows: 1fr auto auto 1.15fr; justify-items: center;
  padding: clamp(4.5rem, 9vh, 7rem) var(--wx-gutter) clamp(2rem, 6vh, 4rem);
  color: var(--text);
  background: #04050b;   /* dark: deep black space (matches SPACE in js/wish.js) */
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
:root[data-theme="light"] .wx {
  background:
    radial-gradient(120% 70% at 50% 108%, color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 60%),
    var(--bg);
}
html.wx-lock { overflow: hidden; overscroll-behavior: none; scrollbar-gutter: stable; }   /* keep the scrollbar's space: no width jump, no sky rebuild */
html.wx-lock body { touch-action: none; }

.wx__sky { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.wx__flash { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: #fff; }

/* eyebrow — same language as the other sections */
.wx__bar {
  position: absolute; z-index: 2; left: var(--wx-gutter); top: clamp(1.4rem, 4vh, 2.6rem); margin: 0;
  display: inline-flex; align-items: center; gap: 0.75rem;
  font: 500 0.75rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.wx__rule { width: 2.25rem; height: 1px; background: currentColor; opacity: 0.5; }

/* ---------- before: the question ---------- */
.wx__pre { grid-row: 2; position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(0.9rem, 2.2vh, 1.4rem); text-align: center; }
.wx__kicker {
  margin: 0; display: inline-flex; align-items: center; gap: 0.6rem;
  font: 600 0.7rem/1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
.wx__kicker i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.wx__title {
  margin: 0; font: 400 clamp(3.4rem, min(11vw, 17vh), 10.5rem)/0.9 var(--font-display);
  letter-spacing: 0.004em; text-transform: uppercase; color: var(--text);
}
.wx__line { display: block; white-space: nowrap; }
.wx__hl { font-style: normal; color: var(--accent); }
.wx__dot { font-style: normal; color: var(--accent); }
.wx__text { margin: 0; max-width: 36ch; font: 400 clamp(0.98rem, 1.15vw, 1.12rem)/1.6 var(--font-body); color: var(--muted); }

/* every letter is its own piece so it can be pulled into the orb */
.wx .lc { display: inline-block; will-change: transform; }
.wx .lc--sp { width: 0.22em; }
.wx [data-wx-suck] { will-change: transform, opacity; }

/* ---------- the orb (the light itself is drawn on the canvas) ---------- */
.wx__act { grid-row: 3; position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; margin-top: clamp(2rem, 6vh, 4.2rem); }
.wx__orb {
  --p: 0;
  position: relative; width: 132px; aspect-ratio: 1;
  padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit;
  cursor: pointer;
  touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.wx__orb:focus-visible { outline: 2px solid var(--accent); outline-offset: 10px; }
.wx__ring {
  position: absolute; inset: -10px; width: calc(100% + 20px); height: calc(100% + 20px);
  transform: rotate(-90deg); pointer-events: none;
  transition: opacity 0.5s var(--ease-io), transform 0.9s var(--ease-out);
}
.wx__ring circle { fill: none; stroke-width: 1.6; }
.wx__ring .bg { stroke: var(--line2); stroke-dasharray: 2 6; }
.wx__ring .fg { stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 289.03; stroke-dashoffset: calc(289.03 * (1 - var(--p))); filter: drop-shadow(0 0 6px var(--accent)); }
.wx__orb:hover .wx__ring { transform: rotate(-90deg) scale(1.04); }
.wx__tip { margin: 0; min-height: 1em; font: 600 11px/1 var(--font-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text); }
.wx__tip span { display: inline-block; font-variant-numeric: tabular-nums; }
.wx__skip {
  font: 500 13px/1 var(--font-body); color: var(--muted); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.wx__skip:hover, .wx__skip:focus-visible { color: var(--accent); border-color: currentColor; }

.wx:not([data-phase="idle"]) .wx__ring { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.wx:not([data-phase="idle"]) .wx__orb { pointer-events: none; }

/* ---------- after: the answer, below the constellation ---------- */
.wx__post {
  position: absolute; z-index: 2; left: 50%; bottom: clamp(3.2rem, 11vh, 7.5rem);
  width: min(100% - 2 * var(--wx-gutter), 720px); translate: -50% 0;
  display: grid; justify-items: center; gap: clamp(0.8rem, 2vh, 1.2rem); text-align: center;
  visibility: hidden;
}
.wx__title--post { font-size: clamp(2.6rem, min(6.4vw, 10vh), 5.8rem); }
.wx__end { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 0.4rem; }
.wx__cta { height: 60px; padding: 0 clamp(1.8rem, 3vw, 2.6rem); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.wx__cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.wx__mail { font: 500 14px/1 var(--font-body); color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line2); padding-bottom: 4px; transition: color 0.3s ease, border-color 0.3s ease; }
.wx__mail:hover, .wx__mail:focus-visible { color: var(--accent); border-color: currentColor; }
.wx__again {
  margin-top: 0.3rem; padding: 6px 2px; border: 0; background: none; cursor: pointer;
  font: 600 11px/1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  transition: color 0.3s ease;
}
.wx__again:hover, .wx__again:focus-visible { color: var(--accent); }

/* the answer rises out of the light, one line at a time */
.wx__post > * {
  opacity: 0; transform: translateY(26px) scale(0.98); filter: blur(10px);
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out), filter 0.9s var(--ease-out);
}
.wx.is-rebuilt .wx__post { visibility: visible; }
.wx.is-rebuilt .wx__post > * { opacity: 1; transform: none; filter: none; }
.wx.is-rebuilt .wx__post > :nth-child(2) { transition-delay: 0.12s; }
.wx.is-rebuilt .wx__post > :nth-child(3) { transition-delay: 0.26s; }
.wx.is-rebuilt .wx__post > :nth-child(4) { transition-delay: 0.4s; }
.wx.is-rebuilt .wx__post > :nth-child(5) { transition-delay: 0.9s; }
.wx.is-rebuilt .wx__pre, .wx.is-rebuilt .wx__act, .wx.is-rebuilt .wx__bar { visibility: hidden; }
.wx.is-leaving .wx__post > * { opacity: 0; transform: translateY(-14px); filter: blur(8px); transition-duration: 0.5s; transition-delay: 0s; }
.wx:not(.is-done) .wx__post { pointer-events: none; }

/* no JS / no canvas: the answer and the button, nothing to hold */
html:not(.js) .wx__act, .wx--static .wx__act { display: none; }
html:not(.js) .wx__post, .wx--static .wx__post { position: relative; left: auto; bottom: auto; translate: none; visibility: visible; grid-row: 3; margin-top: 2rem; }
html:not(.js) .wx__post > *, .wx--static .wx__post > * { opacity: 1; transform: none; filter: none; }
html:not(.js) .wx__again, .wx--static .wx__again { display: none; }

@media (max-width: 700px) {
  .wx { height: clamp(640px, 100svh, 900px); grid-template-rows: 1fr auto auto 1.3fr; }
  .wx__title { font-size: clamp(3.4rem, 18vw, 5.4rem); }
  .wx__text { font-size: 0.95rem; max-width: 30ch; }
  .wx__orb { width: 112px; }
  .wx__title--post { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .wx__cta { height: 54px; }
  .wx__post { bottom: clamp(2.4rem, 8vh, 4.5rem); }
}