/* Scenic: after instalanding.ai's sunset-scroll-story-page (visual language only).
   A still dusk landscape painted in gradients, peach through rose to plum and navy,
   darker the nearer; the rest of the page is calm warm paper with deep navy panels so
   long text stays readable. Space Grotesk for display, Inter for body.
   Suits tour operators, solar installers, landscapers, farms, removalists. */

:root[data-theme="scenic"] {
  /* motion below the hero (see base.css) */
  --reveal-y: 24px; --reveal-ease: ease-out; --nav-lift: 0 10px 30px -18px rgb(95 59 125 / 0.4); --hero-in: drift; --reveal-in: drift;
  --bg: #fcf7f3;
  --bg-soft: #f5ebe8;
  --surface: #ffffff;
  --ink: #1b1a45;
  --ink-2: #3a3862;
  --muted: #5e5a7c;
  --line: #e6d9dc;
  --accent: #b02a63;
  --primary: #1f1c55;
  --primary-ink: #ffffff;
  --glass: rgb(255 250 246 / 0.9);
  --glass-border: rgb(255 255 255 / 0.9);
  --sun: #ffb27a;
  --peach: #ffd9a8;
  --rose: #d7809f;
  --plum: #5f3b7d;
  --navy: #15183f;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 600;
  --display-tracking: -0.03em;
  --display-leading: 1.04;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --shadow: 0 1px 2px rgb(47 42 99 / 0.06), 0 14px 34px -14px rgb(95 59 125 / 0.28);
  --card-border: 1px solid rgb(230 217 220 / 0.8);

  --slab-bg: linear-gradient(170deg, #2f2a63, var(--navy) 70%);
  --slab-ink: #f6efff;
  --footer-bg: linear-gradient(180deg, #3a2f6e, var(--navy));
  --footer-ink: #f6efff;

  /* placeholders: little landscapes */
  --ph-1: radial-gradient(circle at 70% 38%, #fff0c8 0 7%, transparent 8%), radial-gradient(120% 50% at 30% 100%, #5f3b7d 0 60%, transparent 61%), radial-gradient(120% 45% at 90% 100%, #2f2a63 0 60%, transparent 61%), linear-gradient(180deg, #ffd9a8, #ff9f86 55%, #b8658f);
  --ph-2: radial-gradient(110% 50% at 20% 100%, #3a2f6e 0 60%, transparent 61%), radial-gradient(110% 40% at 85% 100%, #15183f 0 60%, transparent 61%), linear-gradient(180deg, #4a3a7c, #b8658f 60%, #ffb892);
  --ph-3: radial-gradient(circle at 30% 45%, #fff3d0 0 6%, transparent 7%), radial-gradient(130% 45% at 60% 100%, #8b5391 0 60%, transparent 61%), radial-gradient(100% 35% at 10% 100%, #523a7d 0 60%, transparent 61%), linear-gradient(180deg, #ffe7c4, #ffb08a 60%, #d7809f);
  --ph-4: radial-gradient(120% 55% at 50% 100%, #1d1f52 0 60%, transparent 61%), radial-gradient(120% 40% at 0% 100%, #2f2a63 0 60%, transparent 61%), linear-gradient(180deg, #2a2760, #6d4a8f 60%, #e08aa0);
  --ph-5: radial-gradient(circle at 78% 30%, #fff 0 5%, transparent 6%), radial-gradient(130% 50% at 40% 100%, #a65c8e 0 60%, transparent 61%), radial-gradient(110% 35% at 100% 100%, #5f3b7d 0 60%, transparent 61%), linear-gradient(180deg, #8f7ac0, #f0a3a0 65%, #ffd9a8);
  --ph-6: radial-gradient(120% 50% at 70% 100%, #523a7d 0 60%, transparent 61%), radial-gradient(100% 40% at 0% 100%, #8b5391 0 60%, transparent 61%), linear-gradient(180deg, #ffd9a8, #ffb7a0 50%, #c97aa0);

  & body { background: var(--bg); }
  & h2 { font-size: clamp(32px, 4.2vw, 54px); }

  /* labels: a small sun-dot */
  & .eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font-weight: 500; }
  & .eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, #fff3d0, var(--sun)); box-shadow: 0 0 0 3px rgb(255 178 122 / 0.3); }

  & .btn { font-weight: 600; letter-spacing: -0.01em; }
  & .btn-primary { background: linear-gradient(135deg, #2f2a63, var(--primary)); box-shadow: 0 8px 20px -8px rgb(31 28 85 / 0.6); }
  & .btn-primary:hover { background: linear-gradient(135deg, #5f3b7d, #2f2a63); }
  & .btn-ghost { background: rgb(255 255 255 / 0.7); border-color: rgb(31 28 85 / 0.3); color: var(--ink); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  & .pill { background: var(--surface); border-color: var(--line); color: var(--ink-2); }

  /* nav: frosted paper */
  & .nav { background: rgb(252 247 243 / 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: rgb(230 217 220 / 0.7); }
  & .brand-mark { background: linear-gradient(160deg, var(--sun), var(--rose) 55%, var(--plum)); color: #fff; text-shadow: 0 1px 2px rgb(21 24 63 / 0.4); }
  & .nav-links a:hover, & .nav-phone:hover { color: var(--accent); }
  & .nav-menu summary { background: var(--surface); }

  /* ---------- signature hero ---------- */
  & .sn-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(36px, 6vw, 80px) clamp(190px, 26vw, 340px); background: var(--navy); }
  & .sn-scene { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }
  & .sn-grid { position: relative; }
  & .sn-panel {
    max-width: 640px; padding: clamp(24px, 4vw, 44px);
    border-radius: var(--radius-lg);
    background: var(--glass); border: 1px solid var(--glass-border);
    box-shadow: 0 30px 60px -28px rgb(21 24 63 / 0.55);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  & .sn-panel h1 { font-size: clamp(36px, 5vw, 64px); }
  & .sn-panel .lead { margin-top: 18px; color: var(--ink-2); }
  & .sn-panel .actions { margin-top: 24px; }

  /* ---------- sections ---------- */
  & .highlights { border-block: 0; background: var(--bg-soft); }
  & .marquee-track { color: var(--plum); }
  & .marquee-track li::after { color: var(--sun); }

  & main > .section:nth-of-type(even) { background: var(--bg-soft); }
  & main > .section:nth-of-type(even) .card:not(.plan) { background: var(--surface); }
  & .group-title { border-top: 0; padding-top: 0; }
  & .group-title::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--sun), var(--rose), var(--plum)); }
  & .service { border-radius: var(--radius); transition: transform 0.3s ease, box-shadow 0.3s ease; }
  & .service-foot { border-top-color: var(--line); }
  & .index { color: var(--plum); }
  & .price { font-family: var(--font-display); font-weight: 600; color: var(--ink); }

  & .about-media, & .gallery-item, & .hero-media { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
  & .ph-label { background: rgb(255 250 246 / 0.9); color: var(--ink); }
  & .stat { border-top: 0; padding: 16px; border-radius: var(--radius); background: var(--bg-soft); }
  & main > .section:nth-of-type(even) .stat { background: var(--surface); }
  & .stat dd { font: 600 30px/1.1 var(--font-display); color: var(--plum); }

  & .stars { color: #b8531f; }
  & main > .section .reviews-grid > li.card:nth-child(3n + 2) { background: linear-gradient(170deg, #3a2f6e, var(--navy)); color: #f6efff; border-color: transparent; }
  & main > .section .reviews-grid > li.card:nth-child(3n + 2) .stars { color: var(--sun); }
  & main > .section .reviews-grid > li.card:nth-child(3n + 2) .review-source { color: #c9c0e8; }

  & .pricing-slab { border-radius: var(--radius-lg); background: radial-gradient(60% 70% at 85% 0%, rgb(255 159 134 / 0.35), transparent 70%), var(--slab-bg); }
  & .pricing-slab .lead, & .pricing-slab .eyebrow { opacity: 1; color: #f0e6ff; }
  & .pricing-slab .eyebrow { color: var(--peach); }
  & .plan { background: rgb(255 255 255 / 0.06); border-color: rgb(255 255 255 / 0.16); }
  & .plan.featured { background: var(--surface); color: var(--ink); }
  & .plan:not(.featured) .btn-primary { background: var(--peach); color: var(--navy); box-shadow: none; }
  & .plan:not(.featured) .plan-flag { background: var(--peach); color: var(--navy); }
  & .plan-features li::before { color: var(--sun); }
  & .plan.featured .plan-features li::before { color: var(--accent); }

  & .faq-item, & .faq-item:first-child { border: 0; margin-bottom: 12px; padding: 0 22px; border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
  & .faq-item summary::after { color: var(--accent); }
  & .chips .pill { padding: 9px 18px; }
  & .map { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
  & .field input, & .field textarea { background: var(--bg); border-color: #cdbfc6; }
  & .field input:focus, & .field textarea:focus { border-color: var(--accent); }
  & .form { border-radius: var(--radius-lg); }

  /* ---------- layouts: journey, panorama, horizon ---------- */
  /* the journey: a trail of dashes from sun to plum, a sun-dot at every stop */
  & .journey::before {
    width: 3px; border: 0; border-radius: 3px; transform-origin: top;
    background: linear-gradient(180deg, var(--sun), var(--rose) 45%, var(--plum));
    -webkit-mask: repeating-linear-gradient(180deg, #000 0 12px, transparent 12px 20px);
    mask: repeating-linear-gradient(180deg, #000 0 12px, transparent 12px 20px);
  }
  & .stop-dot { background: radial-gradient(circle, #fff3d0 0 25%, var(--sun) 70%); box-shadow: 0 0 0 4px rgb(255 178 122 / 0.35); }
  & .stop-dot::after { border-top-color: var(--rose); }
  & .stop-card { border: 0; box-shadow: var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; }
  & .stop-price { font-family: var(--font-display); font-weight: 600; color: var(--plum); }

  /* the horizon: a sky from paper to a peach glow, the hills rose, plum and navy, running into the footer */
  & main > .section.contact-horizon { background: linear-gradient(180deg, var(--bg) 8%, #fbe3d8 58%, #ffc7a8); }
  & .contact-horizon { --hill-1: #d7809f; --hill-2: #8b5391; --hill-3: #3a2f6e; --sun-core: #ffe2b0; }
  & main:has(> .contact-horizon:last-child) + .footer .footer-card::before { display: none; }

  /* footer: dusk fading to navy, with a soft glow along the top */
  & .footer-card { border-radius: var(--radius-lg); }
  & .footer-card::before {
    content: ""; position: absolute; left: -10%; right: -10%; top: -2px; height: 70px;
    background: radial-gradient(60% 100% at 30% 0%, rgb(215 128 159 / 0.45), transparent 70%), radial-gradient(50% 90% at 78% 0%, rgb(255 178 122 / 0.3), transparent 70%);
    pointer-events: none;
  }
  & .footer-card > * { position: relative; }
  & .footer a:hover { color: var(--peach); }
  & .footer .btn-primary { background: var(--peach); color: var(--navy); box-shadow: none; }
  & .footer-title { opacity: 0.8; }
  & .footer-base { opacity: 1; color: #d8cef0; }
  & .wordmark {
    display: block; margin: 28px 0 -0.16em;
    font: 600 clamp(56px, 15vw, 200px)/0.85 var(--font-display); letter-spacing: -0.06em; white-space: nowrap; overflow: hidden;
    background: linear-gradient(180deg, rgb(255 217 168 / 0.5), rgb(215 128 159 / 0));
    -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none;
  }

  & .callbar { background: rgb(252 247 243 / 0.94); }

  /* ---------- motion: slow cloud drift, only under showpiece ---------- */
  @media (prefers-reduced-motion: no-preference) {
    &:not([data-motion="none"]) {
      & .service:hover, & .stop-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgb(47 42 99 / 0.06), 0 20px 40px -14px rgb(95 59 125 / 0.38); }
      @supports (animation-timeline: view()) {
        & .journey::before {
          animation-name: sn-path; animation-fill-mode: both; animation-timing-function: linear;
          animation-timeline: view(); animation-range: entry 5% cover 55%;
        }
      }
    }
    &[data-motion="showpiece"] {
      & .sn-clouds-a { animation: sn-drift 38s ease-in-out infinite alternate; }
      & .sn-clouds-b { animation: sn-drift 56s ease-in-out infinite alternate-reverse; }
      & .sn-sun { transform-box: fill-box; transform-origin: center; animation: sn-breathe 9s ease-in-out infinite; }
      & .sn-panel { animation: sn-rise 0.9s ease-out both; }
    }
  }
}

@keyframes sn-drift { from { translate: -40px 0; } to { translate: 40px 0; } }
@keyframes sn-breathe { 50% { scale: 1.08; opacity: 0.85; } }
@keyframes sn-path { from { scale: 1 0; } }
@keyframes sn-rise { from { opacity: 0; transform: translateY(24px); } }