:root { --ink:#0a0510; --hot:#ff2fb3; --gold:#ffd36e; --lilac:#b48cff; --cyan:#5ef2ff; --text:#fff6fb; }
* { box-sizing:border-box; margin:0; }
html { scroll-behavior:smooth; }
body { background:var(--ink); color:var(--text); font-family:"Space Grotesk",system-ui,sans-serif; overflow-x:hidden; cursor:crosshair; }
#fx { position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:50; }
.aurora { position:fixed; inset:-20vmax; z-index:-2; filter:blur(80px); opacity:.75; }
.aurora span { position:absolute; width:60vmax; height:60vmax; border-radius:50%; mix-blend-mode:screen; animation:drift 18s ease-in-out infinite alternate; }
.aurora span:nth-child(1) { background:var(--hot); top:5%; left:0; }
.aurora span:nth-child(2) { background:var(--lilac); top:30%; right:0; animation-duration:23s; animation-delay:-5s; }
.aurora span:nth-child(3) { background:var(--gold); bottom:0; left:30%; animation-duration:27s; animation-delay:-9s; opacity:.6; }
@keyframes drift { 0% { transform:translate(0,0) scale(1); } 50% { transform:translate(10vmax,-6vmax) scale(1.2); } 100% { transform:translate(-8vmax,8vmax) scale(.9); } }
.grain { position:fixed; inset:0; z-index:-1; opacity:.12; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
section { padding:14vh 6vw; text-align:center; position:relative; }
h2 { font-family:"Playfair Display",serif; font-style:italic; font-weight:900; font-size:clamp(40px,7vw,96px); line-height:1; margin-bottom:16px;
  background:linear-gradient(90deg,var(--gold),var(--hot),var(--lilac),var(--cyan),var(--gold)); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:shine 6s linear infinite; }
@keyframes shine { to { background-position:300% 0; } }
.muted { opacity:.7; margin-bottom:36px; }
.hero { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:18px; }
.kicker { letter-spacing:.5em; text-transform:uppercase; font-size:12px; opacity:.85; }
.name { font-family:"Playfair Display",serif; font-weight:900; font-style:italic; font-size:clamp(110px,30vw,420px); line-height:.85; display:flex; }
.name span { display:inline-block; background:linear-gradient(180deg,#fff 10%,var(--gold) 45%,var(--hot) 75%,var(--lilac)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 30px rgba(255,47,179,.55)); animation:float 4s ease-in-out infinite; }
.name span:nth-child(2) { animation-delay:.25s; } .name span:nth-child(3) { animation-delay:.5s; } .name span:nth-child(4) { animation-delay:.75s; }
@keyframes float { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-18px) rotate(2deg); } }
.sub { font-size:clamp(18px,2.4vw,28px); max-width:720px; }
.sub em { font-family:"Playfair Display",serif; font-size:1.2em; color:var(--gold); }
.cta { margin-top:14px; font:700 16px "Space Grotesk",sans-serif; letter-spacing:.15em; text-transform:uppercase; color:var(--ink); background:linear-gradient(90deg,var(--gold),var(--hot),var(--lilac)); background-size:200% 100%;
  border:0; padding:18px 30px; border-radius:999px; cursor:pointer; box-shadow:0 0 40px rgba(255,47,179,.6); animation:shine 3s linear infinite, pulse 2s ease-in-out infinite; }
.cta:hover { transform:scale(1.06); }
@keyframes pulse { 50% { box-shadow:0 0 80px rgba(255,211,110,.8); } }
.scroll { position:absolute; bottom:4vh; opacity:.6; font-size:13px; letter-spacing:.2em; animation:float 3s ease-in-out infinite; }
.marquee { overflow:hidden; border-block:1px solid rgba(255,255,255,.25); background:rgba(0,0,0,.35); backdrop-filter:blur(8px); transform:rotate(-2deg); margin:0 -5vw; }
.track { display:flex; white-space:nowrap; animation:scroll 30s linear infinite; padding:18px 0; font-family:"Playfair Display",serif; font-style:italic; font-weight:900; font-size:clamp(28px,4vw,52px); }
.track span { padding:0 28px; } .track span:nth-child(even) { color:var(--gold); }
@keyframes scroll { to { transform:translateX(-50%); } }
.meters { max-width:760px; margin:0 auto; display:grid; gap:22px; text-align:left; }
.meter label { display:flex; justify-content:space-between; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:14px; margin-bottom:8px; }
.meter .bar { height:14px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
.meter .fill { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--lilac),var(--hot),var(--gold)); box-shadow:0 0 20px var(--hot); transition:width 2.2s cubic-bezier(.2,.9,.2,1.05); }
.meter.broken .fill { animation:glitch .25s steps(2) infinite; }
@keyframes glitch { 50% { filter:hue-rotate(90deg) brightness(1.5); } }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; max-width:1100px; margin:0 auto; }
.tile { text-align:left; padding:28px; border-radius:24px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(14px);
  transition:transform .4s, box-shadow .4s; transform-style:preserve-3d; }
.tile:hover { box-shadow:0 20px 60px rgba(255,47,179,.35); }
.tile b { font-family:"Playfair Display",serif; font-style:italic; font-size:44px; color:var(--gold); }
.tile p { font-size:19px; margin-top:6px; }
.card { max-width:560px; margin:0 auto; min-height:180px; display:flex; align-items:center; justify-content:center; padding:36px; border-radius:28px; cursor:pointer;
  font-family:"Playfair Display",serif; font-style:italic; font-size:clamp(24px,3.4vw,36px); background:linear-gradient(135deg,rgba(255,47,179,.25),rgba(180,140,255,.25)); border:1px solid rgba(255,255,255,.3);
  box-shadow:inset 0 0 60px rgba(255,255,255,.08), 0 0 50px rgba(180,140,255,.35); transition:transform .5s; user-select:none; }
.card.flip { transform:rotateY(360deg); }
.heart { font-size:96px; background:none; border:0; cursor:pointer; filter:drop-shadow(0 0 30px var(--hot)); transition:transform .1s; }
.heart:active { transform:scale(.85); }
.count { margin-top:10px; font-weight:700; letter-spacing:.1em; }
.count span { color:var(--gold); font-size:1.4em; }
footer { text-align:center; padding:10vh 6vw 14vh; }
footer em { font-family:"Playfair Display",serif; color:var(--gold); font-size:1.3em; }
kbd { border:1px solid rgba(255,255,255,.4); border-radius:6px; padding:1px 7px; }
.modeflash { position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; opacity:0;
  font-family:"Playfair Display",serif; font-style:italic; font-weight:900; font-size:clamp(60px,14vw,200px); line-height:.9; text-align:center; color:#fff; text-shadow:0 0 40px var(--hot),0 0 90px var(--gold); }
.modeflash small { font-family:"Space Grotesk"; font-style:normal; letter-spacing:.6em; font-size:.18em; }
.modeflash.on { animation:flash 2.4s ease-out; }
@keyframes flash { 0% { opacity:0; transform:scale(.6); } 15% { opacity:1; transform:scale(1.05); } 70% { opacity:1; } 100% { opacity:0; transform:scale(1.3); } }
body.cece-mode .aurora { opacity:1; filter:blur(60px) saturate(1.8); }
body.cece-mode .aurora span { animation-duration:4s !important; }
body.cece-mode .name span { animation-duration:1s; }
.reveal { opacity:0; transform:translateY(40px); transition:opacity 1s, transform 1s; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } .reveal { opacity:1; transform:none; } }