/* =========================================================
   MARIANA · CHAPTER 30
   Palette: Deep Winter / Editorial / Burgundy / Pearl / Silver
========================================================= */

:root{
  --black:#09090b;
  --black-2:#111116;
  --wine:#5b0a1d;
  --burgundy:#77152d;
  --cherry:#a3153c;
  --pearl:#f3eee8;
  --silver:#c7c9d1;
  --muted:#94949e;
  --line:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.055);
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"DM Sans", Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--black);
  color:var(--pearl);
  font-family:var(--sans);
  overflow-x:hidden;
}
body.locked{overflow:hidden}

img{
  width:100%;
  display:block;
  object-fit:cover;
}
a{text-decoration:none;color:inherit}
button{font:inherit}

::selection{
  background:var(--cherry);
  color:#fff;
}

#particles{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:2;
  opacity:.45;
}

.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:60;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}

.cursor-dot,.cursor-ring{
  position:fixed;
  top:0;left:0;
  pointer-events:none;
  border-radius:50%;
  z-index:100;
  transform:translate(-50%,-50%);
}
.cursor-dot{
  width:5px;height:5px;background:var(--pearl);
}
.cursor-ring{
  width:34px;height:34px;
  border:1px solid rgba(255,255,255,.6);
  transition:width .25s ease,height .25s ease,border-color .25s ease;
}
body.cursor-hover .cursor-ring{
  width:58px;height:58px;border-color:var(--cherry);
}

.eyebrow{
  font-size:.72rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--silver);
}
.display{
  margin:0;
  font-family:var(--serif);
  font-weight:500;
  line-height:.92;
  letter-spacing:-.03em;
  font-size:clamp(4rem,8vw,8rem);
}
.display em{
  color:var(--cherry);
  font-weight:500;
}
.display.big{
  font-size:clamp(4.5rem,10vw,10rem);
}
.display.massive{
  font-size:clamp(5rem,12vw,13rem);
}
.body-copy{
  font-size:clamp(1rem,1.5vw,1.2rem);
  line-height:1.8;
  color:#d7d2cd;
}

/* INTRO */
.intro{
  min-height:100svh;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  z-index:5;
  background:
    radial-gradient(circle at 50% 55%, rgba(119,21,45,.2), transparent 36%),
    linear-gradient(180deg,#070709,#0b0b0f);
}
.intro-glow{
  position:absolute;
  width:46vw;
  height:46vw;
  min-width:360px;
  min-height:360px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(163,21,60,.26),rgba(91,10,29,.08) 50%,transparent 72%);
  filter:blur(25px);
  animation:breathe 6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{transform:scale(.92);opacity:.55}
  50%{transform:scale(1.08);opacity:1}
}
.intro-inner{
  position:relative;
  text-align:center;
  z-index:3;
  width:min(92%,1200px);
}
.hero-word-wrap{
  position:relative;
  margin:.6rem 0;
}
.hero-word,.hero-stroke{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(5.7rem,15vw,15rem);
  line-height:.76;
  letter-spacing:-.06em;
  font-weight:500;
}
.hero-word{
  position:relative;
  z-index:2;
  color:var(--pearl);
}
.hero-stroke{
  position:absolute;
  inset:0;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.18);
  transform:translate(10px,10px);
  z-index:1;
}
.chapter{
  letter-spacing:.34em;
  font-size:clamp(.7rem,1vw,.9rem);
  margin-top:2rem;
}
.date-line{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.2rem;
  color:#c9c2bc;
}
.enter-btn{
  margin-top:2.2rem;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  color:#fff;
  padding:1rem 1.2rem 1rem 1.5rem;
  display:inline-flex;
  align-items:center;
  gap:1.4rem;
  letter-spacing:.12em;
  font-size:.72rem;
  cursor:pointer;
  backdrop-filter:blur(12px);
  transition:.3s ease;
}
.enter-btn:hover{
  background:var(--pearl);
  color:var(--black);
  transform:translateY(-3px);
}
.enter-btn .arrow{font-size:1.25rem}
.scroll-orbit{
  position:absolute;
  width:124px;
  height:124px;
  right:6vw;
  bottom:4vh;
  border:1px solid rgba(255,255,255,.1);
  border-radius:50%;
  display:grid;
  place-items:center;
}
.scroll-orbit span{
  position:absolute;
  font-size:.56rem;
  letter-spacing:.16em;
  width:100%;
  height:100%;
  animation:spin 12s linear infinite;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:6px;
}
@keyframes spin{to{transform:rotate(360deg)}}

