/*
 * src/features/help-center/intro.css — first-load brand intro (src/features/help-center/intro.js)
 * A restrained, luxurious Torus reveal on obsidian: a precise torus emblem with a
 * circular progress arc + a travelling light, a masked wordmark reveal with a
 * single sheen sweep, and flanking hairlines. Heavy GSAP motion with a CSS-keyframe
 * fallback; fully reduced-motion-safe (calm static final frame). No skip control.
 */

#torus-intro {
  /* base display/cover live in the inline critical CSS so it paints frame-1 */
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  -webkit-font-smoothing: antialiased;
  will-change: opacity, transform;
}

/* A single, slow ambient bloom behind the stage — a specific light, not decoration.
   Deep vignette keeps the edges obsidian so the emblem reads as the only light source. */
#torus-intro::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 38% at 50% 44%, rgba(56, 189, 248, 0.09), transparent 72%),
    radial-gradient(120% 90% at 50% 120%, rgba(99, 102, 241, 0.10), transparent 60%);
  animation: ti-breathe 6.5s ease-in-out infinite;
}
#torus-intro::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(130% 130% at 50% 42%, transparent 52%, rgba(2, 3, 10, 0.55) 100%);
}
@keyframes ti-breathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

/* ── Stage ───────────────────────────────────────────────────────────────── */
.ti-stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: 30px;
  padding: 24px;
}

/* Emblem */
.ti-emblem { display: block; overflow: visible; }
.ti-glow      { transform-origin: 120px 120px; }
.ti-orbit     { transform-origin: 120px 120px; }
.ti-prog      { transform-box: view-box; }
.ti-glint     { transform-origin: 120px 120px; filter: drop-shadow(0 0 5px rgba(224, 242, 254, 0.9)); }
.ti-ring      { transform-origin: 120px 120px; }
.ti-leaf      { transform-origin: 120px 132px; }
.ti-leaflet   { transform-box: fill-box; transform-origin: center; }
.ti-core-dot  { filter: drop-shadow(0 0 7px rgba(224, 242, 254, 0.95)); }

/* Wordmark — solid ink, emphasis by weight + a refined accent. Revealed by a
   clip sweep per letter; a one-time sheen glides across on settle. */
.ti-wordmark {
  position: relative;
  display: flex; gap: 0.4em; margin: 0;
  font-size: 44px; font-weight: 600; letter-spacing: 0.16em;
  line-height: 1.16;                 /* room for the letter blur/rise inside overflow */
  overflow: hidden;                  /* clips the sheen sweep to the wordmark box */
}
.ti-word { display: inline-flex; }
.ti-word-1 .ti-l { color: #f4f8ff; }
.ti-word-2 .ti-l { color: #8fd0f4; }
.ti-l {
  display: inline-block;
  /* GSAP animates these; the values here are the fallback / reduced-motion resting state */
  will-change: transform, opacity, filter;
}
/* one-time luxury sheen that sweeps the wordmark on settle */
.ti-sheen {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(224, 242, 254, 0.5) 50%, transparent 60%);
  mix-blend-mode: screen; transform: translateX(-130%);
}

/* Flanking hairlines + subtitle */
.ti-meta {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.ti-rule {
  display: block; width: 34px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(186, 211, 232, 0.5));
  transform: scaleX(0);
}
.ti-rule.ti-rule-r { background: linear-gradient(90deg, rgba(186, 211, 232, 0.5), transparent); }
.ti-sub {
  font-size: 11px; font-weight: 600; letter-spacing: 0.34em; text-indent: 0.34em;
  color: rgba(186, 211, 232, 0.62);
  white-space: nowrap;
}

/* Dismiss state — the whole overlay lifts + fades, handing off to the app */
#torus-intro.ti-out {
  transition: opacity 0.62s ease, transform 0.62s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0; transform: scale(1.05); pointer-events: none;
}

/* ── CSS fallback animation (when GSAP is unavailable) ──────────────────────
   .ti-css-anim is added by intro.js only if window.gsap is missing. */
