/* ============================================================
   Cosmic Ray Poetry — shared styles
   Used by every page. The hero orb (#hero-orb) appears
   only on the home page; all other pages share the same
   starfield, cursor, and supernova atmosphere.
   ============================================================ */

@font-face {
  font-family: 'Times NR Condensed';
  src: url('fonts/TimesNRCondensedBold.woff2') format('woff2'),
       url('fonts/TimesNRCondensedBold.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --sky-deep: #0a0818; --sky-navy: #0d1333; --sky-mid: #1a1650;
  --sky-purple: #2d1b69; --sky-violet: #3d2480;
  --ink: #f0eaff; --muted: #9b8fc0; --accent: #c9b8f0; --gold: #d4a8e0;
  --line: rgba(200,180,255,0.12);
}

html { scroll-behavior: smooth; }

body {
  background: linear-gradient(170deg, #0d1333 0%, #1a1650 30%, #2d1b69 60%, #0a0818 100%);
  color: var(--ink);
  font-family: 'Times NR Condensed', Georgia, serif;
  min-height: 100vh;
  cursor: none;
  position: relative;
}

/* LAYER ORDER:
   z-index 0 = starfield (furthest back)
   z-index 1 = sky gradient orbs
   z-index 2 = hero orb (big top glow, home only)
   z-index 3 = all content
   z-index 100 = nav
   z-index 9998 = supernova
   z-index 9999 = cursor
*/

#starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; opacity: 0.5; }
.star { position: absolute; border-radius: 50%; background: white; animation: twinkle var(--d,3s) ease-in-out infinite var(--delay,0s); }
@keyframes twinkle { 0%,100%{opacity:var(--min,.2);transform:scale(1)} 50%{opacity:var(--max,.9);transform:scale(1.3)} }

#sky-gradient {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(61,36,128,0.6) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(45,27,105,0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(13,19,51,0.8) 0%, transparent 60%);
}

/* Large hero orb — a defined glowing sphere anchored in the hero (home page only) */
#hero-orb {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%,
    #e8d8ff 0%,
    #c9b8f0 30%,
    #8a5ad8 60%,
    #4a2a9a 85%,
    #2d1b69 100%
  );
  box-shadow:
    0 0 70px 25px rgba(140, 90, 240, 0.45),
    0 0 140px 50px rgba(100, 60, 200, 0.22);
  pointer-events: none;
  z-index: 0;
}

nav, section, .marquee-wrap, footer { position: relative; z-index: 3; }

#star-cursor { position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); }
#star-cursor svg { overflow: visible; }
#star-cursor .star-body { transition: transform 0.15s ease; transform-origin: 12px 12px; }
#star-cursor.pulse .star-body { transform: scale(1.4); }

.supernova { position: fixed; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); }
.supernova svg { overflow: visible; }

.sn-ring { transform-origin: 50% 50%; animation: snRing 0.7s cubic-bezier(0.2,0.6,0.4,1) forwards; }
@keyframes snRing {
  0%   { r: 0;  stroke-opacity: 0.9; stroke-width: 2; }
  60%  { r: 19; stroke-opacity: 0.5; stroke-width: 1; }
  100% { r: 30; stroke-opacity: 0;   stroke-width: 0.5; }
}
.sn-flash { transform-origin: 50% 50%; animation: snFlash 0.35s ease-out forwards; }
@keyframes snFlash {
  0%   { r: 0;  fill-opacity: 1; }
  40%  { r: 7;  fill-opacity: 0.8; }
  100% { r: 11; fill-opacity: 0; }
}
.sn-ray { transform-origin: 0px 0px; animation: snRay 0.65s cubic-bezier(0.1,0.7,0.3,1) forwards; stroke-linecap: round; }
@keyframes snRay {
  0%   { stroke-dashoffset: 0;   stroke-opacity: 1;   stroke-width: 1.2; }
  70%  { stroke-opacity: 0.6; }
  100% { stroke-dashoffset: -26; stroke-opacity: 0;   stroke-width: 0.3; }
}
.sn-particle { animation: snParticle 0.8s ease-out forwards; }
@keyframes snParticle {
  0%   { r: 1.5; fill-opacity: 1; }
  100% { r: 0.3; fill-opacity: 0; }
}

