/* style.css */
:root{--bg:#5E2025;--cream:#efe1c6;--gold:#d7b76a}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:'Playfair Display',serif;background-color:var(--bg);color:var(--cream)}
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;overflow:hidden;background-image:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)), url('images/bg.jpg');background-size:cover;background-position:center}
.overlay{position:absolute;inset:0;backdrop-filter:blur(3px)}
.logo{width:220px;max-width:40vw;height:auto;z-index:2;opacity:0;transform:translateY(-120%);animation:slideDown 1.2s cubic-bezier(.22,.9,.3,1) forwards;border-radius:18px;overflow:hidden}
@keyframes slideDown{to{transform:none;opacity:1}}
.taglines{margin-top:1.4rem;z-index:2;display:inline-block}
.taglines span{display:block;font-size:clamp(1.6rem,5vw,2.6rem);line-height:1;opacity:0;transform:translateY(12px);color:var(--cream);letter-spacing:1px}
.taglines span:nth-child(1){--i:0}
.taglines span:nth-child(2){--i:1}
.taglines span:nth-child(3){--i:2}
.taglines.play span{animation:fadeUp .6s cubic-bezier(.2,.9,.3,1) forwards;animation-delay:calc(0.15s * var(--i))}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.note{margin-top:2rem;color:var(--gold);z-index:2;opacity:0;transform:translateY(12px)}
.note.play{animation:fadeUp .6s cubic-bezier(.2,.9,.3,1) forwards}
/* Responsive tweaks */
@media (min-width:900px){.logo{width:260px}.taglines span{font-size:clamp(2rem,2.6vw,3.2rem)}}
/* small screens */
@media (max-width:420px){.logo{width:160px}.taglines span{font-size:1.4rem}}