#torus-intro.ti-css-anim .ti-ring-a { stroke-dasharray: 528; stroke-dashoffset: 528; animation: ti-draw 1.1s 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
#torus-intro.ti-css-anim .ti-ring-b { stroke-dasharray: 352; stroke-dashoffset: 352; animation: ti-draw 1.1s 0.34s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
#torus-intro.ti-css-anim .ti-leaf   { opacity: 0; transform: scale(0.86); animation: ti-pop 0.85s 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
#torus-intro.ti-css-anim .ti-orbit  { animation: ti-spin 40s linear infinite; }
#torus-intro.ti-css-anim .ti-glint  { stroke-dasharray: 20 508; animation: ti-spin 3.4s linear infinite; }
#torus-intro.ti-css-anim .ti-prog   { stroke-dasharray: 653; stroke-dashoffset: 653; animation: ti-draw 2.1s 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
#torus-intro.ti-css-anim .ti-wordmark .ti-l { opacity: 0; transform: translateY(0.5em); filter: blur(6px); animation: ti-letter 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
#torus-intro.ti-css-anim .ti-rule   { animation: ti-rule 0.7s 1.35s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
#torus-intro.ti-css-anim .ti-sub    { opacity: 0; transform: translateY(6px); animation: ti-rise 0.7s 1.45s ease forwards; }
#torus-intro.ti-css-anim .ti-sheen  { animation: ti-sheen 1.1s 1.7s ease-out forwards; }
@keyframes ti-draw   { to { stroke-dashoffset: 0; } }
@keyframes ti-pop    { to { opacity: 1; transform: scale(1); } }
@keyframes ti-spin   { to { transform: rotate(360deg); } }
@keyframes ti-rise   { to { opacity: 1; transform: translateY(0); } }
@keyframes ti-rule   { to { transform: scaleX(1); } }
@keyframes ti-letter { to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes ti-sheen  { 0% { opacity: 0; transform: translateX(-120%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(120%); } }

/* Stagger the CSS-fallback letters (GSAP handles this precisely otherwise). */
#torus-intro.ti-css-anim .ti-wordmark .ti-l:nth-child(1) { animation-delay: 0.88s; }
#torus-intro.ti-css-anim .ti-wordmark .ti-l:nth-child(2) { animation-delay: 0.94s; }
#torus-intro.ti-css-anim .ti-wordmark .ti-l:nth-child(3) { animation-delay: 1.00s; }
#torus-intro.ti-css-anim .ti-wordmark .ti-l:nth-child(4) { animation-delay: 1.06s; }
#torus-intro.ti-css-anim .ti-wordmark .ti-l:nth-child(5) { animation-delay: 1.12s; }
#torus-intro.ti-css-anim .ti-wordmark .ti-l:nth-child(6) { animation-delay: 1.18s; }
#torus-intro.ti-css-anim .ti-wordmark .ti-l:nth-child(7) { animation-delay: 1.24s; }

/* ── Reduced motion — calm static final frame, no spin/draw/sheen ─────────── */
@media (prefers-reduced-motion: reduce) {
  #torus-intro::before { animation: none; opacity: 0.85; }
  #torus-intro.ti-css-anim .ti-ring-a,
  #torus-intro.ti-css-anim .ti-ring-b,
  #torus-intro.ti-css-anim .ti-prog { stroke-dashoffset: 0; animation: none; }
  #torus-intro.ti-css-anim .ti-leaf,
  #torus-intro.ti-css-anim .ti-sub  { opacity: 1; transform: none; animation: none; }
  #torus-intro.ti-css-anim .ti-wordmark .ti-l { opacity: 1; transform: none; filter: none; animation: none; }
  #torus-intro.ti-css-anim .ti-rule { transform: scaleX(1); animation: none; }
  #torus-intro.ti-css-anim .ti-orbit,
  #torus-intro.ti-css-anim .ti-glint { animation: none; }
  #torus-intro.ti-css-anim .ti-sheen { opacity: 0; animation: none; }
  #torus-intro.ti-out { transition: opacity 0.3s ease; transform: none; }
}

/* Light theme — the intro stays dark + cinematic regardless (brand moment). */
html[data-theme="light"] #torus-intro { background: radial-gradient(125% 125% at 50% 36%, #0a1226 0%, #05070f 55%, #02030a 100%); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ti-emblem { width: 150px; height: 150px; }
  .ti-wordmark { font-size: 31px; letter-spacing: 0.13em; }
  .ti-sub { font-size: 9.5px; letter-spacing: 0.28em; text-indent: 0.28em; }
  .ti-rule { width: 22px; }
  .ti-stage { gap: 24px; }
}