/* ═══════════════════════════════════════════════════════════════
   AMAZON RME — Epic Intro Animation
   Shows on every page load
   ═══════════════════════════════════════════════════════════════ */

/* ── Overlay ─────────────────────────────────────────────────── */
#rme-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #050a0f;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* opacity managed by JS (0 → 1 fade-in, then 1 → 0 fade-out) */
}

/* ── Gradient background ──────────────────────────────────────── */
.intro-bg-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse 120% 80% at 50% 100%,
      rgba(255, 153, 0, 0.12) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 80% 60% at 20% 20%,
      rgba(0, 150, 210, 0.08) 0%,
      transparent 55%
    ),
    linear-gradient(160deg, #050a14 0%, #070d1a 40%, #04080f 100%);
  animation: gradientPulse 4s ease-in-out infinite alternate;
}

@keyframes gradientPulse {
  0%   { opacity: 0.8; }
  100% { opacity: 1; }
}

/* ── Hexagon canvas ───────────────────────────────────────────── */
#hex-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: hexFadeIn 1.5s ease-out 0.3s forwards;
}

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

/* ── Particle dust ────────────────────────────────────────────── */
.intro-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.intro-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,153,0,0.8) 0%, transparent 70%);
  animation: particleDrift linear infinite;
  opacity: 0;
}

@keyframes particleDrift {
  0%   { opacity: 0; transform: translateY(0) scale(0); }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-120vh) scale(1.5); }
}

/* ── Center stage ─────────────────────────────────────────────── */
.intro-center {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

/* ── Amazon word ──────────────────────────────────────────────── */
.intro-amazon-word {
  display: flex;
  align-items: center;
  gap: 0px;
  line-height: 1;
}

/* ── RME word ─────────────────────────────────────────────────── */
.intro-rme-word {
  display: flex;
  align-items: center;
  gap: 0px;
  line-height: 1;
}

/* ── Letters ──────────────────────────────────────────────────── */
.intro-letter {
  display: inline-block;
  font-family: 'Arial', 'Helvetica Neue', sans-serif;
  font-size: clamp(52px, 8vw, 100px);
  font-weight: 700;
  letter-spacing: -2px;
  opacity: 0;
  transform-origin: center center;
  will-change: transform, opacity;
}

.intro-letter.is-amazon {
  color: #d0d9e8;
  text-shadow: 0 0 30px rgba(140, 180, 220, 0.3);
}

.intro-letter.is-rme {
  color: #00a8e0;
  font-size: clamp(52px, 8vw, 100px);
  text-shadow: 0 0 40px rgba(0, 168, 224, 0.5);
}

/* ── Amazon column: word stacked above arrow ──────────────────── */
.intro-amazon-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* arrow stretches to full word width */
}

/* ── Arrow smile ──────────────────────────────────────────────── */
.intro-arrow-wrap {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: none;
  margin-top: 2px;        /* tiny gap under the letters */
}

.intro-arrow-wrap svg {
  width: 100%;            /* match parent = match "amazon" word width */
  height: auto;
  display: block;
}

/* ── Flash burst ──────────────────────────────────────────────── */
#intro-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 40% at 50% 50%,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 200, 80, 0.9) 20%,
    rgba(255, 153, 0, 0.6) 50%,
    transparent 80%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 20;
}

#intro-flash.burst {
  animation: flashBurst 0.6s ease-out forwards;
}

@keyframes flashBurst {
  0%   { opacity: 0; transform: scale(0.5); }
  15%  { opacity: 1; transform: scale(1.2); }
  40%  { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* ── Shockwave ring ───────────────────────────────────────────── */
.shockwave {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  border: 2px solid rgba(255, 200, 80, 0.8);
  pointer-events: none;
  z-index: 18;
}

.shockwave.pop {
  animation: shockwave 1s ease-out forwards;
}

@keyframes shockwave {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(80); opacity: 0; }
}

/* ── Logo glow ────────────────────────────────────────────────── */
.intro-logo-glow {
  position: absolute;
  width: 500px;
  height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(255,153,0,0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.intro-logo-glow.show {
  opacity: 1;
}

/* ── Word row layout ──────────────────────────────────────────── */
.intro-logo-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start; /* amazon + RME share same top line; arrow extends below */
  gap: 20px;
}

/* Space between "amazon" and "rme" */
.intro-word-gap {
  width: 16px;
}

/* ── Developer credit block ───────────────────────────────────── */
.intro-credit-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-top: 16px;
  padding: 16px 32px;
  border-top: 1px solid rgba(255, 153, 0, 0.2);
}

/* Each credit line flies in via JS — base state: invisible (JS sets it) */
.credit-fly {
  will-change: transform, opacity;
}

.intro-credit-line {
  font-family: 'Arial', sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  white-space: nowrap;
}

.intro-credit-main {
  font-size: clamp(12px, 1.6vw, 17px);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

/* Gold color for name and login — matches Amazon arrow */
.credit-gold {
  color: #ff9900 !important;
  font-weight: 800;
  text-shadow: 0 0 16px rgba(255, 153, 0, 0.55);
}

.intro-credit-sub {
  font-size: clamp(10px, 1.2vw, 13px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 4px;
}

/* ── Load bar (hidden) ─────────────────────────────────────────── */
.intro-loadbar-wrap { display: none !important; }


/* Laser Reveal Effect */
.intro-credit-block.laser-active {
  animation: laserReveal 1.8s linear forwards;
}
@keyframes laserReveal {
  0% { clip-path: inset(-50% 100% -50% -50%); opacity: 1; }
  10% { opacity: 1; }
  100% { clip-path: inset(-50% -50% -50% -50%); opacity: 1; }
}

.intro-laser-beam {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 4px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px #ff9900, 0 0 20px #ff9900, 0 0 40px #ff9900, 0 0 60px #fff;
  z-index: 10;
  opacity: 0;
  transform: translateX(-10px);
}

.intro-laser-beam.fire {
  animation: laserBeamSweep 1.8s linear forwards;
}
@keyframes laserBeamSweep {
  0% { left: 0%; opacity: 0; transform: scaleY(0.1); }
  5% { opacity: 1; transform: scaleY(1); }
  95% { left: 100%; opacity: 1; transform: scaleY(1); }
  100% { left: 100%; opacity: 0; transform: scaleY(0.1); }
}