/* ============================================
   AIFEIN v7 — CINEMATIC LAYER
   3D mascot aura · Loading reveal · Tilt cards · Confetti · Live ticker
   ============================================ */

/* ============================================
   LOADING REVEAL — first-visit cinematic intro
   ============================================ */
.boot {
  position: fixed;
  inset: 0;
  background: #060606;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  cursor: pointer;
}

.boot.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot__logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.boot__icon {
  width: 56px;
  height: 56px;
  opacity: 0;
  animation: bootLogoFade 0.6s 0.2s ease forwards;
  filter:
    drop-shadow(0 0 20px rgba(212,168,87,0.6))
    drop-shadow(0 0 40px rgba(212,168,87,0.3));
}

@keyframes bootLogoFade {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: scale(1); }
}

.boot__wordmark {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.4em;
  font-size: 1.4rem;
  color: var(--gold-2);
  display: flex;
  overflow: hidden;
}

.boot__wordmark span {
  display: inline-block;
  transform: translateY(120%);
  animation: bootChar 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.boot__wordmark span:nth-child(1) { animation-delay: 0.5s; }
.boot__wordmark span:nth-child(2) { animation-delay: 0.58s; }
.boot__wordmark span:nth-child(3) { animation-delay: 0.66s; }
.boot__wordmark span:nth-child(4) { animation-delay: 0.74s; }
.boot__wordmark span:nth-child(5) { animation-delay: 0.82s; }
.boot__wordmark span:nth-child(6) { animation-delay: 0.90s; }

@keyframes bootChar {
  to { transform: translateY(0); }
}

.boot__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-3);
  opacity: 0;
  animation: bootFade 0.8s 1.2s ease forwards;
  letter-spacing: 0.05em;
}

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

.boot__progress {
  width: 200px;
  height: 1px;
  background: var(--line-2);
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
}

.boot__progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: bootProgress 1.4s 0.4s ease-in-out infinite;
}

@keyframes bootProgress {
  to { left: 130%; }
}

/* ============================================
   3D MASCOT AURA — holographic ring system around the mascot
   ============================================ */

/* The wrapper for the mascot — adds 3D depth */
.mascot-stage {
  position: absolute;
  right: -3%;
  bottom: -2%;
  width: 32%;
  max-width: 480px;
  min-width: 280px;
  aspect-ratio: 1 / 1.2;
  z-index: 1;
  pointer-events: none;
  perspective: 1000px;
  will-change: transform;
}

/* Rotating gold rings around the mascot */
.mascot-rings {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}

.mascot-ring {
  position: absolute;
  border: 1px solid rgba(212, 168, 87, 0.15);
  border-radius: 50%;
  border-top-color: rgba(212, 168, 87, 0.5);
  animation: mascotRingSpin linear infinite;
  box-shadow:
    0 0 20px rgba(212, 168, 87, 0.08),
    inset 0 0 20px rgba(212, 168, 87, 0.05);
}

.mascot-ring--1 {
  width: 75%;
  aspect-ratio: 1;
  animation-duration: 24s;
}

.mascot-ring--2 {
  width: 90%;
  aspect-ratio: 1;
  animation-duration: 38s;
  animation-direction: reverse;
  border-color: rgba(125, 249, 255, 0.08);
  border-top-color: rgba(125, 249, 255, 0.35);
}

.mascot-ring--3 {
  width: 110%;
  aspect-ratio: 1;
  animation-duration: 60s;
  border-color: rgba(212, 168, 87, 0.08);
  border-top-color: rgba(212, 168, 87, 0.25);
}

@keyframes mascotRingSpin {
  to { transform: rotate(360deg); }
}

/* Holographic grid lines */
.mascot-grid {
  position: absolute;
  inset: 12%;
  background-image:
    linear-gradient(rgba(212, 168, 87, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212, 168, 87, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  border-radius: 50%;
  mask: radial-gradient(circle, black 30%, transparent 75%);
  -webkit-mask: radial-gradient(circle, black 30%, transparent 75%);
  opacity: 0.4;
  animation: mascotGridPan 30s linear infinite;
}

@keyframes mascotGridPan {
  to { background-position: 24px 24px; }
}

/* Constellation particles around mascot */
.mascot-constellation {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.constellation-dot {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--gold-2);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--gold);
  animation: constellationOrbit linear infinite;
  transform-origin: center;
}

@keyframes constellationOrbit {
  from { transform: rotate(0deg) translateX(var(--orbit-r, 130px)) rotate(0deg); }
  to { transform: rotate(360deg) translateX(var(--orbit-r, 130px)) rotate(-360deg); }
}

/* Scan sweep across mascot */
.mascot-scan {
  position: absolute;
  inset: 10% 15%;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}

.mascot-scan::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 45%,
    rgba(125, 249, 255, 0.15) 50%,
    transparent 55%,
    transparent 100%
  );
  animation: mascotScan 6s ease-in-out infinite;
}

@keyframes mascotScan {
  0%, 100% { transform: translateY(-50%); opacity: 0; }
  10%, 90% { opacity: 1; }
  50% { transform: translateY(50%); opacity: 1; }
}

/* The actual mascot inside the stage */
.mascot-stage .hero__mascot {
  position: relative;
  width: 75%;
  height: auto;
  right: auto;
  bottom: auto;
  margin: 0 auto;
  display: block;
  z-index: 3;
  /* Reset the absolute positioning since we're inside a stage now */
}

/* Glow base that "floats" the mascot above the page */
.mascot-glow-base {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 30px;
  background: radial-gradient(ellipse at center, rgba(212, 168, 87, 0.4), transparent 70%);
  filter: blur(20px);
  z-index: 2;
  animation: mascotGlowPulse 3s ease-in-out infinite;
}

