/* ============================================================
   Firefly Resort — "Journey Edition" homepage (index1.html)
   The whole page is one ride: a fixed scenic backdrop that
   changes with scroll (hills, fog, mountains, night) plus a
   left-side road spine the car travels in parallel.
   Requires css/firefly.css (tokens) loaded first.
   ============================================================ */

body.journey-page {
  background: var(--ink-900);
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   Scenery — fixed, crossfading scene backdrops
   ============================================================ */
.scenery { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--sky-night); }

.scene-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.4s var(--ease-standard), transform 8s var(--ease-out);
  will-change: opacity;
}
.scene-bg.is-active { opacity: .78; transform: scale(1); }

.scenery__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,18,32,.55) 0%, rgba(11,18,32,.3) 40%, rgba(17,24,20,.6) 100%);
}
.scenery__glow { position: absolute; inset: 0; background: var(--overlay-glow); opacity: .7; }

/* ---- Atmospheric effect layers (toggled per scene) -------- */
.fx { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s var(--ease-standard); }
.fx.is-on { opacity: 1; }

/* Stars */
.fx--stars .star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; }
.fx--stars .star--lg { width: 3px; height: 3px; }

/* Fireflies */
.fx--fireflies .firefly {
  position: absolute; border-radius: 50%; background: var(--amber-400);
  box-shadow: 0 0 12px 3px rgba(237,154,46,.75);
}

/* Drifting clouds — big soft blobs sliding across the sky */
@keyframes spCloudDrift { from { transform: translateX(-18%); } to { transform: translateX(16%); } }
@keyframes spCloudDrift2 { from { transform: translateX(12%); } to { transform: translateX(-14%); } }
.fx--clouds .cloud {
  position: absolute; width: 130%; left: -15%; filter: blur(4px);
  background: radial-gradient(42% 58% at 30% 50%, rgba(240,246,252,.20), rgba(240,246,252,0) 70%),
              radial-gradient(34% 52% at 62% 42%, rgba(240,246,252,.16), rgba(240,246,252,0) 70%),
              radial-gradient(28% 48% at 84% 56%, rgba(240,246,252,.13), rgba(240,246,252,0) 70%);
}
.fx--clouds .cloud--1 { top: 4%; height: 26%; animation: spCloudDrift 46s ease-in-out infinite alternate; }
.fx--clouds .cloud--2 { top: 24%; height: 22%; animation: spCloudDrift2 61s ease-in-out infinite alternate; }

/* Rolling fog banks along the bottom */
@keyframes spFogDrift { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
.fx--fog .fogbank {
  position: absolute; left: -30%; width: 160%; filter: blur(5px);
}
.fx--fog .fogbank--low {
  bottom: -8%; height: 44%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(228,236,242,.34), rgba(228,236,242,0) 72%);
  animation: spFogDrift 24s ease-in-out infinite alternate;
}
.fx--fog .fogbank--mid {
  bottom: 18%; height: 26%;
  background: radial-gradient(52% 100% at 45% 100%, rgba(228,236,242,.18), rgba(228,236,242,0) 75%);
  animation: spFogDrift 34s ease-in-out infinite alternate-reverse;
}

/* Warm sky halo for mountain sunrise scenes */
.fx--halo .halo {
  position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 70% 12%, rgba(237,154,46,.22), rgba(237,154,46,0) 60%);
}

/* ============================================================
   Road spine — fixed rail down the left edge
   ============================================================ */
.spine {
  position: fixed; top: 0; bottom: 0; left: 0; width: 150px; z-index: 20;
  pointer-events: none;
}
.spine::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,14,20,.55) 0%, rgba(10,14,20,.25) 70%, rgba(10,14,20,0) 100%);
}
.spine__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.spine__road-base { stroke: rgba(255,255,255,.16); stroke-width: 18; fill: none; stroke-linecap: round; }
.spine__road-tar  { stroke: rgba(23,24,26,.8);   stroke-width: 15; fill: none; stroke-linecap: round; }
.spine__road-dash { stroke: rgba(255,255,255,.5); stroke-width: 1.6; fill: none; stroke-dasharray: 9 12; stroke-linecap: round; }
.spine__road-done {
  stroke: var(--amber-400); stroke-width: 2.6; fill: none; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(237,154,46,.75));
}

