/* Business Anchor: day/night view + real aerial footage background.
   Loaded after site.css, pages.css and photos.css. Night is the default look;
   day view switches on with html[data-theme="light"]. */

/* ---------- Day palette ---------- */
html[data-theme="light"] {
  --night: #f5f6fb;
  --deep: #eaecf6;
  --raised: #ffffff;
  --ink: #0b1030;
  --muted: #4d5478;
  --tint: #2635f2;
  --line: rgba(11, 16, 48, 0.12);
  color-scheme: light;
}

/* Areas that sit on photos or the film keep the night colours in both views */
html[data-theme="light"] :is(.film, .page-hero, .band, .cell--hero, .about__badge, .team__photo),
html[data-theme="light"] .site-header[data-over-film="true"]:not([data-solid="true"]) {
  --night: #070b24;
  --deep: #0c1238;
  --raised: #151c4c;
  --ink: #f2f3fa;
  --muted: #a7add0;
  --tint: #8a93ff;
  --line: rgba(242, 243, 250, 0.12);
  color: var(--ink);
  color-scheme: dark;
}

/* Day view: fix the few colours that are written directly instead of as variables */
html[data-theme="light"] .site-header { background: rgba(245, 246, 251, 0.88); }
html[data-theme="light"] .site-header[data-over-film="true"]:not([data-solid="true"]) { background: transparent; }
html[data-theme="light"] .mark__glyph { fill: #f2f3fa; }
html[data-theme="light"] .site-nav__link:hover,
html[data-theme="light"] .site-nav__link[aria-current="page"] { background: rgba(11, 16, 48, 0.06); }
html[data-theme="light"] .header-cta { border-color: rgba(11, 16, 48, 0.3); }
html[data-theme="light"] .header-cta:hover,
html[data-theme="light"] .book,
html[data-theme="light"] .tab[aria-selected="true"],
html[data-theme="light"] .send:hover,
html[data-theme="light"] ::selection { color: #f2f3fa; }
html[data-theme="light"] :is(.prose p, .checklist li, .aside-text) { color: #2b3152; }
html[data-theme="light"] :is(.field input, .field textarea, .field select, .choice__item) { border-color: rgba(11, 16, 48, 0.18); }
html[data-theme="light"] :is(.field input, .field textarea)::placeholder { color: rgba(77, 84, 120, 0.7); }
html[data-theme="light"] .field__error { color: #c62828; }
html[data-theme="light"] [data-pale-fix] { color: #3a4066 !important; }
html[data-theme="light"] .lead-form,
html[data-theme="light"] .cell:not(.cell--hero),
html[data-theme="light"] .detail__aside { box-shadow: 0 18px 40px -28px rgba(11, 16, 48, 0.35); }

/* Smooth colour change when the button is pressed */
html.theme-switching, html.theme-switching * {
  transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease, fill 400ms ease !important;
}

/* ---------- Day / night button ---------- */
.theme-toggle {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 2.6rem; height: 2.6rem; margin-left: 0.4rem; padding: 0;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: inherit; cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, transform 120ms ease;
}
.theme-toggle:hover { border-color: var(--cobalt); background: rgba(38, 53, 242, 0.14); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { grid-area: 1 / 1; width: 1.15rem; height: 1.15rem; transition: opacity 300ms ease, transform 500ms cubic-bezier(.2,.8,.2,1); }
.theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
.theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); }
html[data-theme="light"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.6); }
html[data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }
.site-header[data-over-film="true"]:not([data-solid="true"]) .theme-toggle { border-color: rgba(242, 243, 250, 0.45); }

/* ---------- Background: real aerial footage of Metro Vancouver ---------- */
/* The page background moves to <html> so the footage can sit behind every section. */
html.has-ambient { background: var(--night); }
html.has-ambient body { background: transparent; }
html.has-ambient .section:not(.section--deep),
html.has-ambient .site-footer { background: transparent; }
html.has-ambient .section--deep { background: color-mix(in srgb, var(--deep) 55%, transparent); }

.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--night); }
.ambient__media {
  position: absolute; inset: -6% 0; width: 100%; height: 112%;
  object-fit: cover; object-position: 50% 50%;
  opacity: 0; transition: opacity 1200ms ease;
  will-change: transform;
}
.ambient__media.is-on { opacity: 1; }
/* Wash over the footage so text always reads clearly */
.ambient__wash { position: absolute; inset: 0; }
.ambient__wash {
  background:
    linear-gradient(90deg, rgba(7, 11, 36, 0.9) 0%, rgba(7, 11, 36, 0.78) 45%, rgba(7, 11, 36, 0.6) 100%),
    linear-gradient(180deg, rgba(7, 11, 36, 0.35) 0%, rgba(7, 11, 36, 0) 30%, rgba(7, 11, 36, 0.5) 100%);
}
html[data-theme="light"] .ambient__wash {
  background:
    linear-gradient(90deg, rgba(245, 246, 251, 0.9) 0%, rgba(245, 246, 251, 0.76) 45%, rgba(245, 246, 251, 0.56) 100%),
    linear-gradient(180deg, rgba(245, 246, 251, 0.3) 0%, rgba(245, 246, 251, 0) 30%, rgba(245, 246, 251, 0.55) 100%);
}

/* ---------- Content eases in as you scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.has-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.8,.2,1); }
  html.has-reveal [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ---------- Homepage film drawn as frames ---------- */
.film__frames { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film.has-frames .film__video { display: none; }