/* ============================================================
   FORONDA COMMAND CENTER — Logo v2.0
   ForondaCommandLogo component styles
   2026-05-31
   ============================================================
   Brand asset (PNG/SVG hexagonal HUD emblem) replaces the
   prior CSS 3D text treatment. This file now owns:
     1. Float keyframe animation (translateY + scale — GPU-safe)
     2. Image sizing for hero + compact variants
     3. Topbar placement helpers (unchanged)
     4. prefers-reduced-motion: static, no movement
   ============================================================ */


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

/* Gentle vertical bob + micro-scale breathe */
@keyframes logo-float {
  0%,  100% { transform: translateY(0px)   scale(1);      opacity: 1; }
  30%        { transform: translateY(-5px)  scale(1.012);  opacity: 1; }
  60%        { transform: translateY(-8px)  scale(1.018);  opacity: 1; }
  80%        { transform: translateY(-3px)  scale(1.006);  opacity: 1; }
}

/* Entry fade-in from slightly above */
@keyframes logo-enter {
  0%   { opacity: 0; transform: translateY(-10px) scale(0.96); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0px)   scale(1);    }
}

/* Reduced-motion: static, no float */
@media (prefers-reduced-motion: reduce) {
  @keyframes logo-float { 0%, 100% { transform: none; opacity: 1; } }
  @keyframes logo-enter { 0%, 100% { opacity: 1; transform: none; } }
}


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

.fcc-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: logo-enter 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── FLOAT WRAPPER ────────────────────────────────────────── */

.fcc-logo__float {
  animation: logo-float 9s ease-in-out infinite;
  /* GPU-safe: only transform + opacity */
  will-change: transform;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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


/* ── IMAGE ELEMENT ────────────────────────────────────────── */

.fcc-logo__img {
  display: block;
  /* The asset has its own transparent background — no border/shadow needed */
  /* Aspect ratio matches the SVG viewBox (920 × 460 = 2:1 wide) */
}

/* HERO — login / landing center (large) */
.fcc-logo__img--hero {
  /* Wide emblem: max 560px, scales down to 86vw on small screens */
  width: min(560px, 86vw);
  height: auto;
}

/* COMPACT — topbar (small, wide mark) */
.fcc-logo__img--compact {
  /* Height drives the sizing; width scales automatically */
  height: 96px;
  width: auto;
}

/* Tighter float for compact — stays in topbar bounds */
.fcc-logo--compact .fcc-logo__float {
  animation-duration: 11s;
}


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

/* Override topbar to allow absolute centering of the logo */
.cockpit-topbar--logo {
  justify-content: space-between;
  position: relative;
}

.cockpit-topbar--logo .fcc-logo-topbar-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* side 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%,
    rgba(174, 255, 0, 0.04) 0%,
    transparent 70%
  );
  filter: blur(40px);
  opacity: 0.6;
}

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