/* Christmas lights site: hero scene, designer, before/after. Shell lives in /landing/niche/niche.css. */

:root {
  --warm: #ffd486;
  --warm-glow: #ffb54d;
  --multi-1: #ff5252;
  --multi-2: #42e08a;
  --multi-3: #5aa9ff;
  --multi-4: #ffc53d;
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #0b1630 0%, #18244a 55%, #0a1325 100%); }
.hero-grid { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(0, 1.35fr); align-items: center; gap: 0 var(--n-space-6); width: min(1320px, 100% - 32px); margin-inline: auto; padding: var(--n-space-7) 0 var(--n-space-6); }
.hero-copy { position: relative; z-index: 2; padding: 12px 0; }
.hero-grid > * { min-width: 0; }
.hero-copy { max-width: 36rem; }
.hero-copy h1 { font-size: clamp(2.125rem, 1.25rem + 2.5vw, 3.5rem); line-height: 1.03; letter-spacing: -.028em; margin-bottom: var(--n-space-4); }
.hero-copy .n-btn-row { margin-top: var(--n-space-5); }
.hero-copy .n-lede { color: #d6dcea; max-width: 34em; margin-bottom: 0; }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--n-space-2) var(--n-space-4); margin: var(--n-space-5) 0 0; font-size: var(--n-fs-small); color: var(--n-muted); padding: 0; list-style: none; }
.hero-meta li::before { content: "\2713"; color: var(--n-accent); margin-right: 6px; font-weight: 800; }
.hero-stage { position: relative; margin-right: calc(-1 * max(16px, (100vw - 1320px) / 2)); }
.hero-frame { position: relative; overflow: hidden; border-radius: 18px 0 0 18px; aspect-ratio: 1200 / 760; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%); mask-image: linear-gradient(90deg, transparent 0, #000 9%); }
.hero-svg { display: block; width: 100%; height: 100%; }
.hero-tag { position: absolute; top: 12px; right: 14px; z-index: 3; font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: #e9edf6; background: rgba(5, 10, 24, .62); padding: 5px 10px; border-radius: 999px; }
.hero-overlay { position: absolute; left: 10%; right: 12px; bottom: 12px; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 10px; pointer-events: none; }
.hero-overlay > * { pointer-events: auto; }
.snow-chip { background: rgba(6, 11, 26, .72); }
.hero-controls { position: relative; margin: 12px 16px 0 7%; z-index: 3; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px; border-radius: 16px; background: rgba(6, 11, 26, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--n-line); }
.hero-controls .n-seg { gap: 6px; }
.hero-controls .n-chip { font-size: .88rem; padding: 6px 12px; }

.lights-switch { box-shadow: 0 4px 18px rgba(0, 0, 0, .45); }
.lights-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 16px 6px 8px; border-radius: 999px; border: 2px solid var(--warm); background: #1a1405; color: #fff4dc; font: inherit; font-weight: 800; letter-spacing: .02em; cursor: pointer; }
.lights-switch .knob { position: relative; width: 46px; height: 28px; border-radius: 999px; background: #3a3f52; transition: background-color .2s; flex: none; }
.lights-switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #c8cbd6; transition: transform .2s, background-color .2s, box-shadow .2s; }
.lights-switch[aria-pressed="true"] .knob { background: #7a5a16; }
.lights-switch[aria-pressed="true"] .knob::after { transform: translateX(18px); background: var(--warm); box-shadow: 0 0 12px var(--warm-glow); }
.lights-switch[aria-pressed="false"] { border-color: #c3d2f2; background: rgba(12, 20, 42, .9); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; padding: 22px 0 18px; }
  .hero-copy { padding: 0 0 14px; }
  .hero-stage { margin: 0 -16px; }
  .hero-frame { border-radius: 0; aspect-ratio: 1 / .7; -webkit-mask-image: none; mask-image: none; }
  /* Crop to the house on narrow screens instead of shrinking the whole street. */
  .hero-svg { position: absolute; bottom: 0; left: -44%; width: 160%; max-width: none; height: auto; }
  .hero-controls { margin: 8px 16px 0; padding: 8px; background: var(--n-surface); }
  .hero-overlay { left: 12px; bottom: 10px; }
}
@media (max-width: 600px) {
  .hero-grid { padding-top: var(--n-space-4); }
  .hero-copy h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2rem); margin-bottom: var(--n-space-2); }
  .hero-copy .n-eyebrow { margin-bottom: var(--n-space-2); font-size: .7rem; letter-spacing: .08em; }
  .hero-copy .n-lede { font-size: .95rem; line-height: 1.5; }
  .hero-copy .n-btn-row { flex-wrap: nowrap; gap: var(--n-space-2); margin-top: var(--n-space-4); }
  .hero-copy .n-btn { padding: 10px 12px; font-size: .9rem; flex: 1 1 auto; white-space: nowrap; min-height: 46px; }
  .hero-meta { display: none; }
  .hero-tag { right: auto; left: 12px; }
}
@media (max-width: 420px) {
  .hero-controls .n-chip { font-size: .82rem; padding: 6px 10px; }
}

/* Scene states */
.scene .sky-night, .scene .stars, .scene .veil, .scene .wash { transition: opacity 1.1s ease; }
.scene .sky-night { opacity: 0; }
.scene .stars { opacity: .25; }
.scene .veil { opacity: 0; }
.scene .wash { opacity: 0; }
.scene .glass-glow { opacity: .42; transition: opacity .8s ease; }
.scene .rim, .scene .moonwash { transition: opacity 1.1s ease; }
.scene .rim { opacity: .5; }
.scene[data-lights="on"] .rim { opacity: .12; }
.scene[data-lights="on"] .moonwash { opacity: .35; }
.scene[data-lights="on"] .sky-night { opacity: 1; }
.scene[data-lights="on"] .stars { opacity: 1; }
.scene[data-lights="on"] .veil { opacity: .4; }
.scene[data-lights="on"] .wash { opacity: .6; }
.scene[data-lights="on"] .glass-glow { opacity: 1; }
.scene[data-lights="off"] .strand, .scene[data-lights="off"] .deco { opacity: 0; }

/* Strand rendering shared by hero, templates and photo overlay */
.strand use, .strand path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.strand { --c1: var(--warm); --c2: var(--warm); --c3: var(--warm); --c4: var(--warm); --glow: var(--warm-glow); }
[data-palette="multi"] .strand, .strand[data-palette="multi"], [data-style="full"] .strand[data-set="tree"], [data-style="colorful"] .strand {
  --c1: var(--multi-1); --c2: var(--multi-2); --c3: var(--multi-3); --c4: var(--multi-4); --glow: #ffe9c7;
}
.strand .b1 { stroke: var(--c1); }
.strand .b2 { stroke: var(--c2); }
.strand .b3 { stroke: var(--c3); }
.strand .b4 { stroke: var(--c4); }
.strand .g { stroke: var(--glow); opacity: .16; }
.strand .g2 { stroke: var(--glow); opacity: .32; }

.hero-svg .b { stroke-width: 6.5; stroke-dasharray: 0 56; }
.hero-svg .b2 { stroke-dashoffset: -14; }
.hero-svg .b3 { stroke-dashoffset: -28; }
.hero-svg .b4 { stroke-dashoffset: -42; }
.hero-svg .g { stroke-width: 22; }
.hero-svg .g2 { stroke-width: 8; }
@media (min-width: 901px) {
  .hero-svg .g { stroke-width: 34; opacity: .3; filter: url(#bloom); }
  .hero-svg .g2 { stroke-width: 10; opacity: .4; }
}

.scene .strand, .scene .deco { display: none; }
.scene[data-style="classic"] [data-set="eaves"],
.scene[data-style="elegant"] :is([data-set="eaves"], [data-set="peaks"], [data-set="ridge"]),
.scene[data-style="colorful"] :is([data-set="eaves"], [data-set="peaks"], [data-set="shrubs"]),
.scene[data-style="full"] :is([data-set="eaves"], [data-set="peaks"], [data-set="ridge"], [data-set="tree"], [data-set="shrubs"], [data-set="garland"]) { display: inline; }

.tpl-svg .strand, .tpl-svg .deco { display: none; }
.tpl-svg[data-sets~="roofline"] [data-set="eaves"],
.tpl-svg[data-sets~="peaks"] [data-set="peaks"],
.tpl-svg[data-sets~="trees"] :is([data-set="tree"], [data-set="shrubs"]),
.tpl-svg[data-style="full"][data-sets~="trees"] [data-set="garland"] { display: inline; }

.reveal-path { transition: stroke-dashoffset .55s linear; }

/* Snow */
.snow { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.snow i { position: absolute; top: -10px; width: var(--s, 4px); height: var(--s, 4px); border-radius: 50%; background: #fff; opacity: var(--o, .75); animation: fall var(--d, 9s) linear var(--delay, 0s) infinite; will-change: transform; }
.snow.is-paused i { animation-play-state: paused; }
@keyframes fall {
  from { transform: translate3d(0, -10px, 0); }
  to { transform: translate3d(var(--drift, 20px), 110vh, 0); }
}
@media (prefers-reduced-motion: reduce) { .snow { display: none; } }

/* ---------- Trust strip ---------- */
.trust { border-block: 1px solid var(--n-line); background: var(--n-bg2); }
.trust ul { list-style: none; margin: 0; padding: var(--n-space-4) 0; display: flex; flex-wrap: wrap; gap: var(--n-space-3) var(--n-space-6); justify-content: center; font-weight: 600; color: var(--n-muted); font-size: .95rem; line-height: 1.4; }
.trust li { display: block; padding-left: 26px; position: relative; }
.trust svg { position: absolute; left: 0; top: .1em; width: 18px; height: 18px; color: var(--n-accent); }
@media (max-width: 600px) {
  .trust ul { display: grid; justify-content: start; gap: var(--n-space-2); font-size: .92rem; }
}

/* ---------- Designer ---------- */
.dmh { display: grid; gap: 22px; }
.dmh-progress { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; counter-reset: s; }
.dmh-progress li { flex: 1; counter-increment: s; font-size: .85rem; font-weight: 700; color: var(--n-muted); border-top: 4px solid var(--n-line); padding-top: 8px; }
.dmh-progress li::before { content: counter(s) ". "; }
.dmh-progress li[aria-current="step"] { color: var(--n-ink); border-color: var(--n-accent); }
.dmh-progress li.is-done { border-color: color-mix(in srgb, var(--n-accent) 55%, var(--n-line)); }
.dmh-panel:focus { outline: none; }
.dmh-start { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.dmh-start .n-card { display: grid; gap: 12px; align-content: start; }
.privacy-note { font-size: .88rem; color: var(--n-muted); background: var(--n-bg); border-radius: 10px; padding: 12px 14px; border: 1px solid var(--n-line); }
.privacy-note strong { color: var(--n-ink); }
.tpl-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tpl-pick label { display: grid; gap: 6px; justify-items: center; padding: 10px 6px; min-height: 44px; border-radius: 12px; border: 2px solid var(--n-line); background: var(--n-bg); cursor: pointer; font-weight: 700; font-size: .9rem; text-align: center; }
.tpl-pick label:has(input:checked) { border-color: var(--n-accent); background: color-mix(in srgb, var(--n-accent) 14%, var(--n-bg)); }
.tpl-pick label:has(input:focus-visible) { outline: 3px solid var(--n-focus); outline-offset: 2px; }
.tpl-pick svg { width: 100%; max-width: 92px; height: auto; }
.tpl-pick input { position: absolute; opacity: 0; pointer-events: none; }

.dmh-work { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .dmh-work { grid-template-columns: 1fr; } }
.dmh-stage { position: relative; border-radius: 16px; overflow: hidden; background: #070d1d; border: 1px solid var(--n-line); }
.dmh-stage .stage-tag { position: absolute; top: 10px; left: 10px; z-index: 3; font-size: .74rem; font-weight: 700; background: rgba(5, 10, 24, .75); color: #eef1f8; padding: 5px 10px; border-radius: 999px; pointer-events: none; }
.tpl-svg { display: block; width: 100%; height: auto; }
.trace-box { position: relative; line-height: 0; }
.trace-box img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; filter: brightness(.62) saturate(.85); }
.trace-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.trace-svg:focus-visible { outline: 3px solid var(--n-focus); outline-offset: -3px; }
.trace-svg .handle { fill: #fff; stroke: #0a1325; cursor: grab; }
.trace-svg .handle.is-sel { fill: var(--n-focus); }
.trace-svg .hit { fill: transparent; }
.trace-svg .guide { fill: none; stroke: rgba(255, 255, 255, .55); stroke-dasharray: 6 6; }
.dmh-tools { display: grid; gap: 18px; }
.tool-group { display: grid; gap: 8px; }
.tool-group > .n-label { font-weight: 700; font-size: .9rem; color: var(--n-muted); }
.trace-keys { display: grid; grid-template-columns: repeat(3, minmax(44px, 1fr)); gap: 6px; max-width: 220px; }
.trace-keys button { min-height: 44px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.thumbs li { position: relative; }
.thumbs img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; border: 1px solid var(--n-line); display: block; }
.thumbs button { position: absolute; top: -8px; right: -8px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--n-bg); background: var(--n-surface2); color: var(--n-ink); font: 700 1rem/1 system-ui, sans-serif; cursor: pointer; }
.thumbs button::after { content: ""; position: absolute; inset: -6px; }
.file-btn { position: relative; }
.file-btn input { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; }
.file-btn:has(input:focus-visible) { outline: 3px solid var(--n-focus); outline-offset: 3px; }
.design-summary { background: var(--n-bg); border: 1px solid var(--n-line); border-radius: 12px; padding: 12px 14px; font-size: .92rem; color: var(--n-muted); }
.design-summary strong { color: var(--n-ink); }

/* ---------- Before / after mockup ---------- */
.ba { position: relative; max-width: 860px; border-radius: 16px; overflow: hidden; border: 1px solid var(--n-line); background: #070d1d; }
.ba-layer { display: block; }
.ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--cut, 50%)); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .6); pointer-events: none; }
.ba-labels { position: absolute; inset: 10px 10px auto; display: flex; justify-content: space-between; pointer-events: none; }
.ba-labels span { font-size: .75rem; font-weight: 800; background: rgba(5, 10, 24, .75); padding: 4px 10px; border-radius: 999px; }
.ba-range { display: block; width: 100%; max-width: 860px; margin-top: 12px; min-height: 44px; accent-color: var(--n-accent); }

.xsell { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.xsell .n-card { display: grid; gap: 6px; }
.xsell .kicker { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--n-accent); }

.quote-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .quote-wrap { grid-template-columns: 1fr; } }
.contact-direct { display: grid; gap: 10px; margin-top: 18px; }
.contact-direct a { justify-content: flex-start; }