/* =========================================================
   WayneAI Brand Intro Animation — "企業好幫手 / 與您攜手成就未來"
   Full-screen entrance sequence (~15s), CSS + JS driven.
   ========================================================= */

body.intro-lock{ overflow:hidden; }

.brand-intro{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink);
  overflow:hidden;
  opacity:1;
  transition:opacity .8s ease;
}
.brand-intro.is-hidden{ opacity:0; pointer-events:none; }
.brand-intro.is-gone{ display:none; }

/* Animated background wash */
.intro-bg{
  position:absolute; inset:-20%;
  background:
    radial-gradient(circle at 20% 25%, rgba(217,98,44,.35), transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(31,110,92,.35), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(217,98,44,.12), transparent 60%);
  filter:blur(40px);
  animation:introBgShift 9s ease-in-out infinite alternate;
}
@keyframes introBgShift{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(-3%,3%) scale(1.15); }
}

.intro-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(245,243,238,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,243,238,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(circle at 50% 50%, rgba(0,0,0,.9), transparent 72%);
  animation:introGridPan 20s linear infinite;
}
@keyframes introGridPan{ 0%{ background-position:0 0; } 100%{ background-position:44px 44px; } }

.intro-particles{ position:absolute; inset:0; pointer-events:none; }
.intro-particle{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:var(--accent); opacity:.55;
  animation:introFloat linear infinite;
}
.intro-particle.tone-b{ background:var(--accent-2); }
@keyframes introFloat{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.6; }
  50%{ transform:translateY(-60px) translateX(12px); }
  90%{ opacity:.5; }
  100%{ transform:translateY(-140px) translateX(-10px); opacity:0; }
}

.intro-skip{
  position:absolute; top:24px; right:24px; z-index:5;
  background:rgba(245,243,238,.08); color:var(--paper);
  border:1px solid rgba(245,243,238,.25); border-radius:999px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.04em;
  padding:9px 18px; cursor:pointer; display:flex; align-items:center; gap:8px;
  transition:background .2s ease, transform .2s ease;
}
.intro-skip:hover{ background:rgba(245,243,238,.16); transform:translateY(-1px); }

/* Sound-enable prompt — shown only if browser autoplay-with-sound was
   blocked, so the visitor can opt in with a single click/tap.
   Uses !important on layout-critical props so a stale/partial CSS load
   can never leave this button unstyled and colliding with the text. */
.intro-sound{
  position:absolute !important; top:24px !important; left:24px !important; z-index:20 !important;
  background:rgba(217,98,44,.85) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.55) !important; border-radius:999px !important;
  font-family:var(--mono), monospace !important; font-size:12.5px !important; letter-spacing:.04em !important;
  padding:9px 18px !important; cursor:pointer !important;
  display:none; align-items:center !important; gap:8px !important;
  white-space:nowrap !important; line-height:1.2 !important;
  max-width:calc(100vw - 48px) !important;
  pointer-events:auto !important; touch-action:manipulation !important;
  -webkit-tap-highlight-color:rgba(255,255,255,.3) !important;
  animation:soundPulse 1.8s ease-in-out infinite;
}
.intro-sound.show{ display:flex !important; }
.intro-sound:hover{ background:rgba(217,98,44,1) !important; }
@keyframes soundPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(217,98,44,.4); }
  50%{ box-shadow:0 0 0 8px rgba(217,98,44,0); }
}

.intro-stage{
  position:relative; z-index:2; text-align:center; color:var(--paper);
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding:0 24px; width:100%; max-width:640px;
}

/* Orbit / logo */
.intro-orbit{
  position:relative; width:180px; height:180px; margin:0 auto 6px;
  display:flex; align-items:center; justify-content:center;
}
.intro-ring{
  position:absolute; border-radius:50%;
  border:1px solid rgba(245,243,238,.18);
  animation:ringPulse 3.2s ease-out infinite;
}
.intro-ring.r1{ width:100%; height:100%; animation-delay:0s; }
.intro-ring.r2{ width:100%; height:100%; animation-delay:1.05s; }
.intro-ring.r3{ width:100%; height:100%; animation-delay:2.1s; }
@keyframes ringPulse{
  0%{ transform:scale(.55); opacity:0; border-color:rgba(217,98,44,.5); }
  35%{ opacity:.6; }
  100%{ transform:scale(1.35); opacity:0; border-color:rgba(31,110,92,.4); }
}
.intro-logo{
  position:relative; z-index:3; width:88px; height:88px; border-radius:22px;
  background:linear-gradient(155deg, var(--accent), #b84e22);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 rgba(217,98,44,.5);
  animation:introLogoPop .9s cubic-bezier(.2,1.4,.4,1) both, logoGlow 2.6s ease-in-out infinite 1s;
}
.intro-logo .intro-mark{
  font-family:var(--mono); font-weight:700; font-size:34px; color:var(--paper);
}
@keyframes introLogoPop{
  0%{ transform:scale(.2) rotate(-25deg); opacity:0; }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}
@keyframes logoGlow{
  0%,100%{ box-shadow:0 0 24px 0 rgba(217,98,44,.35); }
  50%{ box-shadow:0 0 42px 10px rgba(217,98,44,.55); }
}
.intro-orbit-icon{
  position:absolute; width:34px; height:34px; border-radius:50%;
  background:rgba(245,243,238,.08); border:1px solid rgba(245,243,238,.25);
  color:var(--paper); font-size:13px;
  display:flex; align-items:center; justify-content:center;
  opacity:1;
  animation:orbitSpin 12s linear infinite;
  animation-delay:1.2s;
  transform-origin:90px 90px;
  overflow:hidden;
}
.intro-orbit-icon.oi1{ top:-6px; left:73px; }
.intro-orbit-icon.oi2{ top:73px; left:152px; }
.intro-orbit-icon.oi3{ top:152px; left:73px; }
.intro-orbit-icon.oi4{ top:73px; left:-6px; }
@keyframes orbitSpin{ from{ transform:rotate(0deg) translateY(0); } to{ transform:rotate(360deg) translateY(0); } }

/* Inner "radiate from a distant point" arrival — travels from the very
   center of the orbit outward to each icon's final slot, starting tiny,
   blurred and transparent, ending sharp, full-size and in place. */
.orbit-icon-glow{
  width:100%; height:100%; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; filter:blur(9px);
  transform:translate(0,0) scale(.1);
  animation:iconRadiate .85s cubic-bezier(.15,.9,.25,1) forwards;
}
.intro-orbit-icon.oi1 .orbit-icon-glow{ --fx:0px; --fy:79px; animation-delay:.3s; }
.intro-orbit-icon.oi2 .orbit-icon-glow{ --fx:-79px; --fy:0px; animation-delay:.5s; }
.intro-orbit-icon.oi3 .orbit-icon-glow{ --fx:0px; --fy:-79px; animation-delay:.7s; }
.intro-orbit-icon.oi4 .orbit-icon-glow{ --fx:79px; --fy:0px; animation-delay:.9s; }
@keyframes iconRadiate{
  0%{ transform:translate(var(--fx),var(--fy)) scale(.1); opacity:0; filter:blur(9px); }
  60%{ opacity:1; filter:blur(1px); }
  100%{ transform:translate(0,0) scale(1); opacity:1; filter:blur(0); }
}

/* Wordmark — CSS-timed reveal, driven purely by animation-delay so the
   sequence is guaranteed regardless of JS/main-thread timing.
   Color animates from a dark, near-background tone up to a bright tone
   ("暗转亮") instead of a flat opacity fade, so each line is unmistakably
   readable against the dark background. */
/* Reveal (fade+rise, fast) happens first; the color brighten-up is a
   separate, SLOWER, clearly-visible animation that keeps running well
   after the text has already faded in — so the "dark -> bright" glow-up
   is unmistakable rather than finishing at the same time as the fade. */
.intro-wordmark{
  opacity:0; transform:translateY(14px);
  animation:introRise .5s cubic-bezier(.2,1,.3,1) forwards;
  animation-delay:1.0s;
}
.intro-wordmark h1{
  font-family:var(--sans); font-weight:600; font-size:clamp(34px,6vw,56px);
  letter-spacing:.01em; margin:0; line-height:1;
  color:#1A1812; text-shadow:none;
  animation:introBrighten 1.3s ease-out forwards;
  animation-delay:1.0s;
}
.intro-wordmark .w2{ color:var(--accent); text-shadow:0 0 24px rgba(217,98,44,.5); animation:none; }
.intro-sub{
  font-family:var(--mono); font-size:13px; letter-spacing:.12em;
  margin:6px 0 0; opacity:0; transform:translateY(10px); color:#1A1812;
  animation:introRise .45s ease forwards, introBrightenSub 1.2s ease-out forwards;
  animation-delay:2.3s, 2.3s;
}

/* Taglines */
.intro-taglines{ margin-top:6px; min-height:64px; display:flex; flex-direction:column; gap:8px; }
.tag-line{
  font-family:var(--serif); font-size:clamp(18px,3.2vw,26px); margin:0;
  opacity:0; transform:translateY(16px) scale(.97); color:#1A1812;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.tag-line.tag-1{
  animation:introRiseScale .5s cubic-bezier(.2,1,.3,1) forwards, introBrighten 1.3s ease-out forwards;
  animation-delay:4.6s, 4.6s;
}
.tag-line.tag-2{
  animation:introRiseScale .5s cubic-bezier(.2,1,.3,1) forwards, introBrighten 1.3s ease-out forwards;
  animation-delay:8.2s, 8.2s;
}
.tag-line i{ color:#4FC3A1; font-size:.8em; opacity:0; animation:iconFadeIn .6s ease forwards; }
.tag-line.tag-1 i{ animation-delay:4.9s; }
.tag-line.tag-2 i{ animation-delay:8.5s; }
.tag-line .text-accent-glow{
  color:var(--accent); font-weight:600; text-shadow:0 0 20px rgba(217,98,44,.45);
  animation:accentBrighten 1.3s ease-out forwards;
}
.tag-line.tag-1 .text-accent-glow{ animation-delay:4.6s; }
.tag-line.tag-2 .text-accent-glow{ animation-delay:8.2s; }
@keyframes introRise{ to{ opacity:1; transform:translateY(0); } }
@keyframes introRiseScale{ to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes iconFadeIn{ to{ opacity:1; } }
/* Fast, clearly-visible dark -> bright glow-up: reaches full brightness
   (pure white-paper tone + soft glow) well before the next line appears. */
@keyframes introBrighten{
  0%{ color:#1A1812; text-shadow:none; }
  40%{ color:#C9C6BC; text-shadow:0 0 0 rgba(245,243,238,0); }
  100%{ color:#FFFFFF; text-shadow:0 0 18px rgba(245,243,238,.55); }
}
@keyframes introBrightenSub{
  0%{ color:#1A1812; }
  40%{ color:#9C9890; }
  100%{ color:#F0EDE4; }
}
@keyframes accentBrighten{
  0%{ color:#4A2712; text-shadow:none; }
  40%{ color:#C9702F; }
  100%{ color:#FF8A4C; text-shadow:0 0 22px rgba(255,138,76,.65); }
}

/* Progress */
.intro-progress{
  width:220px; height:3px; background:rgba(245,243,238,.15); border-radius:999px;
  overflow:hidden; margin-top:14px;
}
.intro-progress-bar{
  width:0%; height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width 14.5s linear;
}

/* Exit micro-interaction */
.intro-stage.exiting .intro-orbit{ animation:introExitShrink .7s ease forwards; }
@keyframes introExitShrink{ to{ transform:scale(.82); opacity:.4; } }

@media (max-width:520px){
  .intro-orbit{ width:150px; height:150px; }
  .intro-logo{ width:74px; height:74px; border-radius:18px; }
  .intro-orbit-icon{ width:28px; height:28px; }
}

@media (prefers-reduced-motion: reduce){
  .brand-intro, .intro-bg, .intro-grid, .intro-ring, .intro-logo, .intro-orbit-icon,
  .intro-wordmark, .intro-wordmark h1, .intro-sub, .tag-line, .tag-line i{
    animation:none !important; opacity:1 !important; transform:none !important; color:var(--paper) !important;
  }
}