@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Tamil:wght@300;400;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --midnight: #060e1a;
  --deep: #0a1628;
  --teal: #0d2438;
  --monsoon: #1a3a5c;
  --gold: #c8a96e;
  --gold-dim: rgba(200,169,110,0.15);
  --rose: #c06b7a;
  --rose-dim: rgba(192,107,122,0.12);
  --moon: #e8dfc8;
  --text: #d4c9b8;
  --text-bright: #f0e8d8;
  --text-muted: rgba(212,201,184,0.55);
  --rain-blue: rgba(120,180,220,0.55);
  --border: rgba(200,169,110,0.12);
  --border-hover: rgba(200,169,110,0.28);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; cursor:none; }

body {
  background: var(--midnight);
  color: var(--text);
  font-family: 'Noto Serif Tamil', 'Cormorant Garamond', serif;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ── CURSOR ── */
.cursor {
  position: fixed; width:8px; height:8px;
  background: var(--rose); border-radius:50%;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition: width .2s, height .2s, background .2s;
  mix-blend-mode: screen;
}
.cursor-ring {
  position:fixed; width:32px; height:32px;
  border:1px solid rgba(192,107,122,.45); border-radius:50%;
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
}

/* ── RAIN ── */
#rain-canvas {
  position:fixed; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:1; opacity:.5;
}
.mist {
  position:fixed; bottom:0; left:0; width:100%; height:250px;
  background:linear-gradient(to top, rgba(6,14,26,.85) 0%, transparent 100%);
  pointer-events:none; z-index:2;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:1.4rem 3rem;
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(to bottom, rgba(6,14,26,.95) 0%, transparent 100%);
  backdrop-filter:blur(4px);
  border-bottom:1px solid rgba(200,169,110,.07);
}
.nav-logo {
  font-family:'Noto Serif Tamil',serif; font-size:1rem;
  color:var(--gold); text-decoration:none; letter-spacing:.05em;
}
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a {
  font-family:'Cormorant Garamond',serif; font-size:.82rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--text); text-decoration:none;
  transition:color .3s;
}
.nav-links a:hover, .nav-links a.active { color:var(--rose); }
.nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; }
.nav-hamburger span { display:block; width:22px; height:1px; background:var(--gold); transition:.3s; }

