/* Cinematic: after instalanding.ai's stage-light-launch-page (MIT). A product reveal
   under theatre lights: a near-black stage, blurred conic spotlights, a hairline
   drafting frame, a lit ridge along the foot of the hero, glow on headings, Archivo for
   type and JetBrains Mono for labels. Suits venues, nightlife, events, car dealers,
   luxury and premium services. */

:root[data-theme="cinematic"] {
  /* motion below the hero (see base.css) */
  --reveal-y: 14px; --reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --reveal-d: 1.4; --nav-lift: 0 12px 30px -12px rgb(0 0 0 / 0.8); --hero-in: focus; --reveal-in: fade;
  --bg: #06070b;
  --bg-soft: #0c0e14;
  --surface: #10121a;
  --ink: #f1efe9;
  --ink-2: #cbc9c2;
  --muted: #9a9ca8;
  --line: #22252f;
  --accent: #e9b96e;
  --primary: #e9b96e;
  --primary-ink: #14100a;
  --glass: rgb(12 14 20 / 0.82);
  --glass-border: #2a2d38;
  --beam: 233 185 110;
  --hair: rgb(255 255 255 / 0.09);

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 700;
  --display-tracking: -0.025em;
  --display-leading: 1.02;

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 24px 48px -24px rgb(0 0 0 / 0.9);
  --card-border: 1px solid transparent;

  --slab-bg: #0c0e14;
  --slab-ink: var(--ink);
  --footer-bg: #0a0b10;
  --footer-ink: var(--ink);

  --ph-1: radial-gradient(80% 60% at 30% 20%, #2b2f3d, #151720 60%, #0b0c11);
  --ph-2: radial-gradient(70% 60% at 70% 80%, rgb(233 185 110 / 0.3), transparent 60%), linear-gradient(160deg, #1f2230, #0c0e14);
  --ph-3: radial-gradient(80% 60% at 60% 30%, #25323d, #121a21 60%, #090d11);
  --ph-4: radial-gradient(60% 50% at 30% 70%, rgb(120 140 255 / 0.25), transparent 60%), linear-gradient(200deg, #1f2230, #0b0c11);
  --ph-5: repeating-linear-gradient(118deg, rgb(255 255 255 / 0.03) 0 2px, transparent 2px 8px), linear-gradient(160deg, #2b2720, #121116);
  --ph-6: radial-gradient(80% 60% at 50% 40%, #35302a, #17151a 60%, #0b0a0d);

  --face: #0e1017;
  --cn-frame: linear-gradient(145deg, rgb(233 185 110 / 0.55), rgb(233 185 110 / 0.06) 38%, #22252f 70%, #22252f);

  color-scheme: dark;

  & body {
    background:
      radial-gradient(60% 40% at 50% 0%, rgb(233 185 110 / 0.05), transparent 70%),
      var(--bg);
  }
  & h1, & h2 { text-shadow: 0 0 42px rgb(var(--beam) / 0.22); }
  & .eyebrow { color: var(--accent); letter-spacing: 0.16em; }
  & .lead { color: var(--ink-2); }

  /* cards: an opaque dark face in a gradient frame, one corner pulled back */
  & .card, & .footer-card {
    background: linear-gradient(var(--face), var(--face)) padding-box, var(--cn-frame) border-box;
    border: 1px solid transparent;
    box-shadow: var(--shadow);
  }
  & .card { border-radius: 14px 44px 14px 14px; }
  & .footer-card { border-radius: 16px 16px 16px 16px; }

  & .btn { font-weight: 600; letter-spacing: 0.01em; }
  & .btn-primary {
    background: linear-gradient(180deg, #f3c985, #e9b96e 55%, #d9a350);
    box-shadow: 0 0 28px -4px rgb(var(--beam) / 0.5), inset 0 1px 0 rgb(255 255 255 / 0.45);
  }
  & .btn-primary:hover { box-shadow: 0 0 40px -2px rgb(var(--beam) / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.45); }
  & .btn-ghost { border-color: rgb(255 255 255 / 0.22); background: rgb(255 255 255 / 0.03); }
  & .btn-ghost:hover { border-color: var(--accent); }
  & .pill { background: rgb(255 255 255 / 0.03); }

  /* nav: dark glass with a hairline */
  & .nav { background: rgb(6 7 11 / 0.82); border-bottom: 1px solid var(--hair); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  & .brand-mark { background: var(--accent); color: var(--primary-ink); box-shadow: 0 0 20px -2px rgb(var(--beam) / 0.6); }
  & .brand-name { font-weight: 800; }
  & .nav-links a { font: 500 12px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; }
  & .nav-links a:hover { color: var(--accent); }
  & .nav-phone { color: var(--accent); }
  & .nav-menu summary { border-color: var(--glass-border); background: rgb(255 255 255 / 0.03); }
  & .nav-menu ul { background: #0e1017; border: 1px solid var(--glass-border); }
  & .nav-menu a:hover { background: rgb(255 255 255 / 0.05); }

  /* ---------- signature hero: the stage ---------- */
  & .cn-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; align-items: center;
    min-height: clamp(540px, 86svh, 820px);
    padding-block: clamp(56px, 9vw, 112px) clamp(120px, 20vw, 230px);
  }
  & .cn-stage { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  & .cn-copy { position: relative; text-align: center; display: grid; justify-items: center; }
  & .cn-copy h1 { font-size: clamp(38px, 7vw, 92px); font-weight: 800; max-width: 17ch; text-shadow: 0 0 60px rgb(var(--beam) / 0.3); }
  & .cn-copy .lead { margin: 22px auto 0; max-width: 56ch; }
  & .cn-copy .actions { justify-content: center; }
  & .cn-eyebrow { display: flex; align-items: center; gap: 14px; width: min(100%, 520px); margin-bottom: 22px; }
  & .cn-eyebrow::before, & .cn-eyebrow::after { content: ""; flex: 1; height: 1px; }
  & .cn-eyebrow::before { background: linear-gradient(90deg, transparent, rgb(var(--beam) / 0.6)); }
  & .cn-eyebrow::after { background: linear-gradient(270deg, transparent, rgb(var(--beam) / 0.6)); }
  & .cn-eyebrow span { flex: 0 1 auto; text-wrap: balance; }

  /* spotlights: the wrapper carries the rotation (and the drift), the cone inside the blur */
  & .cn-beam { position: absolute; top: 0; left: 50%; width: min(86vw, 460px); height: 82%; margin-left: calc(min(86vw, 460px) / -2); transform-origin: 50% 0; }
  & .cn-beam i {
    position: absolute; inset: 0; border-radius: 0 0 50% 50%; filter: blur(10px);
    background: conic-gradient(from 0deg at 50% -5%, transparent 0 45%, rgb(var(--beam) / 0.3) 49%, rgb(var(--beam) / 0.52) 50%, rgb(var(--beam) / 0.3) 51%, transparent 55% 100%);
  }
  & .cn-b2 { rotate: 20deg; left: 22%; opacity: 0.8; }
  & .cn-b3 { rotate: -20deg; left: 78%; opacity: 0.8; }
  @media (min-width: 900px) {
    & .cn-beam { width: 640px; margin-left: -320px; }
    & .cn-beam i { filter: blur(18px); }
  }

  /* dust: fixed specks that only drift on showpiece */
  & .cn-dust {
    position: absolute; inset: 0; opacity: 0.55;
    background:
      radial-gradient(1px 1px at 12% 28%, #fff, transparent),
      radial-gradient(1px 1px at 31% 64%, rgb(var(--beam)), transparent),
      radial-gradient(1.5px 1.5px at 47% 18%, #fff, transparent),
      radial-gradient(1px 1px at 63% 52%, rgb(var(--beam)), transparent),
      radial-gradient(1px 1px at 78% 31%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 90% 70%, rgb(var(--beam)), transparent),
      radial-gradient(1px 1px at 22% 82%, #fff, transparent),
      radial-gradient(1px 1px at 71% 86%, #fff, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
  }

  /* the drafting frame: hairline border, two verticals, nodes where they meet */
  & .cn-frame {
    position: absolute; inset: 14px 14px 0; border: 1px solid var(--hair); border-bottom: 0;
    background:
      linear-gradient(var(--hair), var(--hair)) 28.5% 0 / 1px 100% no-repeat,
      linear-gradient(var(--hair), var(--hair)) 71.5% 0 / 1px 100% no-repeat;
  }
  & .cn-frame b {
    position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
    background: var(--bg); border: 1px solid rgb(var(--beam) / 0.7);
  }
  @media (max-width: 640px) { & .cn-frame { background: none; } & .cn-frame b:nth-child(n+5) { display: none; } }

  /* the ridge: three ranges sitting on the stage's foot, lit along their upper edges */
  & .cn-ridge { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(90px, 17vw, 210px); }
  & .cn-r1 { fill: #161926; }
  & .cn-r2 { fill: #0d0f17; }
  & .cn-r3 { fill: var(--bg); }
  & .cn-edge { fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
  & .cn-e1 { stroke: rgb(var(--beam) / 0.55); }
  & .cn-e2 { stroke: rgb(var(--beam) / 0.28); }
  & .cn-stage::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(60px, 10vw, 120px);
    background: linear-gradient(180deg, transparent, rgb(6 7 11 / 0.6) 55%, var(--bg));
  }

  /* ---------- sections ---------- */
  & .highlights { border-block: 1px solid var(--hair); background: rgb(255 255 255 / 0.015); padding-block: 20px; }
  & .marquee-track { color: var(--ink-2); font-size: 13px; letter-spacing: 0.14em; }
  & .marquee-track li::after { content: "◆"; font-size: 8px; color: var(--accent); }

  & .group-title { border-top: 1px solid rgb(var(--beam) / 0.5); font-weight: 600; }
  & .service { padding: 28px 26px 24px; transition: transform 0.25s ease; }
  & .service:hover { transform: translateY(-3px); }
  & .service-name { font-size: 22px; }
  & .service-foot { border-top-color: var(--line); }
  & .index { color: var(--accent); letter-spacing: 0.1em; }
  & .price { color: var(--accent); font-family: var(--font-mono); font-size: 20px; }

  & .about-media, & .gallery-item, & .hero-media { border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.9); }
  & .about-media { border-radius: 14px 14px 14px 80px; }
  & .ph-label { background: rgb(6 7 11 / 0.85); color: var(--accent); border: 1px solid var(--glass-border); }
  & .stat { border-top: 1px solid rgb(var(--beam) / 0.45); }
  & .stat dd { color: var(--accent); font-size: 32px; font-weight: 700; text-shadow: 0 0 24px rgb(var(--beam) / 0.35); }

  & .stars { color: var(--accent); }
  & .review-source { color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.04em; }

  & .pricing-slab {
    background:
      radial-gradient(50% 70% at 50% 0%, rgb(var(--beam) / 0.14), transparent 70%),
      var(--slab-bg);
    border: 1px solid var(--line); box-shadow: var(--shadow);
  }
  & .plan { background: rgb(255 255 255 / 0.02); border-color: var(--line); }
  & .plan.featured { background: #151823; color: var(--ink); border: 1px solid rgb(var(--beam) / 0.7); box-shadow: 0 0 44px -12px rgb(var(--beam) / 0.45); }
  & .plan-price .mono { color: var(--ink); }

  & .faq-item, & .faq-item:first-child { border-color: var(--line); }
  & .faq-item summary::after { color: var(--accent); }
  & .faq-item summary:hover { color: var(--accent); }

  & .chips .pill { font-size: 13px; }

  & .map { border: 1px solid var(--line); }
  & .map iframe { filter: grayscale(1) invert(0.92) hue-rotate(180deg) contrast(0.9); }
  & .hours th, & .hours td { border-color: var(--line); }
  & .hours td { color: var(--accent); }
  & .field input, & .field textarea { background: #0a0c12; border-color: #2c303c; }
  & .field input::placeholder, & .field textarea::placeholder { color: var(--muted); }

  & .footer-card { padding-bottom: 0; }
  & .footer-name { font-weight: 800; }
  & .wordmark {
    display: block; margin: 28px 0 -0.12em;
    font: 800 clamp(56px, 16vw, 220px)/0.9 var(--font-display);
    letter-spacing: -0.03em; white-space: nowrap; user-select: none;
    background: linear-gradient(180deg, rgb(var(--beam) / 0.55), rgb(var(--beam) / 0.02) 85%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }

  & .callbar { background: rgb(6 7 11 / 0.92); border-top: 1px solid var(--hair); }

  /* ---------- layouts: reel, credits, spotlight ---------- */
  /* the reel: a film strip, sprocket holes along both edges of each frame, the frame lit on hover */
  & .gallery-reel { background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 30%, #000) 16% 84%, var(--bg)); }
  & .reel-frame {
    position: relative; padding: 30px 10px 30px; border-radius: 4px; background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.4s;
  }
  & .reel-frame::before, & .reel-frame::after {
    content: ""; position: absolute; left: 0; right: 0; height: 9px;
    background: repeating-linear-gradient(90deg, transparent 0 9px, rgb(241 239 233 / 0.16) 9px 21px, transparent 21px 30px);
  }
  & .reel-frame::before { top: 9px; }
  & .reel-frame::after { bottom: 9px; }
  & .reel-frame:hover { box-shadow: inset 0 0 0 1px rgb(var(--beam) / 0.65), 0 0 46px -12px rgb(var(--beam) / 0.45); }
  & .reel-frame .gallery-item { border-radius: 2px; }
  & .reel-no { color: var(--accent); letter-spacing: 0.1em; }
  & .reel-track:focus-visible { outline: 2px solid var(--accent); }

  /* the credits: names in light capitals, the price in the gold */
  & .services-credits { background: radial-gradient(60% 36% at 50% 0%, rgb(var(--beam) / 0.07), transparent 70%); }
  & .credit-name { font-weight: 800; letter-spacing: 0.16em; text-shadow: 0 0 36px rgb(var(--beam) / 0.3); }
  & .credit-meta { letter-spacing: 0.08em; }
  & .credit-price { color: var(--accent); }
  & .services-credits .group-title { font: 500 12px/1 var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); }

  /* the spotlight: the lit review has a cone of light falling from its top edge */
  & .reviews-spotlight { background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 30%, #000) 20% 80%, var(--bg)); }
  & .spot { background: transparent; border-color: var(--line); border-radius: 14px 44px 14px 14px; }
  & .spot.on {
    background: radial-gradient(90% 55% at 50% 0%, rgb(var(--beam) / 0.14), transparent 75%), var(--surface);
    border-color: rgb(var(--beam) / 0.6); box-shadow: 0 0 60px -18px rgb(var(--beam) / 0.5);
  }
  & .spot.on::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, rgb(var(--beam) / 0.18), transparent 75%);
  }
  & .spot blockquote p { color: var(--ink); }
  & .spot-count { color: var(--accent); letter-spacing: 0.1em; }
  & .carousel-btn { border-color: rgb(255 255 255 / 0.22); background: rgb(255 255 255 / 0.03); color: var(--ink); }
  & .carousel-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

  /* ---------- motion: the lights come up; they drift only on showpiece ---------- */
  @media (prefers-reduced-motion: no-preference) {
    &:not([data-motion="none"]) .cn-beam { animation: cn-up 1.4s ease-out both; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 720px) {
    &[data-motion="showpiece"] {
      & .cn-b1 { animation: cn-up 1.4s ease-out both, cn-sway-a 13s 1.4s ease-in-out infinite alternate; }
      & .cn-b2 { animation: cn-up 1.4s ease-out both, cn-sway-b 17s 1.4s ease-in-out infinite alternate; }
      & .cn-b3 { animation: cn-up 1.4s ease-out both, cn-sway-c 15s 1.4s ease-in-out infinite alternate; }
      & .cn-dust { animation: cn-rise 22s linear infinite; inset: 0 0 -300px; height: auto; }
    }
  }
}

@keyframes cn-up { from { opacity: 0; } }
@keyframes cn-sway-a { from { rotate: -4deg; } to { rotate: 4deg; } }
@keyframes cn-sway-b { from { rotate: 16deg; } to { rotate: 25deg; } }
@keyframes cn-sway-c { from { rotate: -25deg; } to { rotate: -16deg; } }
@keyframes cn-rise { 0% { translate: 0 0; opacity: 0; } 15%, 80% { opacity: 0.55; } 100% { translate: 0 -120px; opacity: 0; } }