/* "Een avond met SparkMonkey": sticky scene on the left, five scroll steps on the right. */
.evening{--night:.12;padding:110px 5% 90px;background:#0d0f14;color:#f5f1ea}
.evening-head{max-width:720px;margin-bottom:56px}
.evening-head .eyebrow{color:#e3bb80}
.evening-head h2{margin-bottom:20px;color:#fff}
.evening-head h2 em{color:#e3bb80;font-style:italic}
.evening-head>p:last-child{font-size:17px;line-height:1.7;color:#cfc7ba;max-width:560px}
.evening-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
.evening-stage{position:sticky;top:115px;height:calc(100vh - 150px);min-height:420px;max-height:760px;border-radius:14px;overflow:hidden;background:#05070b;container-type:size;box-shadow:0 30px 80px #0008}
/* The frame keeps the photo's 3:2 ratio so the light overlays stay on the windows while it covers the stage. */
.evening-frame{position:absolute;right:-2%;top:50%;width:max(104cqw,150cqh);aspect-ratio:3/2;transform:translateY(-50%)}
.evening-frame img{position:absolute;inset:0;width:100%;height:100%;display:block}
.ev-night{position:absolute;inset:0;background:linear-gradient(180deg,#060a1a 0%,#0a1020 45%,#05070d 100%);opacity:var(--night);mix-blend-mode:multiply;transition:opacity 1.2s ease}
.ev-window{position:absolute;border-radius:4px;filter:blur(5px);background:#04060c;opacity:.82;mix-blend-mode:multiply;transition:opacity 1s ease,background 1s ease}
.ev-window-a{left:48.5%;top:36%;width:17%;height:22%}
.ev-window-b{left:80.5%;top:27%;width:11.5%;height:30%}
.ev-window::after{content:"";position:absolute;inset:0;opacity:0;mix-blend-mode:screen;background:radial-gradient(ellipse at 50% 70%,#ffcf8a66,#0000 70%);transition:opacity 1s ease}
.ev-hall{position:absolute;left:44%;top:55%;width:17%;height:9%;border-radius:50%;background:radial-gradient(ellipse,#ffd59a88,#0000 70%);mix-blend-mode:screen;opacity:0;transition:opacity 1s ease}
.ev-led{position:absolute;left:95%;top:52.6%;width:1.6%;aspect-ratio:1;border-radius:50%;background:#7dff9a;box-shadow:0 0 18px 6px #46e07a99;opacity:0;transition:opacity .6s}
.evening-hud{position:absolute;inset:22px 22px auto 22px;display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.evening-clock{position:relative;font-size:clamp(34px,5cqw,58px);font-weight:300;letter-spacing:-.02em;line-height:1;color:#fff;text-shadow:0 2px 20px #0009;min-width:4ch}
.evening-clock span,.evening-charge b{display:none}
.evening-charge{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:#0b0e16b3;backdrop-filter:blur(10px);border:1px solid #ffffff22;font-size:13px;color:#e8e2d8}
.evening-charge>span{font-weight:700;letter-spacing:.08em;color:#7dff9a}
.evening-charge>div{width:72px;height:6px;border-radius:6px;background:#ffffff26;overflow:hidden}
.evening-charge i{display:block;height:100%;width:var(--to,4%);background:linear-gradient(90deg,#46e07a,#b7f7a0);border-radius:6px;transition:width 1.2s ease}
.evening-charge b{font-weight:600;min-width:4ch;text-align:right}
.evening-voice{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.94);display:flex;align-items:center;gap:14px;padding:16px 22px;border-radius:999px;background:#0b0e16cc;backdrop-filter:blur(12px);border:1px solid #e3bb8055;font-size:clamp(15px,2.2cqw,19px);color:#fff;white-space:nowrap;opacity:0;transition:opacity .6s,transform .6s}
.evening-wave{display:flex;align-items:center;gap:3px;height:22px}
.evening-wave i{width:3px;height:30%;border-radius:3px;background:#e3bb80;animation:evening-wave 1s ease-in-out infinite}
.evening-wave i:nth-child(2){animation-delay:.15s}.evening-wave i:nth-child(3){animation-delay:.3s}.evening-wave i:nth-child(4){animation-delay:.45s}.evening-wave i:nth-child(5){animation-delay:.6s}
@keyframes evening-wave{0%,100%{height:25%}50%{height:100%}}
.evening-notices{position:absolute;left:22px;bottom:22px;right:110px;height:64px}
.evening-notice{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:12px;max-width:100%;padding:13px 18px;border-radius:14px;background:#f7f4eef2;color:#171717;box-shadow:0 14px 40px #0007;font-size:14px;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.evening-notice b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#7a6a52;margin-bottom:2px}
.evening-notice-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#46c06e;box-shadow:0 0 0 4px #46c06e33}
.evening-dots{position:absolute;right:26px;bottom:30px;display:flex;gap:8px;list-style:none;margin:0;padding:0}
.evening-dots li{width:6px;height:6px;border-radius:6px;background:#ffffff66;transition:width .4s,background .4s}
.evening-steps{display:flex;flex-direction:column}
.evening-step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;opacity:.35;transition:opacity .5s}
.evening-time{font-size:13px;letter-spacing:.18em;color:#e3bb80;margin-bottom:14px;font-weight:600}
.evening-step h3{font-size:clamp(28px,3vw,40px);line-height:1.15;color:#fff;margin-bottom:18px}
.evening-step>p{font-size:17px;line-height:1.75;color:#d6cec1;max-width:480px}
.evening-voice-line{font-size:20px!important;color:#fff!important;font-style:italic;margin-bottom:12px}
.evening-in-scene{font-size:12px!important;letter-spacing:.14em;text-transform:uppercase;color:#9d9486!important;margin:28px 0 12px}
.evening-products{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:480px}
.evening-products a{display:flex;align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:10px;background:#ffffff0d;border:1px solid #ffffff1f;color:#f5f1ea;min-height:44px;transition:background .2s,border-color .2s}
.evening-products a:hover{background:#ffffff1a;border-color:#e3bb8077}
.evening-products a:focus-visible{outline:2px solid #e3bb80;outline-offset:2px}
.evening-products img{width:56px;height:56px;border-radius:8px;object-fit:contain;background:#fff;padding:4px;flex:none}
.evening-products span{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.evening-products b{font-size:15px;font-weight:600}
.evening-products small{font-size:14px;color:#c9bfae}
.evening-products i{font-style:normal;color:#e3bb80}
.evening-bundle{margin-top:30px;padding:32px;border-radius:14px;background:#f7f4ee;color:#171717}
.evening-bundle h3{font-size:28px;margin-bottom:10px}
.evening-bundle>p{font-size:15px;line-height:1.6;color:#4e473e}
.evening-bundle-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 16px}
.evening-bundle-actions .button{gap:8px;cursor:pointer;border:0;font:inherit;font-weight:600}
.evening-secondary{background:transparent;border:1px solid #171717!important;color:#171717}
.evening-secondary:hover{background:#17171710}
.evening-bundle .evening-note{font-size:13px;color:#6b6358}

/* Scene states: 0 is dusk before the story starts, 1-5 follow the steps. */
.evening[data-scene="1"]{--night:.2}.evening[data-scene="2"]{--night:.3}.evening[data-scene="3"]{--night:.45}.evening[data-scene="4"]{--night:.55}.evening[data-scene="5"]{--night:.72}
.evening:is([data-scene="1"],[data-scene="2"],[data-scene="3"],[data-scene="4"]) .ev-window{opacity:0}
.evening:is([data-scene="1"],[data-scene="2"]) .ev-window::after{opacity:1}
.evening[data-scene="3"] .ev-window{opacity:.42;background:#5b3fd0;mix-blend-mode:color}
.evening[data-scene="4"] .ev-window{opacity:.3;background:#3a2a80;mix-blend-mode:color}
.evening:is([data-scene="1"],[data-scene="4"]) .ev-hall{opacity:1}
.evening:not([data-scene="0"]) .ev-led{opacity:1}
.evening[data-scene="3"] .evening-voice{opacity:1;transform:translate(-50%,-50%) scale(1)}
.evening[data-scene="0"] .evening-clock span[data-for="1"],.evening[data-scene="0"] .evening-charge b[data-for="1"]{display:inline}
.evening[data-scene="1"] [data-for="1"],.evening[data-scene="2"] [data-for="2"],.evening[data-scene="3"] [data-for="3"],.evening[data-scene="4"] [data-for="4"],.evening[data-scene="5"] [data-for="5"]{display:inline}
.evening[data-scene="1"] .evening-notice[data-for="1"],.evening[data-scene="2"] .evening-notice[data-for="2"],.evening[data-scene="3"] .evening-notice[data-for="3"],.evening[data-scene="4"] .evening-notice[data-for="4"],.evening[data-scene="5"] .evening-notice[data-for="5"]{display:flex;opacity:1;transform:none}
.evening[data-scene="1"] .evening-dots li[data-for="1"],.evening[data-scene="2"] .evening-dots li[data-for="2"],.evening[data-scene="3"] .evening-dots li[data-for="3"],.evening[data-scene="4"] .evening-dots li[data-for="4"],.evening[data-scene="5"] .evening-dots li[data-for="5"]{width:22px;background:#e3bb80}
.evening[data-scene="1"] .evening-step[data-step="1"],.evening[data-scene="2"] .evening-step[data-step="2"],.evening[data-scene="3"] .evening-step[data-step="3"],.evening[data-scene="4"] .evening-step[data-step="4"],.evening[data-scene="5"] .evening-step[data-step="5"]{opacity:1}

@media(max-width:900px){
 .evening{padding:70px 0 60px}
 .evening-head{padding:0 6%;margin-bottom:28px}
 .evening-body{display:block}
 .evening-stage{top:74px;height:46vh;min-height:260px;border-radius:0;z-index:2}
 .evening-hud{inset:14px 14px auto 14px}
 .evening-notices{left:14px;right:96px;bottom:14px}
 .evening-notice{font-size:13px;padding:10px 14px}
 .evening-dots{right:16px;bottom:22px}
 .evening-steps{padding:0 6%}
 .evening-step{min-height:62vh;padding:36px 0}
 .evening-step>p{font-size:16px}
 .evening-bundle{padding:24px}
 .evening-bundle-actions .button{width:100%}
}
@media(prefers-reduced-motion:reduce){
 .evening *{transition:none!important;animation:none!important}
 .evening-step{opacity:1}
}