/* ============================================================
   Homepage load intro (js/hero-intro.js).
   While the page loads: a birdseye shot straight down over the dark sea,
   a small spinning cube of white light in the centre, a loading bar.
   Then the camera descends to the hero view and the scene frames into its
   hero slot; the white cube cools to reveal the photos.
   html.swft-intro is set by an inline script in <head> (first visit per
   session, motion allowed), so the first paint is already the intro.
   ============================================================ */

html.swft-intro,
html.swft-intro body {
  overflow: hidden;
}

/* Show the hero section (normally held until "hero-ready"), but only the scene */
html.swft-intro.w-mod-js body:not(.hero-ready) .section_gallery.has-hero-ocean,
html.swft-intro .section_gallery.has-hero-ocean {
  opacity: 1;
}

html.swft-intro .has-hero-ocean > .padding-global {
  opacity: 0;
}

/* The scene takes over the viewport; the JS animates these four values */
html.swft-intro .home-hero-ocean.swft-ocean {
  position: fixed;
  z-index: 2000;
  top: var(--intro-top, 0px);
  left: var(--intro-left, 0px);
  width: var(--intro-w, 100vw);
  height: var(--intro-h, 100vh);
  pointer-events: none;
}

/* Once it starts flying in, the nav sits on top so the scene's edge never cuts across it */
html.swft-intro.swft-intro--zoom .home-hero-ocean.swft-ocean {
  z-index: 900;
}

/* Edge fades belong to the hero framing; bring them in as the scene lands */
html.swft-intro .home-hero-ocean.swft-ocean::before,
html.swft-intro .home-hero-ocean.swft-ocean::after {
  opacity: var(--intro-fades, 0);
}

/* The DOM cube waits at its hero size; the ocean draws the cube during the
   camera move, then hands over (--intro-dom 0 -> 1) once the camera lands. */
html.swft-intro .home-hero-ocean .swft-cube__scene {
  opacity: var(--intro-dom, 0);
}

/* White light-source cube: the faces are burned out to white (--intro-white 1)
   and cool down to the photos (0). A filter, so it sits over the images too. */
html.swft-intro .home-hero-ocean .swft-cube__face {
  border-color: #fff;
  filter: brightness(calc(0.85 + 7 * var(--intro-white, 1))) saturate(calc(1 - var(--intro-white, 1)));
  box-shadow:
    0 0 calc(10px + 30px * var(--intro-white, 1)) rgba(255, 255, 255, calc(0.35 + 0.6 * var(--intro-white, 1))),
    0 0 calc(30px + 90px * var(--intro-white, 1)) rgba(200, 230, 255, calc(0.25 + 0.45 * var(--intro-white, 1))),
    inset 0 0 22px rgba(255, 255, 255, 0.6);
  transition: none;
}

html.swft-intro .home-hero-ocean .swft-cube__face-label,
html.swft-intro .home-hero-ocean .swft-cube__face-pips {
  opacity: calc(1 - var(--intro-white, 1));
}

/* ---------- Loading UI ---------- */
.swft-intro-ui {
  position: fixed;
  left: 50%;
  bottom: max(9vh, 3.5rem);
  z-index: 2001;
  display: grid;
  justify-items: center;
  gap: 0.9rem;
  width: min(18rem, 70vw);
  translate: -50% 0;
  color: #fff;
  font-family: var(--swft-font, "Inter Tight", Inter, sans-serif);
  pointer-events: none;
  transition: opacity 0.45s ease, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.swft-intro-ui.is-leaving {
  opacity: 0;
  translate: -50% 12px;
}

.swft-intro-ui__brand {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.28em;
}

.swft-intro-ui__brand span {
  font-weight: 400;
}

.swft-intro-ui__track {
  position: relative;
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.16);
}

.swft-intro-ui__bar {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.6), #fff);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
}

.swft-intro-ui__meta {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-variant-numeric: tabular-nums;
}