/* ==========================================================================
   Foggy Mountain: first-load splash (home page)
   The page waits behind this screen until its photos, hero video and fonts
   have loaded (loader.js). Three scenes, picked from the "Aa" menu
   (font-selector.js) and set on #site-loader as data-scene:
     water   - brand-sky water rises with the progress; a wave washes over
               the screen and drains away.
     boat    - a rower crosses a misty mountain lake as the page loads.
     harbour - the rower heads for a jetty under a Foggy Mountain hoarding.
   The two boat scenes end with fog rolling in and clearing over the site.
   The sky itself follows the clock (loader.js sets data-time="day"|"night",
   6 AM-6 PM counts as day): a bright sky with a sun, or a dark sky with a
   moon and stars.
   Without JS the splash never shows (html.js is set by the inline head script).
   ========================================================================== */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  overflow: hidden;
  display: none;
  color: #ffffff;
  background:
    radial-gradient(60% 50% at 16% 10%, rgba(249, 166, 0, 0.11), transparent 70%),
    radial-gradient(55% 45% at 86% 28%, rgba(90, 199, 239, 0.18), transparent 70%),
    linear-gradient(180deg, #14163f 0%, #1d2066 55%, #24277a 100%);
  /* Last resort: if loader.js never runs, get out of the way. */
  animation: fl-failsafe 0.6s 20s forwards;
}
html.js .site-loader {
  display: block;
}
@keyframes fl-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
html.is-loading,
html.is-loading body {
  overflow: hidden;
}

/* ---------- Day/night sky ----------
   loader.js reads the clock and sets data-time="day" (6 AM-6 PM) or "night"
   on #site-loader. Night is the default look (dark blue, unchanged); day
   swaps in a lighter sky and a sun; night adds a moon and stars. Drawn once
   behind every scene, so the wave pool's sky shows through above the rising
   water too. */
.site-loader[data-time="day"] {
  background:
    radial-gradient(60% 50% at 18% 12%, rgba(255, 255, 255, 0.4), transparent 65%),
    radial-gradient(55% 45% at 84% 22%, rgba(255, 255, 255, 0.22), transparent 65%),
    linear-gradient(180deg, #2f8fd1 0%, #5ac7ef 42%, #a9e2f5 78%, #dff3fa 100%);
}
.fl-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.fl-sun,
.fl-moon,
.fl-stars {
  display: none;
}
.site-loader[data-time="day"] .fl-sun {
  display: block;
}
.site-loader[data-time="night"] .fl-moon,
.site-loader[data-time="night"] .fl-stars {
  display: block;
}
.fl-sun {
  position: absolute;
  top: 8%;
  right: 10%;
  width: clamp(64px, 8vw, 120px);
  height: clamp(64px, 8vw, 120px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff6d8, #ffd66b 45%, #f9a600 100%);
  box-shadow: 0 0 60px 18px rgba(249, 166, 0, 0.45), 0 0 120px 40px rgba(249, 166, 0, 0.18);
  animation: fl-sun-glow 4s ease-in-out infinite;
}
@keyframes fl-sun-glow {
  0%,
  100% {
    box-shadow: 0 0 60px 18px rgba(249, 166, 0, 0.45), 0 0 120px 40px rgba(249, 166, 0, 0.18);
  }
  50% {
    box-shadow: 0 0 72px 24px rgba(249, 166, 0, 0.55), 0 0 140px 50px rgba(249, 166, 0, 0.22);
  }
}
.fl-moon {
  position: absolute;
  top: 8%;
  right: 10%;
  width: clamp(52px, 6.4vw, 96px);
  height: clamp(52px, 6.4vw, 96px);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #ffffff, #dfe6f7 45%, #aab4d6 100%);
  box-shadow: 0 0 34px 10px rgba(223, 230, 247, 0.55), 0 0 70px 24px rgba(147, 163, 214, 0.25);
}
.fl-moon::before,
.fl-moon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(130, 142, 180, 0.35);
}
.fl-moon::before {
  width: 22%;
  height: 22%;
  top: 24%;
  left: 20%;
}
.fl-moon::after {
  width: 14%;
  height: 14%;
  top: 52%;
  left: 56%;
}
.fl-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fl-star {
  fill: #ffffff;
  opacity: 0.3;
  animation: fl-twinkle 2.6s ease-in-out infinite;
}
@keyframes fl-twinkle {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

/* Which parts each scene uses */
.fl-hills,
.fl-harbour,
.fl-boat,
.fl-fog {
  display: none;
}
.site-loader:not([data-scene="water"]) .fl-hills,
.site-loader:not([data-scene="water"]) .fl-boat,
.site-loader:not([data-scene="water"]) .fl-fog,
.site-loader[data-scene="harbour"] .fl-harbour {
  display: block;
}
.site-loader:not([data-scene="water"]) .fl-bubble,
.site-loader[data-scene="harbour"] .fl-logo {
  display: none;
}

/* Hill mist drifting across the scene */
.fl-mist span {
  position: absolute;
  width: 70vw;
  height: 34vh;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.09), transparent);
  animation: fl-mist 16s ease-in-out infinite alternate;
}
.fl-mist span:nth-child(1) {
  top: 14%;
  left: -24%;
}
.fl-mist span:nth-child(2) {
  top: 44%;
  right: -28%;
  animation-duration: 21s;
  animation-direction: alternate-reverse;
}
@keyframes fl-mist {
  to {
    transform: translateX(22vw);
  }
}

/* Logo, percentage and status line */
.fl-center {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 16px 16vh;
  text-align: center;
  transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-loader:not([data-scene="water"]) .fl-center {
  justify-content: flex-start;
  padding: 9vh 16px 0;
}
.fl-logo {
  display: block;
  width: auto;
  height: clamp(120px, 23vh, 196px);
  margin-bottom: 14px;
  filter: drop-shadow(0 18px 30px rgba(5, 7, 30, 0.45));
  animation: fl-bob 3.2s ease-in-out infinite alternate;
}
.site-loader:not([data-scene="water"]) .fl-logo {
  height: clamp(84px, 16vh, 140px);
  margin-bottom: 8px;
}
@keyframes fl-bob {
  from {
    transform: translateY(4px);
  }
  to {
    transform: translateY(-6px);
  }
}
.fl-pct {
  margin: 0;
  font-family: "Panton", "Outfit", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 5.4vh, 3rem);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.fl-pct-sign {
  margin-left: 2px;
  font-size: 0.55em;
  color: #f9a600;
  vertical-align: 0.55em;
}
.fl-status {
  min-height: 1.5em;
  margin: 4px 0 0;
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #c9cbe9;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.fl-status.is-swap {
  opacity: 0;
  transform: translateY(4px);
}

/* The water: three wave layers moving at different speeds.
   Wave pool: --fl-level (0..1, set by loader.js) raises it with the progress.
   Boat scenes: a still lake whose surface sits at 72% of the screen height. */
.fl-water {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 2;
  height: calc(100% + 150px);
  transform: translate3d(0, calc(-70px - var(--fl-level, 0) * 22vh), 0);
  will-change: transform;
}
.site-loader:not([data-scene="water"]) .fl-water {
  transform: translate3d(0, calc(-30px - 28vh), 0);
}
.fl-wave {
  position: absolute;
  left: 0;
  bottom: 0;
  background-repeat: repeat-x, no-repeat;
  animation: fl-wave-move linear infinite;
}
.fl-wave--back {
  top: -30px;
  width: calc(100% + 1400px);
  --fl-tile: -1400px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34Q175 16 350 34T700 34T1050 34T1400 34V60H0Z' fill='%238fdcf7' fill-opacity='.28'/%3E%3C/svg%3E"),
    linear-gradient(180deg, transparent 59px, rgba(143, 220, 247, 0.28) 59px);
  background-size: 1400px 60px, 100% 100%;
  animation-duration: 15s;
}
.fl-wave--mid {
  top: -16px;
  width: calc(100% + 1100px);
  --fl-tile: -1100px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1100 60' preserveAspectRatio='none'%3E%3Cpath d='M0 32Q137.5 14 275 32T550 32T825 32T1100 32V60H0Z' fill='%235ac7ef' fill-opacity='.5'/%3E%3C/svg%3E"),
    linear-gradient(180deg, transparent 59px, rgba(90, 199, 239, 0.5) 59px);
  background-size: 1100px 60px, 100% 100%;
  animation-duration: 10s;
  animation-direction: reverse;
}
.fl-wave--front {
  top: 0;
  width: calc(100% + 800px);
  --fl-tile: -800px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30Q100 12 200 30T400 30T600 30T800 30V60H0Z' fill='%233cb4e8'/%3E%3Cpath d='M0 30Q100 12 200 30T400 30T600 30T800 30' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='3'/%3E%3C/svg%3E"),
    linear-gradient(180deg, transparent 59px, #3cb4e8 59px, #2a8fd1 30%, #1d5fa8 100%);
  background-size: 800px 60px, 100% 100%;
  animation-duration: 7s;
}
@keyframes fl-wave-move {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(var(--fl-tile), 0, 0);
  }
}

/* Bubbles rising in the wave pool */
.fl-bubble {
  position: absolute;
  top: 120px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
  opacity: 0;
  animation: fl-bubble 3.4s ease-in infinite;
}
.fl-bubble:nth-of-type(1) { left: 12%; animation-delay: 0.2s; }
.fl-bubble:nth-of-type(2) { left: 31%; width: 6px; height: 6px; animation-delay: 1.4s; }
.fl-bubble:nth-of-type(3) { left: 49%; animation-delay: 2.3s; }
.fl-bubble:nth-of-type(4) { left: 66%; width: 12px; height: 12px; animation-delay: 0.8s; }
.fl-bubble:nth-of-type(5) { left: 83%; width: 7px; height: 7px; animation-delay: 1.9s; }
@keyframes fl-bubble {
  0% {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(8px, -40px, 0);
  }
}

/* ---------- Boat scenes: hills, the boat and its rower ---------- */
.fl-hills {
  position: absolute;
  left: 0;
  bottom: calc(28vh - 12px);
  width: 100%;
  height: 36vh;
}
.fl-hills-far {
  fill: #3a3ea6;
  opacity: 0.45;
}
.fl-hills-near {
  fill: #191c58;
}

/* The boat rides on the lake; loader.js moves it with the progress and
   drives the rower's stroke. Its waterline (y 97 of 130) sits on the surface. */
.fl-boat {
  --bw: clamp(210px, 22vw, 320px);
  position: absolute;
  left: 0;
  top: calc(30px - var(--bw) * 97 / 220);
  width: var(--bw);
  height: calc(var(--bw) * 130 / 220);
  will-change: transform;
}
.fl-boat svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.fl-boat-shadow { fill: rgba(10, 30, 80, 0.35); }
.fl-wake {
  fill: none;
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 9 7;
  animation: fl-wake 0.9s linear infinite;
}
@keyframes fl-wake {
  to {
    stroke-dashoffset: 16;
  }
}
.fl-hull { fill: #f9a600; }
.fl-hull-stripe {
  fill: none;
  stroke: #2e3192;
  stroke-width: 4;
}
.fl-gunwale {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
}
.fl-torso {
  stroke: #e93647;
  stroke-width: 12;
  stroke-linecap: round;
}
.fl-head circle,
.fl-hand { fill: #f2c29b; }
.fl-cap { fill: #5ac7ef; }
.fl-visor {
  fill: none;
  stroke: #5ac7ef;
  stroke-width: 2.4;
  stroke-linecap: round;
}
.fl-arm {
  stroke: #2e3192;
  stroke-width: 5;
  stroke-linecap: round;
}
.fl-oar {
  stroke: #b07a3f;
  stroke-width: 3.2;
  stroke-linecap: round;
}
.fl-blade {
  stroke: #2e3192;
  stroke-width: 7;
  stroke-linecap: round;
}
.fl-oarlock { fill: #14163f; }
.fl-ripple {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* Harbour: a green shore with a jetty and a lit Foggy Mountain hoarding */
.fl-harbour {
  position: absolute;
  inset: 0;
}
.fl-shore {
  position: absolute;
  right: 0;
  bottom: calc(28vh - 20px);
  width: 46vw;
  height: 20vh;
}
.fl-shore-land { fill: #2f6a3a; }
.fl-shore-edge {
  fill: none;
  stroke: #7cc242;
  stroke-width: 3;
  opacity: 0.8;
  vector-effect: non-scaling-stroke;
}
.fl-pier {
  position: absolute;
  left: 50vw;
  bottom: calc(28vh + 28px);
  width: 17vw;
  height: 9px;
  border-radius: 3px;
  background: linear-gradient(180deg, #c08a4c, #8a5a2b);
  box-shadow: 0 3px 0 #5a3a1e;
}
.fl-pier span {
  position: absolute;
  top: 6px;
  width: 6px;
  height: 50px;
  background: #6b4423;
}
.fl-pier span:nth-child(1) { left: 4%; }
.fl-pier span:nth-child(2) { left: 48%; }
.fl-pier span:nth-child(3) { right: 4%; }
.fl-sign {
  position: absolute;
  right: 6vw;
  bottom: calc(28vh + 30px);
  width: clamp(180px, 20vw, 280px);
}
.fl-sign-board {
  position: relative;
  z-index: 1;
  margin-bottom: 7vh;
  padding: 10px 12px 12px;
  text-align: center;
  border-radius: 12px;
  border: 4px solid #f9a600;
  background: linear-gradient(160deg, #2e3192, #1d2066);
  box-shadow:
    0 0 0 3px rgba(20, 22, 63, 0.9),
    0 18px 40px rgba(5, 7, 30, 0.55),
    0 0 36px rgba(249, 166, 0, 0.2);
  transition: box-shadow 0.6s ease;
}
.fl-sign-top {
  display: block;
  font-family: "Panton", "Outfit", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f9a600;
}
.fl-sign-board img {
  display: block;
  width: auto;
  height: clamp(84px, 14vh, 140px);
  margin: 6px auto 0;
}
.fl-sign-post {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: calc(7vh + 12px);
  border-radius: 2px;
  background: linear-gradient(90deg, #5a3a1e, #8a5a2b 50%, #5a3a1e);
}
.fl-sign-post--l { left: 20%; }
.fl-sign-post--r { right: 20%; }
.fl-sign-lamp {
  position: absolute;
  z-index: 2;
  top: -12px;
  width: 20px;
  height: 8px;
  border-radius: 4px 4px 2px 2px;
  background: #1c1e3f;
}
.fl-sign-lamp--l { left: 18%; }
.fl-sign-lamp--r { right: 18%; }
.fl-sign-lamp::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 90px;
  height: 70px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(255, 226, 150, 0.45), rgba(255, 226, 150, 0));
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  transition: opacity 0.6s ease;
  opacity: 0.8;
  pointer-events: none;
}
/* Arrival: the hoarding lights up */
.site-loader.is-done .fl-sign-board {
  box-shadow:
    0 0 0 3px rgba(20, 22, 63, 0.9),
    0 18px 40px rgba(5, 7, 30, 0.55),
    0 0 80px rgba(249, 166, 0, 0.6);
}
.site-loader.is-done .fl-sign-lamp::after {
  opacity: 1;
}

/* Fog for the boat scenes' exit */
.fl-fog {
  position: absolute;
  inset: -10%;
  z-index: 6;
  opacity: 0;
  transform: scale(1.1);
  background:
    radial-gradient(40% 35% at 20% 30%, #ffffff, transparent 70%),
    radial-gradient(45% 40% at 75% 60%, #ffffff, transparent 70%),
    radial-gradient(50% 40% at 50% 90%, #ffffff, transparent 70%),
    rgba(233, 236, 248, 0.97);
  pointer-events: none;
}

/* ---------- Exits (not for a quick return visit) ---------- */
/* Wave pool: the wave washes over the screen, then drains away. */
.site-loader[data-scene="water"]:not(.is-quick).is-done .fl-center {
  opacity: 0;
  transform: translateY(-18px) scale(0.97);
}
.site-loader[data-scene="water"]:not(.is-quick).is-done .fl-water {
  transform: translate3d(0, -100%, 0);
  transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
}
.site-loader[data-scene="water"]:not(.is-quick).is-draining .fl-water {
  transform: translate3d(0, 0, 0);
  transition: transform 0.95s cubic-bezier(0.55, 0.05, 0.4, 1);
}
/* Boat scenes: a short pause on arrival, fog rolls in, then clears. */
.site-loader:not([data-scene="water"]):not(.is-quick).is-done .fl-fog {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.6s ease 0.45s, transform 1.2s ease 0.45s;
}
.site-loader:not([data-scene="water"]):not(.is-quick).is-draining > :not(.fl-fog) {
  visibility: hidden;
}
.site-loader:not([data-scene="water"]):not(.is-quick).is-draining .fl-fog {
  opacity: 0;
  transform: scale(1.3);
  transition: opacity 1s ease, transform 1.2s ease;
}
.site-loader.is-draining {
  background: none;
}
.site-loader.is-draining .fl-mist {
  display: none;
}
/* A return visit in the same tab (and reduced motion): a short fade. */
.site-loader.is-quick.is-draining {
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* As the site appears, the hero copy rises into place. */
@keyframes fl-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
html.fl-reveal .hero-center .shell > * {
  animation: fl-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards;
}
html.fl-reveal .hero-center .shell > :nth-child(2) { animation-delay: 0.3s; }
html.fl-reveal .hero-center .shell > :nth-child(3) { animation-delay: 0.4s; }
html.fl-reveal .hero-center .shell > :nth-child(4) { animation-delay: 0.5s; }
html.fl-reveal .hero-center .shell > :nth-child(n + 5) { animation-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  .fl-mist span,
  .fl-logo,
  .fl-wave,
  .fl-bubble,
  .fl-wake,
  .fl-sun,
  .fl-star {
    animation: none;
  }
  .fl-star {
    opacity: 0.75;
  }
  .fl-bubble {
    display: none;
  }
  .site-loader.is-draining {
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  html.fl-reveal .hero-center .shell > * {
    animation: none;
  }
}