/* ==========================================================================
   Sense Of Celebration — preloader
   --------------------------------------------------------------------------
   Self-contained and additive. Every selector is namespaced under
   .soc-preloader or html.soc-loading, so nothing here can reach an existing
   rule in style.css. The design tokens are read from style.css with literal
   fallbacks, so this file also stands on its own.

   The overlay is display:none by default and is only shown once the inline
   head script has set html.soc-loading. No JavaScript therefore means no
   overlay, and the site is never hidden behind an element that cannot open.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Gate and page lock
   -------------------------------------------------------------------------- */

.soc-preloader {
  display: none;
}

html.soc-loading .soc-preloader {
  display: block;
}

/* The lock stays on until the curtain starts parting, at which point the
   script adds .soc-open. Keeping the two classes separate lets the overlay
   finish its exit animation after the page beneath has already been released. */
html.soc-loading:not(.soc-open),
html.soc-loading:not(.soc-open) body {
  overflow: hidden;
}

html.soc-loading:not(.soc-open) {
  overscroll-behavior: none;
}

/* --------------------------------------------------------------------------
   2. Overlay and curtain panels
   -------------------------------------------------------------------------- */

.soc-preloader {
  position: fixed;
  inset: 0;
  /* height wins over the bottom offset, so the overlay follows the dynamic
     viewport on mobile instead of the address-bar-inclusive one */
  height: 100vh;
  height: 100dvh;
  z-index: 300;
  cursor: default;
}

/* Two cream halves. On exit they travel apart and the hero is read through
   the widening seam. The extra half pixel of height removes the hairline
   that fractional viewport heights would otherwise leave on the centre line. */
.soc-preloader__panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(50% + 0.5px);
  background-color: var(--cream, #f7f2ea);
  will-change: transform;
  backface-visibility: hidden;
}

.soc-preloader__panel--top {
  top: 0;
}

.soc-preloader__panel--bottom {
  bottom: 0;
}

/* --------------------------------------------------------------------------
   3. Stage
   -------------------------------------------------------------------------- */

.soc-preloader__stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: 1.25rem;
  text-align: center;
}

.soc-preloader__logo {
  display: block;
  width: clamp(15rem, 33vw, 27rem);
  height: auto;
  /* the wordmark starts below the viewBox and rises into it — this is the
     overflow edge that gives the reveal its clean bottom line */
  overflow: hidden;
}

.soc-preloader__mono,
.soc-preloader__word {
  will-change: transform, opacity;
}

/* Pre-animation state. The script animates away from here; if the script
   never runs, the 6 second safety in the head removes the overlay outright. */
