/* ═══════════════════════════════════════════════════
   NETRIGO GAME STUDIOS — Animations v4.0
   Aurora Background · Particle System · Premium FX
═══════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-20px) rotate(1deg); }
}

/* Aurora blobs */
@keyframes aurora-1 {
  0%, 100% { transform: translate(0px, 0px) scale(1); opacity: 0.12; }
  25%       { transform: translate(60px, -40px) scale(1.08); opacity: 0.18; }
  50%       { transform: translate(-30px, 60px) scale(0.92); opacity: 0.10; }
  75%       { transform: translate(-60px, -20px) scale(1.05); opacity: 0.15; }
}
@keyframes aurora-2 {
  0%, 100% { transform: translate(0px, 0px) scale(1); opacity: 0.09; }
  33%       { transform: translate(-80px, 50px) scale(1.12); opacity: 0.14; }
  66%       { transform: translate(50px, -80px) scale(0.88); opacity: 0.08; }
}
@keyframes aurora-3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.06; }
  40%       { transform: translate(40px, 80px) scale(1.1); opacity: 0.12; }
  70%       { transform: translate(-50px, 30px) scale(0.95); opacity: 0.08; }
}
@keyframes aurora-4 {
  0%, 100% { transform: translate(0,0) rotate(0deg) scale(1); opacity: 0.05; }
  50%       { transform: translate(-30px, -40px) rotate(15deg) scale(1.2); opacity: 0.10; }
}

@keyframes grid-drift {
  0%, 100% { transform: translateX(0) translateY(0); }
  50%       { transform: translateX(-20px) translateY(-10px); }
}

