/* Modern portrait: one stable photo with small, independently timed eyelid overlays. */
.hero__portrait {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: -10px;
    width: 100%;
    aspect-ratio: 3 / 2;
    transform: translate3d(var(--portrait-x, 0px), var(--portrait-y, 0px), 0);
    transition: transform 850ms cubic-bezier(.2, .7, .2, 1);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
    mask-composite: intersect;
}
.hero__portrait-breath {
    position: absolute;
    inset: 0;
    transform-origin: 50% 100%;
    animation: portrait-breathe 8s ease-in-out infinite;
}
.hero__portrait img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
}
.hero__portrait .hero__blink { z-index: 3; opacity: 0; }
/* Eye masks are calibrated to the unscaled 1536 x 1024 master frame. */
@supports (mask-image: radial-gradient(black, transparent)) {
    .hero__portrait[data-blink-ready] .hero__blink {
        animation: portrait-blink var(--blink-period) var(--blink-delay) linear infinite;
    }
}
.hero__blink--left {
    --blink-period: 7.1s;
    --blink-delay: -3s;
    mask-image: radial-gradient(ellipse 4.6% 3.2% at 25.8% 22.6%, #000 55%, transparent 100%);
}
.hero__blink--center {
    --blink-period: 8.7s;
    --blink-delay: -6s;
    mask-image: radial-gradient(ellipse 4.7% 3% at 50.5% 19.9%, #000 55%, transparent 100%);
}
.hero__blink--right {
    --blink-period: 9.9s;
    --blink-delay: -3.4s;
    mask-image: radial-gradient(ellipse 4.9% 3.1% at 67.55% 21.6%, #000 55%, transparent 100%);
}
.hero[data-motion-paused] .hero__portrait-breath,
.hero[data-motion-paused] .hero__blink { animation-play-state: paused; }
.hero[data-motion-paused] .hero__blink { opacity: 0 !important; }
.hero__motion-toggle {
    position: absolute;
    z-index: 6;
    right: var(--page-pad);
    bottom: 20px;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid rgb(245 191 54 / 45%);
    border-radius: 8px;
    color: #fff;
    background: #160f0a;
    font-size: 16px;
    line-height: 1.25;
    cursor: pointer;
}
.hero__motion-toggle[hidden] { display: none; }
.hero__motion-toggle:hover { border-color: var(--color-gold); }
.hero__motion-toggle[aria-pressed="false"] { color: var(--color-gold-light); }
@keyframes portrait-breathe {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50% { transform: translateY(-2px) scaleY(1.004); }
}
@keyframes portrait-blink {
    0%, 96%, 98.5%, 100% { opacity: 0; }
    96.6%, 97.8% { opacity: 1; }
}
@media (max-width: 960px) {
    .hero, .hero__inner { min-height: 0; }
    .hero__copy { padding-bottom: 32px; }
    .hero__art {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        margin-inline: auto;
        margin-top: 32px;
        transform: none;
    }
    .hero__portrait { bottom: 0; }
}
@media (max-width: 620px) {
    .hero__art { width: 145%; margin-left: -22.5%; margin-right: -22.5%; }
    .hero__art { margin-top: 32px; }
    .hero__motion-toggle { bottom: 12px; right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero__portrait { transform: none !important; transition: none; }
    .hero__portrait-breath { animation: none; transform: none; }
    .hero__portrait .hero__blink { animation: none !important; opacity: 0 !important; }
    .hero__motion-toggle { display: none; }
}
/* Storm light reaches every part of the hero; text stays above this layer. */
.hero__weather { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.hero__weather > span { position: absolute; display: block; pointer-events: none; }
.hero__weather-haze {
    inset: -12% -8%;
    background: radial-gradient(ellipse at 75% 26%, rgb(137 157 192 / 12%), transparent 48%), radial-gradient(ellipse at 28% 74%, rgb(245 191 54 / 12%), transparent 48%);
    opacity: .45;
    animation: hero-storm-drift 22s ease-in-out infinite alternate;
}
.hero__weather-flash {
    left: var(--flash-x, 25%);
    top: var(--flash-y, 75%);
    width: clamp(340px, 68%, 960px);
    height: 82%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgb(255 250 226 / 95%) 0%, rgb(219 231 255 / 72%) 12%, rgb(174 199 238 / 35%) 32%, rgb(245 207 130 / 12%) 48%, transparent 68%);
    opacity: 0;
}
@keyframes hero-storm-drift {
    from { opacity: .35; transform: translate3d(-1.5%, 0, 0) scale(1); }
    to { opacity: .65; transform: translate3d(2%, -2%, 0) scale(1.04); }
}
.hero[data-motion-paused] .hero__weather > span { animation-play-state: paused; }
.hero[data-motion-paused] .hero__weather-flash { opacity: 0 !important; }
[data-motion-disabled] .hero__weather { display: none; }
[data-motion-disabled] .hero__weather > span { animation: none; }
@media(max-width:960px) {
    .hero__weather-haze { inset: -8% -30%; }
    .hero__weather-flash { width: 125%; height: 48%; }
}
@media(prefers-reduced-motion:reduce) {
    .hero__weather { display: none; }
    .hero__weather > span { animation: none !important; }
}