/* ============================================================
   FORONDA COMMAND CENTER — Logo v1.0
   ForondaCommandLogo component styles
   2026-05-31
   ============================================================
   Neon-lime backlit 3D floating logomark.
   CSS-only animation — GPU-safe (transform + opacity only).
   Imports AFTER tokens.css and components.css in layout.tsx.
   ============================================================ */

/* ── NEW TOKEN: Neon Lime ────────────────────────────────── */
:root {
  --lime-neon:          #AEFF00;          /* vivid neon lime — the backlight source */
  --lime-neon-bright:   #C8FF3A;          /* hot-spot center of bloom */
  --lime-neon-dim:      #6AB800;          /* deep edge of lime aura */
  --lime-glow:          rgba(174, 255, 0, 0.55);
  --lime-glow-mid:      rgba(174, 255, 0, 0.25);
  --lime-glow-soft:     rgba(174, 255, 0, 0.10);
  --lime-glow-trace:    rgba(174, 255, 0, 0.04);

  /* 3D float timing */
  --logo-float-dur:     8s;
  --logo-tilt-dur:      12s;
  --logo-bloom-dur:     6s;
}


/* ── KEYFRAMES ────────────────────────────────────────────── */

/* Vertical float — gentle bob */
@keyframes logo-float {
  0%, 100% { transform: translateY(0px) rotateX(0deg); }
  25%       { transform: translateY(-6px) rotateX(1.5deg); }
  50%       { transform: translateY(-10px) rotateX(2.5deg); }
  75%       { transform: translateY(-5px) rotateX(1deg); }
}

/* Subtle in-place 3D tilt — parallax feel */
@keyframes logo-tilt {
  0%        { transform: rotateY(0deg) rotateX(0deg); }
  16.66%    { transform: rotateY(2.5deg) rotateX(1deg); }
  33.33%    { transform: rotateY(4deg) rotateX(-0.5deg); }
  50%       { transform: rotateY(1.5deg) rotateX(-2deg); }
  66.66%    { transform: rotateY(-2deg) rotateX(-1deg); }
  83.33%    { transform: rotateY(-3.5deg) rotateX(0.5deg); }
  100%      { transform: rotateY(0deg) rotateX(0deg); }
}

/* Backlit bloom breathe — lime halo pulses */
@keyframes logo-bloom {
  0%, 100% {
    opacity: 0.85;
    filter: blur(18px) brightness(1);
    transform: scale(1);
  }
  40% {
    opacity: 1;
    filter: blur(22px) brightness(1.2);
    transform: scale(1.05);
  }
  70% {
    opacity: 0.9;
    filter: blur(16px) brightness(1.05);
    transform: scale(0.98);
  }
}

/* Rim light glint — single frame streak */
@keyframes logo-glint {
  0%, 88%, 100% { opacity: 0; transform: translateX(-100%); }
  91%            { opacity: 0.7; transform: translateX(0%); }
  96%            { opacity: 0; transform: translateX(100%); }
}

/* Entry animation — drop in from slightly above */
@keyframes logo-enter {
  0%   { opacity: 0; transform: translateY(-16px) scale(0.94); filter: blur(4px); }
  60%  { opacity: 1; filter: blur(0px); }
  100% { opacity: 1; transform: translateY(0px) scale(1); filter: blur(0px); }
}

/* Reduced-motion: static, no float, no bloom */
@media (prefers-reduced-motion: reduce) {
  @keyframes logo-float  { 0%, 100% { transform: none; } }
  @keyframes logo-tilt   { 0%, 100% { transform: none; } }
  @keyframes logo-bloom  { 0%, 100% { opacity: 0.8; filter: blur(16px); transform: scale(1); } }
  @keyframes logo-glint  { 0%, 100% { opacity: 0; } }
  @keyframes logo-enter  { 0%, 100% { opacity: 1; transform: none; filter: none; } }
}


/* ── SCENE / PERSPECTIVE WRAPPER ─────────────────────────── */

.fcc-logo {
  /* 3D scene root */
  perspective: 800px;
  perspective-origin: 50% 50%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  /* entry */
  animation: logo-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── 3D OBJECT LAYER — floats + tilts ────────────────────── */
.fcc-logo__object {
  transform-style: preserve-3d;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  /* Compose float + tilt by nesting two animated wrappers */
}

.fcc-logo__float {
  animation:
    logo-float var(--logo-float-dur) ease-in-out infinite,
    logo-tilt  var(--logo-tilt-dur)  ease-in-out infinite;
  transform-style: preserve-3d;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  .fcc-logo__float {
    animation: none;
  }
}


/* ── BACKLIGHT BLOOM (behind the text) ───────────────────── */

.fcc-logo__bloom {
  position: absolute;
  /* positioned just behind the text layers */
  inset: -30% -40%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 70% 55% at 50% 50%,
    var(--lime-neon-bright) 0%,
    var(--lime-neon)        15%,
    var(--lime-glow)        35%,
    var(--lime-glow-mid)    55%,
    var(--lime-glow-soft)   72%,
    var(--lime-glow-trace)  85%,
    transparent             100%
  );
  filter: blur(18px);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
  animation: logo-bloom var(--logo-bloom-dur) ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .fcc-logo__bloom {
    animation: logo-bloom 0s;
    opacity: 0.75;
    filter: blur(16px);
  }
}


/* ── TEXT LAYERS ─────────────────────────────────────────── */

/* Both lines share this base */
.fcc-logo__line {
  position: relative;
  z-index: 1;
  display: block;
  line-height: 1;
  /* 3D extrusion via layered drop-shadow */
}

