.hero-visual { --hero-x: 0px; --hero-y: 0px; }
.hero-photo { animation: heroDrift 15s ease-in-out infinite alternate; transform: translate(var(--hero-x), var(--hero-y)) scale(1.04); }
.hero-visual .orb-a { animation: orbitOne 13s ease-in-out infinite alternate; }
.hero-visual .orb-b { animation: orbitTwo 16s ease-in-out infinite alternate; }
.alive-story { display: grid; grid-template-columns: .72fr 1.28fr; gap: 60px; align-items: center; padding: 0 0 145px; }
.alive-copy h2 { font-size: clamp(45px, 5.7vw, 78px); font-weight: 600; letter-spacing: -.075em; line-height: .88; margin: 22px 0; }
.alive-copy h2 em { font-family: "Playfair Display", serif; font-weight: 500; }
.alive-copy > p:not(.section-label) { max-width: 340px; font-size: 15px; line-height: 1.6; }
.alive-copy a { color: var(--ink); display: inline-block; font: 700 11px Manrope, sans-serif; letter-spacing: .05em; margin-top: 18px; padding-bottom: 4px; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid var(--ink); }
.alive-copy a span { color: var(--red); font-size: 17px; margin-left: 4px; }
.alive-collage { min-height: 505px; position: relative; }
.alive-frame { background: var(--ink); margin: 0; overflow: hidden; position: absolute; box-shadow: 15px 18px 0 rgba(11, 12, 14, .14); }
.alive-frame img { display: block; filter: grayscale(1) contrast(1.08); height: 100%; object-fit: cover; transition: filter .55s ease, transform .7s cubic-bezier(.2,.8,.2,1); width: 100%; }
.alive-frame:hover img { filter: grayscale(.05) contrast(1.02); transform: scale(1.07); }
.alive-frame figcaption { background: var(--paper); bottom: 0; color: var(--ink); font: 500 9px "DM Mono", monospace; letter-spacing: .08em; padding: 9px 11px; position: absolute; right: 0; text-transform: uppercase; }
.alive-main { height: 435px; left: 8%; top: 35px; width: 55%; z-index: 2; }
.alive-top { height: 235px; right: 1%; top: 0; width: 36%; z-index: 3; }
.alive-bottom { bottom: 0; height: 230px; right: 8%; width: 42%; z-index: 4; }
.alive-signal { background: var(--red); bottom: 43px; color: var(--ink); left: 0; padding: 17px; position: absolute; transform: rotate(-4deg); width: 194px; z-index: 5; box-shadow: 8px 8px 0 var(--ink); }
.alive-signal span { display: block; font: 500 10px "DM Mono", monospace; letter-spacing: .1em; }
.alive-signal strong { display: block; font-size: 17px; letter-spacing: -.06em; line-height: .98; margin: 15px 0; }
.alive-signal i { background: var(--ink); display: inline-block; height: 6px; margin-right: 4px; width: 18px; }
.alive-signal i:nth-of-type(2) { opacity: .64; width: 30px; }.alive-signal i:nth-of-type(3) { opacity: .32; width: 11px; }
.alive-story.is-visible .alive-main { animation: collageFloat 7s ease-in-out infinite; }.alive-story.is-visible .alive-top { animation: collageFloat 6s ease-in-out -1.2s infinite; }.alive-story.is-visible .alive-bottom { animation: collageFloat 7.5s ease-in-out -2.5s infinite; }
@keyframes heroDrift { 50% { transform: translate(calc(var(--hero-x) + 8px), calc(var(--hero-y) - 5px)) scale(1.1); } }
@keyframes orbitOne { to { transform: rotate(-10deg) translateX(20px); } }
@keyframes orbitTwo { to { transform: rotate(32deg) translateX(-22px); } }
@keyframes collageFloat { 50% { transform: translateY(-10px) rotate(.7deg); } }
@media (max-width: 720px) { .alive-story { grid-template-columns: 1fr; gap: 36px; padding-bottom: 85px; }.alive-collage { min-height: 420px; }.alive-main { height: 360px; left: 0; width: 62%; }.alive-top { height: 190px; right: 0; width: 43%; }.alive-bottom { bottom: 0; height: 180px; right: 2%; width: 47%; }.alive-signal { bottom: 31px; padding: 13px; width: 165px; }.alive-signal strong { font-size: 15px; }.alive-copy > p:not(.section-label) { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .hero-photo, .hero-visual .orb-a, .hero-visual .orb-b, .alive-story.is-visible .alive-main, .alive-story.is-visible .alive-top, .alive-story.is-visible .alive-bottom { animation: none; } }