
:root{--black:#050505;--white:#f4f0e8;--sun:#ffb000;--hot:#ff2bd6;--line:rgba(244,240,232,.22)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--white);font-family:"Barlow Condensed",Arial,sans-serif;overflow-x:hidden}
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.055;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.hero{height:100svh;min-height:650px;position:relative;overflow:hidden;padding:22px;display:flex;align-items:center;justify-content:center}
.eyebrow{position:absolute;top:20px;left:22px;right:22px;display:flex;justify-content:space-between;font-weight:800;font-size:12px;letter-spacing:.15em;z-index:5}
.eclipse-wrap{position:absolute;inset:0;display:grid;place-items:center;transform:translateY(-5vh)}
.sun{width:min(65vw,470px);aspect-ratio:1;border-radius:50%;position:relative;background:radial-gradient(circle at 45% 45%,#fff4c4 0 5%,#ffd23f 35%,#ff8a00 70%,#ff4d00 100%);box-shadow:0 0 35px #ff9a00,0 0 100px rgba(255,128,0,.55),0 0 210px rgba(255,43,214,.13)}
.corona{position:absolute;inset:-8%;border-radius:50%;background:radial-gradient(circle,transparent 54%,rgba(255,210,80,.35) 61%,rgba(255,43,214,.08) 72%,transparent 78%);animation:breathe 5s ease-in-out infinite}
.moon{position:absolute;width:103%;height:103%;border-radius:50%;background:#020202;top:-1.5%;left:-1.5%;animation:eclipse 20s cubic-bezier(.55,.08,.45,.92) infinite;box-shadow:inset -5px 0 8px rgba(255,255,255,.025)}
@keyframes eclipse{0%{transform:translate(-115%,-18%)}18%{transform:translate(-65%,-10%)}45%,55%{transform:translate(0,0)}82%{transform:translate(65%,10%)}100%{transform:translate(115%,18%)}}
@keyframes breathe{50%{transform:scale(1.08);opacity:.72}}
.hero-type{position:absolute;inset:0;display:flex;align-items:flex-end;padding:0 18px 9vh;pointer-events:none;z-index:3}
h1{margin:0;width:100%;font-family:"Archivo Black",Impact,sans-serif;font-size:clamp(78px,25vw,280px);line-height:.68;letter-spacing:-.085em;text-transform:uppercase}
h1 span{display:block}.forty{margin-left:28%;color:transparent;-webkit-text-stroke:1.5px var(--white)}.solar{color:var(--hot);font-style:italic;transform:skewX(-6deg)}
.scroll-cue{position:absolute;right:20px;bottom:20px;font-size:11px;letter-spacing:.2em;writing-mode:vertical-rl;z-index:4}
.manifesto{min-height:100svh;padding:16vh 6vw;display:flex;flex-direction:column;justify-content:center}.kicker,.section-label{font-size:12px;letter-spacing:.22em;font-weight:800;color:var(--hot)}
.manifesto h2,.finale h2,.sticky-copy h2{font-family:"Archivo Black",Impact,sans-serif;font-size:clamp(60px,15vw,190px);line-height:.78;letter-spacing:-.07em;margin:25px 0;text-transform:uppercase}.manifesto em,.finale em,.sticky-copy em{color:var(--sun);font-style:normal}
.statement{font-size:clamp(22px,4vw,44px);max-width:620px;margin-left:auto;border-left:1px solid var(--hot);padding-left:20px}
.date-section{min-height:85svh;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8vw}
.date-grid{display:flex;align-items:center;gap:2vw;font-family:"Archivo Black";font-size:clamp(52px,15vw,190px);letter-spacing:-.07em}.date-grid i{font-style:normal;color:var(--hot);font-weight:300}.cosmic-note{letter-spacing:.25em;font-size:12px}
.orbit{position:absolute;border:1px solid var(--line);border-radius:50%;aspect-ratio:1}.orbit-a{width:80vw}.orbit-b{width:48vw;border-color:rgba(255,43,214,.3)}
.marquee{border-top:1px solid var(--hot);border-bottom:1px solid var(--hot);overflow:hidden;padding:10px 0;transform:rotate(-1.5deg);background:var(--hot);color:var(--black)}
.marquee-track{display:flex;width:max-content;animation:marquee 18s linear infinite;font-family:"Archivo Black";font-size:clamp(26px,4vw,55px);white-space:nowrap}@keyframes marquee{to{transform:translateX(-50%)}}
.details{padding:18vh 6vw}.detail{display:grid;grid-template-columns:1fr 2fr;gap:20px;border-top:1px solid var(--line);padding:25px 0}.detail span{font-size:11px;letter-spacing:.18em;color:var(--hot)}.detail strong{font-family:"Archivo Black";font-size:clamp(28px,6vw,70px);line-height:.9}
.orbits-section{min-height:130vh;display:grid;grid-template-columns:1fr 1fr;padding:8vw 6vw;position:relative}.sticky-copy{position:sticky;top:12vh;height:max-content}.sticky-copy>p{color:var(--hot);letter-spacing:.2em}.orbit-field{min-height:110vh;position:relative}.orbit-dot{position:absolute;border:1px solid rgba(244,240,232,.3);border-radius:50%;width:var(--s);height:var(--s);left:var(--x);top:var(--y);transform:translate(-50%,-50%);transition:transform .3s}.orbit-dot:nth-child(5n){border-color:var(--hot);box-shadow:0 0 12px rgba(255,43,214,.3)}.orbit-dot::after{content:attr(data-n);position:absolute;top:50%;left:50%;font-size:9px;transform:translate(-50%,-50%);color:rgba(244,240,232,.6)}
.finale{min-height:115svh;position:relative;overflow:hidden;padding:16vh 6vw 5vh;display:flex;flex-direction:column;justify-content:center}#meteors{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.finale-content{position:relative;z-index:2}.finale h2{font-size:clamp(58px,13vw,170px);max-width:1200px}.rsvp-btn{background:var(--hot);color:#050505;border:0;border-radius:100%;width:180px;height:180px;font:900 24px "Barlow Condensed";letter-spacing:.08em;cursor:pointer;transition:transform .25s,background .25s}.rsvp-btn:hover{transform:rotate(7deg) scale(1.06);background:var(--sun)}.rsvp-btn span{display:block;font-size:40px}.footer-line{position:absolute;bottom:22px;left:6vw;right:6vw;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;font-size:10px;letter-spacing:.18em}
.reveal{opacity:0;transform:translateY(45px);transition:opacity .9s ease,transform .9s ease}.reveal.visible{opacity:1;transform:none}
dialog{border:0;padding:0;background:transparent;color:var(--white);max-width:none;width:100%;height:100%;margin:0}dialog::backdrop{background:rgba(0,0,0,.82);backdrop-filter:blur(10px)}.modal{position:absolute;right:0;top:0;width:min(100%,600px);height:100%;background:#0b0b0b;padding:8vh 7vw;border-left:1px solid var(--hot)}.close{position:absolute;right:25px;top:20px;background:none;border:0;color:white;font-size:45px;cursor:pointer}.modal h3{font:900 clamp(50px,10vw,100px)/.82 "Archivo Black";letter-spacing:-.06em}.modal label{display:block;font-size:11px;letter-spacing:.18em}.modal input{display:block;width:100%;background:none;border:0;border-bottom:1px solid var(--hot);color:white;font:600 30px "Barlow Condensed";padding:14px 0;outline:0}.choices{display:flex;gap:10px;margin-top:30px}.choices button{flex:1;padding:18px 10px;background:none;border:1px solid var(--white);color:white;font-weight:800;cursor:pointer}.choices button:hover{background:var(--hot);color:black;border-color:var(--hot)}.tiny{font-size:11px;opacity:.55;margin-top:25px}
@media(max-width:700px){.hero{padding:14px}.sun{width:78vw}.hero-type{padding-bottom:12vh}h1{font-size:25vw}.forty{margin-left:18%}.manifesto{padding:12vh 20px}.date-section{padding:20px}.details{padding:13vh 20px}.detail{grid-template-columns:1fr}.orbits-section{display:block;padding:12vh 20px}.sticky-copy{position:relative;top:0}.orbit-field{min-height:85vh}.finale{padding-left:20px;padding-right:20px}.rsvp-btn{width:145px;height:145px}.footer-line{left:20px;right:20px}.modal{padding:10vh 24px}.choices{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}


/* V2 — KINETIC SYSTEM */
body{--scrollY:0}
.ambient-orb{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:-1;opacity:.12;will-change:transform}
.ambient-a{width:42vw;height:42vw;background:var(--hot);left:-20vw;top:25vh;animation:ambientA 18s ease-in-out infinite alternate}
.ambient-b{width:35vw;height:35vw;background:var(--sun);right:-18vw;top:60vh;animation:ambientB 23s ease-in-out infinite alternate}
@keyframes ambientA{to{transform:translate(18vw,42vh) scale(1.3)}}
@keyframes ambientB{to{transform:translate(-15vw,-32vh) scale(.75)}}

.hero-word{will-change:transform,opacity;animation-fill-mode:both}
.word-didi{animation:heroDidi 8s ease-in-out infinite alternate}
.word-40{animation:heroForty 10s ease-in-out infinite alternate}
.word-solar{animation:heroSolar 6s ease-in-out infinite alternate}
@keyframes heroDidi{0%{transform:translateX(-1.5vw)}100%{transform:translateX(2vw) scaleX(1.025)}}
@keyframes heroForty{0%{transform:translateX(0)}100%{transform:translateX(-4vw) skewX(-3deg)}}
@keyframes heroSolar{0%{transform:skewX(-6deg) translateX(0)}100%{transform:skewX(-10deg) translateX(3vw)}}

.eclipse-wrap{will-change:transform,translate}
.sun{animation:sunFloat 7s ease-in-out infinite alternate}
@keyframes sunFloat{0%{transform:translateY(-8px) scale(.98)}100%{transform:translateY(10px) scale(1.025)}}
.scroll-cue{animation:scrollPulse 1.8s ease-in-out infinite}
@keyframes scrollPulse{50%{transform:translateY(9px);opacity:.45}}

.motion-text{animation:microDrift 7s ease-in-out infinite alternate}
.drift-text{animation:microDriftReverse 9s ease-in-out infinite alternate}
@keyframes microDrift{to{transform:translateX(20px);letter-spacing:.28em}}
@keyframes microDriftReverse{to{transform:translateX(-15px)}}
.kinetic-title{will-change:transform}
.kinetic-title em{display:inline-block;animation:solarPulse 3.5s ease-in-out infinite}
@keyframes solarPulse{50%{transform:scale(1.06) rotate(-1deg);text-shadow:0 0 25px rgba(255,176,0,.35)}}

.orbit-a{animation:spinOrbit 30s linear infinite}
.orbit-b{animation:spinOrbitReverse 22s linear infinite}
.orbit-a::before,.orbit-b::before{content:"";position:absolute;width:8px;height:8px;background:var(--hot);border-radius:50%;top:10%;left:20%;box-shadow:0 0 18px var(--hot)}
.orbit-b::before{background:var(--sun);box-shadow:0 0 18px var(--sun);top:72%;left:88%}
@keyframes spinOrbit{to{transform:rotate(360deg)}}
@keyframes spinOrbitReverse{to{transform:rotate(-360deg)}}
.kinetic-date span{display:inline-block;animation:dateFloat 5s ease-in-out infinite alternate}
.kinetic-date span:nth-of-type(2){animation-delay:-2.5s}
.kinetic-date i{display:inline-block;animation:dashBlink 2.2s ease-in-out infinite}
@keyframes dateFloat{to{transform:translateY(-12px) rotate(.7deg)}}
@keyframes dashBlink{50%{opacity:.25;transform:scaleX(1.5)}}

.detail{transition:transform .55s cubic-bezier(.2,.8,.2,1),padding-left .55s,border-color .4s}
.detail:hover{transform:translateX(2vw);padding-left:1vw;border-color:var(--hot)}
.detail strong{transition:letter-spacing .5s,transform .5s;display:inline-block}
.detail:hover strong{letter-spacing:.015em;transform:skewX(-3deg)}

.orbit-dot{animation:orbitBreathe var(--dur,6s) ease-in-out infinite alternate;will-change:transform}
.orbit-dot:nth-child(3n){animation-delay:-2s}.orbit-dot:nth-child(4n){animation-delay:-4s}
@keyframes orbitBreathe{to{transform:translate(-50%,-50%) scale(1.35) rotate(15deg);opacity:.45}}
.float-copy{animation:copyFloat 8s ease-in-out infinite alternate}
@keyframes copyFloat{to{transform:translateY(20px)}}

.finale-float{animation:finaleFloat 6s ease-in-out infinite alternate}
@keyframes finaleFloat{to{transform:translateY(-10px)}}
.finale h2 em{display:inline-block;animation:neonBreath 2.8s ease-in-out infinite}
@keyframes neonBreath{50%{color:var(--hot);text-shadow:0 0 30px rgba(255,43,214,.38)}}
.rsvp-btn{animation:rsvpOrbit 5s ease-in-out infinite alternate;box-shadow:0 0 0 rgba(255,43,214,0)}
@keyframes rsvpOrbit{50%{transform:translate(10px,-8px) rotate(5deg);box-shadow:0 0 45px rgba(255,43,214,.28)}100%{transform:translate(-5px,8px) rotate(-3deg)}}

@media(prefers-reduced-motion:reduce){
 .ambient-orb,.hero-word,.sun,.scroll-cue,.motion-text,.drift-text,.kinetic-title em,.orbit,.kinetic-date span,.kinetic-date i,.orbit-dot,.float-copy,.finale-float,.finale h2 em,.rsvp-btn{animation:none!important}
}

/* V3: composição totalmente centralizada */
.hero,.manifesto,.date-section,.details,.orbits-section,.finale{text-align:center}
.hero-type{align-items:center!important;justify-content:center!important;padding:0 20px!important;text-align:center}
.hero-type h1{width:auto!important;text-align:center!important;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hero-type h1 span,.forty{margin-left:0!important;margin-right:0!important;transform-origin:center}
.eyebrow{justify-content:center!important;gap:12vw}
.manifesto{align-items:center}
.manifesto h2,.manifesto .statement,.manifesto .kicker{margin-left:auto!important;margin-right:auto!important;text-align:center}
.statement{border-left:0!important;border-top:1px solid var(--hot);padding:20px 0 0!important;max-width:720px}
.date-grid{justify-content:center;width:100%}
.details{max-width:1100px;margin:0 auto}
.detail{display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px!important}
.detail:hover{transform:translateY(-6px)!important;padding-left:0!important}
.orbits-section{display:flex!important;flex-direction:column;align-items:center;justify-content:center}
.sticky-copy{position:relative!important;top:auto!important;width:100%;text-align:center}
.orbit-field{width:min(850px,92vw);min-height:85vh;margin:0 auto}
.finale{align-items:center;text-align:center}
.finale-content{width:100%;display:flex;flex-direction:column;align-items:center}
.finale h2{margin-left:auto!important;margin-right:auto!important;text-align:center}
.footer-line{justify-content:center!important;gap:8vw;text-align:center}
.modal{text-align:center}.modal label{text-align:center}.choices{justify-content:center}
@keyframes heroDidi{0%{transform:translateY(-5px) scaleX(.98)}100%{transform:translateY(7px) scaleX(1.025)}}
@keyframes heroForty{0%{transform:translateY(4px) scale(.98)}100%{transform:translateY(-7px) scale(1.03)}}
@media(max-width:700px){.hero-type{padding:0 12px!important}.orbit-field{min-height:70vh}}
