/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #fff; background: #000; overflow: hidden; }

/* Fullscreen helpers */
.fullscreen { position: fixed; inset: 0; }
.center { display: grid; place-items: center; text-align: center; }

/* Transition overlay: black -> pink -> reveal background */
#transition-overlay {
  position: fixed; inset: 0; pointer-events: none;
  background: #000;
  animation: toPink 2.8s ease-in forwards, toScene 2.8s 2.8s ease-in forwards;
  z-index: 6;
}
@keyframes toPink { from { background:#000; } to { background:#ff4aa3; } }
@keyframes toScene { from { opacity:1; } to { opacity:0; } }

/* Particle canvas */
#particles { position: fixed; inset: 0; z-index: 0; }

/* Background image with Ken Burns effect */
#main, #intro {
  background:
    radial-gradient(100% 100% at 50% 30%, rgba(255,0,128,.12) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.75) 100%),
    url('assets/bg.jpg') center center / cover no-repeat fixed;
}
.kenburns { position: absolute; inset:0; background: url('assets/bg.jpg') center/110% 110% no-repeat; transform-origin: center; animation: ken 18s ease-in-out infinite alternate; opacity:.28; z-index:1; }
@keyframes ken { from { transform: scale(1) translateY(0); } to { transform: scale(1.1) translateY(-2%); } }
.vignette { position:absolute; inset:0; box-shadow: inset 0 0 200px 40px rgba(0,0,0,0.65); z-index:2; pointer-events:none; }

/* Top bar */
.topbar { position: absolute; top: 0; width: 100%; padding: 18px 28px; display:flex; justify-content: space-between; align-items:center; z-index:3; }
.brand { font-weight:900; letter-spacing:.2rem; text-transform:uppercase; font-size: clamp(18px, 2vw, 24px); color:#ffd2ff; text-shadow: 0 0 12px rgba(255,0,200,.6); }

/* Intro sequence */
#intro { z-index:5; display:grid; place-items:center; backdrop-filter: blur(0px); animation: introExit 5.6s ease-in forwards 2.8s; }
@keyframes introExit { to { opacity:0; visibility:hidden; } }
.intro-wrap { display:grid; gap: 22px; transform: translateY(10px); animation: floatIntro 2.6s ease-in-out infinite alternate; }
@keyframes floatIntro { from { transform: translateY(10px) } to { transform: translateY(-10px) } }
.intro-logo { width: 88px; height: 88px; border-radius: 18px; display:grid; place-items:center; background: radial-gradient(circle at 30% 30%, #ffb6ff, #ff3bd4 70%); color:#000; font-weight:900; font-size:36px; }
.intro-title span { display:inline-block; font-family: 'Playfair Display', serif; font-weight:900; font-size: clamp(28px, 6vw, 68px); letter-spacing: .1em; text-transform: lowercase; background: linear-gradient(120deg, #ffffff, #ffecf9, #ffc0ff); -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 0 24px rgba(255,150,255,.8)); animation: titlePulse 3.2s ease-in-out infinite; }
@keyframes titlePulse { 0% { letter-spacing:.1em; } 50% { letter-spacing:.18em; } 100% { letter-spacing:.1em; } }

/* Main hero content */
.hero-content { position:relative; z-index:3; }
.hint { margin-top: 18px; font-size: clamp(12px, 1.4vw, 16px); color:#ffe0ff; opacity:.85; text-shadow: 0 0 10px rgba(255,120,255,.6); }

/* ZOEY letters */
.zoey-letters { display:flex; gap: clamp(10px, 2vw, 24px); align-items:center; justify-content:center; flex-wrap:wrap; }
.zoey-letter {
  --border: rgba(255,255,255,.8);
  position:relative;
  display:inline-grid; place-items:center;
  width: clamp(80px, 17vw, 220px);
  height: clamp(120px, 22vw, 280px);
  font-weight: 900;
  font-size: clamp(68px, 18vw, 260px);
  line-height: 1;
  text-decoration: none;
  color: transparent;
  -webkit-text-stroke: 2px var(--border);
  text-stroke: 2px var(--border);
  background: conic-gradient(from 0deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(255,0,255,.5)) drop-shadow(0 0 40px rgba(0,255,255,.25));
  transform: translateZ(0);
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s;
}
.zoey-letter::after {
  content: "";
  position:absolute; inset:-12px;
  border-radius: 28px;
  background: radial-gradient(120px 80px at 50% 50%, rgba(255,0,255,.18), transparent 70%);
  opacity:0; transition: opacity .6s;
}
.zoey-letter:hover { transform: translateY(-8px) scale(1.03); filter: drop-shadow(0 10px 40px rgba(255,0,255,.4)); }
.zoey-letter:hover::after { opacity:1; }

/* Modals / Tabs */
.tab-modal {
  position: fixed; inset:0; z-index:10; display:none;
  background:
    linear-gradient(180deg, rgba(13,2,20,.92), rgba(2,0,8,.86)),
    url('assets/bg.jpg') center/cover no-repeat fixed;
  backdrop-filter: blur(4px) saturate(120%);
  animation: modalIn .6s ease-out forwards;
}
@keyframes modalIn { from { opacity:0; transform: scale(.98); } to { opacity:1; transform: scale(1); } }
.tab-modal .modal-inner { max-width: 980px; margin: 12vh auto 8vh; padding: clamp(18px, 3vw, 40px); border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,192,255,.08), rgba(0,255,255,.08));
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 80px rgba(255,0,255,.12);
}
.tab-modal h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(64px, 10vw, 120px);
  letter-spacing:.06em; margin-bottom: 10px;
  background: linear-gradient(120deg, #fff, #ffd7ff, #b3ffff);
  -webkit-background-clip: text; color: transparent;
}
.poem { font-size: clamp(18px, 2.2vw, 24px); line-height: 1.8; color: #ffeefe; text-shadow: 0 0 12px rgba(255,160,255,.35); }
.back {
  position: fixed; top: 22px; left: 22px; z-index: 11;
  background: #ff62c2; color: #140014; border: none; padding: 10px 16px; border-radius: 12px;
  font-weight:700; cursor:pointer; box-shadow: 0 10px 30px rgba(255,80,180,.4);
  transition: transform .2s ease, filter .3s ease;
}
.back:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* Footer note */
.credits { position:absolute; bottom: 10px; right: 14px; z-index:3; opacity:.75; font-size:12px; }

/* Accessibility focus */
a:focus-visible, .back:focus-visible { outline: 3px solid #00ffff; outline-offset: 4px; border-radius: 8px; }