.soc-preloader__mono,
.soc-preloader__word {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   4. Progress hairline
   -------------------------------------------------------------------------- */

.soc-preloader__rule {
  position: relative;
  width: clamp(4rem, 8vw, 5.5rem);
  height: 1px;
  margin-top: clamp(1.75rem, 3.6vw, 2.75rem);
  background-color: var(--line, rgba(30, 51, 107, 0.14));
  overflow: hidden;
  opacity: 0;
}

.soc-preloader__rule-fill {
  position: absolute;
  inset: 0;
  background-color: var(--navy, #1e336b);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   5. Optional caption — enable with data-caption="on" on .soc-preloader
   -------------------------------------------------------------------------- */

.soc-preloader__caption {
  display: none;
  margin: 1.1rem 0 0;
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--navy, #1e336b);
  opacity: 0;
}

.soc-preloader[data-caption="on"] .soc-preloader__caption {
  display: block;
}

/* --------------------------------------------------------------------------
   6. Holding the hero
   --------------------------------------------------------------------------
   style.css reveals content by adding .is-in from an IntersectionObserver.
   The hero is on screen at load, so it would otherwise play out behind the
   curtain and be over before anyone saw it. These rules pin the hero back to
   its pre-reveal values while the overlay is up; releasing .soc-open drops
   them and the existing transitions run exactly as authored. main.js is not
   touched, and only the hero is affected. */

html.soc-loading:not(.soc-open) .hero [data-reveal].is-in {
  opacity: 0;
  transform: translateY(26px);
}

html.soc-loading:not(.soc-open) .hero .hero__band[data-reveal="media"].is-in {
  clip-path: inset(14% 8% 14% 8%);
}

html.soc-loading:not(.soc-open) .hero [data-reveal="media"].is-in > img,
html.soc-loading:not(.soc-open) .hero [data-reveal="media"].is-in > video {
  transform: scale(1.08);
}

html.soc-loading:not(.soc-open) .hero .reveal-lines.is-in .word {
  opacity: 0;
  transform: translateY(0.42em);
}

/* --------------------------------------------------------------------------
   7. Fallback when GSAP is unavailable
   --------------------------------------------------------------------------
   The script adds .soc-preloader--css when window.gsap is missing, then
   toggles .is-shown and .is-leaving. Same choreography, coarser resolution:
   the monogram fades and settles, the wordmark rises, the curtain parts. */

.soc-preloader--css .soc-preloader__mono,
.soc-preloader--css .soc-preloader__word {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.soc-preloader--css .soc-preloader__mono {
  transform: scale(0.96) translateY(10px);
}

.soc-preloader--css .soc-preloader__word {
  transform: translateY(34px);
  transition-delay: 0.24s;
}

.soc-preloader--css .soc-preloader__rule {
  transition: opacity 0.5s ease 0.5s;
}

.soc-preloader--css .soc-preloader__rule-fill {
  transition: transform 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

.soc-preloader--css .soc-preloader__caption {
  transition: opacity 0.6s ease 0.7s;
}

.soc-preloader--css.is-shown .soc-preloader__mono,
.soc-preloader--css.is-shown .soc-preloader__word {
  opacity: 1;
  transform: none;
}

.soc-preloader--css.is-shown .soc-preloader__rule {
  opacity: 1;
}

.soc-preloader--css.is-shown .soc-preloader__rule-fill {
  transform: scaleX(1);
}

.soc-preloader--css.is-shown .soc-preloader__caption {
  opacity: 0.45;
}

.soc-preloader--css .soc-preloader__stage {
  transition: opacity 0.45s ease, transform 0.75s cubic-bezier(0.65, 0, 0.35, 1);
}

.soc-preloader--css .soc-preloader__panel {
  transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1);
}

.soc-preloader--css.is-leaving .soc-preloader__stage {
  opacity: 0;
  transform: scale(0.94);
}

.soc-preloader--css.is-leaving .soc-preloader__panel--top {
  transform: translateY(-100%);
}

.soc-preloader--css.is-leaving .soc-preloader__panel--bottom {
  transform: translateY(100%);
}

/* --------------------------------------------------------------------------
   8. Reduced motion
   --------------------------------------------------------------------------
   The script already branches on the media query and plays a static logo
   followed by a plain fade. These rules are the backstop for the CSS
   fallback path, where no script decision is involved. */

@media (prefers-reduced-motion: reduce) {
  .soc-preloader__mono,
  .soc-preloader__word {
    opacity: 1;
  }

  .soc-preloader--css .soc-preloader__mono,
  .soc-preloader--css .soc-preloader__word {
    transform: none;
    transition: none;
  }

  .soc-preloader--css .soc-preloader__rule {
    opacity: 1;
  }

  .soc-preloader--css .soc-preloader__rule-fill {
    transform: scaleX(1);
    transition: none;
  }

  .soc-preloader--css.is-leaving .soc-preloader__stage,
  .soc-preloader--css.is-leaving .soc-preloader__panel {
    transform: none;
  }

  /* A single quiet fade replaces the curtain */
  .soc-preloader--css.is-leaving {
    opacity: 0;
    transition: opacity 0.3s linear;
  }
}

/* --------------------------------------------------------------------------
   9. Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .soc-preloader__logo {
    width: min(72vw, 17rem);
  }

  .soc-preloader__rule {
    width: 3.75rem;
  }

  .soc-preloader__caption {
    font-size: 0.625rem;
    letter-spacing: 0.2em;
  }
}