.main-content{position:relative;z-index:3}
.section{
  min-height:100vh;
  padding:10vh 6vw;
  position:relative;
}

/* CINEMATIC */
.cinematic{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:7vw;
  overflow:hidden;
}
.image-panel{
  height:78vh;
  overflow:hidden;
  border-radius:2px;
  position:relative;
}
.image-panel img{height:115%}
.image-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(9,9,11,.72));
}
.cinematic-copy{max-width:700px}
.floating-label{
  position:absolute;
  font-size:.62rem;
  letter-spacing:.25em;
  color:#a8a8b1;
}
.label-a{left:3vw;bottom:5vh;transform:rotate(-90deg)}
.label-b{right:2vw;top:12vh;transform:rotate(90deg)}

/* MARQUEE */
.marquee-section{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background:#0b0b0f;
}
.marquee{
  overflow:hidden;
  padding:1.25rem 0;
}
.marquee-track{
  width:max-content;
  display:flex;
  gap:2rem;
  align-items:center;
  animation:marquee 25s linear infinite;
}
.marquee-track span{
  font-family:var(--serif);
  font-size:clamp(2.2rem,4vw,4rem);
  font-style:italic;
  color:#e7dfd8;
}
.marquee-track i{
  font-style:normal;
  color:var(--cherry);
}
@keyframes marquee{
  to{transform:translateX(-50%)}
}

/* ERAS */
.eras{
  background:
    radial-gradient(circle at 0% 20%,rgba(91,10,29,.15),transparent 25%),
    var(--black);
}
.section-head{margin-bottom:10vh}
.section-head.compact{margin-bottom:5vh}
.era-card{
  display:grid;
  grid-template-columns:.12fr .95fr .95fr;
  gap:4vw;
  align-items:center;
  padding:8vh 0;
  border-top:1px solid var(--line);
}
.era-card.reverse{
  grid-template-columns:.12fr .95fr .95fr;
}
.era-card.reverse .era-media{order:3}
.era-card.reverse .era-copy{order:2}
.era-number{
  font-family:var(--serif);
  font-size:3rem;
  color:var(--burgundy);
}
.era-media{
  height:66vh;
  overflow:hidden;
}
.era-media img{
  height:110%;
  transition:transform 1s cubic-bezier(.2,.75,.2,1);
}
.era-card:hover .era-media img{transform:scale(1.04)}
.era-copy h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.5rem,5vw,5.5rem);
  line-height:.96;
  margin:.4em 0;
}
.era-copy p:last-child{
  max-width:520px;
  color:#aaa6a3;
  line-height:1.8;
}

