/* ==========================================================================
   BCE brand intro — a one-per-session "construction" sequence that builds the
   BCE emblem from the ground up while stylized site crew orbit it, then lifts
   away to reveal the hero. Plain CSS keyframes (predetermined => off main
   thread, smooth even while React/Babel boot behind it). GPU-only properties.
   Motion philosophy per Emil Kowalski: strong custom easing, no scale(0),
   purposeful, with a reduced-motion fallback.
   ========================================================================== */

.bce-intro {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 1100px;
  background:
    radial-gradient(120% 130% at 50% 32%, #0d4032 0%, #072a20 52%, #04150f 100%),
    #04130e;
  will-change: transform;
  /* strong custom curves — the built-in CSS easings lack punch */
  --e-out: cubic-bezier(0.23, 1, 0.32, 1);
  --e-io: cubic-bezier(0.77, 0, 0.175, 1);
  --e-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* faint blueprint grid, masked to a soft vignette */
.bce-intro-grid {
  position: absolute;
  inset: -12%;
  background-image:
    linear-gradient(rgba(212, 162, 74, 0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 162, 74, 0.09) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0;
  -webkit-mask-image: radial-gradient(68% 64% at 50% 46%, #000 28%, transparent 76%);
  mask-image: radial-gradient(68% 64% at 50% 46%, #000 28%, transparent 76%);
  animation: bce-grid-in 1.2s var(--e-out) 0.1s forwards;
}
@keyframes bce-grid-in {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: scale(1); }
}

/* the 3D build stage */
.bce-intro-stage {
  position: relative;
  width: min(86vw, 430px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  display: grid;
  place-items: center;
}

/* --- scaffolding: thin gold guides drawn in stroke-by-stroke --- */
.bce-intro-scaffold {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: bce-scaffold-dim 0.9s ease 3.3s forwards;
}
@keyframes bce-scaffold-dim { to { opacity: 0.45; } }
.bce-intro-scaffold .d {
  stroke: var(--gold-soft, #d4a24a);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.55;
  animation: bce-draw 1.05s var(--e-io) var(--d, 0s) both;
}
@keyframes bce-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* --- crew: stylized hard-hat figures orbiting the emblem in 3D --- */
.bce-intro-orbit {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  opacity: 0;
  animation:
    bce-orbit-in 0.7s var(--e-out) 0.8s both,
    bce-orbit-out 0.6s ease 3.7s forwards;
}
@keyframes bce-orbit-in { to { opacity: 1; } }
@keyframes bce-orbit-out { to { opacity: 0; } }
/* Each figure carries its own orbit + counter-rotation so it always faces the
   viewer (no edge-on slivers); perspective makes near figures larger and lets
   them pass in front of and behind the emblem. Negative delays spread the crew
   evenly around the ring. */
.bce-intro-worker {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 42px;
  color: #f4f1e6;
  filter: drop-shadow(0 0 11px rgba(231, 192, 116, 0.85)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5));
  animation: bce-orbit 12s linear infinite;
  animation-delay: calc(var(--i) * -1.5s);
}
@keyframes bce-orbit {
  from { transform: translate(-50%, -50%) rotateY(0deg) translateZ(var(--r, 166px)) rotateY(0deg); }
  to   { transform: translate(-50%, -50%) rotateY(360deg) translateZ(var(--r, 166px)) rotateY(-360deg); }
}
.bce-intro-worker svg { width: 100%; height: 100%; display: block; }

/* --- the emblem itself: a circular mask + a bottom-up "build" reveal --- */
.bce-intro-logo-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(196px, 56%, 326px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
}
.bce-intro-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* reveal from the ground up — nothing, then built */
  clip-path: inset(100% 0 0 0);
  opacity: 0.25;
  transform: scale(0.94);
  animation:
    bce-build 2s var(--e-out) 1.2s forwards,
    bce-logo-in 2s var(--e-out) 1.2s forwards;
}
@keyframes bce-build {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes bce-logo-in {
  from { opacity: 0.25; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
/* a bright gold "build edge" that sweeps up as the emblem fills in */
.bce-intro-buildline {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-soft, #d4a24a) 30%, #fff 50%, var(--gold-soft, #d4a24a) 70%, transparent);
  box-shadow: 0 0 18px 2px rgba(231, 192, 116, 0.6);
  opacity: 0;
  animation: bce-buildline 2s var(--e-out) 1.2s forwards;
}
@keyframes bce-buildline {
  0%   { bottom: 0%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { bottom: 100%; opacity: 0; }
}
/* settle glow once built */
.bce-intro-logo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(212, 162, 74, 0);
  animation: bce-settle 1s var(--e-out) 3.1s forwards;
  pointer-events: none;
}
@keyframes bce-settle {
  0%   { box-shadow: 0 0 0 0 rgba(212, 162, 74, 0); }
  40%  { box-shadow: 0 0 44px 6px rgba(212, 162, 74, 0.45); }
  100% { box-shadow: 0 0 26px 1px rgba(212, 162, 74, 0.22); }
}

/* --- progress + wordmark --- */
.bce-intro-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(46px, 13vh, 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.bce-intro-bar {
  width: min(230px, 56vw);
  height: 2px;
  background: rgba(212, 162, 74, 0.18);
  border-radius: 2px;
  overflow: hidden;
}
.bce-intro-bar > span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--gold, #b8893a), var(--gold-soft, #d4a24a));
  animation: bce-progress 2.7s var(--e-io) 0.85s forwards;
}
@keyframes bce-progress { to { transform: scaleX(1); } }
.bce-intro-word {
  font-family: var(--font-display, system-ui, sans-serif);
  font-size: clamp(12px, 2.4vw, 14px);
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--green-pale, #c8d4be);
  opacity: 0;
  transform: translateY(6px);
  animation: bce-word-in 0.8s var(--e-out) 3s forwards;
}
@keyframes bce-word-in { to { opacity: 1; transform: translateY(0); } }

/* --- exit: lift the whole panel away to reveal the hero (iOS drawer curve) --- */
.bce-intro.is-leaving {
  transform: translateY(-101%);
  transition: transform 0.85s var(--e-drawer);
}
.bce-intro.is-leaving-rm {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* --- reduced motion: gentle opacity only, no movement --- */
@media (prefers-reduced-motion: reduce) {
  .bce-intro * { animation: none !important; }
  .bce-intro-grid { opacity: 0.5 !important; transform: none !important; }
  .bce-intro-orbit { display: none !important; }
  .bce-intro-scaffold { opacity: 0.4 !important; }
  .bce-intro-scaffold .d { stroke-dashoffset: 0 !important; }
  .bce-intro-buildline { display: none !important; }
  .bce-intro-logo {
    clip-path: none !important;
    opacity: 0;
    transform: none !important;
    animation: bce-logo-fade 0.6s ease forwards !important;
  }
  @keyframes bce-logo-fade { to { opacity: 1; } }
  .bce-intro-bar > span { transform: scaleX(1) !important; }
  .bce-intro-word { opacity: 1 !important; transform: none !important; }
}