/* ================================================================
   Sutra — Startup Intro Overlay  (startup-intro.css)

   Shown once per browser session on genuine app launch.
   Audio is synthesized via Web Audio API in startup-intro.js —
   no external file is required by default.  To swap in a custom
   sound file, see the comment in src/boot/startup-intro.js.

   Z-index: 99999 — above every modal, panel, and overlay in the app.
   Position: fixed — unaffected by app layout, safe on all viewports.
   ================================================================ */

/* ----------------------------------------------------------------
   Overlay shell
   ---------------------------------------------------------------- */
#sutraStartupIntro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #09090f;
  /* Keep interactive while visible so skips register */
  pointer-events: all;
  /* Smooth exit transition — overridden by JS on instant skip */
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  /* Prevent text selection during the intro */
  user-select: none;
  -webkit-user-select: none;
  /* Cursor hint that clicking skips */
  cursor: default;
}

#sutraStartupIntro.intro-exiting {
  opacity: 0;
  pointer-events: none;
}

/* ----------------------------------------------------------------
   Ambient radial glow — faint halo behind the logo
   ---------------------------------------------------------------- */
.intro-glow {
  position: absolute;
  width: min(520px, 90vmin);
  height: min(520px, 90vmin);
  border-radius: 50%;
  /* Soft blue-indigo radial, matching Sutra's brand gradient */
  background: radial-gradient(
    ellipse at center,
    rgba(79, 114, 232, 0.16) 0%,
    rgba(79, 114, 232, 0.07) 40%,
    transparent 68%
  );
  opacity: 0;
  animation: introGlowReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
  /* No pointer capture */
  pointer-events: none;
}

/* ----------------------------------------------------------------
   Logo + wordmark container
   ---------------------------------------------------------------- */
.intro-logo-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  /* Ensure it doesn't clip on very small screens */
  padding: 0 24px;
}

/* Logo mark (approved raster PNG — assets/brand/sutra/generated/sutra-icon-256.png) */
.intro-logo-mark {
  width: 72px;
  height: 72px;
  display: block;
  /* High-quality smooth downscale of the 256px master. Do NOT use
     image-rendering: crisp-edges here — it is a pixel-art hint and on a
     soft, glowing app-icon raster it forces a harsh, aliased edge. */
  image-rendering: auto;
  -webkit-user-drag: none;
  /* The approved master is a fully OPAQUE square: its corners are solid
     black (0,0,0) outside a rounded-square rim of radius ≈19% of the icon.
     On the dark overlay + navy glow those black corners cast a faint square
     silhouette — the "weird outline." Clipping the element at ~18% (just
     inside the rim) removes the black corners entirely, so the glow shows
     through clean rounded corners and the mark reads as a true app icon.
     19.1% = measured rim radius; 18% leaves a hair of safety margin. */
  border-radius: 18%;
  /* A soft halo that follows the now-rounded shape, so the mark reads as an
     intentional app icon on the dark overlay rather than a flat cutout. */
  filter: drop-shadow(0 6px 22px rgba(79, 114, 232, 0.32));
  opacity: 0;
  transform: scale(0.92);
  animation: introLogoReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards;
  /* Prevent drag */
  pointer-events: none;
}

/* Wordmark */
.intro-wordmark {
  font-family: 'Sora', 'Manrope', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(212, 226, 255, 0.88);
  opacity: 0;
  transform: translateY(5px);
  animation: introTextReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.58s forwards;
  /* Prevent subpixel jitter during animation */
  will-change: opacity, transform;
  line-height: 1;
}

/* Tagline beneath the wordmark */
.intro-tagline {
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(138, 169, 255, 0.46);
  opacity: 0;
  animation: introTaglineReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.82s forwards;
  /* Visible enough to pass WCAG AA against #09090f (contrast ~3.4:1 at larger tracking) */
  white-space: nowrap;
}

/* ----------------------------------------------------------------
   Skip hint — bottom of screen, very subtle
   ---------------------------------------------------------------- */
.intro-skip-hint {
  position: absolute;
  bottom: max(28px, env(safe-area-inset-bottom, 28px));
  left: 50%;
  transform: translateX(-50%);
  font-family: 'DM Sans', 'Inter', system-ui, sans-serif;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.16);
  opacity: 0;
  white-space: nowrap;
  animation: introTextReveal 0.4s ease 1.1s forwards;
  pointer-events: none;
}

/* ================================================================
   Keyframe definitions
   ================================================================ */

@keyframes introGlowReveal {
  to { opacity: 1; }
}

@keyframes introLogoReveal {
  to { opacity: 1; transform: scale(1); }
}

@keyframes introTextReveal {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes introTaglineReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ================================================================
   Reduced-motion variants
   Respects both the OS preference and Sutra's motionIntensity setting.
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Collapse all animations to a simple near-instant fade */
  .intro-glow,
  .intro-logo-mark,
  .intro-wordmark,
  .intro-tagline,
  .intro-skip-hint {
    animation-duration: 0.1s !important;
    animation-delay: 0s !important;
    transform: none !important;
  }

  #sutraStartupIntro {
    transition-duration: 0.15s !important;
  }
}

[data-motionintensity="off"] .intro-glow,
[data-motionintensity="off"] .intro-logo-mark,
[data-motionintensity="off"] .intro-wordmark,
[data-motionintensity="off"] .intro-tagline,
[data-motionintensity="off"] .intro-skip-hint {
  animation-duration: 0.08s !important;
  animation-delay: 0s !important;
  transform: none !important;
}

[data-motionintensity="off"] #sutraStartupIntro {
  transition-duration: 0.08s !important;
}

[data-motionintensity="reduced"] .intro-glow,
[data-motionintensity="reduced"] .intro-logo-mark,
[data-motionintensity="reduced"] .intro-wordmark,
[data-motionintensity="reduced"] .intro-tagline,
[data-motionintensity="reduced"] .intro-skip-hint {
  animation-duration: 0.12s !important;
  animation-delay: 0s !important;
  transform: none !important;
}

[data-motionintensity="reduced"] #sutraStartupIntro {
  transition-duration: 0.18s !important;
}

/* ================================================================
   Responsive layout
   ================================================================ */

/* Small phones */
@media (max-width: 480px) {
  .intro-logo-mark {
    width: 56px;
    height: 56px;
  }

  .intro-wordmark {
    font-size: 1.3rem;
  }

  .intro-tagline {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
  }
}

/* Tiny screens (small landscape phones) */
@media (max-height: 380px) {
  .intro-logo-wrap {
    gap: 10px;
  }

  .intro-logo-mark {
    width: 42px;
    height: 42px;
  }

  .intro-tagline {
    display: none;
  }

  .intro-skip-hint {
    bottom: max(12px, env(safe-area-inset-bottom, 12px));
    font-size: 0.58rem;
  }
}