/* Cinematic / Neon: a variant of cinematic, after instalanding.ai's neon-glass-app-landing-page
   (MIT). Blue-black frosted glass, lit at the edges: every panel is a dark pane with a blue
   wash from the top-left, a cyan and violet wash from the bottom-right, a blur, and a
   1px shine along two opposite corners. Two big blurred pools of colour sit fixed behind the
   page so the glass has something to blur. The warm gold of the base becomes one cold blue,
   the stage lights become blue and cyan, headings go lowercase and lighter, and on showpiece a
   comet races once round the hero's frame. Fonts stay cinematic's (Archivo, JetBrains Mono).
   Loads after cinematic.css and overrides it. Suits nightclubs, music venues, car dealers,
   tech repair and premium services. */

@property --sweep { syntax: "<angle>"; inherits: false; initial-value: -60deg; }

:root[data-variant="cinematic-neon"] {
  /* neutrals: the hue warms as they lighten */
  --n-0: hsl(226 45% 3.5%);
  --n-1: hsl(224 42% 6.5%);
  --n-2: hsl(222 36% 11%);
  --n-3: hsl(220 28% 20%);
  --n-4: hsl(217 24% 70%);
  --n-5: hsl(215 38% 86%);
  --n-6: hsl(214 45% 97%);
  /* one accent family */
  --blue: hsl(218 95% 56%);
  --blue-hi: hsl(213 100% 76%);
  --blue-tint: hsl(218 95% 56% / 0.12);

  --bg: var(--n-0);
  --bg-soft: var(--n-1);
  --surface: var(--n-1);
  --ink: var(--n-6);
  --ink-2: var(--n-5);
  --muted: var(--n-4);
  --line: hsl(220 30% 17%);
  --accent: var(--blue-hi);
  --primary: hsl(221 88% 50%);
  --primary-ink: #ffffff;
  --glass: hsl(224 42% 6.5% / 0.86);
  --glass-border: hsl(218 60% 60% / 0.2);
  --beam: 84 150 255;
  --hair: rgb(140 180 255 / 0.12);

  --display-weight: 500;
  --display-tracking: -0.03em;

  --reveal-y: 12px; --nav-lift: 0 14px 34px -14px rgb(0 20 80 / 0.7); --hero-in: flicker;
  --shadow: 0 24px 50px -26px rgb(0 8 40 / 0.9), 0 0 0 1px hsl(218 80% 60% / 0.14) inset;

  --slab-bg: var(--n-1);
  --footer-bg: var(--n-1);

  --ph-1: radial-gradient(80% 60% at 30% 20%, #22335c, #121a33 60%, #080c1a);
  --ph-2: radial-gradient(70% 60% at 70% 80%, rgb(40 200 230 / 0.28), transparent 60%), linear-gradient(160deg, #1a2542, #0a0f20);
  --ph-3: radial-gradient(80% 60% at 60% 30%, #1a3a52, #0e202f 60%, #070d14);
  --ph-4: radial-gradient(60% 50% at 30% 70%, rgb(130 100 255 / 0.3), transparent 60%), linear-gradient(200deg, #1b2342, #080c1a);
  --ph-5: repeating-linear-gradient(118deg, rgb(150 190 255 / 0.04) 0 2px, transparent 2px 8px), linear-gradient(160deg, #1b2a4d, #0b1022);
  --ph-6: radial-gradient(80% 60% at 50% 40%, #243a66, #101a33 60%, #080c18);

  --face: transparent;
  --cn-frame: none;
  --nz-wash-a: radial-gradient(120% 120% at 0% 0%, rgb(43 110 249 / 0.17), transparent 58%);
  --nz-wash-b: radial-gradient(120% 120% at 100% 100%, rgb(40 200 230 / 0.1), rgb(120 80 240 / 0.07) 42%, transparent 68%);
  --nz-glass: var(--nz-wash-a), var(--nz-wash-b), linear-gradient(var(--glass), var(--glass));
  --nz-ring: 12%;
  --nz-ring-b: 62%;

  /* the page: two big pools of light, fixed, behind everything */
  & body { background: var(--bg); }
  & body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(70vmax 70vmax at 88% 12%, rgb(43 110 249 / 0.2), transparent 62%),
      radial-gradient(65vmax 65vmax at 8% 78%, rgb(30 200 235 / 0.12), transparent 62%);
  }

  /* headings: lowercase, lighter, a cold glow */
  & h1, & h2, & h3, & h4, & .wordmark { text-transform: lowercase; }
  & h1, & h2 { text-shadow: 0 0 40px rgb(var(--beam) / 0.2); }
  & .cn-copy h1 { font-weight: 500; text-shadow: 0 0 56px rgb(var(--beam) / 0.32); }
  & .footer-name, & .brand-name { font-weight: 600; }
  & .eyebrow { color: var(--blue-hi); }
  & :focus-visible { outline-color: var(--blue-hi); }

  /* glass panels */
  & .card, & .plan, & .footer-card, & .nav, & .svc-tile, & .poster {
    position: relative;
    background: var(--nz-glass);
    border: 0;
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  }
  & .nav { position: sticky; --nz-ring: 24%; --nz-ring-b: 74%; border-bottom: 0; box-shadow: 0 1px 0 var(--hair); }
  & .card, & .plan, & .svc-tile, & .poster { border-radius: 18px; }
  & .footer-card { border-radius: 20px; padding-bottom: 0; }
  & .plan.featured, & .poster.featured {
    background: radial-gradient(120% 120% at 0% 0%, rgb(43 110 249 / 0.3), transparent 58%), var(--nz-wash-b), linear-gradient(var(--glass), var(--glass));
    box-shadow: 0 0 46px -14px rgb(43 110 249 / 0.6), inset 0 0 0 1px hsl(218 95% 62% / 0.5);
  }
  /* the corner shine: a conic ring clipped to a 1px border, top-right and bottom-left */
  & :is(.card, .plan, .footer-card, .nav, .svc-tile, .poster)::before,
  & :is(.card, .plan, .footer-card, .nav, .svc-tile, .poster)::after {
    content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
  & :is(.card, .plan, .footer-card, .nav, .svc-tile, .poster)::before {
    background: conic-gradient(from 0deg, transparent 0, rgb(170 205 255 / 0.85) var(--nz-ring), transparent calc(var(--nz-ring) + 14%));
  }
  & :is(.card, .plan, .footer-card, .nav, .svc-tile, .poster)::after {
    background: conic-gradient(from 0deg, transparent 0 calc(var(--nz-ring-b) - 14%), rgb(90 220 245 / 0.65) var(--nz-ring-b), transparent calc(var(--nz-ring-b) + 14%));
  }

  & .nav-menu ul { background: var(--n-1); border: 1px solid var(--glass-border); box-shadow: var(--shadow); }
  & .nav-menu summary { border-color: var(--glass-border); background: var(--blue-tint); }
  & .nav-menu a:hover { background: var(--blue-tint); }
  & .nav-links a:hover, & .nav-phone { color: var(--blue-hi); }
  & .brand-mark { background: var(--primary); color: #fff; box-shadow: 0 0 22px -2px rgb(43 110 249 / 0.8); }

  /* buttons and pills */
  & .btn-primary {
    background: linear-gradient(180deg, hsl(219 90% 54%), hsl(223 85% 45%));
    color: #fff;
    box-shadow: 0 0 28px -6px rgb(43 110 249 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.28);
  }
  & .btn-primary:hover { box-shadow: 0 0 40px -4px rgb(43 110 249 / 0.95), inset 0 1px 0 rgb(255 255 255 / 0.28); }
  & .btn-ghost { border-color: hsl(218 60% 70% / 0.3); background: var(--blue-tint); }
  & .btn-ghost:hover { border-color: var(--blue-hi); }
  & .pill { background: var(--blue-tint); border-color: hsl(218 80% 62% / 0.3); color: var(--ink-2); }
  & .plan-flag { color: var(--blue-hi); }

  /* cards and details in blue */
  & .card, & .footer-card { box-shadow: var(--shadow); }
  & .service-foot { border-top-color: var(--hair); }
  & .group-title { border-top-color: rgb(var(--beam) / 0.5); }
  & .stat { border-top-color: rgb(var(--beam) / 0.4); }
  & .stat dd { text-shadow: 0 0 24px rgb(var(--beam) / 0.4); }
  & .about-media, & .gallery-item, & .hero-media, & .map { border-color: var(--hair); box-shadow: 0 30px 60px -30px rgb(0 8 40 / 0.9); }
  & .about-media { border-radius: 18px; }
  & .ph-label { background: hsl(226 45% 3.5% / 0.85); color: var(--blue-hi); border-color: var(--glass-border); }
  & .highlights { background: var(--blue-tint); }
  & .pricing-slab {
    background: radial-gradient(50% 70% at 50% 0%, rgb(43 110 249 / 0.2), transparent 70%), var(--slab-bg);
    border-color: var(--hair);
  }
  & .plan { background: var(--nz-glass); }
  & .faq-item, & .faq-item:first-child, & .hours th, & .hours td { border-color: var(--hair); }
  & .field input, & .field textarea { background: hsl(226 45% 3.5% / 0.7); border-color: hsl(218 40% 30% / 0.7); }
  & .field input:focus, & .field textarea:focus { outline-color: var(--blue-hi); }
  & .book-option, & .book-time, & .book-day { background: hsl(226 45% 3.5% / 0.6); border-color: hsl(218 40% 30% / 0.7); }
  & .book-option:has(input:checked), & .book-time:has(input:checked), & .book-day[aria-pressed="true"] { border-color: var(--blue-hi); }
  & .callbar { background: hsl(226 45% 3.5% / 0.9); border-top-color: var(--hair); }
  & .wordmark { background: linear-gradient(180deg, rgb(var(--beam) / 0.5), rgb(var(--beam) / 0.02) 85%); -webkit-background-clip: text; background-clip: text; }

  /* layouts: the credits go lowercase and light like the headings, the lit review a pane of glass */
  & .credit-name { text-transform: lowercase; font-weight: 600; letter-spacing: 0.06em; }
  & .services-credits .group-title { text-transform: lowercase; }
  & .reel-frame { box-shadow: inset 0 0 0 1px var(--hair); }
  & .reel-frame::before, & .reel-frame::after { background: repeating-linear-gradient(90deg, transparent 0 9px, hsl(214 45% 97% / 0.14) 9px 21px, transparent 21px 30px); }
  & .reel-frame:hover { box-shadow: inset 0 0 0 1px var(--blue-hi), 0 0 46px -12px rgb(var(--beam) / 0.5); }
  & .spot { border-radius: 18px; border-color: var(--hair); }
  & .spot.on { background: var(--nz-wash-a), var(--nz-wash-b), linear-gradient(var(--glass), var(--glass)); border-color: hsl(218 80% 62% / 0.55); }
  /* bento: panes of glass, the first one lit blue, the diamonds small lamps */
  & .svc-bento { gap: 16px; }
  & .svc-tile:first-child { background: radial-gradient(120% 120% at 0% 0%, rgb(43 110 249 / 0.3), transparent 58%), var(--nz-wash-b), linear-gradient(var(--glass), var(--glass)); box-shadow: 0 0 46px -14px rgb(43 110 249 / 0.6); }
  & .svc-dia { background: var(--blue-hi); box-shadow: 0 0 12px 1px rgb(var(--beam) / 0.8); }
  & .svc-name { text-transform: lowercase; font-weight: 600; }
  & .svc-price { color: var(--blue-hi); text-shadow: 0 0 22px rgb(var(--beam) / 0.45); }
  & .svc-foot { border-top: 1px solid var(--hair); }
  & .svc-tile:hover { box-shadow: 0 0 40px -10px rgb(var(--beam) / 0.5); }

  /* posters: tall panes, the price a big cold glow */
  & .posters { gap: 18px; }
  & .poster-flag { color: var(--blue-hi); }
  & .poster-name { font-weight: 600; }
  & .poster-amount { font-weight: 500; letter-spacing: -0.05em; color: var(--ink); text-shadow: 0 0 44px rgb(var(--beam) / 0.5); }
  & .poster.featured .poster-amount { color: var(--blue-hi); }
  & .poster-period { opacity: 1; color: var(--ink-2); }
  & .poster-includes li::before { color: var(--blue-hi); text-shadow: 0 0 10px rgb(var(--beam) / 0.8); }

  /* signs: neon tubes in three colours, a double glow, the outline thin and the text lowercase */
  & .sign { --sign: var(--blue-hi); }
  & .sign:nth-child(3n + 2) { --sign: hsl(186 90% 66%); }
  & .sign:nth-child(3n + 3) { --sign: hsl(262 100% 82%); }
  & .sign-tube {
    border-width: 2px; border-radius: 999px; text-transform: lowercase; font-weight: 500; letter-spacing: 0;
    background: color-mix(in srgb, var(--sign) 7%, transparent);
    text-shadow: 0 0 6px color-mix(in srgb, var(--sign) 70%, transparent), 0 0 22px color-mix(in srgb, var(--sign) 60%, transparent);
    box-shadow: 0 0 6px 0 color-mix(in srgb, var(--sign) 70%, transparent), 0 0 30px -2px color-mix(in srgb, var(--sign) 50%, transparent), inset 0 0 16px -4px color-mix(in srgb, var(--sign) 60%, transparent);
  }

  & .carousel-btn { border-color: hsl(218 60% 70% / 0.3); background: var(--blue-tint); }
  & .carousel-btn:hover:not(:disabled) { border-color: var(--blue-hi); color: var(--blue-hi); }

  /* ---------- the hero: the stage lights become a cold glow ---------- */
  & .cn-hero .cn-stage::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(55% 55% at 50% 0%, rgb(43 110 249 / 0.3), transparent 70%),
      radial-gradient(40% 40% at 12% 90%, rgb(30 200 235 / 0.14), transparent 70%),
      radial-gradient(40% 40% at 90% 70%, rgb(120 90 250 / 0.12), transparent 70%);
  }
  & .cn-b3 { --beam: 60 205 240; }
  & .cn-beam i { background: conic-gradient(from 0deg at 50% -5%, transparent 0 45%, rgb(var(--beam) / 0.22) 49%, rgb(var(--beam) / 0.4) 50%, rgb(var(--beam) / 0.22) 51%, transparent 55% 100%); }
  & .cn-dust { opacity: 0.45; }
  & .cn-frame { border-radius: 22px 22px 0 0; border-color: hsl(218 80% 65% / 0.2); }
  & .cn-frame::before {
    content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none;
    background: conic-gradient(from 0deg, transparent 0, rgb(170 205 255 / 0.85) 14%, transparent 30%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
  & .cn-r1 { fill: #0e1630; }
  & .cn-r2 { fill: #080d1e; }
  & .cn-stage::after { background: linear-gradient(180deg, transparent, hsl(226 45% 3.5% / 0.6) 55%, var(--bg)); }

  /* showpiece: a comet races once round the hero's frame */
  @media (prefers-reduced-motion: no-preference) {
    &[data-motion="showpiece"] .cn-frame::after {
      content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none;
      background: conic-gradient(from var(--sweep) at 50% 50%, transparent 0 72%, rgb(60 205 240 / 0.15) 80%, rgb(120 190 255 / 0.9) 97%, #fff 100%);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask-composite: exclude;
      animation: nz-sweep 1.7s cubic-bezier(0.4, 0.1, 0.3, 1) 0.3s 1 both;
    }
  }
}

@keyframes nz-sweep {
  from { --sweep: -60deg; opacity: 1; }
  85% { opacity: 1; }
  to { --sweep: 300deg; opacity: 0; }
}