/* ── HERO ── */
.hero {
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:6rem 2rem 4rem; z-index:10;
  background:radial-gradient(ellipse at center top, rgba(26,58,92,.55) 0%, transparent 65%);
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 28% 65%, rgba(192,107,122,.07) 0%, transparent 55%);
}
.moon-glow {
  position:absolute; top:9%; right:14%; width:80px; height:80px;
  background:radial-gradient(circle, rgba(232,223,200,.92) 0%, rgba(232,223,200,.28) 38%, transparent 68%);
  border-radius:50%; animation:moonPulse 6s ease-in-out infinite;
}
@keyframes moonPulse {
  0%,100%{transform:scale(1);opacity:.8} 50%{transform:scale(1.06);opacity:1}
}
.hero-eyebrow {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:clamp(.8rem,1.4vw,.95rem); letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.5rem;
  opacity:0; animation:fadeUp 1s ease forwards .5s;
}
.hero-title {
  font-family:'Noto Serif Tamil',serif;
  font-size:clamp(3rem,9vw,7.5rem); font-weight:700; line-height:1.05;
  color:var(--text-bright);
  text-shadow:0 0 80px rgba(192,107,122,.38), 0 4px 24px rgba(0,0,0,.85);
  opacity:0; animation:fadeUp 1.2s ease forwards .8s;
}
.hero-title em { color:var(--rose); font-style:normal; display:block; }
.hero-sub {
  margin-top:1.6rem; font-style:italic; line-height:1.9;
  font-size:clamp(.9rem,2vw,1.1rem); color:var(--text-muted); max-width:480px;
  opacity:0; animation:fadeUp 1.2s ease forwards 1.2s;
}
.hero-cta {
  margin-top:2.5rem; display:inline-flex; align-items:center; gap:.8rem;
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1rem; color:var(--gold); text-decoration:none;
  border-bottom:1px solid rgba(200,169,110,.35); padding-bottom:.2rem;
  transition:gap .3s, color .3s; letter-spacing:.05em;
  opacity:0; animation:fadeUp 1s ease forwards 1.6s;
}
.hero-cta:hover { gap:1.2rem; color:var(--text-bright); }
.scroll-hint {
  position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  opacity:0; animation:fadeUp 1s ease forwards 2.2s;
}
.scroll-hint span {
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); opacity:.6;
}
.scroll-line {
  width:1px; height:55px;
  background:linear-gradient(to bottom, var(--gold), transparent);
  animation:scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@keyframes fadeUp {
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── FEATURED VERSE ── */
.featured {
  position:relative; z-index:10; padding:7rem 2rem;
  text-align:center;
  background:linear-gradient(to bottom, transparent 0%, rgba(13,36,56,.4) 50%, transparent 100%);
}
.featured-inner { max-width:680px; margin:0 auto; position:relative; }
.featured-inner::before {
  content:'"'; position:absolute; top:-2.5rem; left:-1.5rem;
  font-family:'Playfair Display',serif; font-size:9rem; font-style:italic;
  color:rgba(192,107,122,.12); line-height:1; pointer-events:none;
}
.featured-label {
  display:inline-block; margin-bottom:2.5rem;
  font-family:'Cormorant Garamond',serif; font-size:.75rem;
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
  border:1px solid rgba(200,169,110,.28); padding:.4rem 1.3rem;
}
.featured-lines { font-family:'Noto Serif Tamil',serif; font-size:clamp(.98rem,2.3vw,1.28rem); line-height:2.6; color:var(--text-bright); }
.featured-lines .highlight { color:var(--rose); }
.featured-sig { margin-top:2rem; }
.featured-sig-line { width:1px; height:60px; background:linear-gradient(to bottom, var(--rose), transparent); margin:0 auto 1rem; }
.featured-sig-name { font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold); font-size:1rem; }

/* ── DIVIDER ── */
.divider { position:relative; z-index:10; text-align:center; padding:1.5rem; color:rgba(200,169,110,.28); font-size:.9rem; letter-spacing:1.2rem; }

/* ── SECTION SHELL ── */
.section { position:relative; z-index:10; padding:5rem 0 6rem; }
.section-header { text-align:center; margin-bottom:4rem; padding:0 2rem; }
.section-rule { width:50px; height:1px; background:var(--gold); margin:0 auto 1.4rem; }
.section-eyebrow { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:.75rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-bottom:.4rem; }
.section-title { font-family:'Noto Serif Tamil',serif; font-size:clamp(1.7rem,4vw,2.8rem); font-weight:400; color:var(--text-bright); }

/* ── POEMS GRID ── */
.poems-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); max-width:1380px; margin:0 auto; padding:0 2rem; gap:0; }
.poem-card {
  position:relative; padding:3rem 2.8rem; display:block;
  border:1px solid var(--border); text-decoration:none; color:inherit; overflow:hidden;
  background:linear-gradient(135deg, rgba(13,36,56,.38) 0%, rgba(6,14,26,.6) 100%);
  transition:all .45s cubic-bezier(.23,1,.32,1);
}
.poem-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(192,107,122,.07) 0%,transparent 60%); opacity:0; transition:opacity .45s; }
.poem-card::after { content:''; position:absolute; top:0; left:0; width:100%; height:2px; background:linear-gradient(to right,transparent,var(--rose),transparent); transform:scaleX(0); transition:transform .5s; }
.poem-card:hover { border-color:var(--border-hover); transform:translateY(-3px); background:linear-gradient(135deg,rgba(13,36,56,.65) 0%,rgba(26,58,92,.35) 100%); }
.poem-card:hover::before { opacity:1; }
.poem-card:hover::after { transform:scaleX(1); }
.card-num { position:absolute; top:1.8rem; right:2.2rem; font-family:'Cormorant Garamond',serif; font-size:3.5rem; font-weight:300; color:var(--gold-dim); line-height:1; transition:color .45s; }
.poem-card:hover .card-num { color:rgba(200,169,110,.2); }
.card-icon { font-size:1.4rem; display:block; margin-bottom:1.3rem; }
.card-title { font-family:'Noto Serif Tamil',serif; font-size:1.3rem; font-weight:600; color:var(--text-bright); margin-bottom:1rem; line-height:1.35; }
.card-excerpt { font-size:.9rem; line-height:2; color:var(--text-muted); font-style:italic; }
.card-read { margin-top:1.8rem; display:inline-flex; align-items:center; gap:.5rem; font-family:'Cormorant Garamond',serif; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); transition:gap .3s; }
.poem-card:hover .card-read { gap:1rem; }

