/* Shared, scoped light layers. The four source photographs remain untouched. */
[data-cinematic-scene] { position: relative; isolation: isolate; background: #060a08; }
[data-cinematic-scene] .cinematic-photo-frame { position: relative; margin: 0; overflow: hidden; }
[data-cinematic-scene] [data-scene-image] { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
[data-cinematic-scene] .cinematic-effects { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
[data-cinematic-scene] .cinematic-effects span { position: absolute; inset: 0; opacity: .65; }
[data-cinematic-scene="candle"] .scene-flame { background: radial-gradient(circle at 72.5% 85.5%, #fff8d8 0, rgba(255,223,155,.65) .5%, rgba(255,162,49,.15) 2%, transparent 4%); }
[data-cinematic-scene="candle"] .scene-glow { background: radial-gradient(ellipse at 72.5% 85.5%, rgba(255,204,125,.42), rgba(255,176,66,.13) 13%, transparent 32%), radial-gradient(ellipse at 78% 54%, rgba(162,43,35,.14), transparent 40%); }
[data-cinematic-scene="candle"] .scene-reflection { background: radial-gradient(ellipse 14% 30% at 72.5% 100%,rgba(255,192,103,.16),transparent 90%); mask-image: linear-gradient(180deg,transparent 76%,#000 88%); }
[data-cinematic-scene="road"] .scene-flame { background: radial-gradient(circle at 52% 49%, rgba(255,230,187,.3), transparent 12%); }
[data-cinematic-scene="road"] .scene-glow { background: radial-gradient(ellipse at 54% 76%, rgba(255,215,148,.21), transparent 35%); }
[data-cinematic-scene="road"] .scene-reflection { background: repeating-linear-gradient(96deg, transparent 0 5%, rgba(255,208,133,.14) 6%, transparent 9% 18%), linear-gradient(180deg,transparent 42%,rgba(255,224,171,.24) 69%,rgba(223,173,91,.12)); background-size: 145% 100%,100% 100%; clip-path: polygon(47% 46%,57% 46%,80% 100%,21% 100%); mask-image: linear-gradient(180deg,transparent 38%,#000 53%,#000 92%,transparent); }
[data-cinematic-scene="road"] .scene-rain { background-image: repeating-linear-gradient(105deg,transparent 0 27px,rgba(235,244,239,.17) 28px,transparent 29px 68px); background-size: 100% 195%; mask-image: linear-gradient(90deg,transparent 35%,#000 55%,#000 88%,transparent); opacity: .16; }
[data-cinematic-scene="road"] .scene-headlight { background: radial-gradient(ellipse at 52% 50%,rgba(255,241,210,.5),rgba(255,207,126,.17) 12%,transparent 34%); transform-origin: 52% 48%; opacity: .04; }
[data-cinematic-scene] .scene-bridge, [data-cinematic-scene] .scene-spotlight { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; z-index: 1; }
[data-cinematic-scene] .scene-bridge { background: radial-gradient(ellipse at 55% 64%, rgba(160,137,78,.13),rgba(90,113,89,.055) 27%,transparent 52%); }
[data-cinematic-scene] .scene-spotlight { background: radial-gradient(ellipse at 73% 48%, rgba(255,219,157,.28),rgba(228,184,101,.1) 22%,transparent 46%); opacity: .48; }
[data-cinematic-scene] .scene-controls { display: flex; gap: 8px; position: relative; z-index: 4; }
[data-cinematic-scene] .scene-controls button { color: #dfd5bf; border: 1px solid #ffffff26; background: #080d0acc; border-radius: 22px; padding: 8px 14px; min-height: 44px; font: 500 12px/1.2 Inter,sans-serif; cursor: pointer; }
[data-cinematic-scene] .scene-controls button:hover { border-color: #dabc78; color: #fff5de; }
[data-cinematic-scene] .scene-controls button:focus-visible { outline: 2px solid #e5c681; outline-offset: 3px; }
[data-cinematic-scene] [data-scene-replay]:disabled { opacity: .45; cursor: default; }
[data-scene-ready] .scene-flame { animation: cinematic-flame 4.7s ease-in-out infinite; }
[data-scene-ready] .scene-glow { animation: cinematic-breathe 6.2s ease-in-out infinite; }
[data-scene-ready] .scene-reflection { animation: cinematic-breathe 5.4s ease-in-out .4s infinite; }
[data-cinematic-scene="road"][data-scene-ready] .scene-reflection { animation: cinematic-road 5.8s ease-in-out infinite; }
[data-cinematic-scene="road"][data-scene-ready] .scene-rain { animation: cinematic-rain 2.8s linear infinite; }
[data-cinematic-scene="road"][data-scene-ready] .scene-headlight { animation: cinematic-headlight 3.6s ease-out both; }
[data-scene-ready] .scene-spotlight { animation: cinematic-reveal 2.4s ease-out both; }
[data-cinematic-scene]:not([data-scene-state="playing"]) .cinematic-effects span,
[data-cinematic-scene]:not([data-scene-state="playing"]) .scene-spotlight { animation-play-state: paused; }
[data-cinematic-scene].scene-replaying .scene-spotlight, [data-cinematic-scene].scene-replaying .scene-headlight { animation: none; }
[data-cinematic-scene]:focus-within .scene-bridge { opacity: .65; }
@keyframes cinematic-flame { 0%,100% { opacity: .46; } 23% { opacity: 1; } 49% { opacity: .62; } 76% { opacity: .94; } }
@keyframes cinematic-breathe { 0%,100% { opacity: .4; } 28% { opacity: .83; } 55% { opacity: .52; } 81% { opacity: .96; } }
@keyframes cinematic-road { 0%,100% { opacity: .42; background-position: 0 0,0 0; } 38% { opacity: .92; background-position: 16% 0,0 5%; } 67% { opacity: .58; background-position: 28% 0,0 0; } 82% { opacity: .8; background-position: 37% 0,0 3%; } }
@keyframes cinematic-reveal { 0% { opacity: .25; } 42% { opacity: 1; } 100% { opacity: .48; } }
@keyframes cinematic-rain { from { opacity: .16; transform: translate3d(0,-3%,0); } 55% { opacity: .29; } to { opacity: .16; transform: translate3d(-1%,3%,0); } }
@keyframes cinematic-headlight { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: .9; } 100% { opacity: .04; transform: scale(1.15); } }
@media (max-width: 680px), (pointer: coarse) {
  [data-cinematic-scene][data-scene-ready] .scene-flame, [data-cinematic-scene][data-scene-ready] .scene-reflection { animation: none; }
  [data-cinematic-scene="road"] .scene-rain, [data-cinematic-scene="road"] .scene-headlight { display: none; animation: none; }
  [data-scene-ready] .scene-glow { animation: cinematic-breathe 8s ease-in-out infinite; }
  [data-cinematic-scene] .scene-spotlight { background: radial-gradient(ellipse at 75% 30%,rgba(255,219,157,.22),transparent 60%); }
}
@media (prefers-reduced-motion: reduce) {
  [data-cinematic-scene] .cinematic-effects span, [data-cinematic-scene] .scene-spotlight { animation: none !important; }
  [data-cinematic-scene] .scene-spotlight { opacity: .48; }
}