@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 0.4; }
  70%  { transform: scale(2.6); opacity: 0;   }
  100% { transform: scale(1);   opacity: 0;   }
}
@keyframes pulse-red {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(2.4); opacity: 0;   }
  100% { transform: scale(1);   opacity: 0;   }
}
@keyframes scan-line {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(400%); }
}
@keyframes glitch-1 {
  0%,100%  { clip-path: inset(40% 0 61% 0); transform: translateX(-2px); }
  20%      { clip-path: inset(92% 0 1% 0);  transform: translateX(2px); }
  40%      { clip-path: inset(43% 0 1% 0);  transform: translateX(-1px); }
  60%      { clip-path: inset(25% 0 58% 0); transform: translateX(3px); }
  80%      { clip-path: inset(54% 0 7% 0);  transform: translateX(-2px); }
}
@keyframes glitch-2 {
  0%,100%  { clip-path: inset(50% 0 30% 0); transform: translateX(2px); }
  20%      { clip-path: inset(12% 0 65% 0); transform: translateX(-2px); }
  40%      { clip-path: inset(80% 0 5% 0);  transform: translateX(1px); }
  60%      { clip-path: inset(35% 0 45% 0); transform: translateX(-3px); }
  80%      { clip-path: inset(65% 0 20% 0); transform: translateX(2px); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes shimmer-border {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes border-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,169,110,0); }
  50%       { box-shadow: 0 0 20px rgba(200,169,110,0.12); }
}
@keyframes noise-flicker {
  0%,100% { opacity: 0.03; }
  10%     { opacity: 0.025; }
  20%     { opacity: 0.035; }
  30%     { opacity: 0.028; }
  50%     { opacity: 0.02; }
  70%     { opacity: 0.032; }
  90%     { opacity: 0.026; }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes particle-float {
  0%   { transform: translateY(0) translateX(0) scale(1);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-120px) translateX(var(--dx, 20px)) scale(0.4); opacity: 0; }
}
@keyframes glow-pulse-card {
  0%, 100% { box-shadow: 0 0 0 1px rgba(200,169,110,0.0),  0 8px 32px rgba(0,0,0,0.4); }
  50%       { box-shadow: 0 0 0 1px rgba(200,169,110,0.15), 0 16px 48px rgba(200,169,110,0.06); }
}
@keyframes progress-bar {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes typing-cursor {
  0%, 100% { border-right-color: var(--primary); }
  50%       { border-right-color: transparent; }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes counter-strike {
  from { opacity: 0; transform: scale(0.8) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes outline-draw {
  to { stroke-dashoffset: 0; }
}

/* ── Utility animation classes ── */
.float-anim        { animation: float      6s ease-in-out infinite; }
.float-slow-anim   { animation: float-slow 8s ease-in-out infinite; }
.pulse-anim        { animation: pulse-ring 2s ease-out infinite; }
.fade-in           { animation: fadeIn   0.6s ease forwards; }
.fade-in-up        { animation: fadeInUp 0.7s ease forwards; }

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1),
              transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
              transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1),
              transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1),
              transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.reveal-stagger.is-visible > *:nth-child(1)  { opacity:1; transform:none; transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2)  { opacity:1; transform:none; transition-delay: 0.12s; }
.reveal-stagger.is-visible > *:nth-child(3)  { opacity:1; transform:none; transition-delay: 0.19s; }
.reveal-stagger.is-visible > *:nth-child(4)  { opacity:1; transform:none; transition-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(5)  { opacity:1; transform:none; transition-delay: 0.33s; }
.reveal-stagger.is-visible > *:nth-child(6)  { opacity:1; transform:none; transition-delay: 0.40s; }
.reveal-stagger.is-visible > *:nth-child(7)  { opacity:1; transform:none; transition-delay: 0.47s; }
.reveal-stagger.is-visible > *:nth-child(8)  { opacity:1; transform:none; transition-delay: 0.54s; }

/* ── Shimmer text ──
   Gradient gold remains; the moving background-position keyframe is dropped
   because it is non-composited and forces continuous repaints on the title. */
.text-shimmer {
  background: linear-gradient(
    100deg,
    var(--primary) 0%,
    #f5e0a0 35%,
    #fff8e8 50%,
    #f0d898 65%,
    var(--primary) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glitch element ── */
.glitch-wrapper { position: relative; display: inline-block; }
.glitch-wrapper::before,
.glitch-wrapper::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  color: inherit;
}
.glitch-wrapper::before {
  color: #ff004f;
  animation: glitch-1 0.55s infinite linear alternate-reverse;
}
.glitch-wrapper::after {
  color: #00f0ff;
  animation: glitch-2 0.55s infinite linear alternate-reverse;
}
.glitch-wrapper:not(:hover)::before,
.glitch-wrapper:not(:hover)::after { animation: none; opacity: 0; }

/* ── Film noise overlay ── */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  opacity: 0.028;
  animation: noise-flicker 0.15s steps(1) infinite;
  mix-blend-mode: overlay;
}

/* ── Aurora Background Layer ── */
.aurora-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.aurora-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%, rgba(139,26,26,0.10), transparent),
    radial-gradient(ellipse 60% 80% at 90% 10%, rgba(200,169,110,0.07), transparent),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(92,124,172,0.06), transparent),
    radial-gradient(ellipse 40% 40% at 30% 60%, rgba(139,26,26,0.05), transparent),
    radial-gradient(ellipse 50% 60% at 80% 70%, rgba(200,169,110,0.04), transparent);
  animation: aurora-4 18s ease-in-out infinite;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.aurora-blob-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(139,26,26,0.18), transparent 70%);
  top: -200px; right: -150px;
  animation: aurora-1 20s ease-in-out infinite;
}
.aurora-blob-2 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(200,169,110,0.10), transparent 70%);
  bottom: -100px; left: -100px;
  animation: aurora-2 25s ease-in-out infinite;
}
.aurora-blob-3 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(92,124,172,0.08), transparent 70%);
  top: 40%; left: 45%;
  animation: aurora-3 30s ease-in-out infinite;
}
.aurora-blob-4 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(139,26,26,0.06), transparent 70%);
  top: 60%; right: 10%;
  animation: aurora-1 22s ease-in-out infinite reverse;
}

/* ── Animated grid ── */
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  animation: grid-drift 40s ease-in-out infinite;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.4) 0%, transparent 70%);
}

/* ── Glow card animation ── */
.card-glow { animation: glow-pulse-card 4s ease-in-out infinite; }

/* ── Typing cursor ── */
.typing-cursor {
  border-right: 2px solid var(--primary);
  padding-right: 2px;
  animation: typing-cursor 1s step-end infinite;
}

/* ── Stat counter strike ── */
.stat-visible { animation: counter-strike 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }

/* ── Intro Screen ── */
@keyframes intro-symbol-glow {
  0%, 100% { text-shadow: 0 0 20px rgba(200,169,110,0.35); }
  50%       { text-shadow: 0 0 45px rgba(200,169,110,0.95), 0 0 90px rgba(200,169,110,0.3); }
}
@keyframes intro-line-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes intro-title-reveal {
  from { opacity: 0; transform: translateY(28px); filter: blur(12px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);    }
}
@keyframes intro-exit {
  0%   { opacity: 1;  transform: scale(1); }
  100% { opacity: 0;  transform: scale(1.015); }
}

/* ── Cursor trail ── */
@keyframes cursor-trail-fade {
  0%   { opacity: 0.55; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0;    transform: translate(-50%,-50%) scale(0.1); }
}

/* ── Card tilt glow ── */
@keyframes card-tilt-glow {
  from { box-shadow: 0 8px 32px rgba(0,0,0,0.4); }
  to   { box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(200,169,110,0.08); }
}

/* ═══════════════════════════════════════════════════
   LEVEL MAX — Premium Visual Effects
═══════════════════════════════════════════════════ */

/* ── Gradient border spin (cards, showcase) ── */
@keyframes border-gradient-spin {
  0%   { --border-angle: 0deg; }
  100% { --border-angle: 360deg; }
}

/* ── Breathing glow on primary buttons ──
   Composited: animate opacity on a pseudo-element overlay instead of box-shadow. */
@keyframes btn-breathe {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* ── Hero text entrance — cinematic stagger ── */
@keyframes hero-word-rise {
  from { opacity: 0; transform: translateY(60px) rotateX(15deg); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0) rotateX(0deg); filter: blur(0); }
}

/* ── Subtle float for hero elements ── */
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ── Section divider draw ── */
@keyframes line-draw {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── Badge pulse glow ──
   Composited: opacity on a pseudo overlay instead of box-shadow. */
@keyframes badge-glow {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* ── Spotlight gradient follow ── */
.spotlight-wrap {
  position: relative;
  overflow: hidden;
}
.spotlight-wrap::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,169,110,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: left 0.4s ease, top 0.4s ease;
  left: var(--mouse-x, 50%);
  top: var(--mouse-y, 50%);
}

/* ── Animated underline on section headings ── */
.section-heading h3::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), rgba(139,26,26,0.6), transparent);
  margin-top: 0.8rem;
  transition: width 0.8s cubic-bezier(0.22,1,0.36,1);
}
.section-heading.is-visible h3::after,
.reveal.is-visible .section-heading h3::after,
.reveal.is-visible h3::after {
  width: 80px;
}

/* ── Gradient border on hover for cards ── */
.card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(200,169,110,0) 0%,
    rgba(200,169,110,0) 40%,
    rgba(200,169,110,0.25) 50%,
    rgba(200,169,110,0) 60%,
    rgba(200,169,110,0) 100%
  );
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
  pointer-events: none;
}
.card:hover::before {
  opacity: 1;
  animation: shimmer-border 3s ease infinite;
}

/* ── Enhanced button states ──
   The previous infinite box-shadow `btn-breathe` keyframe was non-composited and
   forced layout/paint work on every button. The static :hover glow already
   communicates affordance, so we omit the idle-state animation. */

/* ── Smooth page load fade ── */
@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: page-fade-in 0.6s ease;
}

/* ── Link underline slide ── */
.footer-col ul a,
.devlog-card-link {
  position: relative;
}
.footer-col ul a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--primary);
  transition: width 0.3s cubic-bezier(0.22,1,0.36,1);
}
.footer-col ul a:hover::after {
  width: 100%;
}

/* ── Countdown number flip feel ── */
.countdown-num {
  transition: color 0.15s, transform 0.15s;
}
.countdown-num.tick {
  color: var(--primary);
  transform: scale(1.08);
}

/* ── Enhanced badge pulse ──
   The pulsing glow used to animate box-shadow (non-composited). The static
   colour + dot indicator already convey "live"; the constant glow is dropped. */

/* ── Scroll-triggered section border draw ── */
.section-heading.is-visible .eyebrow::after {
  content: '';
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--primary);
  vertical-align: middle;
  margin-left: 0.8rem;
  animation: line-draw 0.6s ease forwards;
}

/* ── Hero meta items entrance ── */
.hero-meta-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.is-visible .hero-meta-item:nth-child(1) { transition-delay: 0.2s; }
.is-visible .hero-meta-item:nth-child(2) { transition-delay: 0.35s; }
.is-visible .hero-meta-item:nth-child(3) { transition-delay: 0.5s; }
.is-visible .hero-meta-item {
  opacity: 1;
  transform: translateY(0);
}

/* ── Prelaunch countdown entrance ── */
.prelaunch-countdown {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.is-visible .prelaunch-countdown,
.reveal.is-visible .prelaunch-countdown {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.3s;
}

/* ── Game showcase art subtle zoom on load ── */
.game-showcase-img {
  transition: transform 8s cubic-bezier(0.22,1,0.36,1);
}
.is-visible .game-showcase-img {
  transform: scale(1.03);
}

/* ── Smooth scroll indicator pulse ── */
@keyframes scroll-pulse {
  0%, 100% { opacity: 0.4; transform: translateY(0); }
  50%      { opacity: 1; transform: translateY(4px); }
}

/* ── FAQ card answer smooth open with fade ── */
.faq-card-a-inner {
  opacity: 0;
  transition: opacity 0.3s ease 0.1s, padding 0.3s ease;
}
.faq-card.open .faq-card-a-inner {
  opacity: 1;
}

/* ── Devlog card link arrow animation ── */
.devlog-card-link span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.devlog-card:hover .devlog-card-link span {
  transform: translateX(4px);
}

/* ── Info card subtle left border on hover ── */
.info-card {
  border-left: 3px solid transparent;
  transition: border-color var(--transition-speed), border-left-color 0.35s ease;
}
.info-card:hover {
  border-left-color: var(--primary);
}

/* ── CTA band background pulse ── */
@keyframes cta-pulse {
  0%, 100% { opacity: 0.03; }
  50%      { opacity: 0.08; }
}
.cta-band::before {
  animation: cta-pulse 6s ease-in-out infinite;
}

/* ── Footer brand logo hover ── */
.footer-brand-logo:hover .brand-mark {
  filter: drop-shadow(0 0 14px rgba(200,169,110,0.7));
}
.footer-brand-logo .brand-mark {
  transition: filter 0.35s ease;
}

/* ── Social icons micro-bounce on hover ── */
.footer-social a:hover {
  transform: translateY(-2px);
}
.footer-social a {
  transition: all var(--transition-speed), transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}

/* ═══════════════════════════════════════════════════
   TRANSCENDENCE ENGINE — v5.0
═══════════════════════════════════════════════════ */

/* ── 1. WORD-BY-WORD HERO REVEAL ── */
.word-reveal-container {
  perspective: 800px;
}
.word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(80px) rotateX(25deg) scale(0.9);
  filter: blur(12px);
  transition:
    opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center bottom;
  will-change: transform, opacity, filter;
}
.word-reveal-container.is-revealed .word-reveal {
  opacity: 1;
  transform: translateY(0) rotateX(0deg) scale(1);
  filter: blur(0);
}

.hero-sub-reveal,
.hero-lead-reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.22,1,0.36,1), filter 1s ease;
}
.hero-sub-reveal.is-revealed,
.hero-lead-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ── 3. HOLOGRAPHIC CARD LIGHT ── */
.holo-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
  mix-blend-mode: screen;
  border-radius: inherit;
}
.holo-prism {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
  mix-blend-mode: overlay;
  border-radius: inherit;
  filter: blur(14px);
}

/* ── 8. DIAGONAL WIPE REVEAL ── */
.diagonal-wipe {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 1.4s cubic-bezier(0.77, 0, 0.18, 1);
}
.diagonal-wipe.is-wiped {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ── 9. ADVANCED INTRO SCREEN ── */
#site-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(ellipse at center, #0a0c16 0%, #020308 80%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
#site-intro.is-exiting {
  opacity: 0;
  transform: scale(1.04);
}
.intro-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.intro-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.035;
  mix-blend-mode: overlay;
  animation: noise-flicker 0.15s steps(1) infinite;
  z-index: 2;
  pointer-events: none;
}
.intro-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 90%);
  z-index: 3;
  pointer-events: none;
}
.intro-orb-1,
.intro-orb-2 {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}
.intro-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(139,26,26,0.35), transparent 70%);
  top: -100px; right: -100px;
  animation: aurora-1 8s ease-in-out infinite;
}
.intro-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(200,169,110,0.18), transparent 70%);
  bottom: -50px; left: -50px;
  animation: aurora-2 10s ease-in-out infinite;
}
.intro-scan {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent, rgba(200,169,110,0.05), transparent);
  transform: translateY(-100%);
  will-change: transform;
  animation: scan-line 3.5s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}
.intro-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 2rem;
  max-width: 600px;
}
.intro-symbol {
  font-size: 1.4rem;
  color: var(--primary);
  letter-spacing: 0.8em;
  margin-bottom: 2rem;
  opacity: 0;
  animation: intro-symbol-glow 2s ease-in-out infinite, fadeIn 0.8s ease 0.2s forwards;
}
.intro-studio {
  font-family: var(--font-sub);
  font-size: 0.9rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--muted-bright);
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeIn 0.8s ease 0.6s forwards;
}
.intro-bar-wrap {
  width: 320px;
  max-width: 80vw;
  height: 1px;
  background: rgba(200,169,110,0.12);
  margin: 0 auto 0.6rem;
  overflow: hidden;
  position: relative;
  opacity: 0;
  animation: fadeIn 0.6s ease 0.9s forwards;
}
.intro-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  transition: width 0.3s ease;
  box-shadow: 0 0 12px rgba(200,169,110,0.5);
}
.intro-percent {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: rgba(200,169,110,0.6);
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeIn 0.6s ease 1s forwards;
}
.intro-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: 0.12em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 40px rgba(200,169,110,0.35);
  opacity: 0;
  animation: intro-title-reveal 1s cubic-bezier(0.22,1,0.36,1) 1.4s forwards;
}
.intro-release {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1.2rem;
  opacity: 0;
  animation: fadeIn 0.8s ease 2s forwards;
}
.intro-skip {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.25);
  z-index: 10;
  opacity: 0;
  animation: fadeIn 0.8s ease 2.4s forwards;
}

/* ── 10. KONAMI EASTER EGG — HARROW SEQUENCE ── */
.harrow-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: radial-gradient(ellipse at center, rgba(30,5,5,0.98) 0%, rgba(0,0,0,1) 80%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  animation: harrow-enter 0.4s ease-out;
  transition: opacity 0.8s ease;
}
.harrow-overlay.harrow-exit {
  opacity: 0;
  transform: scale(0.98);
}
.harrow-glitch-text {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 8rem);
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow:
    0 0 20px rgba(139,26,26,0.9),
    0 0 60px rgba(139,26,26,0.4);
  position: relative;
  animation: harrow-shake 0.12s linear infinite;
}
.harrow-glitch-text::before,
.harrow-glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}
.harrow-glitch-text::before {
  color: #ff004f;
  animation: glitch-1 0.3s infinite linear alternate-reverse;
  mix-blend-mode: screen;
}
.harrow-glitch-text::after {
  color: #00f0ff;
  animation: glitch-2 0.3s infinite linear alternate-reverse;
  mix-blend-mode: screen;
}
.harrow-sub {
  font-family: var(--font-sub);
  font-size: 1rem;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.6);
  text-align: center;
  line-height: 1.8;
  opacity: 0;
  animation: fadeIn 1s ease 0.6s forwards;
}
.harrow-static {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.14;
  mix-blend-mode: overlay;
  animation: noise-flicker 0.08s steps(1) infinite;
  pointer-events: none;
}
@keyframes harrow-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes harrow-shake {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-2px, 1px); }
  50%      { transform: translate(2px, -1px); }
  75%      { transform: translate(-1px, 2px); }
}
@keyframes screen-shake-kf {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-4px, 2px); }
  20% { transform: translate(3px, -3px); }
  30% { transform: translate(-2px, 4px); }
  40% { transform: translate(4px, 2px); }
  50% { transform: translate(-3px, -4px); }
  60% { transform: translate(2px, 3px); }
  70% { transform: translate(-4px, 1px); }
  80% { transform: translate(3px, -2px); }
  90% { transform: translate(-1px, 3px); }
}
body.screen-shake {
  animation: screen-shake-kf 0.6s ease-in-out;
}

/* ── Enhanced cursor trail (fading embers) ── */
.cursor-trail-dot {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px currentColor;
  animation: cursor-trail-fade 0.7s cubic-bezier(0.22,1,0.36,1) forwards;
}

/* ── Particle canvas optimization ── */
canvas[aria-hidden="true"] { will-change: transform; }

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  .word-reveal,
  .hero-sub-reveal,
  .hero-lead-reveal,
  .diagonal-wipe {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .intro-title,
  .intro-symbol,
  .intro-release { animation: none; opacity: 1; }
  .harrow-glitch-text { animation: none; }
  body.screen-shake { animation: none; }
}