/* Nordic Banana — styles */
:root{
  --ink:#0a0f1a;
  --snow:#e6f1ff;
  --banana:#ffd12a;
  --banana-deep:#f2b300;
  --accent:#9ad0ff;
  --ghost:#b4c6dd;
  --shadow:rgba(2,6,23,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
  color:var(--snow);
  background:#0b1726 radial-gradient(1200px 800px at 70% 10%, #0e233f 0%, #081628 50%, #050b14 100%) no-repeat;
  line-height:1.45;
  letter-spacing:.01em;
  overflow-x:hidden;
}

/* Light grain overlay for vinyl vibe */
.grain{
  position:fixed; inset:-10vmax;
  background-image:url('assets/noise.png');
  opacity:.08;
  mix-blend-mode:overlay;
  pointer-events:none;
  filter:contrast(110%) brightness(130%);
}

/* LP style header bar */
.lp-bar{
  display:flex; justify-content:space-between; align-items:flex-end;
  padding: clamp(12px, 2vw, 20px) clamp(16px, 3vw, 32px);
  text-transform:uppercase;
  letter-spacing:.08em;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  position:sticky; top:0; z-index:5; backdrop-filter: blur(6px);
}
.lp-left h1{
  margin:0; font-family:Fraunces, serif; font-weight:800;
  font-size:clamp(20px, 5vw, 46px);
}
.lp-left .banana-word{ color:var(--banana); text-shadow:0 0 .3em rgba(255,209,42,.4);}
.lp-left .stereo{font-size:.75rem; letter-spacing:.3em; display:block; opacity:.7; margin-bottom:.2rem}
.lp-right{display:flex; gap:.75rem; align-items:center; opacity:.8}
.lp-right .catno{font-weight:600; font-size:.8rem; padding:.2rem .45rem; border:1px solid rgba(255,255,255,.15); border-radius:4px}
.lp-right .series{font-weight:600; font-size:.8rem; opacity:.7}

.hero{
  position:relative; min-height: 82vh;
  display:grid; place-items:center;
  padding: 6vh 4vw 10vh; isolation:isolate;
}
.aurora{
  position:absolute; inset:0;
  background: conic-gradient(from 180deg at 50% 40%, rgba(154,208,255,.0), rgba(154,208,255,.25), rgba(75, 232, 255, .1), rgba(154,208,255,.0));
  animation: aurora 12s ease-in-out infinite alternate;
  filter: blur(40px) saturate(120%);
  opacity:.8; pointer-events:none;
}
.halo{
  position:absolute; inset:0;
  background: radial-gradient(60% 40% at 50% 45%, rgba(255,209,42,.15), transparent 60%);
  mix-blend-mode:screen; pointer-events:none;
  animation:pulse 10s ease-in-out infinite;
}
@keyframes aurora{ to { transform: translateY(-2%) rotate(2deg);} }
@keyframes pulse{ 0%{opacity:.25} 50%{opacity:.6} 100%{opacity:.25} }

.banana-scene{
  margin:0; z-index:2; display:grid; place-items:center; gap:1rem;
}
.banana-scene .banana{
  width:min(56vmin, 520px);
  filter: drop-shadow(0 40px 60px var(--shadow));
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
:root{ --peel:0 } /* JS will animate this 0..1 */
body.peeled .banana-scene .banana{ transform: rotate(-6deg) translateY(-1vmin) scale(1.02); }

figcaption{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap }
.btn{
  background:linear-gradient(180deg, #0d1b2f, #0a1423);
  border:1px solid rgba(255,255,255,.16);
  color:var(--snow);
  padding:.7rem 1rem; border-radius:999px; font-weight:600; letter-spacing:.02em;
  box-shadow: 0 8px 24px rgba(2,6,23,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  cursor:pointer; transition:.2s transform ease, .2s box-shadow ease, .2s background ease;
}
.btn:hover{ transform: translateY(-2px) }
.btn:active{ transform: translateY(0) scale(.98) }
.btn.ghost{ background:transparent; }

.poem{
  margin-top:1rem; text-align:center; font-family:Fraunces, serif;
  font-size:clamp(16px, 2.4vw, 24px); letter-spacing:.02em; opacity:.85
}
.poem .line{ margin:.2rem 0 }
body.peeled .poem .line.a{ color:var(--banana) }
body.peeled .poem .line.b{ color:var(--ghost) }
body.peeled .poem .line.c{ color:var(--accent) }

.blurb{ padding: 6vh 6vw; max-width: 880px; margin: 0 auto }
.blurb h2, .poster h2{ font-family:Fraunces, serif; font-weight:700; font-size:clamp(22px,3.2vw,36px) }
.blurb p{ font-size:clamp(16px,2.2vw,20px); opacity:.9 }

.tracks{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: clamp(16px, 3vw, 40px);
  padding: 2vh 6vw 8vh; max-width:1100px; margin:0 auto;
}
.side{ background: rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:24px 20px }
.side h3{ margin-top:0; font-family:Fraunces, serif; color:var(--banana) }
.side ol{ padding-left:1.2em; margin:0 }
.side li{ padding:.2rem 0; border-bottom:1px dashed rgba(255,255,255,.06) }
.side li:last-child{ border-bottom:0 }

.poster{ padding: 2vh 6vw 12vh; max-width: 880px; margin: 0 auto }
.poster code{ background: rgba(255,255,255,.06); padding:.1rem .4rem; border-radius:6px }

.footer{ padding: 20px 6vw 40px; opacity:.6; text-align:center; border-top:1px solid rgba(255,255,255,.06) }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .aurora, .halo{ animation: none }
  .banana-scene .banana{ transition:none }
}
/* Modal styles */
.modal{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.65);
  backdrop-filter: blur(3px); z-index:9999; place-items:center;
}
.modal.show{ display:grid; }
.modal-box{
  background:#0d1b2f; border:1px solid rgba(255,255,255,.2);
  padding:2rem; border-radius:20px; max-width:420px; width:90%;
  color:var(--snow); position:relative; box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.modal-close{
  position:absolute; right:12px; top:12px; border:none; background:transparent;
  color:var(--snow); font-size:1.5rem; cursor:pointer; opacity:.7;
}
.modal-close:hover{ opacity:1; }


/* Modal */
.modal{ position:fixed; inset:0; display:none; z-index:50 }
.modal[aria-hidden="false"]{ display:block }
.modal__overlay{
  position:absolute; inset:0; 
  background:rgba(0,0,0,.15);
  backdrop-filter: blur(8px);
}
.modal__dialog{
  position:relative;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(92vw, 560px);
  background: linear-gradient(180deg, #0d1b2f, #0a1423);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:22px 20px 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04);
  color:var(--snow);
}
.modal__title{ margin:0 0 8px; font-family:Fraunces, serif; color:var(--banana) }
.modal__body{ line-height:1.6; opacity:.92; padding-right:8px; max-height:50vh; overflow:auto }
.modal__actions{ display:flex; justify-content:flex-end; gap:.5rem; margin-top:14px }
.modal__close{
  position:absolute; right:10px; top:10px; width:36px; height:36px;
  border-radius:999px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.02); color:var(--snow); cursor:pointer;
}


/* --- Modal Visual Tweaks: center + blurred backdrop --- */
.modal{ position:fixed; inset:0; display:none; z-index:50; }
.modal[aria-hidden="false"]{ display:grid; place-items:center; }
.modal__overlay{
  position:absolute; inset:0;
  background:rgba(2,6,23,.35); /* lighter so background is visible */
  backdrop-filter: blur(6px);   /* softly blur the page underneath */
}
.modal__dialog{
  margin:0; /* centered via grid */
  width:min(92vw, 560px);
  transform: translateZ(0); /* promote for crisper blur layers */
}



/* --- Modal Center Fix + Subtle Dim/Blur --- */
.modal{ 
  position:fixed; inset:0; display:none; z-index:50; 
}
.modal[aria-hidden="false"]{ 
  display:flex; align-items:center; justify-content:center; 
}
.modal__overlay{
  position:absolute; inset:0;
  background:rgba(2,6,23,.2); /* very light dim so content still visible */
  backdrop-filter: blur(5px);
}
.modal__dialog{
  position:relative;
  margin:0;
  width:min(92vw, 560px);
  max-height:80vh;
  overflow:auto;
}


/* --- Modal Centering Fix + Softer Dim/Blur --- */
.modal{ position:fixed; inset:0; display:none; z-index:50; }
.modal[aria-hidden="false"]{ display:block; }
.modal__overlay{
  position:fixed; inset:0;
  background:rgba(2,6,23,.22); /* lighter dim */
  backdrop-filter: blur(6px);
}
.modal__dialog{
  position:fixed; left:50%; top:50%;
  transform: translate(-50%, -50%);
  width:min(92vw, 560px);
  max-height: 80vh; overflow:auto;
  margin:0;
}
@media (max-width: 480px){
  .modal__dialog{ width:94vw; max-height:86vh; }
}