@keyframes mascotGlowPulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(0.8); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

@media (max-width: 1100px) {
  .mascot-stage { width: 38%; opacity: 0.85; right: -8%; }
}

@media (max-width: 700px) {
  .mascot-stage {
    position: relative;
    width: 80%;
    margin: 2rem auto 0;
    right: auto; bottom: auto;
    opacity: 1;
  }
}

/* ============================================
   TILT CARDS — 3D rotation on mouse move (set via JS)
   ============================================ */
.tool,
.radar-card,
.usp__card,
.deal {
  transform-style: preserve-3d;
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.4s ease,
    background 0.4s ease;
}

.tool[data-tilt],
.radar-card[data-tilt],
.usp__card[data-tilt],
.deal[data-tilt] {
  transition:
    transform 0.15s ease-out,
    border-color 0.3s ease,
    box-shadow 0.4s ease,
    background 0.4s ease;
}

/* ============================================
   LIVE TICKER — bottom strip showing real-time activity
   ============================================ */
.live-ticker {
  position: relative;
  background: linear-gradient(180deg, transparent, rgba(212, 168, 87, 0.04));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.85rem 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.live-ticker::before,
.live-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.live-ticker::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}

.live-ticker::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bg) 0%, transparent 100%);
}

.live-ticker__track {
  display: inline-flex;
  gap: 3rem;
  animation: tickerScroll 40s linear infinite;
  padding-left: 100%;
}

.live-ticker__track:hover {
  animation-play-state: paused;
}

@keyframes tickerScroll {
  to { transform: translateX(-100%); }
}

.live-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.live-ticker__dot {
  width: 6px;
  height: 6px;
  background: var(--plasma);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--plasma);
  flex-shrink: 0;
}

.live-ticker__time {
  color: var(--gold-2);
  font-variant-numeric: tabular-nums;
}

/* ============================================
   CONFETTI — gold sparkle burst on save-to-stack
   ============================================ */
.confetti-container {
  position: fixed;
  pointer-events: none;
  z-index: 700;
  width: 0;
  height: 0;
}

.confetti-piece {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--gold), 0 0 12px rgba(212, 168, 87, 0.5);
  animation: confettiBurst 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  transform: translate(-50%, -50%);
}

.confetti-piece:nth-child(odd) {
  background: var(--gold-2);
  box-shadow: 0 0 8px var(--gold-2);
}

.confetti-piece:nth-child(3n) {
  background: var(--plasma);
  box-shadow: 0 0 8px var(--plasma);
  width: 4px;
  height: 4px;
}

@keyframes confettiBurst {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx, 0)), calc(-50% + var(--dy, 0))) scale(0);
    opacity: 0;
  }
}

/* ============================================
   ENHANCED SAVE BUTTON FEEDBACK
   ============================================ */
.tool__save--active {
  position: relative;
}

.tool__save--active::after {
  content: '✓';
  margin-left: 0.3rem;
  color: var(--gold);
}

@keyframes saveBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.tool__save.just-saved {
  animation: saveBounce 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================
   CHAT FAB — fix the mascot inside (was using mix-blend wrong)
   ============================================ */
.fein-chat-fab {
  /* Override the perspective on parent if any */
  isolation: isolate;
  position: fixed;
}

.fein-chat-fab img,
.fein-chat__avatar img,
.pwa-banner__icon img,
.boot__icon {
  mix-blend-mode: normal !important;
  filter:
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4))
    drop-shadow(0 0 12px rgba(255, 220, 150, 0.4));
}

[data-theme="light"] .fein-chat-fab img,
[data-theme="light"] .fein-chat__avatar img,
[data-theme="light"] .pwa-banner__icon img {
  filter:
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))
    drop-shadow(0 0 8px rgba(168, 133, 74, 0.3));
}

/* ============================================
   LOGO IN NAV — refined
   ============================================ */
.nav__logo {
  mix-blend-mode: normal !important;
  filter:
    drop-shadow(0 0 6px rgba(212, 168, 87, 0.4))
    brightness(1.1);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.nav__brand:hover .nav__logo {
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 12px rgba(212, 168, 87, 0.7))
    brightness(1.15);
}

.foot__brand img {
  mix-blend-mode: normal !important;
}

/* ============================================
   FIX: Mascot itself stays clean (no overzealous filtering)
   ============================================ */
.hero__mascot,
.mascot-section__img img,
.pick__visual img {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 40px rgba(212, 168, 87, 0.4))
    drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6))
    contrast(1.08);
}

[data-theme="light"] .hero__mascot,
[data-theme="light"] .mascot-section__img img,
[data-theme="light"] .pick__visual img {
  mix-blend-mode: multiply;
  filter:
    drop-shadow(0 0 30px rgba(212, 168, 87, 0.3))
    drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2));
}

/* ============================================
   ADDITIONAL POLISH
   ============================================ */

/* Section number indicators (top-left of each section) */
.section[data-num]::before,
.section--alt[data-num]::before {
  content: counter(section, decimal-leading-zero);
  counter-increment: section;
  position: absolute;
  top: 1.5rem;
  left: var(--pad);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  color: var(--gold);
  opacity: 0.5;
  pointer-events: none;
}

body { counter-reset: section; }

/* Better focus visible */
*:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .mascot-rings, .mascot-grid, .mascot-constellation, .mascot-scan,
  .mascot-glow-base, .live-ticker__track, .boot__progress::before {
    animation: none !important;
  }
  .confetti-piece { display: none; }
}