/* Twilight Lanterns (Pencil variant E). The words are lit by the string lights,
   bloom into the dusk and carry the photo's grain, so they read as part of the scene. */
.scene-twilight .experience{background:#0d1a3a}
.scene-twilight .scene-foreground{filter:brightness(.86) saturate(.92) contrast(1.02)}
.scene-twilight .door-art{filter:brightness(.95) saturate(.96)}
.scene-twilight .world:hover .door-art,.scene-twilight .world:focus-visible .door-art{filter:brightness(1.04)}

/* The same photo, blended "lighten" over the words: bulbs hang in front of the lettering. */
.scene-lights{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:3;mix-blend-mode:lighten;pointer-events:none;user-select:none;-webkit-mask-image:linear-gradient(#000 17%,transparent 25%);mask-image:linear-gradient(#000 17%,transparent 25%)}

/* Headline: warm light falling from the lanterns, fading toward the sky. */
.scene-twilight .intro{text-shadow:none}
.scene-twilight .intro h1{
  color:#fff1dc;letter-spacing:-.022em;
  background:linear-gradient(180deg,#fffaf0 10%,#ffe9c8 55%,#ecc99a 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:none;
  filter:url(#lit-type) drop-shadow(0 0 9px #ffd49a80) drop-shadow(0 0 38px #ffb06047) drop-shadow(0 14px 26px #050c2459)
}
.scene-twilight .intro .eyebrow{color:#f0dfae;opacity:.8;letter-spacing:.34em;text-shadow:0 0 12px #ffd7962e}
.scene-twilight .flourish{color:#ffd99c;text-shadow:0 0 10px #ffc66f}
.scene-twilight .flourish i{background:linear-gradient(90deg,transparent,#e8c58f)}
.scene-twilight .flourish i:last-child{background:linear-gradient(90deg,#e8c58f,transparent)}
.scene-twilight .subtitle{color:#eadfd0;letter-spacing:.02em;text-shadow:0 1px 14px #060d2699}
.scene-twilight .explore{background:#fff3df1f;border-color:#ffe9c46b;color:#fff3df;backdrop-filter:blur(6px);box-shadow:0 0 24px #ffc77a1f,inset 0 0 12px #ffe3b41a;transition:background .25s,box-shadow .25s}
.scene-twilight .explore:hover{background:#fff3df33;box-shadow:0 0 32px #ffc77a40,inset 0 0 12px #ffe3b42e}

/* Side words written with sparklers into the dusk. */
.scene-twilight .left-note{color:#f3e2c4;opacity:.82;text-shadow:0 0 8px #ffcf8a66;filter:url(#lit-type)}
.scene-twilight .left-note i{background:#f0d6a8;box-shadow:0 0 6px #ffcf8a}
/* The grainy lettering (.note-ink) is static, so its SVG filter rasterises once; the breathing
   halo is a transparent twin (.note-glow, built by grounded.js) whose opacity fades on the
   compositor. Animating text-shadow under url(#lit-type) re-ran the filter on every frame. */
.scene-twilight .right-note{
  mix-blend-mode:normal;color:#fff6e4;top:16%;
  text-shadow:0 0 2px #fffaf0,0 0 7px #ffd38a,0 0 18px #ffa94dcc,0 0 40px #ff86306b;
  animation:sparkler 4.2s ease-in-out infinite
}
.scene-twilight .right-note .note-ink{filter:url(#lit-type) blur(.15px)}
.scene-twilight .right-note .note-glow{display:block;color:transparent;text-shadow:0 0 3px #fffdf5b3,0 0 13px #ffe0a8b3,0 0 32px #ffb866a6,0 0 70px #ff93408c;animation:note-glow 3.4s ease-in-out infinite}
.scene-twilight .right-note .wall-heart{stroke:#fff3dc;filter:drop-shadow(0 0 3px #ffd38a) drop-shadow(0 0 10px #ffa94d)}
.scene-twilight .right-note .note-glow .wall-heart{stroke:#ffe0a8;filter:drop-shadow(0 0 5px #ffe0a8) drop-shadow(0 0 20px #ffb866)}
@keyframes note-glow{0%,100%{opacity:0}50%{opacity:1}}

/* UI that sits in the night rather than on top of it. */
.scene-twilight .navigation{background:linear-gradient(110deg,#121c3cb8,#1b2547a3);border-color:#ffffff1f;color:#f7ecdb;box-shadow:0 10px 40px #02061a40}
.scene-twilight .nav-active{border-color:#f0dfae}
.scene-twilight .search{background:#ffffff12;border-color:#ffffff2e;color:#f7ecdb}
.scene-twilight .brand-switch{background:#ffffff12;border-color:#ffffff1f}
.scene-twilight .brand-switch>a,.scene-twilight .brand-switch>button{color:#f2e6d4}
.scene-twilight .brand-switch [aria-current=page]{background:#f7ecdb;color:#1a2244}
.scene-twilight .brand-switch [aria-current=page] svg{color:#b8873d}
.scene-twilight .navigation .primary{background:#f3dfb4;color:#1c2446;border-color:#fff1cf}
.scene-twilight .navigation .primary:hover{background:#ffeccb}
.scene-twilight .navigation.menu-open nav{background:#141e40f2;color:#f7ecdb}
.scene-twilight .world-label{background:linear-gradient(130deg,#fffaf1f2,#f6e6d2eb);box-shadow:0 6px 22px #02061a40,0 0 18px #ffd59a26}

@keyframes sparkler{0%,100%{opacity:.96}42%{opacity:1}47%{opacity:.88}52%{opacity:1}}
@media(prefers-reduced-motion:reduce){.scene-twilight .right-note{animation:none}.scene-twilight .right-note .note-glow{display:none}}
@media(max-width:760px){.scene-twilight .experience{background:#0d1a3a}.scene-twilight .scene-image,.scene-lights{object-fit:cover;object-position:50% 0}}