/* neon.css – LED neon sign and LED clock on the start page. Both stay dark-themed (night objects). */
@font-face { font-family: "Neonderthaw"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/neonderthaw-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Tilt Neon"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/tilt-neon-latin-400-normal.woff2") format("woff2"); }

.nx { --nc: #ff2d95; position: relative; padding: clamp(70px, 8vw, 120px) 0; background: var(--sx-bg); overflow: hidden; }
.nx-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 70px); align-items: center; }
.nx-copy .hlead { margin-bottom: 18px; }
.nx-bullets { margin-bottom: 22px; }
.nx-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 30px; }
.nx-switch { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; border: 1px solid var(--sx-line-strong); background: var(--sx-surface); color: var(--sx-text); font: 700 .9rem/1 "Inter", sans-serif; cursor: pointer; }
.nx-knob { position: relative; width: 46px; height: 26px; border-radius: 13px; background: #2a2535; transition: background .3s; }
.nx-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .3s; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.nx-switch[aria-pressed="true"] .nx-knob { background: var(--nc); box-shadow: 0 0 14px var(--nc); }
.nx-switch[aria-pressed="true"] .nx-knob::after { transform: translateX(20px); }
.nx-colors { display: flex; gap: 8px; }
.nx-colors button { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); background: var(--c); box-shadow: 0 0 10px var(--c); cursor: pointer; padding: 0; transition: transform .2s; }
.nx-colors button[aria-pressed="true"] { transform: scale(1.18); border-color: #fff; }

/* the sign on a wall */
.nx-stage { position: relative; aspect-ratio: 5 / 4; border-radius: 28px; overflow: hidden; display: grid; place-items: center; background: #0a0810; box-shadow: 0 40px 100px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); }
.nx-wall { position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 50% 45%, color-mix(in srgb, var(--nc) calc(var(--lit, 0) * 34%), transparent), transparent 70%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(0,0,0,.55) 46px 50px),
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(0,0,0,.55) 96px 100px),
    linear-gradient(#1b1621, #120f18);
  transition: background .4s; }
.nx-wall::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(0,0,0,.55) 46px 50px); background-position: 0 50px; -webkit-mask: repeating-linear-gradient(0deg, transparent 0 50px, #000 50px 100px); mask: repeating-linear-gradient(0deg, transparent 0 50px, #000 50px 100px); opacity: .6; }
.nx-plate { position: relative; z-index: 1; width: 78%; padding: 6% 6% 7%; border-radius: 22px; text-align: center;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 40%, rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 30px 60px rgba(0,0,0,.35); backdrop-filter: blur(2px); }
.nx-screw { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3f0f7, #8e889c 60%, #4d4757); box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.nx-screw.s1 { left: 16px; top: 16px; } .nx-screw.s2 { right: 16px; top: 16px; } .nx-screw.s3 { left: 16px; bottom: 16px; } .nx-screw.s4 { right: 16px; bottom: 16px; }
.nx-icon { width: 64%; margin: 0 auto -2%; display: block; overflow: visible; }
.nx-icon .tube { fill: none; stroke: #4a3a4c; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; transition: stroke .08s; }
.nx-icon .dot { fill: #4a3a4c; stroke: none; }
.nx-word { font: 400 clamp(3.4rem, 8vw, 7.4rem)/1 "Neonderthaw", cursive; color: #4a3a4c; margin: 0; }
.nx-sub { margin-top: 2%; font: 400 clamp(.85rem, 1.8vw, 1.6rem)/1 "Tilt Neon", sans-serif; letter-spacing: .38em; color: #3a4a50; }
.nx-word span, .nx-sub span { transition: color .08s, text-shadow .08s; }
/* lit tubes: white-hot core, coloured glow */
.nx-word span.on { color: #fff4fb; text-shadow: 0 0 3px #fff, 0 0 8px var(--nc), 0 0 18px var(--nc), 0 0 36px var(--nc), 0 0 70px var(--nc); }
.nx-sub span.on { color: #effcff; text-shadow: 0 0 3px #fff, 0 0 8px #2fd8ff, 0 0 18px #2fd8ff, 0 0 38px #2fd8ff; }
.nx-icon.on .tube { stroke: #fff4fb; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--nc)) drop-shadow(0 0 16px var(--nc)) drop-shadow(0 0 30px var(--nc)); }
.nx-icon.on .dot { fill: #fff4fb; }
.nx-cable { position: absolute; left: 50%; bottom: 0; width: 3px; height: 12%; background: linear-gradient(#222, #111); transform: translateX(-50%); z-index: 0; }

/* LED clock */
.lx { max-width: 520px; }
.lx-glass { position: relative; padding: 22px 26px 18px; border-radius: 20px; background: linear-gradient(180deg, #07070b, #0d0c14); border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -20px 40px rgba(0,0,0,.5), 0 24px 60px rgba(0,0,0,.45); overflow: hidden; }
.lx-glass::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.07) 0 22%, transparent 22.5%); }
.lx-time { display: flex; align-items: center; justify-content: center; gap: 1.4%; --on: #ff2d95; }
.lx-d { position: relative; width: 11%; aspect-ratio: 1 / 1.8; }
.lx-d i { position: absolute; background: rgba(255,255,255,.045); transition: background .15s, box-shadow .15s; }
.lx-d i.h { left: 12%; right: 12%; height: 9%; clip-path: polygon(8% 50%, 22% 0, 78% 0, 92% 50%, 78% 100%, 22% 100%); }
.lx-d i.v { top: 7%; bottom: 53%; width: 16%; clip-path: polygon(50% 0, 100% 12%, 100% 88%, 50% 100%, 0 88%, 0 12%); }
.lx-d i.a { top: 0; } .lx-d i.g { top: 45.5%; } .lx-d i.dd { bottom: 0; }
.lx-d i.f { left: 0; } .lx-d i.b { right: 0; }
.lx-d i.e { left: 0; top: 53%; bottom: 7%; } .lx-d i.c { right: 0; top: 53%; bottom: 7%; }
.lx-d i.on { background: var(--on); box-shadow: 0 0 6px var(--on), 0 0 14px var(--on); }
.lx-d.sm { width: 7.2%; }
.lx-col { display: flex; flex-direction: column; gap: 22%; height: 60%; justify-content: center; }
.lx-col b { width: 9px; height: 9px; border-radius: 50%; background: var(--on); box-shadow: 0 0 8px var(--on), 0 0 16px var(--on); }
.lx-col.off b { background: rgba(255,255,255,.06); box-shadow: none; }
.lx-date { margin-top: 14px; text-align: center; font: 400 clamp(.85rem, 1.3vw, 1.05rem)/1 "Tilt Neon", sans-serif; letter-spacing: .28em; text-transform: uppercase; color: #bff3ff; text-shadow: 0 0 6px #2fd8ff, 0 0 14px rgba(47,216,255,.6); }
.lx-cap { margin: 10px 4px 0; font-size: .85rem; color: var(--sx-muted); }

@media (max-width: 1000px) { .nx-grid { grid-template-columns: 1fr; } .nx-stage { order: -1; } .lx { max-width: none; } }
@media (prefers-reduced-motion: reduce) { .nx-word span, .nx-sub span, .nx-icon .tube { transition: none; } }

/* neon as the third workshop scene */
.nx-scene { --nc: #ff2d95; display: grid; place-items: center; overflow: hidden; }
.nx-scene .nx-wall { border-radius: inherit; }
.nx-scene .nx-plate { width: 62%; margin-top: -9%; padding: 5% 5% 6%; }
.nx-scene .nx-word { font-size: clamp(2.6rem, 6vw, 5.6rem); }
.nx-scene .nx-sub { font-size: clamp(.7rem, 1.3vw, 1.2rem); }
.nx-scene .nx-cable { left: 50%; bottom: 0; height: 18%; }
.nx-clock { position: absolute; right: 5%; bottom: 9%; width: 36%; z-index: 2; }
.nx-clock .lx { max-width: none; }
.nx-clock .lx-glass { padding: 12px 14px 10px; border-radius: 14px; }
.nx-clock .lx-date { margin-top: 8px; font-size: clamp(.55rem, .8vw, .72rem); letter-spacing: .2em; }
.nx-clock .lx-col b { width: 6px; height: 6px; }
.ws-detail .nx-ctrl { margin: 0 0 16px; }
@media (max-width: 1000px) { .nx-scene .nx-plate { width: 74%; margin-top: -14%; } .nx-clock { width: 46%; bottom: 6%; } }
.nx-switch { --nc: #ff2d95; }

/* ---------- the neon night scene (workshop 03): wall light, haze, hanging acrylic, wet floor, dust, effects */
@property --nc { syntax: "<color>"; inherits: true; initial-value: #ff2d95; }
.nx-scene { perspective: 1100px; }
.nx-scene .nx-wall { transition: none; }
.nx-scene .nx-wall::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--lit, 0); transition: opacity .12s;
  background: radial-gradient(52% 46% at 50% 38%, color-mix(in srgb, var(--nc) 70%, transparent), color-mix(in srgb, var(--nc) 20%, transparent) 55%, transparent 82%); mix-blend-mode: screen; }
.nx-haze { position: absolute; inset: 0; pointer-events: none; opacity: calc(var(--lit, 0) * .9); transition: opacity .3s; }
.nx-haze i { position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--nc) 30%, transparent), transparent); animation: nx-drift 14s ease-in-out infinite alternate; }
.nx-haze i:first-child { left: -10%; top: 5%; }
.nx-haze i:last-child { right: -12%; top: 20%; animation-duration: 18s; animation-delay: -6s; }
@keyframes nx-drift { to { transform: translate(14%, -8%) scale(1.2); } }

.nx-tilt { position: relative; z-index: 1; width: 70%; margin-top: -13%; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; }
/* two thin steel wires hold the plate */
.nx-tilt::before, .nx-tilt::after { content: ""; position: absolute; bottom: 100%; width: 1px; height: 400px; background: linear-gradient(transparent, rgba(220, 220, 235, .45)); }
.nx-tilt::before { left: 9%; } .nx-tilt::after { right: 9%; }
.nx-scene .nx-plate { width: 100%; margin: 0;
  -webkit-box-reflect: below 3.2vw linear-gradient(transparent 30%, rgba(0, 0, 0, .5)); }
/* a reflection glides over the acrylic when the pointer moves */
.nx-scene .nx-plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .13) 46%, rgba(255, 255, 255, .03) 52%, transparent 60%) var(--gx, 110%) 0 / 260% 100% no-repeat; transition: background-position .5s; }

/* the spark that traces the tubes before they ignite */
.nx-icon .spark { fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: .045 1.2; stroke-dashoffset: 1.05; opacity: 0; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px var(--nc)); }
.nx-scene.draw .nx-icon .spark { opacity: 1; animation: nx-spark 1.05s cubic-bezier(.5, 0, .5, 1) forwards; }
@keyframes nx-spark { 90% { opacity: 1; } to { stroke-dashoffset: -.2; opacity: 0; } }
/* the moment everything is on: one flash of light */
.nx-scene.boom .nx-tilt { animation: nx-boom .7s ease-out; }
@keyframes nx-boom { 0% { filter: brightness(2.1) saturate(1.3); } 100% { filter: none; } }

/* wet floor in front of the wall: the sign is mirrored in it */
.nx-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--nc) calc(var(--lit, 0) * 22%), transparent) 0, transparent 3px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, rgba(8, 6, 14, .1), rgba(4, 3, 8, .82));
  border-top: 1px solid rgba(255, 255, 255, .06); animation: nx-ripple 5s linear infinite; }
@keyframes nx-ripple { to { background-position: 0 0, 0 24px, 0 0; } }

/* dust drifting through the light */
.nx-dust { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: var(--lit, 0); transition: opacity .8s; }
.nx-dust i { position: absolute; left: calc(6% + var(--i) * 6.4%); bottom: 26%; width: 3px; height: 3px; border-radius: 50%; background: color-mix(in srgb, var(--nc) 55%, #fff); box-shadow: 0 0 6px var(--nc); opacity: 0; animation: nx-dust calc(7s + var(--i) * .45s) linear calc(var(--i) * -1.1s) infinite; }
.nx-dust i:nth-child(3n) { width: 2px; height: 2px; }
@keyframes nx-dust { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .8; } 85% { opacity: .5; } 100% { transform: translate(24px, -260px); opacity: 0; } }

/* effects */
.nx-scene.m-pulse .nx-icon, .nx-scene.m-pulse .nx-word, .nx-scene.m-pulse .nx-sub { animation: nx-pulse 2.2s ease-in-out infinite; }
@keyframes nx-pulse { 50% { opacity: .38; } }
.nx-scene.m-rgb { animation: nx-rgb 6s linear infinite; }
@keyframes nx-rgb { 0%, 100% { --nc: #ff2d95; } 20% { --nc: #b45cff; } 40% { --nc: #2fd8ff; } 60% { --nc: #39ff88; } 80% { --nc: #ffb938; } }
.nx-scene .nx-word { white-space: nowrap; }

/* controls: effect buttons and "your text" */
.nx-ctrl2 { margin-top: -6px; }
.nx-modes { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--sx-line-strong); background: var(--sx-surface); }
.nx-modes button { padding: 7px 14px; border: 0; border-radius: 999px; background: none; color: var(--sx-muted); font: 700 .82rem/1 "Inter", sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.nx-modes button[aria-pressed="true"] { background: linear-gradient(90deg, #ff2d95, #b45cff); color: #fff; box-shadow: 0 0 14px rgba(255, 45, 149, .45); }
.nx-own { flex: 1 1 200px; }
.nx-own input { width: 100%; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--sx-line-strong); background: var(--sx-surface); color: var(--sx-text); font: 600 .92rem/1.2 "Inter", sans-serif; outline: none; transition: border-color .2s, box-shadow .2s; }
.nx-own input:focus { border-color: #ff2d95; box-shadow: 0 0 0 3px rgba(255, 45, 149, .2), 0 0 18px rgba(255, 45, 149, .25); }
@media (max-width: 1000px) { .nx-tilt { width: 76%; margin-top: -16%; } .nx-scene .nx-plate { width: 100%; margin-top: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nx-haze i, .nx-floor, .nx-dust i, .nx-scene.m-pulse *, .nx-scene.m-rgb, .nx-scene.boom .nx-tilt { animation: none !important; }
}

/* lighthouse: tower in the chosen colour, lantern and beams in warm white; the beams sweep left and right */
.nx-icon { width: 70%; }
.nx-icon .tube { stroke-width: 2.4; }
.nx-icon .cone { opacity: 0; transition: opacity .3s; }
.nx-icon.on .tube.warm { stroke: #fff8e8; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #ffcf7a) drop-shadow(0 0 16px #ffb938); }
.nx-icon.on .dot.warm { fill: #fff8e8; }
.nx-icon .wave { stroke-width: 3; }
.nx-icon.on .beam { animation: nx-beam 3.2s ease-in-out infinite; }
.nx-icon.on .beam.r { animation-delay: -1.6s; }
.nx-icon.on .cone { opacity: 1; }
@keyframes nx-beam { 0%, 100% { opacity: .12; } 45%, 55% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nx-icon.on .beam { animation: none; opacity: .8; } }