/* ===== Theme ===== */
* { box-sizing: border-box; }
:root {
  --bg:#0b0f14; --fg:#c8d0ff; --accent:#b70e3a;
  --muted:#9aa3cc; --panel:#12161f; --line:#141822;
}
html,body { height:100%; margin:0; background:radial-gradient(1400px 900px at 70% 10%, #111, var(--bg)); color:var(--fg); font:16px/1.6 system-ui,Segoe UI,Roboto,Inter,sans-serif; }
.wrap { max-width:900px; margin:auto; padding:4rem 1.25rem; }
h1 { margin:0 0 1rem; letter-spacing:0.2rem; }
.glow { text-shadow: 0 0 12px var(--accent), 0 0 40px #24010f; }
.sub { opacity:0.85; }

/* ===== Layout ===== */
.hero { position:relative; display:grid; place-items:center; gap:1rem; padding:3.5rem 0 3rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.footer { margin-top:2rem; opacity:0.85; }
.footer a { color:var(--fg); text-decoration:none; border-bottom:1px dotted #4b5066; }
.footer a:hover { border-bottom-color:var(--accent); }

/* ===== Rose glyph (pulsing ring) ===== */
.mask-rose {
  width:120px; height:120px; border-radius:999px;
  border:2px solid #2b0b16; box-shadow:0 0 60px #1b0710 inset, 0 0 22px #0c0f14;
  position:relative; filter:contrast(110%) saturate(120%);
  animation: breathe 2.8s ease-in-out infinite;
}
.mask-rose::after {
  content:"🌹"; position:absolute; inset:0; display:grid; place-items:center; font-size:64px; opacity:0.85;
}
@keyframes breathe {
  0%,100% { transform: scale(1); box-shadow: 0 0 60px #1b0710 inset, 0 0 22px #0c0f14; }
  50%     { transform: scale(1.03); box-shadow: 0 0 90px #320b18 inset, 0 0 40px #12070e; }
}

/* ===== Main CTA ===== */
.cta {
  position:relative;
  cursor:pointer;
  padding:0.9rem 1.4rem;
  border-radius:999px;
  border:1px solid #2a2f3a;
  background:linear-gradient(180deg,#161b26,#10141c);
  color:var(--fg);
  letter-spacing:0.06rem;
  transition: transform 150ms ease, box-shadow 300ms ease, border-color 150ms ease;
  outline: none;
  user-select:none;
}
.cta:hover { border-color:#3a4151; box-shadow:0 0 24px #1a1f2a inset, 0 0 18px #161b23; transform: translateZ(0) scale(1.02); }
.cta:focus { outline:2px solid var(--accent); outline-offset:4px; }

/* glitch tick */
.cta.glitch { animation: glitchy 160ms steps(2,end) 1; }
@keyframes glitchy {
  0% { transform: translate(0,0); text-shadow: 1px 0 var(--accent); }
  50% { transform: translate(-1px,0); text-shadow: -1px 0 #4e5; }
  100% { transform: translate(0,0); text-shadow: none; }
}

/* Ripple effect (added by JS) */
.ripple {
  position:absolute; width:6px; height:6px; border-radius:999px; pointer-events:none;
  background: radial-gradient(circle, #fff8, #fff0 70%);
  transform: translate(-50%,-50%) scale(1);
  animation: ripple 600ms ease-out forwards;
}
@keyframes ripple {
  to { transform: translate(-50%,-50%) scale(18); opacity:0; }
}

/* ===== Decorative ghost buttons ===== */
.ghosts { display:flex; gap:0.6rem; }
.ghost {
  width:34px; height:34px; border-radius:999px; border:1px dashed #2a2f3a; color:#9aa3cc;
  background:#0f131b; font-weight:600; display:grid; place-items:center; cursor:pointer;
  transition: transform 160ms ease, border-color 160ms ease, color 160ms ease;
  user-select:none;
}
.ghost:hover { transform: translateY(-1px) scale(1.05); color:#cbd3ff; border-color:#3a4151; }
.ghost.tapped { animation: wiggle 260ms ease; }
@keyframes wiggle { 0%{transform:rotate(0)} 33%{transform:rotate(6deg)} 66%{transform:rotate(-6deg)} 100%{transform:rotate(0)} }

/* ===== Whisper line ===== */
.whisper {
  min-height:1.5rem; color:var(--muted);
  opacity:0; transform: translateY(4px);
  transition: opacity 220ms ease, transform 220ms ease;
  text-align:center;
}
.whisper.show { opacity:1; transform: translateY(0); }

/* ===== Ambient specks (spawned by JS) ===== */
.spark {
  position:absolute; bottom:20%; width:2px; height:10px; background:linear-gradient(to top,#fff8,#fff0);
  filter: blur(0.2px);
  left:0; opacity:0.9; transform: translateX(0) translateY(0);
  animation: spark 1.2s linear forwards;
}
@keyframes spark {
  0% { transform: translateY(0) scaleY(1); opacity:0.9; }
  100% { transform: translateY(-80px) scaleY(0.3); opacity:0; }
}

/* ===== Hidden breadcrumb for Stage 2 (only shows to people peeking at CSS) ===== */
.rose::before { content: "/whisper"; position:absolute; left:-9999px; }