/* ── POEM PAGE (individual collection) ── */
.poem-page-hero {
  position:relative; z-index:10;
  padding:10rem 2rem 5rem; text-align:center;
}
.poem-page-title { font-family:'Noto Serif Tamil',serif; font-size:clamp(2rem,6vw,4.5rem); font-weight:700; color:var(--text-bright); text-shadow:0 0 60px rgba(192,107,122,.35); line-height:1.15; }
.poem-page-sub { margin-top:1rem; font-style:italic; color:var(--text-muted); font-size:1rem; }
.poem-page-rule { width:60px; height:1px; background:var(--gold); margin:2rem auto; }

.poems-wrapper { position:relative; z-index:10; max-width:720px; margin:0 auto; padding:2rem 2rem 8rem; }

.poem-block {
  margin-bottom:4.5rem; padding:3rem 3.5rem;
  border-left:1px solid rgba(200,169,110,.2);
  position:relative;
  background:linear-gradient(to right, rgba(13,36,56,.25) 0%, transparent 100%);
  transition:border-color .4s;
}
.poem-block:hover { border-left-color:rgba(192,107,122,.5); }
.poem-block::before {
  content:''; position:absolute; top:0; left:-1px; width:1px; height:0;
  background:var(--rose); transition:height .6s ease;
}
.poem-block:hover::before { height:100%; }

.poem-lines { font-family:'Noto Serif Tamil',serif; font-size:clamp(1rem,2.2vw,1.18rem); line-height:2.6; color:var(--text-bright); white-space:pre-line; }
.poem-highlight { color:var(--rose); }
.poem-sep { text-align:center; padding:1.5rem 0; color:rgba(200,169,110,.25); font-size:1rem; letter-spacing:.6rem; }

.back-link {
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Cormorant Garamond',serif; font-style:italic;
  color:var(--gold); text-decoration:none; font-size:.95rem;
  border-bottom:1px solid rgba(200,169,110,.25); padding-bottom:.2rem;
  transition:gap .3s, color .3s; margin-bottom:3rem; display:block; width:fit-content;
}
.back-link:hover { gap:1rem; color:var(--text-bright); }

/* ── RAIN INTERLUDE ── */
.rain-interlude {
  position:relative; z-index:10; text-align:center; padding:6rem 2rem;
  background:linear-gradient(to bottom, transparent 0%, rgba(13,36,56,.45) 50%, transparent 100%);
}
.rain-drops-deco { display:flex; justify-content:center; gap:1rem; margin:0 auto 2.5rem; }
.rdrop { width:2px; border-radius:2px; background:linear-gradient(to bottom, transparent, var(--rain-blue)); animation:rdropfall 1.6s ease-in-out infinite; }
.rdrop:nth-child(1){height:18px;animation-delay:0s}
.rdrop:nth-child(2){height:32px;animation-delay:.28s}
.rdrop:nth-child(3){height:22px;animation-delay:.55s}
.rdrop:nth-child(4){height:38px;animation-delay:.82s}
.rdrop:nth-child(5){height:20px;animation-delay:.14s}
@keyframes rdropfall {
  0%,100%{opacity:.3;transform:scaleY(.7)} 50%{opacity:1;transform:scaleY(1)}
}
.interlude-title { font-family:'Noto Serif Tamil',serif; font-size:clamp(1.4rem,3.5vw,2.2rem); color:var(--text-bright); margin-bottom:2.5rem; line-height:1.5; }
.interlude-verse { font-style:italic; line-height:2.8; font-size:clamp(.95rem,2vw,1.08rem); color:var(--text-muted); max-width:600px; margin:0 auto; }
.interlude-verse .hl { color:var(--rose); }

