/* ===== Facade scene with a live sign =====
   Everything is sized in container units (cqw) so the same markup works in the
   hero and in the large builder stage. Markup is generated by js/sign.js. */
.scene {
  --sky-day: linear-gradient(180deg, #A9DCFF 0%, #E3F4FF 70%);
  --sky-night: linear-gradient(180deg, #060B1F 0%, #18244A 75%);
  --wall: #EADCBE;
  --wall-line: rgba(120, 90, 40, .12);
  --ground: #C9CED6;
  position: relative; container-type: inline-size; isolation: isolate;
  aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden;
  border: 2px solid var(--ink-900); box-shadow: 8px 8px 0 var(--ink-900); background: #E3F4FF;
  user-select: none;
}
.scene--lg { aspect-ratio: 16 / 11; }

/* sky — two layers cross-fade between day and night */
.scene__sky, .scene__sky::before, .scene__sky::after { position: absolute; inset: 0; }
.scene__sky::before { content: ""; background: var(--sky-day); }
.scene__sky::after { content: ""; background: var(--sky-night); opacity: 0; transition: opacity 1s var(--ease); }
.scene[data-time="night"] .scene__sky::after { opacity: 1; }

.scene__sun { position: absolute; z-index: 1; width: 13cqw; height: 13cqw; border-radius: 50%; right: 9cqw; top: 6cqw; background: var(--yellow-400); box-shadow: 0 0 0 2.4cqw rgba(255, 194, 14, .25), 0 0 0 5cqw rgba(255, 194, 14, .12); transition: transform 1s var(--ease-out), background-color 1s, box-shadow 1s; }
.scene[data-time="night"] .scene__sun { background: #F4F1E1; box-shadow: inset -3cqw -1.2cqw 0 #C9C4AA, 0 0 6cqw rgba(244, 241, 225, .35); transform: translateY(2cqw) scale(.75); }

.scene__stars { position: absolute; inset: 0 0 45% 0; z-index: 1; opacity: 0; transition: opacity 1s; background-image:
  radial-gradient(circle at 12% 20%, #fff 0 .25cqw, transparent .35cqw),
  radial-gradient(circle at 28% 48%, #fff 0 .2cqw, transparent .3cqw),
  radial-gradient(circle at 44% 14%, #fff 0 .3cqw, transparent .4cqw),
  radial-gradient(circle at 62% 36%, #fff 0 .2cqw, transparent .3cqw),
  radial-gradient(circle at 78% 58%, #fff 0 .25cqw, transparent .35cqw),
  radial-gradient(circle at 6% 66%, #fff 0 .2cqw, transparent .3cqw),
  radial-gradient(circle at 52% 70%, #fff 0 .2cqw, transparent .3cqw);
  animation: twinkle 3s ease-in-out infinite; }
.scene[data-time="night"] .scene__stars { opacity: 1; }
@keyframes twinkle { 50% { filter: brightness(.6); } }

.scene__cloud { position: absolute; z-index: 1; top: 9cqw; left: -20cqw; width: 16cqw; height: 4.4cqw; border-radius: 4cqw; background: #fff; opacity: .9; animation: cloud 28s linear infinite; transition: opacity 1s; }
.scene__cloud::before { content: ""; position: absolute; width: 7cqw; height: 7cqw; border-radius: 50%; background: inherit; left: 3cqw; top: -3.4cqw; }
.scene__cloud--2 { top: 16cqw; animation-duration: 40s; animation-delay: -18s; transform: scale(.7); }
.scene[data-time="night"] .scene__cloud { opacity: .08; }
@keyframes cloud { to { left: 110cqw; } }

/* building */
.scene__bldg { position: absolute; z-index: 2; left: 7cqw; right: 7cqw; top: 20cqw; bottom: 8cqw; background:
  linear-gradient(var(--wall-line) 0 0) 0 0 / 100% .35cqw,
  repeating-linear-gradient(180deg, transparent 0 5.6cqw, var(--wall-line) 5.6cqw 5.95cqw),
  var(--wall);
  border: .4cqw solid var(--ink-900); border-bottom: 0; border-radius: 1.2cqw 1.2cqw 0 0; }
.scene--lg .scene__bldg { top: 15cqw; }
/* night dims the wall; sign, windows and glow sit above this layer */
.scene__bldg::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #0A1230; opacity: 0; mix-blend-mode: multiply; transition: opacity 1s var(--ease); pointer-events: none; }
.scene[data-time="night"] .scene__bldg::after { opacity: .78; }
.scene__cornice { position: absolute; left: -1.8cqw; right: -1.8cqw; top: -2.6cqw; height: 2.6cqw; background: var(--ink-900); border-radius: .8cqw .8cqw 0 0; }

/* coloured spill of light on the wall at night */
.scene__glow { position: absolute; z-index: 3; left: 50%; top: 2cqw; width: 90%; height: 26cqw; transform: translateX(-50%); background: radial-gradient(ellipse at center, var(--c), transparent 65%); opacity: 0; mix-blend-mode: screen; transition: opacity 1s var(--ease), background .4s; pointer-events: none; }
.scene[data-time="night"] .scene__glow { opacity: .45; }
.scene[data-time="night"] [data-style="letters"] ~ .scene__glow { opacity: .3; }

.scene__front { position: absolute; z-index: 3; left: 5cqw; right: 5cqw; bottom: 0; height: 52%; display: grid; grid-template-columns: 1fr .7fr 1fr; gap: 4cqw; align-items: end; }
.scene__win, .scene__door { position: relative; border: .45cqw solid var(--ink-900); border-bottom: 0; background: linear-gradient(160deg, #CFEAFF 0 40%, #A7D3F2 40% 55%, #CFEAFF 55%); transition: background 1s, box-shadow 1s; }
.scene__win { height: 72%; border-radius: 1cqw 1cqw 0 0; }
.scene__door { height: 92%; border-radius: 1cqw 1cqw 0 0; background: linear-gradient(90deg, transparent 49%, var(--ink-900) 49% 51%, transparent 51%), linear-gradient(160deg, #CFEAFF 0 40%, #A7D3F2 40% 55%, #CFEAFF 55%); }
.scene__win::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 10%; height: 22%; border-radius: .6cqw; background: rgba(14, 23, 38, .18); }
.scene[data-time="night"] .scene__win, .scene[data-time="night"] .scene__door { background: linear-gradient(180deg, #FFE7A6, #FFC65A); box-shadow: 0 0 4cqw rgba(255, 198, 90, .55); }
.scene[data-time="night"] .scene__door { background: linear-gradient(90deg, transparent 49%, var(--ink-900) 49% 51%, transparent 51%), linear-gradient(180deg, #FFE7A6, #FFC65A); }

/* striped awning with scalloped edge */
.scene__awning { position: absolute; z-index: 3; left: 3cqw; right: 3cqw; top: 46%; height: 6.4cqw; background: repeating-linear-gradient(90deg, var(--yellow-400) 0 5cqw, #fff 5cqw 10cqw); border: .45cqw solid var(--ink-900); border-radius: .8cqw .8cqw 0 0; transform-origin: top; animation: awning 6s ease-in-out infinite; }
.scene__awning::after { content: ""; position: absolute; left: -.45cqw; right: -.45cqw; bottom: -2.4cqw; height: 2.4cqw; background: radial-gradient(circle at 2.5cqw 0, var(--yellow-400) 2.2cqw, var(--ink-900) 2.25cqw 2.6cqw, transparent 2.65cqw) 0 0 / 5cqw 100% repeat-x; }
@keyframes awning { 50% { transform: scaleY(1.04) skewX(-1deg); } }
.scene[data-time="night"] .scene__awning { filter: brightness(.55); }

.scene__ground { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 8cqw; background: linear-gradient(180deg, #AEB5C0 0 1cqw, var(--ground) 1cqw); border-top: .4cqw solid var(--ink-900); transition: filter 1s; }
.scene[data-time="night"] .scene__ground { filter: brightness(.4); }

/* street lamp */
.scene__lamp { position: absolute; z-index: 4; right: 2.4cqw; bottom: 8cqw; width: .9cqw; height: 34cqw; background: var(--ink-900); border-radius: .4cqw; }
.scene__lamp::before { content: ""; position: absolute; top: -.4cqw; right: 0; width: 5cqw; height: 1.8cqw; background: var(--ink-900); border-radius: 1.8cqw 1.8cqw .4cqw .4cqw; }
.scene__lamp::after { content: ""; position: absolute; top: 1.2cqw; right: 0; width: 22cqw; height: 34cqw; transform-origin: top right; background: linear-gradient(180deg, rgba(255, 226, 140, .55), transparent 80%); clip-path: polygon(78% 0, 100% 0, 100% 100%, 0 100%); opacity: 0; transition: opacity 1s; }
.scene[data-time="night"] .scene__lamp::after { opacity: 1; animation: lampFlicker 7s infinite; }
@keyframes lampFlicker { 0%, 95%, 100% { opacity: 1; } 96% { opacity: .5; } 97% { opacity: 1; } 98% { opacity: .6; } }

/* ===== Sign ===== */
.sg {
  --fs: min(7.2cqw, calc(60cqw / var(--n, 8)));
  position: absolute; z-index: 4; left: 50%; top: 4.5cqw; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 900; font-size: var(--fs); line-height: 1; letter-spacing: .06em; white-space: nowrap;
}
.scene--lg .sg { top: 5cqw; }
.sg__board { display: block; transition: background-color .4s, box-shadow .6s, border-color .4s; }
.sg__text { display: inline-flex; }
.ch { display: inline-block; min-width: .3em; transition: color .12s, text-shadow .2s, opacity .3s, transform .5s var(--spring), filter .4s; }

/* — Neon tubes on a dark board — */
.sg[data-style="neon"] .sg__board { padding: .45em .6em; background: #111827; border: .4cqw solid #2A3346; border-radius: .25em; box-shadow: 0 1.2cqw 0 rgba(0, 0, 0, .25); }
.sg[data-style="neon"] .ch { color: color-mix(in srgb, var(--c) 18%, #3B4254); }
.sg[data-style="neon"] .ch.on { color: color-mix(in srgb, var(--c) 45%, #fff); text-shadow: 0 0 .06em #fff, 0 0 .18em var(--c), 0 0 .4em var(--c), 0 0 .9em var(--c); }
.scene[data-time="night"] .sg[data-style="neon"] .ch.on { text-shadow: 0 0 .06em #fff, 0 0 .2em var(--c), 0 0 .5em var(--c), 0 0 1.2em var(--c), 0 0 2.2em var(--c); }
.sg[data-style="neon"] .ch.flick { animation: flick 6s 2s infinite; }
@keyframes flick { 0%, 90%, 93%, 96%, 100% { opacity: 1; } 91.5% { opacity: .25; } 94.5% { opacity: .5; } }

/* — Channel letters fixed straight to the wall — */
.sg[data-style="letters"] .sg__board { padding: .2em 0; }
.sg[data-style="letters"] .ch { color: var(--c); text-shadow: .02em .02em 0 var(--cd), .04em .04em 0 var(--cd), .06em .06em 0 var(--cd), .08em .08em 0 var(--cd), .1em .16em .2em rgba(0, 0, 0, .35); opacity: 0; transform: translateY(-.7em) rotate(-8deg); }
.sg[data-style="letters"] .ch.on { opacity: 1; transform: none; }
.scene[data-time="night"] .sg[data-style="letters"] .ch.on { filter: drop-shadow(0 0 .25em var(--c)) brightness(1.1); }

/* — Lightbox: a glowing coloured box — */
.sg[data-style="lightbox"] .sg__board { padding: .42em .7em; background: color-mix(in srgb, var(--c) 30%, #6B7280); border: .5cqw solid var(--ink-900); border-radius: .14em; box-shadow: 0 1.2cqw 0 rgba(0, 0, 0, .22); }
.sg[data-style="lightbox"].is-lit .sg__board { background: var(--c); box-shadow: 0 1.2cqw 0 rgba(0, 0, 0, .22), 0 0 2cqw color-mix(in srgb, var(--c) 60%, transparent); }
.scene[data-time="night"] .sg[data-style="lightbox"].is-lit .sg__board { box-shadow: 0 0 3cqw var(--c), 0 0 9cqw color-mix(in srgb, var(--c) 70%, transparent); filter: brightness(1.12); }
.sg[data-style="lightbox"] .ch { color: var(--on-c); opacity: .35; }
.sg[data-style="lightbox"] .ch.on { opacity: 1; }
.sg[data-style="lightbox"].is-switching .sg__board { animation: boxOn .5s steps(2) 2; }
@keyframes boxOn { 50% { filter: brightness(.6); } }

/* — Acrylic plate on standoffs — */
.sg[data-style="acrylic"] .sg__board { padding: .5em .8em; border-radius: .18em; border: .25cqw solid rgba(255, 255, 255, .9);
  background:
    radial-gradient(circle at .35em .35em, #C7CCD4 0 .08em, #6B7280 .09em .11em, transparent .12em),
    radial-gradient(circle at calc(100% - .35em) .35em, #C7CCD4 0 .08em, #6B7280 .09em .11em, transparent .12em),
    radial-gradient(circle at .35em calc(100% - .35em), #C7CCD4 0 .08em, #6B7280 .09em .11em, transparent .12em),
    radial-gradient(circle at calc(100% - .35em) calc(100% - .35em), #C7CCD4 0 .08em, #6B7280 .09em .11em, transparent .12em),
    linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .25) 60%, rgba(255, 255, 255, .5));
  box-shadow: .3cqw 1.4cqw 2cqw rgba(0, 0, 0, .22), inset 0 .2cqw 0 #fff; backdrop-filter: blur(4px); }
.scene[data-time="night"] .sg[data-style="acrylic"] .sg__board { box-shadow: 0 0 3cqw rgba(255, 255, 255, .45), inset 0 .2cqw 0 #fff; }
.sg[data-style="acrylic"] .ch { color: var(--ca); text-shadow: 0 .03em 0 var(--cd); opacity: 0; filter: blur(.12em); }
.sg[data-style="acrylic"] .ch.on { opacity: 1; filter: none; }

/* hero stage hint */
.hero__stage .scene { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .sg .ch { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* the large stage has a taller building and a button in the top-right corner */
.scene--lg .scene__sun { width: 9cqw; height: 9cqw; top: 2.4cqw; right: 24cqw; }