/* ---------- NAV ---------- */
nav { position: fixed; top: 0; left: 0; right: 0; padding: 2rem 4rem; display: flex; justify-content: space-between; align-items: center; z-index: 100; background: linear-gradient(to bottom, rgba(10,8,24,0.7) 0%, transparent 100%); }
.nav-logo { font-family:'Times NR Condensed', Georgia, serif; font-size:0.9rem; letter-spacing:0.25em; text-transform:lowercase; color:var(--accent); text-decoration:none; font-style:italic; }
.nav-links { display:flex; gap:3rem; list-style:none; }
.nav-links a { font-family:'Times NR Condensed', Georgia, serif; font-size:0.65rem; font-weight:300; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color 0.3s; }
.nav-links a:hover { color:var(--accent); }
.nav-links a.active { color:var(--accent); }

/* ---------- SECTIONS ---------- */
section { min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; padding:8rem 4rem; }

/* Interior page header (used on all pages except home) */
.page-header { min-height:56vh; flex-direction:column; text-align:center; gap:1.5rem; padding-top:11rem; }
.page-title { font-family:'Times NR Condensed', Georgia, serif; font-size:clamp(2.2rem,5vw,4rem); font-style:italic; font-weight:400; line-height:1.1; background:linear-gradient(135deg,#f0eaff,#c9b8f0); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; filter:drop-shadow(0 2px 12px rgba(10,8,24,0.6)); }
.page-intro { font-family:'Times NR Condensed', Georgia, serif; font-size:1rem; font-style:italic; color:var(--muted); max-width:440px; line-height:2; }

/* ---------- HERO (home) ---------- */
#hero { flex-direction:column; text-align:center; gap:0; }
#hero > *:not(#hero-orb) { position: relative; z-index: 1; }
.hero-eyebrow { font-family:'Times NR Condensed', Georgia, serif; font-size:0.6rem; font-weight:300; letter-spacing:0.5em; text-transform:uppercase; color:var(--muted); margin-bottom:4rem; text-shadow: 0 1px 8px rgba(10,8,24,0.9); opacity:0; animation:fadeUp 1.2s ease 0.3s forwards; }
.hero-name { font-family:'Times NR Condensed', Georgia, serif; font-size:clamp(3rem,8vw,7rem); font-weight:400; line-height:1; letter-spacing:-0.02em; font-style:italic; background:linear-gradient(135deg,#ffffff 0%,#f0eaff 40%,#e8d0ff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; filter: drop-shadow(0 2px 12px rgba(10,8,24,0.9)) drop-shadow(0 0 30px rgba(10,8,24,0.7)); opacity:0; animation:fadeUp 1.4s ease 0.5s forwards; }
.hero-sub { font-family:'Times NR Condensed', Georgia, serif; font-size:0.6rem; font-weight:200; letter-spacing:0.6em; text-transform:uppercase; color:var(--gold); margin-top:2rem; text-shadow: 0 1px 8px rgba(10,8,24,0.9); opacity:0; animation:fadeUp 1.4s ease 0.8s forwards; }
.hero-divider { width:1px; height:80px; background:linear-gradient(to bottom,var(--accent),transparent); margin:4rem auto 0; opacity:0; animation:fadeUp 1s ease 1.2s forwards; }

/* ---------- MARQUEE ---------- */
.marquee-wrap { overflow:hidden; border-top:0.5px solid var(--line); border-bottom:0.5px solid var(--line); padding:1.2rem 0; background:rgba(13,19,51,0.4); white-space:nowrap; }
.marquee-inner { display:inline-block; animation:marquee 28s linear infinite; }
.marquee-inner span { font-family:'Times NR Condensed', Georgia, serif; font-size:0.85rem; font-style:italic; color:var(--muted); letter-spacing:0.1em; padding:0 3rem; }
.marquee-inner span::after { content:'·'; margin-left:3rem; color:var(--gold); }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- POEMS ---------- */
#poems { flex-direction:column; gap:0; padding:6rem 0 8rem; max-width:100%; width:100%; overflow:hidden; min-height:auto; align-items:stretch; }
.poem-row { width:100%; display:flex; align-items:stretch; border-top:0.5px solid var(--line); min-height:280px; transition:background 0.4s ease; cursor:none; }
.poem-row:last-child { border-bottom:0.5px solid var(--line); }
.poem-row:hover { background:rgba(61,36,128,0.2); }
.poem-number { width:120px; min-width:120px; padding:3rem; display:flex; align-items:flex-start; justify-content:flex-end; font-family:'Times NR Condensed', Georgia, serif; font-size:0.6rem; font-weight:300; letter-spacing:0.3em; color:var(--gold); padding-top:3.2rem; }
.poem-content { flex:1; padding:3rem 4rem 3rem 3rem; display:flex; flex-direction:column; justify-content:space-between; border-left:0.5px solid var(--line); }
.poem-title { font-family:'Times NR Condensed', Georgia, serif; font-size:clamp(1.8rem,3vw,2.8rem); font-weight:400; font-style:italic; line-height:1.1; color:var(--ink); margin-bottom:1.5rem; }
.poem-excerpt { font-family:'Times NR Condensed', Georgia, serif; font-size:1rem; line-height:2; color:var(--muted); max-width:420px; font-style:italic; }
.poem-meta { display:flex; align-items:center; gap:2rem; margin-top:2rem; }
.poem-collection { font-family:'Times NR Condensed', Georgia, serif; font-size:0.55rem; font-weight:300; letter-spacing:0.4em; text-transform:uppercase; color:var(--gold); }
.poem-btn { font-family:'Times NR Condensed', Georgia, serif; font-size:0.55rem; font-weight:300; letter-spacing:0.4em; text-transform:uppercase; color:var(--accent); text-decoration:none; border-bottom:0.5px solid var(--accent); padding-bottom:2px; transition:color 0.3s,border-color 0.3s; }
.poem-btn:hover { color:var(--gold); border-color:var(--gold); }
.poem-image-col { width:220px; min-width:220px; display:flex; align-items:center; justify-content:center; padding:2rem; border-left:0.5px solid var(--line); }
.poem-shape { width:100px; height:100px; border-radius:50%; transition:transform 0.6s ease; }
.poem-row:hover .poem-shape { transform:scale(1.08) rotate(6deg); }
.shape-1{background:radial-gradient(circle at 35% 35%,#5a3a9a,#2d1b69)}
.shape-2{background:radial-gradient(circle at 65% 35%,#3d2480,#1a1650);border-radius:0}
.shape-3{background:radial-gradient(circle at 35% 65%,#6a4ab0,#3d2480);border-radius:30% 70% 70% 30%/30% 30% 70% 70%}
.shape-4{background:radial-gradient(circle at 50% 50%,#4a3090,#1a1650);border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.shape-5{background:radial-gradient(circle at 35% 35%,#7a5ab8,#2d1b69);border-radius:0 50% 50% 50%;transform:rotate(15deg)}

/* ---------- ABOUT ---------- */
#about { flex-direction:column; text-align:center; gap:0; background:rgba(13,19,51,0.5); border-top:0.5px solid var(--line); border-bottom:0.5px solid var(--line); }
.about-quote { font-family:'Times NR Condensed', Georgia, serif; font-size:clamp(1.4rem,3vw,2.2rem); font-weight:400; font-style:italic; line-height:1.7; max-width:560px; color:var(--accent); margin-bottom:4rem; }
.about-name { font-family:'Times NR Condensed', Georgia, serif; font-size:0.6rem; font-weight:300; letter-spacing:0.5em; text-transform:uppercase; color:var(--gold); margin-bottom:2rem; }
.about-portrait { width:180px; height:180px; border-radius:50%; background:linear-gradient(135deg,#2d1b69,#1a1650); margin:0 auto 3rem; display:flex; align-items:center; justify-content:center; border:1px solid rgba(201,184,240,0.2); }
.portrait-initial { font-family:'Times NR Condensed', Georgia, serif; font-size:4rem; font-style:italic; color:var(--accent); opacity:0.7; }
.about-bio { font-family:'Times NR Condensed', Georgia, serif; font-size:0.7rem; font-weight:300; color:var(--muted); letter-spacing:0.08em; line-height:2; max-width:420px; text-align:center; }

/* ---------- COLLECTIONS ---------- */
#books { flex-direction:column; gap:5rem; }
.books-header { text-align:center; width:100%; }
.section-label { font-family:'Times NR Condensed', Georgia, serif; font-size:0.6rem; font-weight:300; letter-spacing:0.5em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:1.5rem; }
.section-title { font-family:'Times NR Condensed', Georgia, serif; font-size:clamp(2rem,4vw,3.5rem); font-style:italic; font-weight:400; background:linear-gradient(135deg,#f0eaff,#c9b8f0); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.books-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0; width:100%; max-width:900px; border:0.5px solid var(--line); }
.book-card { padding:3rem 2.5rem; border-right:0.5px solid var(--line); transition:background 0.4s ease; }
.book-card:last-child { border-right:none; }
.book-card:hover { background:rgba(61,36,128,0.2); }
.book-cover { width:100%; aspect-ratio:2/3; margin-bottom:2rem; display:flex; align-items:center; justify-content:center; }
.book-bg-1{background:linear-gradient(160deg,#2d1b69,#0d1333)}
.book-bg-2{background:linear-gradient(160deg,#1a1650,#0a0818)}
.book-bg-3{background:linear-gradient(160deg,#3d2480,#1a1650)}
.book-cover-title { font-family:'Times NR Condensed', Georgia, serif; font-size:1.1rem; font-style:italic; color:var(--accent); text-align:center; padding:1rem; line-height:1.4; }
.book-year { font-family:'Times NR Condensed', Georgia, serif; font-size:0.55rem; letter-spacing:0.4em; text-transform:uppercase; color:var(--gold); margin-bottom:0.75rem; display:block; }
.book-name { font-family:'Times NR Condensed', Georgia, serif; font-size:1.3rem; font-style:italic; margin-bottom:0.75rem; line-height:1.2; color:var(--ink); }
.book-desc { font-family:'Times NR Condensed', Georgia, serif; font-size:0.7rem; font-weight:300; color:var(--muted); line-height:1.8; letter-spacing:0.03em; }

/* ---------- NEWSLETTER / LETTERS ---------- */
#newsletter { flex-direction:column; gap:3rem; text-align:center; border-top:0.5px solid var(--line); min-height:70vh; }
.newsletter-title { font-family:'Times NR Condensed', Georgia, serif; font-size:clamp(1.8rem,4vw,3rem); font-style:italic; line-height:1.3; max-width:480px; color:var(--ink); }
.newsletter-sub { font-family:'Times NR Condensed', Georgia, serif; font-size:0.7rem; font-weight:300; color:var(--muted); letter-spacing:0.1em; max-width:380px; line-height:2; }
.newsletter-form { display:flex; gap:0; border:0.5px solid rgba(201,184,240,0.3); max-width:440px; width:100%; }
.newsletter-input { flex:1; border:none; background:rgba(13,19,51,0.6); padding:1.1rem 1.5rem; font-family:'Times NR Condensed', Georgia, serif; font-size:0.9rem; font-style:italic; color:var(--ink); outline:none; }
.newsletter-input::placeholder { color:var(--muted); }
.newsletter-submit { background:rgba(61,36,128,0.6); color:var(--accent); border:none; border-left:0.5px solid rgba(201,184,240,0.2); padding:0 2rem; font-family:'Times NR Condensed', Georgia, serif; font-size:0.55rem; font-weight:300; letter-spacing:0.4em; text-transform:uppercase; cursor:none; transition:background 0.3s; }
.newsletter-submit:hover { background:rgba(61,36,128,0.9); }

/* ---------- FOOTER ---------- */
footer { padding:3rem 4rem; border-top:0.5px solid var(--line); display:flex; justify-content:space-between; align-items:center; background:rgba(10,8,24,0.6); }
.footer-copy { font-family:'Times NR Condensed', Georgia, serif; font-size:0.55rem; font-weight:300; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); }
.footer-socials { display:flex; gap:2rem; }
.footer-socials a { font-family:'Times NR Condensed', Georgia, serif; font-size:0.55rem; font-weight:300; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); text-decoration:none; transition:color 0.3s; }
.footer-socials a:hover { color:var(--accent); }

/* ---------- SCROLL REVEAL ---------- */
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.9s ease,transform 0.9s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 820px) {
  body { cursor: auto; }
  #star-cursor { display:none; }
  nav { padding:1.1rem 1.5rem; flex-direction:column; gap:0.9rem; }
  .nav-links { gap:1.1rem 1.4rem; flex-wrap:wrap; justify-content:center; }
  section { padding:6rem 1.5rem; }
  .page-header { padding-top:9rem; min-height:auto; }
  #hero { padding-top:9rem; }
  #hero-orb { width:200px; height:200px; top:9%; }
  .hero-eyebrow { margin-bottom:2.5rem; }
  .poem-row { flex-direction:column; min-height:auto; }
  .poem-number { width:100%; min-width:0; justify-content:flex-start; padding:1.5rem 1.5rem 0; }
  .poem-content { border-left:none; padding:1.5rem; }
  .poem-image-col { width:100%; min-width:0; border-left:none; border-top:0.5px solid var(--line); }
  .books-grid { grid-template-columns:1fr; max-width:420px; }
  .book-card { border-right:none; border-bottom:0.5px solid var(--line); }
  .book-card:last-child { border-bottom:none; }
  footer { flex-direction:column; gap:1.2rem; text-align:center; }
}

/* ============================================================
   Update (2026-09) — revisions from the client update sheet
   ============================================================ */

/* Global: headers & titles render in all caps */
.hero-name, .page-title, .section-title, .poem-title,
.book-name, .newsletter-title { text-transform: uppercase; }

/* Nav logo is now the MetalStar image */
.nav-logo { display:inline-flex; align-items:center; }
.nav-logo img { height:44px; width:auto; display:block;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.55)); }

/* About portrait — full Cosmic Coalition logo, never cropped */
.about-logo { display:block; width:100%; max-width:340px; height:auto;
  margin:0 auto 3rem; filter:drop-shadow(0 8px 26px rgba(0,0,0,0.45)); }

/* Collections — image covers + a "coming soon" caption */
.book-card { text-align:center; }
.book-cover { overflow:hidden; }
.book-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.book-soon { font-family:'Times NR Condensed', Georgia, serif;
  font-size:0.8rem; letter-spacing:0.35em; text-transform:uppercase;
  color:var(--gold); text-align:center; display:block; margin-top:1rem; }

@media (max-width: 820px) {
  .nav-logo img { height:38px; }
}

/* ============================================================
   Update v4 — header clipping, About sizing, poem stars, IG icon
   ============================================================ */

/* Gradient-clipped italic titles were shaved at the ends — pad the
   text box so the first/last glyph overhang isn't clipped. */
.hero-name, .page-title, .section-title, .newsletter-title {
  padding: 0.06em 0.28em;
  max-width: 100%;
}

/* About: header-sized title + much larger, readable bio */
#about .page-title { margin-bottom: 2rem; }
.about-bio {
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
  max-width: 560px;
}

/* Poems: MetalStar in place of the abstract shapes */
.poem-star {
  width: 104px; height: auto; display: block;
  transition: transform 0.6s ease;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.55));
}
.poem-row:hover .poem-star { transform: scale(1.08) rotate(6deg); }

/* Footer: Instagram glyph icon */
.footer-socials svg { width: 22px; height: 22px; display: block; }