/* ==========================================================================
   WELCOME STINGER — cinematic brand reveal overlay
   ========================================================================== */

html.stinger-active { overflow: hidden; }

.stinger {
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--surface);
  color: var(--forest);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  cursor: pointer;
  /* Radial reveal exit — circle expands from center, masking us away */
  clip-path: circle(150% at 50% 50%);
  transition: clip-path 700ms cubic-bezier(.7,0,.3,1), opacity 400ms ease 300ms;
}
.stinger--exit {
  clip-path: circle(0% at 50% 50%);
  opacity: 0;
  pointer-events: none;
}

/* Faint hex pattern background */
.stinger__hexgrid {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  color: var(--moss);
  opacity: 0.18;
  animation: stinger-bg 2400ms ease-out both;
}
@keyframes stinger-bg {
  0%   { opacity: 0; transform: scale(1.08); }
  40%  { opacity: 0.22; }
  100% { opacity: 0.14; transform: scale(1); }
}

/* Scanner head sweep — thin line travels top→bottom illuminating its trail */
.stinger__scan {
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--forest), transparent);
  box-shadow: 0 0 24px 4px rgba(27,94,32,0.35);
  animation: stinger-scan 900ms cubic-bezier(.5,0,.3,1) both;
}
.stinger__scan::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 100%;
  height: 80px;
  background: linear-gradient(to bottom,
    rgba(27,94,32,0.10), rgba(27,94,32,0.02), transparent);
}
@keyframes stinger-scan {
  0%   { transform: translateY(-10px); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* Stage container */
.stinger__stage {
  position: relative;
  width: 640px; max-width: 92vw;
  display: flex; flex-direction: column; align-items: center;
  z-index: 2;
}

/* ----- Molecule synthesis ----- */
.stinger__molecule {
  position: absolute;
  width: 560px; height: 560px;
  max-width: 92vw; max-height: 92vw;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  color: var(--forest);
  opacity: 0;
  animation: stinger-mol-fade 600ms ease-out 250ms both;
  pointer-events: none;
}
@keyframes stinger-mol-fade {
  from { opacity: 0; }
  to   { opacity: 0.35; }
}

/* Ring atoms — pop in sequentially */
.stinger__atoms circle,
.stinger__atoms-sub circle {
  fill: var(--forest);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: stinger-atom-pop 320ms cubic-bezier(.5,1.6,.4,1) both;
}
.stinger__atoms circle[data-i="0"] { animation-delay: 380ms; }
.stinger__atoms circle[data-i="1"] { animation-delay: 440ms; }
.stinger__atoms circle[data-i="2"] { animation-delay: 500ms; }
.stinger__atoms circle[data-i="3"] { animation-delay: 560ms; }
.stinger__atoms circle[data-i="4"] { animation-delay: 620ms; }
.stinger__atoms circle[data-i="5"] { animation-delay: 680ms; }
.stinger__atoms-sub circle:nth-child(1) { animation-delay: 1100ms; }
.stinger__atoms-sub circle:nth-child(2) { animation-delay: 1180ms; }
.stinger__atoms-sub circle:nth-child(3) { animation-delay: 1240ms; }

@keyframes stinger-atom-pop {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1); }
}

/* Ring bonds — stroke-dashoffset draw */
.stinger__bonds line,
.stinger__double line,
.stinger__bonds-sub line {
  stroke: var(--forest);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: stinger-bond-draw 360ms cubic-bezier(.4,0,.2,1) both;
}
.stinger__bonds line[data-i="0"] { animation-delay: 420ms; }
.stinger__bonds line[data-i="1"] { animation-delay: 480ms; }
.stinger__bonds line[data-i="2"] { animation-delay: 540ms; }
.stinger__bonds line[data-i="3"] { animation-delay: 600ms; }
.stinger__bonds line[data-i="4"] { animation-delay: 660ms; }
.stinger__bonds line[data-i="5"] { animation-delay: 720ms; }

.stinger__double line {
  stroke-width: 1.6;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
}
.stinger__double line[data-i="0"] { animation-delay: 820ms; }
.stinger__double line[data-i="1"] { animation-delay: 880ms; }
.stinger__double line[data-i="2"] { animation-delay: 940ms; }

.stinger__bonds-sub line:nth-child(1) { animation-delay: 1080ms; }
.stinger__bonds-sub line:nth-child(2) { animation-delay: 1140ms; }
.stinger__bonds-sub line:nth-child(3) { animation-delay: 1200ms; }

@keyframes stinger-bond-draw {
  from { stroke-dashoffset: 200; }
  to   { stroke-dashoffset: 0; }
}

