.campaign-hero{position:relative;isolation:isolate;width:100%;aspect-ratio:3/2;max-height:1000px;margin-top:0;overflow:hidden;background:linear-gradient(#240504 75%,var(--paper) 94%)}
.campaign-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.campaign-visual{position:absolute;inset:0;display:block;transform-origin:68% 76%;animation:campaign-breathe 12s ease-in-out infinite;animation-play-state:paused}
.campaign-visible .campaign-visual{animation-play-state:running}
.hero-pending .campaign-visual,.hero-entering .campaign-visual,.is-welcoming .campaign-visual,.campaign-paused .campaign-visual{animation-play-state:paused}
@keyframes campaign-breathe{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.012) translateY(-3px)}}
@keyframes campaign-breathe-mobile{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.008) translateY(-2px)}}
.campaign-hero::after{content:"";position:absolute;inset:auto 0 0;height:17%;background:linear-gradient(transparent,var(--paper) 94%);pointer-events:none}
.campaign-copy{position:absolute;inset:0;display:flex;align-items:center;padding-bottom:18%;pointer-events:none}
.campaign-hero h1{max-width:590px;color:#fff7f4;font-size:clamp(48px,5.5vw,86px);font-weight:400;letter-spacing:-.055em;line-height:1.04;margin:0;text-wrap:balance}
.campaign-hero h1 span{display:block;color:#fff7f4}
@media(max-width:760px){
 .campaign-hero{height:max(740px,100svh,180vw);max-height:none;aspect-ratio:auto;margin-top:0;background:linear-gradient(#240504 75%,var(--paper) 94%)}
 .campaign-image{inset:0;height:100%;object-fit:cover;object-position:center center}
 .campaign-visual{transform-origin:60% 76%;animation-name:campaign-breathe-mobile;animation-duration:14s}
 .campaign-copy{display:block;padding-top:140px;padding-bottom:0;z-index:1}
 .campaign-hero h1{font-size:clamp(37px,10.2vw,59px);max-width:490px;letter-spacing:-.05em;line-height:1.05}
 .campaign-hero h1 span{max-width:90%}
 .campaign-hero::after{height:12%}
}

/* The entrance starts as the greeting dissolves, with a short stagger. */
.hero-pending .campaign-image,.hero-pending .campaign-copy h1{opacity:0}
.hero-pending .at-top .header,.hero-pending .topbar{opacity:0}
.hero-entering .campaign-image{transform-origin:70% 55%;animation:campaign-image-in 1.5s cubic-bezier(.16,1,.3,1) both}
.hero-entering .campaign-copy h1{animation:campaign-title-in 1.1s cubic-bezier(.16,1,.3,1) .4s both}
.hero-entering .at-top .header,.hero-entering .topbar{animation:campaign-nav-in 1s ease .2s both}
@keyframes campaign-image-in{from{opacity:0;transform:scale(1.045);filter:blur(5px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes campaign-title-in{from{opacity:0;transform:translateY(22px);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes campaign-nav-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.campaign-visual{animation:none;transform:none}}
@media(prefers-reduced-motion:reduce){.hero-pending .campaign-image,.hero-pending .campaign-copy h1,.hero-pending .at-top .header,.hero-pending .topbar{opacity:1}.hero-entering .campaign-image,.hero-entering .campaign-copy h1,.hero-entering .header,.hero-entering .topbar{animation:none}}