/* Decorative planes never receive pointer events or cover the hero's text. */
.rain-field{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.rain-drop{position:absolute;left:var(--rain-x);top:-40px;width:1px;height:var(--rain-length);background:#e9bac9;opacity:.2;animation:pixel-rain var(--rain-speed) linear infinite;animation-delay:var(--rain-delay)}
.rain-drop:nth-child(3n){width:2px;background:#f04b63;opacity:.24}
@keyframes pixel-rain{to{transform:translate(-90px,var(--rain-fall,110vh))}}
.hero-weather{position:absolute;inset:0;z-index:0;pointer-events:none;--rain-fall:1000px}
.puddle-field{position:absolute;bottom:4%;left:0;right:0;height:12%;pointer-events:none}
.puddle-ripple{position:absolute;left:var(--puddle-x);top:var(--puddle-y);width:28px;height:7px;border:1px solid #ef5b7270;box-shadow:0 2px #d52d4240;opacity:0;animation:puddle-ring 3.4s steps(7,end) infinite;animation-delay:var(--puddle-delay)}
@keyframes puddle-ring{0%{transform:scale(.2);opacity:0}15%{opacity:.65}80%,100%{transform:scale(2.4);opacity:0}}
.shooting-star{position:absolute;top:10%;left:54%;width:75px;height:2px;background:linear-gradient(90deg,transparent,#f02e43 80%,#ffe5e9);opacity:0;transform:rotate(24deg);animation:chaos-star 23s linear infinite;animation-delay:-17s;box-shadow:3px 0 #ffbac5}
@keyframes chaos-star{0%,93%{opacity:0;transform:translate(0,0) rotate(24deg)}94%{opacity:.9}98%,100%{opacity:0;transform:translate(280px,125px) rotate(24deg)}}
.city-depth{position:absolute;inset:-110px 0;pointer-events:none}
.city-depth--far{transform:translateY(var(--city-depth-far,0px));opacity:.28;background:linear-gradient(90deg,#110c10 0 3%,transparent 3% 96%,#110c10 96%);clip-path:polygon(0 17%,3% 17%,3% 30%,6% 30%,6% 100%,94% 100%,94% 19%,97% 19%,97% 8%,100% 8%,100% 100%,0 100%)}
.city-depth--near{transform:translateY(var(--city-depth-near,0px));opacity:.5;background:linear-gradient(90deg,#08070a 0 1.4%,#5b1924 1.4% 1.6%,transparent 1.6% 98%,#5b1924 98% 98.2%,#08070a 98.2%),linear-gradient(174deg,transparent 0 83%,#130b10 83% 83.35%,transparent 83.35%)}
.project-card{position:relative}
.mission-prompt{display:block;margin-top:18px;padding-top:12px;border-top:1px solid #743042;color:#ff8294;font-family:var(--mono);font-size:11px;letter-spacing:.08em;opacity:0;transform:translateY(5px);transition:opacity .18s,transform .18s}
.project-card:hover,.project-card:focus-visible{border-color:#ff546e;box-shadow:0 0 22px #ee234225,7px 7px 0 #3d0b17}
.project-card:hover .mission-prompt,.project-card:focus-visible .mission-prompt{opacity:1;transform:translateY(0)}
.project-card .project-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#f02e431a 50%,transparent 60%);transform:translateX(-110%)}
.project-card:hover .project-visual::after,.project-card:focus-visible .project-visual::after{animation:mission-scan .65s ease-out both}
@keyframes mission-scan{to{transform:translateX(110%)}}
.shadow-companion{left:24px}
.shadow-copy{margin-left:189px}
.shadow-encounter--signoff .shadow-copy{margin-left:204px}
.city-hidden .hero-weather *{animation-play-state:paused!important}
.city-paused .rain-field,.city-paused .puddle-field,.city-paused .shooting-star{display:none}
@media(max-width:1100px) and (min-width:761px){.shadow-copy{margin-left:154px}}
@media(max-width:480px){.shadow-companion{left:18px}.shadow-copy{margin-left:143px}.shadow-encounter--signoff .shadow-copy{margin-left:158px}}
@media(hover:none){.mission-prompt{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rain-field,.puddle-field,.shooting-star{display:none}.mission-prompt{opacity:1;transform:none}.project-card .project-visual::after{display:none}}