/* A quiet atmosphere that dissolves into the Hiroshima landscape. */
.hero{min-height:640px;height:100svh;justify-content:center;align-items:center;background:#252a29}
.hero:after{display:none}
.hero .signature-photos{inset:0;display:block;overflow:hidden;z-index:0}
.hero .signature-photos figure{display:none}
.hero .signature-photos figure:nth-child(3){display:block;position:absolute;inset:0;margin:0;animation:landscape-emerge 2.4s 1.3s both}
.hero .signature-photos .hero-image{filter:brightness(.4) saturate(.32);object-position:center 62%;animation:landscape-drift 30s ease-in-out infinite alternate}
.hero .signature-photos figure:after{inset:0;background:linear-gradient(180deg,#252a2970,transparent 42%,#252a29b0)}
.hero .signature-photos figcaption{display:none}
.hero .hero-copy{position:relative;width:100%;max-width:850px;margin:0;padding:130px 8vw;text-align:center;z-index:3}
.hero .hero-copy .eyebrow{font-size:.75rem;letter-spacing:.2em;color:#d5d7d0;animation:mist-copy 1.8s 2.1s both}
.hero .hero-copy h1{font:400 clamp(1.5rem,3.3vw,3rem)/1.9 var(--serif);letter-spacing:.12em;color:#f3f3ed;animation:mist-copy 2s 2.25s both}
.hero .hero-copy h1 .phrase{display:inline-block}
.hero .hero-copy>p:last-child{max-width:470px;margin:26px auto 0;font-size:.875rem;line-height:2;color:#d0d4ce;animation:mist-copy 2s 2.4s both}
.hero-mist{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;animation:mist-copy 3s 1.2s both}
.hero-mist:before,.hero-mist:after{content:"";position:absolute;inset:-35%;background:radial-gradient(ellipse at 22% 66%,#d2d8d15c,transparent 32%),radial-gradient(ellipse at 57% 35%,#dbe0da3d,transparent 28%),radial-gradient(ellipse at 83% 62%,#bfc9c04a,transparent 34%);filter:blur(30px);will-change:transform,opacity;animation:mist-drift 12s ease-in-out infinite alternate}
.hero-mist:after{background:radial-gradient(ellipse at 34% 72%,#dce0d959,transparent 30%),radial-gradient(ellipse at 73% 30%,#d0d9d047,transparent 35%);animation:mist-counterflow 19s ease-in-out -7s infinite alternate}
.hero .opening-message{background:#252a29;display:grid;place-items:center;overflow:hidden;animation:mist-curtain 3.5s both}
.hero .opening-message:before,.hero .opening-message:after{content:"";position:absolute;inset:-35%;background:radial-gradient(ellipse at 38% 52%,#dde0d43d,transparent 35%),radial-gradient(ellipse at 65% 45%,#cdd3cf24,transparent 40%);filter:blur(32px);animation:mist-part 3.5s cubic-bezier(.22,1,.36,1) both;pointer-events:none}
.hero .opening-message:after{transform:rotate(180deg);animation-name:mist-part-reverse}
.mist-intro-logo{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px;color:#e8e9e1;animation:mist-mark 3.1s both}
.mist-intro-logo img{width:45px;height:45px;filter:brightness(0) invert(1);opacity:.85}
.mist-intro-logo span{font:400 .875rem/1.4 var(--sans);letter-spacing:.3em;text-indent:.3em}
body:has(.signature-photos) .header>.brand,body:has(.signature-photos) .header>.menu{animation-delay:3.4s}
.hero .hero-code,.hero .hero-brand{display:none}
.hero .motion-toggle{animation-delay:3.4s;bottom:32px;right:5vw;background:transparent;border-color:#b7c0b759;font-size:.75rem}
.hero.paused .hero-mist:before,.hero.paused .hero-mist:after,.hero.paused .signature-photos .hero-image{animation-play-state:paused}
@keyframes mist-mark{0%{opacity:0;filter:blur(14px);transform:translateY(8px)}35%,58%{opacity:1;filter:blur(0);transform:none}100%{opacity:0;filter:blur(18px);transform:translateY(-12px)}}
@keyframes mist-curtain{0%,53%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes mist-part{from{opacity:0;transform:translate(-5%,10%) rotate(-18deg) scale(.9)}30%{opacity:1}to{opacity:0;transform:translate(24%,-18%) rotate(4deg) scale(1.25)}}
@keyframes mist-part-reverse{from{opacity:0;transform:translate(8%,-5%) rotate(170deg)}35%{opacity:.8}to{opacity:0;transform:translate(-24%,18%) rotate(190deg) scale(1.2)}}
@keyframes mist-copy{from{opacity:0;filter:blur(10px);transform:translateY(6px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes landscape-emerge{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:blur(0)}}
@keyframes landscape-drift{from{transform:scale(1.03)}to{transform:scale(1.09)}}
@keyframes mist-drift{0%{opacity:.45;transform:translate(-15%,12%) rotate(-20deg) scale(1,.85)}50%{opacity:.9;transform:translate(0,-2%) rotate(-9deg) scale(1.14,1.04)}100%{opacity:.55;transform:translate(16%,-14%) rotate(6deg) scale(1.02,1.18)}}
@keyframes mist-counterflow{0%{opacity:.35;transform:translate(14%,-12%) rotate(12deg) scale(1.15,.9)}50%{opacity:.7;transform:translate(-2%,3%) rotate(-4deg) scale(.98,1.1)}100%{opacity:.4;transform:translate(-14%,12%) rotate(-16deg) scale(1.12,1)}}
@media(max-width:620px){.hero{min-height:600px}.hero .hero-copy{padding:120px 8vw}.hero .hero-copy h1 .phrase{display:block}.hero .hero-copy>p:last-child{max-width:300px;font-size:.8125rem}.hero .signature-photos .hero-image{object-position:48% 60%}.hero-mist:before,.hero-mist:after{filter:blur(22px)}}
@media(prefers-reduced-motion:reduce){.hero .opening-message{display:none}.hero .signature-photos figure:nth-child(3),.hero .signature-photos .hero-image,.hero .hero-copy>*,.hero .hero-mist,.hero .hero-mist:before,.hero .hero-mist:after,.hero .motion-toggle,body:has(.signature-photos) .header>.brand,body:has(.signature-photos) .header>.menu{animation:none;opacity:1;visibility:visible;transform:none;filter:none}.hero .signature-photos .hero-image{filter:brightness(.4) saturate(.32)}}