/* ── FORONDA — heavy display ── */
.fcc-logo__foronda {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: uppercase;

  /* Face: dark graphite that catches a lime rim */
  color: #1a1a1a;

  /* The full backlit treatment:
     1. Lime rim light on letter edges (outline-ish via text-shadow)
     2. Inner face reflection (very faint hot lime highlight)
     3. 3D extrusion depth layers (offset shadows going backward)
     4. Outer glow for the bloom spill onto letters */
  text-shadow:
    /* ── Lime rim — backlight catching the edge ── */
    0 0 1px var(--lime-neon),
    0 0 2px var(--lime-neon),
    0 0 4px var(--lime-neon-bright),
    /* ── Extrusion depth: push-back layers ── */
     1px  1px 0 #0f0f0f,
     2px  2px 0 #0d0d0d,
     3px  3px 0 #0b0b0b,
     4px  4px 0 rgba(0,0,0,0.6),
     5px  5px 4px rgba(0,0,0,0.4),
    /* ── Halo spill from bloom onto letter faces ── */
    0 0 12px var(--lime-glow-mid),
    0 0 24px var(--lime-glow-soft),
    /* ── Underside shadow grounds it ── */
    0 8px 20px rgba(0,0,0,0.9);
}

/* ── COMMAND — mono tracked-out sub-line ── */
.fcc-logo__command {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;

  /* Lighter face — more transparent so lime bleeds through more */
  color: rgba(30, 30, 30, 0.85);

  text-shadow:
    /* ── Lime rim — thinner for smaller letters ── */
    0 0 1px var(--lime-neon),
    0 0 3px var(--lime-neon),
    /* ── Minimal extrusion ── */
     1px  1px 0 #0b0b0b,
     2px  2px 0 rgba(0,0,0,0.5),
     3px  3px 3px rgba(0,0,0,0.35),
    /* ── Halo spill ── */
    0 0 8px var(--lime-glow-mid),
    0 0 18px var(--lime-glow-soft);

  /* Pull left to optically center with the wider tracked spacing */
  margin-left: 0.35em; /* matches letter-spacing so first char aligns */
}


/* ── RIM GLINT — one-time light streak across FORONDA ──── */
.fcc-logo__glint {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
  border-radius: 2px;
}

.fcc-logo__glint::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(174, 255, 0, 0.25) 40%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(174, 255, 0, 0.25) 60%,
    transparent 100%
  );
  filter: blur(2px);
  animation: logo-glint 9s ease-in-out infinite;
  animation-delay: 2s;
}

@media (prefers-reduced-motion: reduce) {
  .fcc-logo__glint::after { animation: none; }
}


/* ── SIZE VARIANTS ───────────────────────────────────────── */

/* HERO — home/login center hero */
.fcc-logo--hero .fcc-logo__foronda {
  font-size: clamp(3rem, 10vw, 5.5rem);
}
.fcc-logo--hero .fcc-logo__command {
  font-size: clamp(0.7rem, 2.2vw, 1.1rem);
  margin-top: 0.15em;
}
.fcc-logo--hero .fcc-logo__bloom {
  inset: -40% -50%;
}

/* COMPACT — topbar / inner pages */
.fcc-logo--compact .fcc-logo__foronda {
  font-size: clamp(1.1rem, 3.5vw, 1.45rem);
}
.fcc-logo--compact .fcc-logo__command {
  font-size: clamp(0.45rem, 1.2vw, 0.55rem);
  margin-top: 0.1em;
  letter-spacing: 0.28em;
}
.fcc-logo--compact .fcc-logo__bloom {
  inset: -20% -25%;
  filter: blur(10px);
}
.fcc-logo--compact .fcc-logo__foronda {
  text-shadow:
    0 0 1px var(--lime-neon),
    0 0 2px var(--lime-neon),
     1px  1px 0 #0f0f0f,
     2px  2px 0 #0b0b0b,
     3px  3px 3px rgba(0,0,0,0.5),
    0 0 8px var(--lime-glow-mid),
    0 0 16px var(--lime-glow-soft),
    0 4px 12px rgba(0,0,0,0.9);
}
.fcc-logo--compact .fcc-logo__command {
  text-shadow:
    0 0 1px var(--lime-neon),
    0 0 2px var(--lime-neon),
     1px  1px 0 #0b0b0b,
     2px  2px 2px rgba(0,0,0,0.4),
    0 0 6px var(--lime-glow-mid);
}
/* Compact float is gentler — stays in topbar bounds */
.fcc-logo--compact .fcc-logo__float {
  animation-duration: 10s, 15s;
}
@keyframes logo-float-compact {
  0%, 100% { transform: translateY(0px) rotateX(0deg); }
  50%       { transform: translateY(-3px) rotateX(1deg); }
}


/* ── TOPBAR PLACEMENT ────────────────────────────────────── */

/* Override topbar to be centered */
.cockpit-topbar--logo {
  justify-content: space-between;
  /* Logo sits in a centered absolute position */
  position: relative;
}

.cockpit-topbar--logo .fcc-logo-topbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Don't let it overlap side controls */
  pointer-events: none; /* controls remain clickable */
}
.cockpit-topbar--logo .fcc-logo-topbar-center .fcc-logo {
  pointer-events: auto;
}


/* ── AMBIENT BACKDROP (optional, tasteful) ───────────────── */

/* Applied to .cockpit-shell or page wrappers for a faint background bloom */
.fcc-ambient-bloom {
  position: fixed;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: min(600px, 90vw);
  height: 200px;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 80% 100% at 50% 0%,
    var(--lime-glow-trace) 0%,
    transparent 70%
  );
  filter: blur(40px);
  opacity: 0.6;
  /* Slow breathe — won't distract */
  animation: logo-bloom 12s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .fcc-ambient-bloom { animation: none; }
}