/* Static, full-bleed landscape confined to the opening section. */
.page-landscape { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); }
.page-landscape-image { position: absolute; inset: -8px; background: url("assets/page-landscape.webp") center / cover no-repeat; filter: blur(3px) saturate(.65); opacity: .17; }
.page-landscape::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, transparent 88%); opacity: .75; }
:root[data-theme="light"] .page-landscape-image { opacity: .46; }
.hero, :root[data-theme="light"] .hero { background: var(--bg); isolation: isolate; }
.hero-grid { display: none; }
.hero-inner { position: relative; max-width: 1360px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; min-height: 740px; padding-top: 80px; padding-bottom: 80px; }
.hero-copy { z-index: 3; }
.statue-visual { min-width: 0; height: 580px; position: relative; pointer-events: none; z-index: 1; }
.statue-reveal { position: absolute; inset: -50px -80px -85px -30px; animation: statue-arrive 1.8s cubic-bezier(.2,.65,.25,1) both; }
.statue-motion { height: 100%; width: 100%; transform: translate3d(var(--statue-x,0px),var(--statue-y,0px),0) rotate(var(--statue-angle,0deg)) scale(var(--statue-scale,1.025)); transform-origin: 50% 60%; will-change: transform; }
.hero-statue { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform: scaleX(-1); mask-image: linear-gradient(180deg,#000 0%,#000 86%,transparent 100%); filter: drop-shadow(0 22px 30px #152e2614); }
.hero-bottom { position: relative; z-index: 3; }
@keyframes statue-arrive { from { opacity: 0; transform: translate3d(0,16px,0) scale(.97); } to { opacity: 1; transform: translate3d(0,0,0) scale(1); } }
@media (min-width:1500px) { .hero-inner { padding-block: 90px; min-height: 790px; } .statue-visual { height: 610px; } }
@media (max-width:1150px) { .hero-inner { min-height: 680px; padding-block: 65px; gap: 16px; } .statue-visual { height: 550px; } .statue-reveal { inset: -55px -55px -65px -25px; } }
@media (max-width:900px) { .hero-inner { min-height: 650px; padding-block: 55px; gap: 12px; } .statue-visual { height: 520px; } .statue-reveal { inset: -35px -65px -55px -35px; } }
@media (max-width:680px) { .hero-inner { min-height: 0; padding-top: 45px; padding-bottom: 0; gap: 20px; } .statue-visual { height: 440px; width: 100%; max-width: 480px; align-self: center; } .statue-reveal { inset: 0 -20px -20px; } .page-landscape-image { background-position: 66% center; } :root[data-theme="light"] .page-landscape-image { opacity: .3; } .hero-statue { mask-image: linear-gradient(#000 0%,#000 85%,transparent 100%); } }
@media (prefers-reduced-motion:reduce) { .statue-reveal { animation: none; will-change: auto; } .statue-motion { transform: none; will-change: auto; } }