/* Bardstar — first-visit intro (hub + Yapstar).
   Pure CSS timeline driven by html.intro-on (set by /assets/intro.js before first paint).
   Only transform/opacity are animated. Without JS, or with reduced motion, nothing here applies.
   Timeline (≈2.2 s: ×0.8 of the original 2.4 s cut, then ×1.15):
             0–0.64s mark in · 0.24–1.12s rings/rays · 0.44–0.96s letters rise · 0.84–1.28s light sweep
             1.54–1.94s content zooms away · 1.64–2.14s stage wipes up · 1.8s+ hero staggers in.
   The stage uses its own fixed dark colours, so it is dark in both site themes. */

.intro { display: none; color-scheme: dark; }

@media (prefers-reduced-motion: no-preference) {
  .intro-on .intro {
    display: block; position: fixed; inset: 0; z-index: 1000; overflow: hidden;
    color: #fff; cursor: pointer; contain: strict;
    animation: intro-wipe .57s cubic-bezier(.76, 0, .24, 1) 1.856s forwards;
    will-change: transform;
  }
  .intro-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(60% 50% at 50% 45%, #1b1540 0%, #0b0a1c 55%, #05050b 100%);
  }
  .intro-bg::after {
    /* glowing leading edge that travels up with the wipe */
    content: ""; position: absolute; left: -10%; right: -10%; bottom: -1px; height: 3px;
    background: linear-gradient(90deg, transparent, #8a6dff 25%, #f5b83d 50%, #ff4fa3 75%, transparent);
    box-shadow: 0 0 24px 4px rgba(138, 109, 255, .55), 0 0 60px 10px rgba(245, 184, 61, .25);
  }
  .intro-grain {
    position: absolute; inset: 0; opacity: 0;
    background-image:
      radial-gradient(1.2px 1.2px at 14% 24%, rgba(255,255,255,.7), transparent),
      radial-gradient(1px 1px at 27% 74%, rgba(255,255,255,.5), transparent),
      radial-gradient(1.4px 1.4px at 44% 14%, rgba(255,255,255,.6), transparent),
      radial-gradient(1px 1px at 63% 84%, rgba(255,255,255,.5), transparent),
      radial-gradient(1.4px 1.4px at 79% 30%, rgba(255,255,255,.7), transparent),
      radial-gradient(1px 1px at 89% 62%, rgba(255,255,255,.5), transparent),
      radial-gradient(1px 1px at 93% 10%, rgba(255,255,255,.6), transparent),
      radial-gradient(1.2px 1.2px at 7% 86%, rgba(255,255,255,.6), transparent),
      radial-gradient(1px 1px at 55% 52%, rgba(255,255,255,.4), transparent),
      radial-gradient(1px 1px at 34% 40%, rgba(255,255,255,.4), transparent);
    animation: intro-fade 1.104s ease-out .046s forwards;
  }
  .intro-glow {
    position: absolute; left: 50%; top: 42%; width: 900px; height: 900px; margin: -450px 0 0 -450px;
    background: radial-gradient(closest-side, rgba(138, 109, 255, .45), rgba(245, 184, 61, .12) 45%, transparent 70%);
    opacity: 0; transform: scale(.5);
    animation: intro-glow 1.012s cubic-bezier(.2, .7, .1, 1) .046s forwards;
  }
  .intro-center {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
    padding: 0 20px; text-align: center;
    animation: intro-zoom .46s cubic-bezier(.5, 0, .75, 0) 1.746s forwards;
  }

  /* mark */
  .intro-mark { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
  .intro-mark > * { grid-area: 1 / 1; }
  .intro-ring {
    width: 120px; height: 120px; border-radius: 50%; border: 1.5px solid rgba(245, 184, 61, .75);
    opacity: 0; transform: scale(.5);
    animation: intro-ring 1.012s cubic-bezier(.2, .7, .1, 1) .322s forwards;
  }
  .intro-ring.r2 { border-color: rgba(138, 109, 255, .8); animation-delay: .46s; }
  .intro-rays { position: relative; width: 120px; height: 120px; }
  .intro-rays i {
    position: absolute; left: 50%; top: 50%; width: 110px; height: 1.5px; margin-top: -.75px;
    transform-origin: 0 50%; transform: rotate(var(--r)) scaleX(0);
    background: linear-gradient(90deg, rgba(255, 227, 154, .9), transparent);
    animation: intro-ray .828s cubic-bezier(.2, .7, .1, 1) .276s forwards;
  }
  .intro-star {
    width: 104px; height: 104px; opacity: 0; transform: scale(.35) rotate(-45deg);
    filter: drop-shadow(0 0 18px rgba(245, 184, 61, .75)) drop-shadow(0 0 40px rgba(245, 184, 61, .35));
    animation: intro-mark .782s cubic-bezier(.2, 1.35, .35, 1) .092s forwards;
  }
  .intro-tile {
    width: 104px; height: 104px; border-radius: 26px; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    background: linear-gradient(135deg, #8a6dff, #4a2fd6);
    box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 20px 60px -10px rgba(107, 78, 255, .8), 0 0 80px rgba(138, 109, 255, .45);
    opacity: 0; transform: scale(.4) rotate(-12deg);
    animation: intro-mark .736s cubic-bezier(.2, 1.35, .35, 1) .092s forwards;
  }
  .intro-tile i {
    width: 8px; height: var(--h); border-radius: 4px; background: #fff; transform: scaleY(0);
    animation: intro-bar .506s cubic-bezier(.2, 1.4, .35, 1) calc(.368s + var(--i) * 64.4ms) forwards, intro-talk .828s ease-in-out calc(.92s + var(--i) * 82.8ms) 1 alternate;
  }
  .intro-tile .sp { position: absolute; right: 12px; top: 10px; width: 18px; height: 18px; opacity: 0; transform: scale(0) rotate(-90deg); animation: intro-spark .552s cubic-bezier(.2, 1.4, .35, 1) .736s forwards; }

  /* wordmark */
  .intro-word {
    position: relative; overflow: hidden; display: flex; padding: .08em .1em .14em;
    font-family: var(--font-display); font-size: clamp(46px, 9vw, 96px); font-weight: 700; letter-spacing: -0.045em; line-height: 1;
  }
  .intro-word span {
    display: inline-block; opacity: 0; transform: translateY(105%);
    background: linear-gradient(180deg, #fff 30%, #cfc6ff); -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: intro-rise .644s cubic-bezier(.2, .8, .15, 1) calc(.506s + var(--i) * 41.4ms) forwards;
  }
  .intro-sweep {
    position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55) 50%, transparent);
    mix-blend-mode: overlay; transform: translateX(-120%) skewX(-18deg);
    animation: intro-sweep .552s cubic-bezier(.4, 0, .2, 1) .966s forwards;
  }
  .intro-tag {
    font-size: clamp(15px, 1.8vw, 18px); color: rgba(255, 255, 255, .72); letter-spacing: .01em; margin-top: -8px;
    opacity: 0; transform: translateY(10px);
    animation: intro-up .552s cubic-bezier(.2, .7, .1, 1) .92s forwards;
  }
  .intro-tag b { color: #f5c65a; font-weight: 600; }
  .intro-hint {
    position: absolute; left: 0; right: 0; bottom: max(28px, env(safe-area-inset-bottom)); text-align: center;
    font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .45);
    opacity: 0; animation: intro-fade .46s ease-out .644s forwards;
  }

  /* skipped: quick fade instead of the wipe */
  .intro-skip .intro { animation: intro-skip .368s cubic-bezier(.4, 0, .2, 1) forwards; }

  /* hand-off: header + hero stagger in as the stage lifts */
  .intro-on .nav { animation: intro-hero .4s cubic-bezier(.2, .7, .1, 1) .8s both; }
  .intro-on .hero .hero-copy > *,
  .intro-on .hero .hero-split > :last-child { animation: intro-hero .4s cubic-bezier(.2, .7, .1, 1) both; animation-delay: 0.823s; }
  .intro-on .hero .hero-copy > :nth-child(2) { animation-delay: 0.860s; }
  .intro-on .hero .hero-copy > :nth-child(3) { animation-delay: 0.897s; }
  .intro-on .hero .hero-copy > :nth-child(4) { animation-delay: 0.933s; }
  .intro-on .hero .hero-copy > :nth-child(5) { animation-delay: 0.970s; }
  .intro-on .hero .hero-copy > :nth-child(n+6) { animation-delay: 1.007s; }
  .intro-on .hero .hero-split > :last-child { animation-name: intro-hero-visual; animation-duration: .5s; animation-delay: 0.892s; }
  .intro-skip .nav,
  .intro-skip .hero .hero-copy > *,
  .intro-skip .hero .hero-split > :last-child { animation-name: intro-hero-b; animation-delay: .11s; }
  .intro-skip .hero .hero-copy > :nth-child(2) { animation-delay: .166s; }
  .intro-skip .hero .hero-copy > :nth-child(3) { animation-delay: .221s; }
  .intro-skip .hero .hero-copy > :nth-child(4) { animation-delay: .276s; }
  .intro-skip .hero .hero-copy > :nth-child(n+5) { animation-delay: .331s; }
  .intro-skip .hero .hero-split > :last-child { animation-name: intro-hero-visual-b; animation-delay: .23s; }
}

@keyframes intro-wipe { to { transform: translate3d(0, -101%, 0); visibility: hidden; } }
@keyframes intro-skip { from { opacity: 1; } to { opacity: 0; transform: scale(1.04); visibility: hidden; } }
@keyframes intro-fade { to { opacity: 1; } }
@keyframes intro-glow { to { opacity: 1; transform: scale(1); } }
@keyframes intro-zoom { to { opacity: 0; transform: scale(1.12); } }
@keyframes intro-ring { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes intro-ray { 0% { transform: rotate(var(--r)) scaleX(0); opacity: 1; } 55% { transform: rotate(var(--r)) scaleX(1); opacity: .9; } 100% { transform: rotate(var(--r)) scaleX(1.1); opacity: 0; } }
@keyframes intro-mark { to { opacity: 1; transform: none; } }
@keyframes intro-bar { to { transform: scaleY(1); } }
@keyframes intro-talk { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
@keyframes intro-spark { to { opacity: 1; transform: none; } }
@keyframes intro-rise { to { opacity: 1; transform: none; } }
@keyframes intro-sweep { to { transform: translateX(330%) skewX(-18deg); } }
@keyframes intro-up { to { opacity: 1; transform: none; } }
@keyframes intro-hero { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes intro-hero-b { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes intro-hero-visual { from { opacity: 0; transform: translate3d(0, 30px, 0) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes intro-hero-visual-b { from { opacity: 0; transform: translate3d(0, 20px, 0) scale(.97); } to { opacity: 1; transform: none; } }

/* Hub intro in the Bardstar logo colours: ink, white, no gold or purple. */
@media (prefers-reduced-motion: no-preference) {
  .intro-on .intro-bardstar .intro-bg { background: radial-gradient(60% 50% at 50% 45%, #1d1d21 0%, #111113 55%, #09090a 100%); }
  .intro-on .intro-bardstar .intro-bg::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.85) 50%, transparent); box-shadow: 0 0 24px 4px rgba(255,255,255,.25); }
  .intro-on .intro-bardstar .intro-glow { background: radial-gradient(closest-side, rgba(255,255,255,.10), transparent 70%); }
  .intro-on .intro-bardstar .intro-ring, .intro-on .intro-bardstar .intro-ring.r2 { border-color: rgba(255,255,255,.5); }
  .intro-on .intro-bardstar .intro-rays i { background: linear-gradient(90deg, rgba(255,255,255,.7), transparent); }
  .intro-on .intro-bardstar .intro-star { width: auto; height: 104px; transform: scale(.35); filter: drop-shadow(0 0 30px rgba(255,255,255,.18)); }
  .intro-on .intro-bardstar .intro-word span { background: none; color: inherit; }
  .intro-on .intro-bardstar .intro-logo { display: block; height: clamp(44px, 8.5vw, 88px); width: auto; }
  .intro-on .intro-bardstar .intro-tag b { color: #fff; }
}

/* 0.85 seconds, start to finish (owner, 29 Oct 2026), and it cannot be skipped: mark and wordmark in, quick fade out. */
@media (prefers-reduced-motion: no-preference) {
  .intro-on .intro { animation: intro-out .25s ease .6s forwards; cursor: default; }
  .intro-on .intro-ring, .intro-on .intro-rays, .intro-on .intro-tag, .intro-on .intro-hint, .intro-on .intro-sweep { display: none; }
  .intro-on .intro-center { animation: none; }
  .intro-on .intro-star, .intro-on .intro-tile { animation-duration: .35s; animation-delay: 0s; }
  .intro-on .intro-word span { animation-duration: .35s; animation-delay: calc(.12s + var(--i) * 30ms); }
}
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }