.photo-hero { background: #1E2B26; isolation: isolate; overflow: hidden; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; }
.ph-stage { position: absolute; inset: -8%; z-index: -2; will-change: transform;
  transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) + var(--scroll, 0) * .35px), 0) scale(calc(1 + var(--scroll, 0) / 2600));
  transition: transform .3s ease-out; }
.ph-layer { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0;
  filter: blur(14px) saturate(.6) brightness(1.15); transition: opacity 1s ease, filter 1.3s cubic-bezier(.2, .7, .2, 1);
  animation: kenburns 22s ease-in-out infinite alternate; }
.ph-layer:nth-child(2) { animation-duration: 26s; animation-direction: alternate-reverse; }
.ph-layer.show { opacity: 1; filter: none; }
@keyframes kenburns {
  0% { transform: scale(1.04) translate(0, 0); }
  50% { transform: scale(1.14) translate(-2.5%, 1.5%); }
  100% { transform: scale(1.1) translate(2%, -2%); }
}
.fx-glare { position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 38%, rgba(255, 246, 214, .35) 48%, rgba(255, 255, 255, .08) 52%, transparent 62%);
  mix-blend-mode: soft-light; opacity: calc(1 - var(--haze, 0) * 1.2); animation: glare 9s ease-in-out infinite; }
@keyframes glare { 0%, 55% { transform: translateX(-60%); } 85%, 100% { transform: translateX(60%); } }
.fx-haze { position: absolute; inset: -10%; opacity: var(--haze, 0); transition: opacity 2.5s ease;
  background: radial-gradient(60% 50% at 30% 60%, rgba(160, 130, 100, .85), transparent 70%),
              radial-gradient(50% 45% at 75% 40%, rgba(140, 120, 105, .75), transparent 70%),
              linear-gradient(180deg, rgba(170, 150, 130, .55), rgba(120, 100, 85, .7));
  filter: blur(6px); animation: smog 14s ease-in-out infinite alternate; }
@keyframes smog { to { transform: translate(6%, -3%) scale(1.08); } }
.fx-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ph-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .08) 25%, rgba(0, 0, 0, .66)); pointer-events: none; }
.photo-hero .glass-pill, .photo-hero .hero-text { transform: translate3d(calc(var(--tx, 0px) * -.35), calc(var(--ty, 0px) * -.35), 0); transition: transform .3s ease-out; }
.photo-hero .hero-text > * { animation: textin .7s cubic-bezier(.2, .8, .2, 1) both; }
.photo-hero .hero-text > *:nth-child(2) { animation-delay: .08s; }
@keyframes textin { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } }

.photo-hero.shake { animation: shake .45s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake {
  10%, 90% { transform: translate3d(-2px, 1px, 0); } 20%, 80% { transform: translate3d(4px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 2px, 0); } 40%, 60% { transform: translate3d(6px, -1px, 0); }
}
.fx-crack { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease .2s; }
.fx-crack path { fill: none; stroke: rgba(255, 255, 255, .92); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 260; stroke-dashoffset: 260; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)) drop-shadow(0 0 8px rgba(255, 92, 92, .6)); }
.fx-crack circle { fill: rgba(255, 255, 255, .85); filter: drop-shadow(0 0 10px rgba(255, 80, 80, .9)); transform-origin: 230px 150px; transform: scale(0); }
.photo-hero.cracked .fx-crack { opacity: 1; transition: none; }
.photo-hero.cracked .fx-crack path { animation: crackdraw .55s cubic-bezier(.2, .8, .3, 1) forwards; }
.photo-hero.cracked .fx-crack path:nth-of-type(2) { animation-delay: .04s; }
.photo-hero.cracked .fx-crack path:nth-of-type(3) { animation-delay: .08s; }
.photo-hero.cracked .fx-crack path:nth-of-type(4) { animation-delay: .1s; }
.photo-hero.cracked .fx-crack path:nth-of-type(5) { animation-delay: .14s; }
.photo-hero.cracked .fx-crack path:nth-of-type(6) { animation-delay: .3s; }
.photo-hero.cracked .fx-crack circle { animation: impact .5s cubic-bezier(.2, .8, .3, 1.4) forwards; }
@keyframes crackdraw { to { stroke-dashoffset: 0; } }
@keyframes impact { 0% { transform: scale(0); } 60% { transform: scale(2.2); opacity: 1; } 100% { transform: scale(1); opacity: .8; } }

.card.reveal { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .6s ease var(--d, 0ms), transform .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms); }
.card.reveal.in { opacity: 1; transform: none; }

.toolbar { view-transition-name: toolbar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
[data-dir="fwd"]::view-transition-old(root) { animation-name: vt-out-left; }
[data-dir="fwd"]::view-transition-new(root) { animation-name: vt-in-right; }
[data-dir="back"]::view-transition-old(root) { animation-name: vt-out-right; }
[data-dir="back"]::view-transition-new(root) { animation-name: vt-in-left; }
@keyframes vt-out-left { to { transform: translateX(-12%) scale(.96); opacity: 0; filter: blur(6px); } }
@keyframes vt-in-right { from { transform: translateX(14%) scale(.98); opacity: 0; filter: blur(6px); } }
@keyframes vt-out-right { to { transform: translateX(12%) scale(.96); opacity: 0; filter: blur(6px); } }
@keyframes vt-in-left { from { transform: translateX(-14%) scale(.98); opacity: 0; filter: blur(6px); } }

.photo-stack { perspective: 900px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .3s ease-out; }
.photo-stack img { transition: transform .9s cubic-bezier(.2, .8, .2, 1), left .9s cubic-bezier(.2, .8, .2, 1), top .9s, filter .9s, z-index 0s .45s; }
.photo-stack img[data-pos="0"] { left: 27%; top: 12px; z-index: 3; transform: rotate(0deg) translateZ(40px); filter: none; animation: none; }
.photo-stack img[data-pos="1"] { left: 6%; top: 22px; z-index: 2; transform: rotate(-9deg) translateZ(0); filter: brightness(.92); animation: none; }
.photo-stack img[data-pos="2"] { left: 48%; top: 22px; z-index: 1; transform: rotate(9deg) translateZ(-30px); filter: brightness(.85); animation: none; }
.photo-stack img { animation: stackin .7s var(--ease) both; }

.cover-photo { position: relative; overflow: hidden; background: none !important; }
.cover-photo::before { content: ''; position: absolute; inset: -10%; background: url(/img/park.webp) center 60% / cover;
  animation: kenburns 24s ease-in-out infinite alternate; z-index: 0;
  transform: translateY(calc(var(--scroll, 0) * .2px)); }
.cover-photo > * { position: relative; z-index: 1; }

.dialog .photo, .detail-photo { animation: photoreveal .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes photoreveal { from { clip-path: circle(0% at 50% 60%); transform: scale(1.08); } to { clip-path: circle(150% at 50% 60%); transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ph-layer, .fx-glare, .fx-haze, .cover-photo::before, .photo-hero .hero-text > *, .dialog .photo, .detail-photo { animation: none !important; }
  .ph-layer { transition: opacity .3s; filter: none; }
  .card.reveal { opacity: 1; transform: none; }
}
.photo-hero .glass-pill, .photo-hero .hero-text { position: relative; z-index: 1; }