/* ----- Brand lockup ----- */
.stinger__lockup {
  position: relative;
  z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.stinger__mark {
  width: 88px; height: 88px;
  margin-bottom: 18px;
  opacity: 0;
  transform: scale(0.7);
  animation: stinger-mark-in 600ms cubic-bezier(.3,1.4,.4,1) 900ms both;
}
@keyframes stinger-mark-in {
  0%   { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.stinger__wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 5.4vw, 64px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0.16em;
  padding-left: 0.16em; /* visual balance for letterspacing */
  display: flex;
  margin-bottom: 14px;
}
.stinger__wordmark span {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  animation: stinger-letter-in 500ms cubic-bezier(.3,.9,.3,1) both;
}
.stinger__wordmark span:nth-child(1) { animation-delay: 1280ms; }
.stinger__wordmark span:nth-child(2) { animation-delay: 1330ms; }
.stinger__wordmark span:nth-child(3) { animation-delay: 1380ms; }
.stinger__wordmark span:nth-child(4) { animation-delay: 1430ms; }
.stinger__wordmark span:nth-child(5) { animation-delay: 1480ms; }
.stinger__wordmark span:nth-child(6) { animation-delay: 1530ms; }
.stinger__wordmark span:nth-child(7) { animation-delay: 1580ms; }

@keyframes stinger-letter-in {
  0%   { opacity: 0; transform: translateY(18px) scale(0.96); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* LABORATORIES line — rules draw outward from a central pivot */
.stinger__subline {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.stinger__sub {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.48em;
  color: var(--ink);
  text-transform: uppercase;
  padding-left: 0.48em;
  opacity: 0;
  animation: stinger-sub-in 500ms ease-out 1700ms both;
}
@keyframes stinger-sub-in {
  0%   { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}
.stinger__rule {
  display: block;
  height: 1.5px;
  background: var(--forest);
  width: 0;
  animation: stinger-rule-draw 480ms cubic-bezier(.4,0,.2,1) 1780ms both;
}
.stinger__rule--l { transform-origin: right center; }
.stinger__rule--r { transform-origin: left center; }
@keyframes stinger-rule-draw {
  from { width: 0; }
  to   { width: 60px; }
}

.stinger__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
  color: var(--forest);
  letter-spacing: 0.01em;
  opacity: 0;
  animation: stinger-tag-in 500ms ease-out 1980ms both;
}
@keyframes stinger-tag-in {
  0%   { opacity: 0; transform: translateY(8px); letter-spacing: 0.1em; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: 0.01em; }
}

/* ----- Document meta strip ----- */
.stinger__meta {
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  animation: stinger-meta-in 500ms ease-out 2100ms both;
}
.stinger__meta-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--ink-muted);
}
@keyframes stinger-meta-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px); }
  100% { opacity: 0.7; transform: translateX(-50%) translateY(0); }
}

/* ----- Circular verified stamp seal ----- */
.stinger__stamp {
  position: absolute;
  top: -40px;
  right: -100px;
  width: 140px; height: 140px;
  color: var(--forest);
  opacity: 0;
  transform: scale(0.5) rotate(-30deg);
  animation: stinger-stamp-in 700ms cubic-bezier(.2,1.5,.4,1) 2000ms both;
}
@keyframes stinger-stamp-in {
  0%   { opacity: 0; transform: scale(0.4) rotate(-40deg); }
  60%  { opacity: 0.95; transform: scale(1.1) rotate(8deg); }
  100% { opacity: 0.92; transform: scale(1) rotate(0deg); }
}
.stinger__stamp-ring,
.stinger__stamp-ring-inner {
  fill: none;
  stroke: currentColor;
}
.stinger__stamp-ring { stroke-width: 2; }
.stinger__stamp-ring-inner { stroke-width: 1; }
.stinger__stamp-dash {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.stinger__stamp-text {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  fill: currentColor;
  text-transform: uppercase;
}
.stinger__stamp-mark { color: var(--forest); }

@media (max-width: 760px) {
  .stinger__stamp { right: -10px; top: -100px; width: 110px; height: 110px; }
}

/* ----- Skip hint ----- */
.stinger__hint {
  position: absolute;
  bottom: -180px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  opacity: 0;
  animation: stinger-hint-in 600ms ease-out 2400ms both, stinger-hint-pulse 1600ms ease-in-out 2400ms infinite;
  white-space: nowrap;
}
@keyframes stinger-hint-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 0.55; transform: translateX(-50%) translateY(0); }
}
@keyframes stinger-hint-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.7; }
}

@media (max-width: 520px) {
  .stinger__mark { width: 64px; height: 64px; }
  .stinger__meta { bottom: -90px; font-size: 10px; gap: 6px; }
  .stinger__hint { bottom: -140px; }
}

@media (prefers-reduced-motion: reduce) {
  .stinger__scan, .stinger__hexgrid { display: none; }
  .stinger *,
  .stinger *::before,
  .stinger *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}