/* ── LETTER SECTION ── */
.letter-section { position:relative; z-index:10; padding:5rem 2rem 7rem; }
.letter-card {
  max-width:780px; margin:0 auto; padding:4rem 4.5rem;
  border:1px solid var(--border); position:relative;
  background:linear-gradient(135deg, rgba(13,36,56,.5) 0%, rgba(6,14,26,.8) 100%);
}
.letter-card::before,.letter-card::after { content:''; position:absolute; width:22px; height:22px; border-color:var(--rose); border-style:solid; }
.letter-card::before { top:-1px; left:-1px; border-width:2px 0 0 2px; }
.letter-card::after  { bottom:-1px; right:-1px; border-width:0 2px 2px 0; }
.letter-title { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(1.5rem,3vw,2rem); color:var(--gold); text-align:center; margin-bottom:2.5rem; }
.letter-body { font-size:1.05rem; line-height:2.7; text-align:center; color:var(--text); }
.letter-body p { margin-bottom:1.2rem; }
.letter-body .hl { color:var(--rose); font-size:1.12rem; }
.heart { color:var(--rose); font-size:1.1rem; display:block; text-align:center; margin:1.2rem 0; animation:heartbeat 2.2s ease-in-out infinite; }
@keyframes heartbeat { 0%,100%{transform:scale(1)} 25%{transform:scale(1.18)} 45%{transform:scale(1)} 65%{transform:scale(1.1)} }

/* ── FOOTER ── */
footer {
  position:relative; z-index:10; text-align:center;
  padding:3.5rem 2rem;
  border-top:1px solid rgba(200,169,110,.1);
}
.footer-logo { font-family:'Noto Serif Tamil',serif; font-size:1.4rem; color:var(--gold); display:block; margin-bottom:.7rem; }
.footer-tag  { font-family:'Cormorant Garamond',serif; font-style:italic; color:rgba(212,201,184,.35); font-size:.88rem; letter-spacing:.08em; }
.footer-nav  { margin:1.5rem 0; display:flex; justify-content:center; flex-wrap:wrap; gap:.6rem 2rem; list-style:none; }
.footer-nav a { font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-muted); text-decoration:none; font-family:'Cormorant Garamond',serif; transition:color .3s; }
.footer-nav a:hover { color:var(--gold); }

/* ── PETALS ── */
.petal {
  position:fixed; width:7px; height:11px;
  background:rgba(192,107,122,.38); border-radius:50% 0 50% 0;
  pointer-events:none; z-index:3; animation:petalFall linear infinite;
}
@keyframes petalFall {
  0%{opacity:0;transform:translateY(-20px) rotate(0deg)} 10%{opacity:1}
  90%{opacity:.4} 100%{opacity:0;transform:translateY(110vh) rotate(720deg)}
}

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(36px); transition:opacity .8s cubic-bezier(.23,1,.32,1), transform .8s cubic-bezier(.23,1,.32,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.rd1{transition-delay:.08s}.rd2{transition-delay:.16s}.rd3{transition-delay:.24s}
.rd4{transition-delay:.32s}.rd5{transition-delay:.40s}.rd6{transition-delay:.48s}

/* ── MOBILE ── */
@media(max-width:768px){
  nav { padding:1rem 1.5rem; }
  .nav-links { display:none; flex-direction:column; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(6,14,26,.97); align-items:center; justify-content:center; gap:2.5rem; z-index:150; }
  .nav-links.open { display:flex; }
  .nav-links a { font-size:1.3rem; }
  .nav-hamburger { display:flex; z-index:201; }
  .poems-grid { grid-template-columns:1fr; }
  .letter-card { padding:2.5rem 1.8rem; }
  .poem-block { padding:2rem 1.5rem; }
  .featured-inner::before { display:none; }
}