/* ==========================================================================
   JAAS INTRO: full-screen logo intro that flies into the header logo.
   Self-contained: every rule is scoped to .jaas-intro* or html.jaas-intro-play,
   which js/jaas-intro.js sets in <head> only when the intro should play.
   Timing lives in the CONFIG object in js/jaas-intro.js.
   ========================================================================== */

:root {
  --jaas-intro-logo-size: clamp(140px, 34vmin, 300px); /* intro mark width */
  --jaas-intro-bg: #0e051d;                           /* matches the site canvas */
}

.jaas-intro {
  display: none;
}

/* The real header logo is revealed at the exact moment the flying mark lands on it */
html.jaas-intro-play .header .brand-logo-img {
  opacity: 0;
  animation: jaas-intro-logo-release 0s 8s forwards;
}

html.jaas-intro-play .jaas-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--jaas-intro-bg);
  animation: jaas-intro-failsafe 0s 8s forwards;
}

/* Once the script takes over, the background moves onto its own layer so it can
   fade independently of the logo (both happen in the same frame: no flash). */
.jaas-intro--live {
  background: transparent !important;
}

.jaas-intro__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 46%, rgba(124, 58, 237, 0.22) 0%, rgba(76, 29, 149, 0.1) 45%, transparent 75%),
    var(--jaas-intro-bg);
  will-change: opacity;
}

.jaas-intro__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3vmin, 24px);
  padding: 0 16px;
}

.jaas-intro__mark {
  display: block;
  width: var(--jaas-intro-logo-size);
  height: auto;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---- Assembly build (wrappers and parts are created by js/jaas-intro.js) ----
   object: flies to the header logo, owns perspective and the fade
   tilt:   the 3D space the pieces fly in (preserve-3d); never given opacity, which flattens it
   parts:  the logo cut into pieces (assets/intro-layers/), which fly in from
           different depths and lock into place; then the untouched mark takes over
   glint:  a light sweep clipped to the logo's own alpha, played on lock */
.jaas-intro__object {
  position: relative;
  width: var(--jaas-intro-logo-size);
  opacity: 0;
  perspective: 900px;
  will-change: transform, opacity;
}

.jaas-intro__tilt {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

.jaas-intro--live .jaas-intro__mark {
  position: relative;
  width: 100%;
  opacity: 1;
  will-change: auto;
}

.jaas-intro--assembling .jaas-intro__mark {
  opacity: 0;
}

.jaas-intro__part {
  position: absolute;
  will-change: transform;
  pointer-events: none;
}

.jaas-intro__part img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  user-select: none;
  -webkit-user-drag: none;
}

/* The piece's own shape, blacked out and blurred once; only its opacity and
   offset animate, so the shadow costs nothing per frame */
.jaas-intro__part .jaas-intro__shade {
  filter: brightness(0) blur(6px);
  opacity: 0;
  will-change: transform, opacity;
}

.jaas-intro__glint {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.jaas-intro__glint span {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-100%); /* parked off the left edge; slides to 100% */
  will-change: transform;
}

.jaas-intro__wordmark {
  font-family: var(--font-display, 'Syne', sans-serif);
  font-weight: 800;
  font-size: clamp(1.05rem, 3.4vmin, 1.75rem);
  letter-spacing: 0.22em;
  margin-right: -0.22em; /* balance trailing letter-spacing so it centres optically */
  color: #fff;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes jaas-intro-failsafe {
  to { visibility: hidden; pointer-events: none; }
}

@keyframes jaas-intro-logo-release {
  to { opacity: 1; }
}