/* ==========================================================================
   Forty Rent — Midnight & Gold : shared motion motif layer
   Provides the fr- prefixed motion vocabulary consumed by pages and by
   motion.js. Not wired into any page yet — this file only defines classes
   and keyframes; JS toggles .fr-in / .fr-run to trigger reveals.
   ========================================================================== */

:root {
  --fr-gold: #e6b552;
  --fr-gold-deep: #1a140a;
  --fr-cream: rgba(242, 236, 221, 1);
  --fr-cream-dim: rgba(242, 236, 221, 0.66);
  --fr-hair: rgba(242, 236, 221, 0.12);
  --fr-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------
   fr-reveal — generic rise + fade. Hidden by default, revealed via .fr-in
   -------------------------------------------------------------------- */
.fr-reveal {
  opacity: 1;
  transform: none;
}

.fr-reveal.fr-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s var(--fr-ease);
}

/* --------------------------------------------------------------------
   fr-aura — breathing gold radial orb (decorative, aria-hidden in markup)
   -------------------------------------------------------------------- */
.fr-aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(42% 48% at 84% 14%, rgba(230, 181, 82, 0.42), transparent 70%);
  animation: fr-breathe 8s ease-in-out infinite;
}

@keyframes fr-breathe {
  0%, 100% {
    opacity: 0.55;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-2%, 2%) scale(1.08);
  }
}

/* --------------------------------------------------------------------
   fr-grain — cinematic noise overlay
   -------------------------------------------------------------------- */
.fr-grain {
  position: absolute;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255, 255, 255, 0.9) 0.5px, transparent 0.6px);
  background-size: 3px 3px;
  animation: fr-grain 6s steps(6) infinite;
}

@keyframes fr-grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -2%); }
  60% { transform: translate(-2%, -3%); }
  80% { transform: translate(3%, 2%); }
  100% { transform: translate(0, 0); }
}

/* --------------------------------------------------------------------
   fr-kinetic / fr-line / fr-line-in — staggered headline reveal
   Structure: .fr-kinetic > .fr-line (overflow hidden) > .fr-line-in
   A parent carrying .fr-run triggers the reveal.
   -------------------------------------------------------------------- */
.fr-kinetic {
  display: block;
}

.fr-line {
  display: block;
  overflow: hidden;
}

.fr-line-in {
  display: block;
  transform: none;
}

.fr-run .fr-line-in {
  transition: transform 0.7s var(--fr-ease);
  transform: translateY(0);
}

.fr-run .fr-line:nth-child(1) .fr-line-in { transition-delay: 0.15s; }
.fr-run .fr-line:nth-child(2) .fr-line-in { transition-delay: 0.27s; }
.fr-run .fr-line:nth-child(3) .fr-line-in { transition-delay: 0.39s; }

/* --------------------------------------------------------------------
   fr-shimmer — gold light sweep. Hover-triggered by default; under a
   .fr-run ancestor it sweeps once automatically on load.
   -------------------------------------------------------------------- */
.fr-shimmer {
  position: relative;
  overflow: hidden;
}

.fr-shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
}

.fr-shimmer:hover::after {
  animation: fr-sweep 1s ease;
}

.fr-run .fr-shimmer::after {
  animation: fr-sweep 1.1s ease 0.9s;
}

@keyframes fr-sweep {
  from { left: -60%; }
  to { left: 130%; }
}

/* --------------------------------------------------------------------
   fr-live-dot — small dot with pulsing ::after ring
   -------------------------------------------------------------------- */
.fr-live-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--fr-gold);
  position: relative;
}

.fr-live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--fr-gold);
  animation: fr-pulse 2s ease-out infinite;
}

@keyframes fr-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------
   fr-glass-hover — lift + gold edge on hover (dashboard glass cards)
   -------------------------------------------------------------------- */
.fr-glass-hover {
  transition: border-color 0.3s ease;
}

.fr-glass-hover:hover {
  border-color: rgba(230, 181, 82, 0.5);
}

/* --------------------------------------------------------------------
   fr-viewswap — fade-slide transition for dashboard view changes
   -------------------------------------------------------------------- */
.fr-viewswap {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s var(--fr-ease);
}

.fr-viewswap.fr-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fr-aura, .fr-grain, .fr-live-dot::after, .fr-shimmer::after { animation: none !important; }
  .fr-reveal, .fr-line-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fr-glass-hover { transition: none; }
}