/* STATEMENT */
.statement{
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:linear-gradient(135deg,#08080a,#16070c 55%,#09090b);
  overflow:hidden;
}
.statement-line{
  display:flex;
  align-items:baseline;
  gap:2vw;
  flex-wrap:wrap;
}
.statement-line.right{justify-content:flex-end}
.statement-line span{
  font-size:clamp(1rem,2vw,2rem);
  letter-spacing:.22em;
}
.statement-line strong{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(4.4rem,10vw,11rem);
  line-height:.95;
}
.statement-line.right strong{color:var(--cherry)}
.statement-list{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2.5rem;
  margin-top:8vh;
  color:#c6c0ba;
  font-size:.78rem;
  letter-spacing:.24em;
}
.statement-final{
  margin-top:7vh;
  text-align:center;
  font-family:var(--serif);
  font-size:clamp(2.4rem,5vw,5rem);
  font-style:italic;
}

/* STARTER */
.starter{background:#0d0d12}
.cards-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem;
  perspective:1200px;
}
.fun-card{
  min-height:330px;
  padding:2rem;
  border:1px solid var(--line);
  background:
    linear-gradient(140deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),
    rgba(255,255,255,.02);
  backdrop-filter:blur(12px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  position:relative;
  overflow:hidden;
  transition:border-color .3s ease;
  transform-style:preserve-3d;
}
.fun-card:before{
  content:"";
  position:absolute;
  width:160px;height:160px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(163,21,60,.55),transparent 70%);
  top:-50px;right:-40px;
  opacity:.45;
  transition:.4s;
}
.fun-card:hover{border-color:rgba(163,21,60,.55)}
.fun-card:hover:before{transform:scale(1.3);opacity:.8}
.card-index{
  position:absolute;top:1.4rem;left:1.5rem;
  font-family:var(--serif);
  color:#8e8e99;
}
.fun-card h3{
  font-family:var(--serif);
  font-size:clamp(2.2rem,4vw,4.2rem);
  font-weight:500;
  line-height:.95;
  margin:0 0 1rem;
}
.fun-card p{
  color:#aaa7aa;
  margin:0;
}

/* EVENT */
.event{
  overflow:hidden;
  background:
    radial-gradient(circle at 70% 30%,rgba(163,21,60,.22),transparent 26%),
    linear-gradient(180deg,#09090b,#10080c);
}
.event-orb{
  position:absolute;
  width:52vw;height:52vw;
  border:1px solid rgba(255,255,255,.07);
  border-radius:50%;
  right:-20vw;
  top:5vh;
  box-shadow:0 0 120px rgba(163,21,60,.09) inset;
}
.event-intro{position:relative;z-index:2}
.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin:7vh 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.count-box{
  padding:2rem 1rem;
  border-right:1px solid var(--line);
}
.count-box:last-child{border-right:none}
.count-box span{
  display:block;
  font-family:var(--serif);
  font-size:clamp(3rem,6vw,6.5rem);
}
.count-box small{
  letter-spacing:.2em;
  color:#92929c;
}
.event-card{
  max-width:1100px;
  margin-left:auto;
  border:1px solid var(--line);
  background:var(--glass);
  backdrop-filter:blur(18px);
  padding:2rem;
}
.event-row{
  display:flex;
  justify-content:space-between;
  gap:2rem;
  padding:1.5rem 0;
  border-bottom:1px solid var(--line);
}
.event-row span{
  color:#85858f;
  font-size:.72rem;
  letter-spacing:.22em;
}
.event-row strong{
  font-family:var(--serif);
  font-size:clamp(1.4rem,2.5vw,2.4rem);
  font-weight:500;
  text-align:right;
}
.event-actions{
  display:flex;
  gap:1rem;
  margin-top:2rem;
}
.action-btn{
  flex:1;
  text-align:center;
  padding:1rem 1.4rem;
  border-radius:999px;
  font-size:.75rem;
  letter-spacing:.16em;
  transition:.3s ease;
}
.action-btn.primary{
  background:var(--pearl);
  color:var(--black);
}
.action-btn.primary:hover{background:#fff}
.action-btn.ghost{border:1px solid var(--line)}
.action-btn.ghost:hover{border-color:var(--cherry)}

/* CAST */
.cast{background:#0a0a0d}
.photo-stack{
  position:relative;
  min-height:620px;
  max-width:1100px;
  margin:auto;
}
.polaroid{
  position:absolute;
  width:min(26vw,320px);
  background:#efe9e3;
  padding:.65rem .65rem 2.8rem;
  box-shadow:0 20px 70px rgba(0,0,0,.4);
}
.polaroid img{
  height:360px;
  filter:saturate(.85) contrast(1.05);
}
.p1{left:6%;top:10%;transform:rotate(-8deg)}
.p2{left:31%;top:0;transform:rotate(5deg)}
.p3{left:53%;top:18%;transform:rotate(-3deg)}
.p4{right:2%;top:4%;transform:rotate(8deg)}
.cast-copy{
  text-align:center;
  max-width:800px;
  margin:4vh auto 0;
}
.cast-copy p{
  color:#aaa6a3;
}
.cast-copy h3{
  font-family:var(--serif);
  font-size:clamp(3.2rem,7vw,7rem);
  line-height:.92;
  font-weight:500;
  margin:.2em 0;
}
.cast-copy .muted{
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:.72rem;
}

/* FINALE */
.finale{
  min-height:115vh;
  display:grid;
  place-items:center;
  text-align:center;
  overflow:hidden;
}
.finale-bg,.finale-overlay{
  position:absolute;
  inset:0;
}
.finale-bg img{
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.08);
}
.finale-overlay{
  background:
    linear-gradient(180deg,rgba(9,9,11,.35),rgba(9,9,11,.78)),
    radial-gradient(circle at center,transparent 10%,rgba(9,9,11,.6) 80%);
}
.finale-copy{
  position:relative;
  z-index:2;
  width:min(92%,1100px);
}
.finale-line{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.8rem,4vw,4rem);
  line-height:1.1;
}
.final-title{
  font-family:var(--serif);
  font-size:clamp(5rem,12vw,13rem);
  line-height:.8;
  letter-spacing:-.05em;
  font-weight:500;
  margin:.5em 0;
}
.monogram{
  letter-spacing:.5em;
  font-size:.7rem;
}

/* MUSIC */
.music-toggle{
  position:fixed;
  right:1.2rem;
  top:1.2rem;
  z-index:90;
  background:rgba(10,10,13,.68);
  border:1px solid var(--line);
  color:#fff;
  border-radius:999px;
  padding:.8rem 1rem;
  display:flex;
  gap:.6rem;
  align-items:center;
  backdrop-filter:blur(10px);
  cursor:pointer;
}
.music-label{
  font-size:.6rem;
  letter-spacing:.14em;
}

/* REVEALS */
.reveal{opacity:0;transform:translateY(50px)}
.intro-reveal{opacity:0;transform:translateY(24px)}

/* RESPONSIVE */
@media (max-width: 900px){
  .cursor-dot,.cursor-ring{display:none}
  .section{padding:10vh 5vw}
  .cinematic{
    grid-template-columns:1fr;
    gap:4vh;
  }
  .image-panel{height:66vh}
  .era-card,.era-card.reverse{
    grid-template-columns:1fr;
    gap:1rem;
  }
  .era-card.reverse .era-media,
  .era-card.reverse .era-copy{order:initial}
  .era-media{height:58vh}
  .era-number{font-size:2rem}
  .cards-grid{grid-template-columns:1fr}
  .countdown{grid-template-columns:repeat(2,1fr)}
  .count-box:nth-child(2){border-right:none}
  .count-box:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .event-row{flex-direction:column}
  .event-row strong{text-align:left}
  .event-actions{flex-direction:column}
  .photo-stack{min-height:720px}
  .polaroid{width:44vw}
  .polaroid img{height:280px}
  .p1{left:0}
  .p2{left:auto;right:0}
  .p3{left:4%;top:330px}
  .p4{right:2%;top:350px}
  .scroll-orbit{display:none}
}

@media (max-width: 560px){
  .hero-word,.hero-stroke{font-size:19vw}
  .chapter{letter-spacing:.2em}
  .display{font-size:16vw}
  .display.big{font-size:18vw}
  .display.massive{font-size:20vw}
  .statement-line strong{font-size:17vw}
  .statement-line.right{justify-content:flex-start}
  .statement-list{display:grid;gap:1rem}
  .fun-card{min-height:280px}
  .event-card{padding:1.2rem}
  .photo-stack{min-height:620px}
  .polaroid{width:46vw;padding:.45rem .45rem 2rem}
  .polaroid img{height:220px}
  .final-title{font-size:20vw}
}