/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
body {
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #fff; background: #000; overflow: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

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

/* Fade: black -> pink -> reveal */
#transition-overlay {
  position: fixed; inset: 0; pointer-events: none;
  background: #000;
  animation: toPink 2.0s ease-in forwards, toScene 2.2s 2.0s 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; opacity:.35; mix-blend-mode: screen; }

/* Background and Ken Burns */
#main, #intro {
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.55)),
    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:.22; z-index:1; filter: saturate(115%) blur(.2px); }
@keyframes ken { from { transform: scale(1) translateY(0); } to { transform: scale(1.08) translateY(-1%); } }
.vignette { position:absolute; inset:0; box-shadow: inset 0 0 240px 60px rgba(0,0,0,0.75); z-index:2; pointer-events:none; }

/* Top bar */
.topbar { position: absolute; top: 0; width: 100%; padding: calc(10px + var(--safe-top)) 16px 12px; display:flex; justify-content: center; z-index:3; }
.brand { font-weight:900; letter-spacing:.12rem; text-transform:uppercase; font-size: clamp(16px, 4vw, 22px); color:#ffd2ff; text-shadow: 0 0 12px rgba(255,0,200,.6); }

/* Intro sequence */
#intro { z-index:5; display:grid; place-items:center; animation: introExit 4.8s ease-in forwards 2.2s; }
@keyframes introExit { to { opacity:0; visibility:hidden; } }
.intro-wrap { display:grid; gap: 18px; transform: translateY(6px); animation: floatIntro 2.6s ease-in-out infinite alternate; padding: 0 6vw; }
@keyframes floatIntro { from { transform: translateY(6px) } to { transform: translateY(-6px) } }
.intro-logo { width: 72px; height: 72px; border-radius: 16px; display:grid; place-items:center; background: radial-gradient(circle at 30% 30%, #ffb6ff, #ff3bd4 70%); color:#000; font-weight:900; font-size:30px; }
.intro-title span { display:inline-block; font-family: 'Playfair Display', serif; font-weight:900; font-size: clamp(26px, 9vw, 64px); letter-spacing: .08em; 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:.08em; } 50% { letter-spacing:.16em; } 100% { letter-spacing:.08em; } }

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

/* ZOEY letters — responsive and huge */
.zoey-letters { display:flex; gap: clamp(6px, 3vw, 28px); align-items:center; justify-content:center; flex-wrap: nowrap; width:100%; padding: 0 2vw; overflow:hidden; }
.zoey-letter {
  --border: rgba(255,255,255,.85);
  position:relative;
  display:inline-grid; place-items:center;
  width: clamp(66px, 22vw, 320px);
  height: clamp(100px, 28vw, 400px);
  font-weight: 900;
  font-size: clamp(84px, 24vw, 340px);
  line-height: 1;
  text-decoration: none;
  color: transparent;
  -webkit-text-stroke: 2px var(--border);
  text-stroke: 2px var(--border);
  background: url('assets/bg.jpg') center/cover no-repeat, conic-gradient(from 0deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 14px rgba(255,0,255,.5)) drop-shadow(0 0 44px rgba(0,255,255,.25));
  transform: translateZ(0);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .5s;
  touch-action: manipulation;
}
.zoey-letter::after {
  content: ""; position:absolute; inset:-12px; border-radius: 28px;
  background: radial-gradient(160px 120px at 50% 50%, rgba(255,0,255,.18), transparent 70%);
  opacity:0; transition: opacity .5s;
}
.zoey-letter:active { transform: scale(.98); }
.zoey-letter:hover { transform: translateY(-6px) scale(1.02); filter: drop-shadow(0 10px 50px rgba(255,0,255,.45)); }
.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 .45s ease-out forwards;
}
@keyframes modalIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }
.tab-modal .modal-inner {
  max-width: 900px; margin: 10vh auto 12vh; padding: clamp(16px, 4vw, 40px); border-radius: 24px;
  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(56px, 18vw, 110px);
  letter-spacing:.06em; margin-bottom: 8px;
  background: linear-gradient(120deg, #fff, #ffd7ff, #b3ffff);
  -webkit-background-clip: text; color: transparent;
}
.poem { font-size: clamp(16px, 4.6vw, 22px); line-height: 1.75; color: #ffeefe; text-shadow: 0 0 12px rgba(255,160,255,.35); padding: 0 2vw; }
.back {
  position: fixed; top: calc(10px + var(--safe-top)); left: 12px; z-index: 11;
  background: #ff62c2; color: #140014; border: none; padding: 12px 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; touch-action: manipulation;
}
.back:active { transform: scale(.98); }
.back:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* Footer note */
.credits { position:absolute; bottom: calc(8px + var(--safe-bottom)); right: 12px; z-index:3; opacity:.8; font-size:12px; }

/* Motion-reduced preference */
@media (prefers-reduced-motion: reduce) {
  .kenburns, #transition-overlay, .intro-title span { animation: none !important; }
  .zoey-letter, .zoey-letter::after { transition: none !important; }
}
/* Tablet and up adjustments */
@media (min-width: 768px) {
  .brand { font-size: clamp(18px, 2vw, 24px); }
  .zoey-letters { gap: clamp(10px, 2.2vw, 30px); }
  .zoey-letter { -webkit-text-stroke: 3px rgba(255,255,255,.85); }
}
/* Small phones: allow slight wrapping */
@media (max-width: 360px) {
  .zoey-letters { flex-wrap: wrap; }
}