*{box-sizing:border-box}
:root{--ivory:#eadbd3;--rose:#b77c88;--wine:#54202f}
html,body{margin:0;width:100%;min-height:100%;background:#080607}
body{color:var(--ivory);font-family:"Cormorant Garamond",Georgia,serif}
.poster{position:relative;isolation:isolate;display:grid;place-items:center;min-height:100svh;overflow:hidden;background:#080607 url("assets/floral-background.jpg") center/cover no-repeat}
.ambient{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 47%,rgba(18,8,12,.22),rgba(5,4,5,.64) 62%,rgba(5,4,5,.84)),linear-gradient(180deg,rgba(0,0,0,.16),transparent 20%,transparent 80%,rgba(0,0,0,.35))}
.grain{position:absolute;inset:-50%;z-index:4;pointer-events:none;opacity:.075;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='.4'/%3E%3C/svg%3E");animation:grainShift .35s steps(2) infinite}
.centerpiece{position:relative;z-index:2;width:min(90vw,700px);display:flex;align-items:center;flex-direction:column;text-align:center;padding:35px 20px;animation:enter 1.4s cubic-bezier(.2,.75,.25,1) both}
.logo-stage{position:relative;width:clamp(155px,24vw,245px);height:clamp(155px,24vw,245px);display:grid;place-items:center;margin-bottom:18px;perspective:700px}
.logo{position:relative;z-index:2;width:74%;height:74%;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 0 10px rgba(238,220,211,.18));animation:logoFloat 5.5s ease-in-out infinite,logoGlow 4.5s ease-in-out infinite}
.glow{position:absolute;width:53%;height:53%;border-radius:50%;background:rgba(190,126,143,.2);filter:blur(36px);animation:glowPulse 4s ease-in-out infinite}
.orbit{position:absolute;border:1px solid rgba(222,194,187,.22);border-radius:50%;inset:7%;transform:rotate(-25deg) scaleY(.34);animation:orbit 14s linear infinite}
.orbit-two{inset:14%;transform:rotate(55deg) scaleY(.34);border-color:rgba(185,119,136,.27);animation:orbitReverse 18s linear infinite}
.spark{position:absolute;z-index:3;color:#f2e5dd;text-shadow:0 0 15px #d5aab0;opacity:0}
.spark-one{top:5%;right:17%;font-size:18px;animation:twinkle 3.4s 1s infinite}
.spark-two{bottom:13%;left:10%;font-size:22px;animation:twinkle 4.2s 1.8s infinite}
.spark-three{top:30%;left:4%;font-size:12px;animation:twinkle 3.8s .4s infinite}
.divider{display:flex;align-items:center;justify-content:center;gap:17px;width:min(300px,65vw);margin-top:2px}
.divider span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(230,211,203,.8))}
.divider span:last-child{transform:scaleX(-1)}
.divider i{font-style:normal;font-size:11px;color:#c9a3a0;animation:twinkle 3s infinite}
h1{font-weight:400;font-size:clamp(58px,10vw,100px);line-height:.85;letter-spacing:.22em;margin:18px 0 12px;padding-left:.22em;color:#e7d8d0;text-shadow:0 3px 35px rgba(0,0,0,.7);animation:titleBreath 6s ease-in-out infinite}
.subline{font-family:Arial,sans-serif;font-size:8px;letter-spacing:.48em;margin:9px 0 0;padding-left:.48em;color:rgba(221,201,194,.72)}
.corner{position:absolute;z-index:2;left:50%;transform:translateX(-50%);font-family:Georgia,serif;color:rgba(229,207,199,.65);letter-spacing:.35em}
.corner-top{top:5%;font-size:19px}.corner-bottom{bottom:5%;font-size:18px}
.petal{position:absolute;width:34vw;height:34vw;max-width:440px;max-height:440px;border:1px solid rgba(185,112,131,.08);border-radius:50%;filter:blur(1px);pointer-events:none}
.petal-one{left:-23%;top:28%;box-shadow:0 0 90px rgba(95,26,47,.1);animation:drift 17s ease-in-out infinite alternate}
.petal-two{right:-24%;bottom:12%;box-shadow:0 0 100px rgba(95,26,47,.13);animation:drift 21s ease-in-out infinite alternate-reverse}
@keyframes enter{from{opacity:0;transform:translateY(22px) scale(.97);filter:blur(7px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotateY(-5deg)}50%{transform:translateY(-8px) rotateY(5deg)}}
@keyframes logoGlow{0%,100%{filter:drop-shadow(0 0 8px rgba(238,220,211,.15))}50%{filter:drop-shadow(0 0 22px rgba(238,220,211,.5))}}
@keyframes glowPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:.9;transform:scale(1.2)}}
@keyframes orbit{to{transform:rotate(335deg) scaleY(.34)}}
@keyframes orbitReverse{to{transform:rotate(-305deg) scaleY(.34)}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.65) rotate(0)}45%,60%{opacity:.9;transform:scale(1.15) rotate(35deg)}}
@keyframes titleBreath{0%,100%{opacity:.88;letter-spacing:.22em}50%{opacity:1;letter-spacing:.26em}}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(35px,-22px,0) scale(1.08)}}
@keyframes grainShift{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(0,0)}}
@media(max-width:600px){.poster{background-position:center;background-size:auto 100%}.centerpiece{padding:20px 12px}.logo-stage{width:190px;height:190px;margin-bottom:13px}h1{font-size:clamp(55px,15vw,78px);letter-spacing:.17em;padding-left:.17em}.subline{font-size:7px;letter-spacing:.35em;padding-left:.35em}.corner-top{top:4%}.corner-bottom{bottom:4%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}