.spine__dot {
  fill: var(--forest-300); stroke: rgba(255,255,255,.65); stroke-width: 2;
  pointer-events: auto; cursor: pointer;
  transition: fill var(--dur-base) var(--ease-standard);
}
.spine__dot.is-passed { fill: var(--amber-400); }
.spine__dot:hover { fill: var(--amber-300); }

.spine__car { will-change: transform; }

/* Waypoint labels beside the dots */
.spine__label {
  position: absolute; left: 92px; transform: translateY(-50%);
  pointer-events: auto; cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.55); white-space: nowrap;
  transition: color var(--dur-base) var(--ease-standard);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.spine__label:hover { color: #fff; }
.spine__label.is-passed { color: var(--amber-300); }
.spine__label.is-current { color: #fff; }
.spine__label.is-current::after {
  content: ""; display: block; height: 2px; margin-top: 3px;
  background: var(--amber-400); border-radius: 2px;
}

/* ============================================================
   Page chrome on top of the scenery
   ============================================================ */
/* Above the spine rail (z 20) so the header dropdown covers it; the rail
   stays visible because .ride content clears it horizontally. Fireflies (z 30)
   still float above everything. */
.journey-page .page { position: relative; z-index: 25; }

/* Glass header variant */
.journey-page .site-header .topbar { background: #0a0c10; }
.journey-page .site-header .navbar {
  background: rgba(17,20,24,.88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.08);
}
.journey-page .navbar .ff-navlink { color: rgba(255,255,255,.85); }
.journey-page .navbar .ff-navlink:hover,
.journey-page .navbar .ff-navlink[data-active="true"] { color: var(--amber-300); }
.journey-page .navbar .ff-navlink::after { background: var(--amber-400); }
.journey-page .nav-toggle { color: #fff; }
.journey-page .navbar__links.is-open {
  background: rgba(13,16,20,.98);
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Content column clears the spine rail */
.journey-page .ride { margin-left: 150px; }

/* Sections are transparent; content sits in glass panels */
.jsection { position: relative; padding: 110px 0; }
.jsection__inner { max-width: 1040px; margin: 0 auto; padding: 0 40px; }

.glass {
  background: rgba(14, 17, 22, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding: 48px;
}
/* Soft shadows keep glass text readable now the panel is nearly clear */
.glass h1, .glass h2, .glass h3 { text-shadow: 0 2px 18px rgba(0,0,0,.65); }
.glass p, .glass .waypoint__km, .glass .eyebrow, .glass .waypoint__fact span { text-shadow: 0 1px 10px rgba(0,0,0,.6); }

/* Fallback: without backdrop-filter support, stay dark enough to read */
@supports not (backdrop-filter: blur(1px)) {
  .glass { background: rgba(14, 17, 22, 0.72); }
}

/* On-dark type */
.journey-page .jhero h1, .journey-page .section-head .section-title { text-shadow: 0 2px 22px rgba(0,0,0,.65); }
.journey-page .jhero p, .journey-page .section-head p, .journey-page .eyebrow { text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.journey-page .eyebrow { color: var(--amber-300); }
.journey-page .section-title,
.journey-page h1, .journey-page h2, .journey-page h3 { color: #fff; }
.journey-page p { color: rgba(255,255,255,.82); }
.journey-page .muted { color: rgba(255,255,255,.6); }

/* Hero */
.jhero { min-height: 92vh; display: flex; align-items: center; }
.jhero__inner { max-width: 1040px; margin: 0 auto; padding: 60px 40px; width: 100%; }
.jhero h1 {
  font-family: var(--font-display); font-size: clamp(3rem, 5.6vw, 4.6rem);
  line-height: 1.04; margin: 16px 0 0; font-weight: 600; letter-spacing: -0.015em;
}
.jhero h1 em { color: var(--amber-400); font-style: italic; }
.jhero p { font-size: 1.2rem; line-height: 1.7; margin: 22px 0 34px; max-width: 540px; }

/* Waypoint (milestone) sections */
.waypoint { min-height: 88vh; display: flex; align-items: center; }
.waypoint__card { max-width: 560px; }
.waypoint__km {
  font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber-300);
}
.waypoint__card h2 { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; margin: 12px 0 14px; }
.waypoint__card p { line-height: 1.75; margin: 0; }
.waypoint__facts { display: flex; gap: 26px; margin-top: 26px; flex-wrap: wrap; }
.waypoint__fact { min-width: 110px; }
.waypoint__fact b { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--amber-300); }
.waypoint__fact span { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* Alternate waypoint cards toward the right */
.waypoint--alt .jsection__inner { display: flex; justify-content: flex-end; }

/* Rooms strip reuses .ff-roomcard from firefly.css */
.journey-page .grid-3 { margin-top: 40px; }

/* Testimonial on glass */
.journey-page .ff-testimonial {
  background: rgba(14,17,22,.6); border-color: rgba(255,255,255,.12);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.journey-page .ff-testimonial__quote { color: rgba(255,255,255,.88); }
.journey-page .ff-testimonial__author { color: #fff; }
.journey-page .ff-testimonial__source, .journey-page .ff-testimonial__source a { color: rgba(255,255,255,.6); }

/* Arrival CTA */
.arrival { min-height: 92vh; display: flex; align-items: center; text-align: center; }
.arrival .glass { max-width: 640px; margin: 0 auto; }
.arrival h2 { font-family: var(--font-display); font-size: 2.8rem; font-weight: 600; margin: 10px 0 14px; }
.arrival p { margin: 0 0 30px; }

/* Footer sits above scenery too */
.journey-page .site-footer { position: relative; z-index: 10; margin-left: 150px; }

/* Scroll hint */
.jhero__hint {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 34px;
  color: rgba(255,255,255,.6); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.jhero__hint .bounce { animation: jHint 1.6s ease-in-out infinite; display: inline-flex; }

/* ============================================================
   Journey styling for subpages (about / gallery / contact)
   ============================================================ */

/* Shorter hero for inner pages */
.jhero--page { min-height: 62vh; }
.jhero--page h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); }

/* Service cards on dark */
.journey-page .ff-service { background: rgba(14,17,22,.6); border-color: rgba(255,255,255,.12); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.journey-page .ff-service__title { color: #fff; }
.journey-page .ff-service__desc { color: rgba(255,255,255,.7); }
.journey-page .ff-service__icon { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: var(--amber-300); }
.journey-page .ff-service:hover { background: var(--brand); }

/* Gallery filter tabs on dark */
.journey-page .filter-tab { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.28); }
.journey-page .filter-tab:hover { border-color: var(--amber-300); color: var(--amber-300); }
.journey-page .filter-tab[data-active="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Photo pairs inside glass panels */
.journey-page .photo-duo img { border: 1px solid rgba(255,255,255,.14); }

/* Contact info + form on dark */
.journey-page .contact-item__icon { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: var(--amber-300); }
.journey-page .contact-item strong { color: #fff; }
.journey-page .contact-item a { color: rgba(255,255,255,.82); }
.journey-page .contact-item a:hover { color: var(--amber-300); }

.journey-page .contact-form {
  background: rgba(14,17,22,.6); border-color: rgba(255,255,255,.12);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.journey-page .contact-form h3 { color: #fff; }
.journey-page .ff-field__label, .journey-page .ff-field label { color: rgba(255,255,255,.65); }
.journey-page .ff-field__input {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); color: #fff;
}
.journey-page .ff-field__input::placeholder { color: rgba(255,255,255,.4); }
.journey-page select.ff-field__input {
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.65) 50%),
                    linear-gradient(135deg, rgba(255,255,255,.65) 50%, transparent 50%);
}
.journey-page select.ff-field__input option { color: var(--ink-900); background: #fff; }
.journey-page .form-success {
  background: rgba(47,125,52,.22); border-color: var(--forest-300); color: var(--forest-100);
}

.journey-page .map-card { border-color: rgba(255,255,255,.16); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .journey-page .ride, .journey-page .site-footer { margin-left: 120px; }
  .spine { width: 120px; }
  .spine__label { left: 74px; font-size: 10px; }
}

@media (max-width: 720px) {
  .journey-page .ride, .journey-page .site-footer { margin-left: 56px; }
  .spine { width: 56px; }
  .spine__label { display: none; }
  .jsection { padding: 72px 0; }
  .jsection__inner, .jhero__inner { padding: 0 18px; }
  .glass { padding: 26px 22px; }
  .jhero h1 { font-size: 2.3rem; }
  .waypoint__card h2 { font-size: 1.9rem; }
  .waypoint--alt .jsection__inner { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-bg { transition: opacity .2s linear; transform: none; }
  .fx { transition: none; }
}