/* ═══════════════════════════════════════════════════════
   FRANticc Animated Logo — Shared Styles

   SINGLE CONTROL: change --fl-size to scale everything.
   1 = 22px base.  1.5 = 33px.  2 = 44px.  0.8 = 18px.

   Set it on .fl-wrap directly or override per-page:
     .fl-wrap { --fl-size: 1.2; }
   ═══════════════════════════════════════════════════════ */

.fl-wrap { --fl-size: 1.2; position: relative; display: inline-flex; align-items: center; padding: 4px 8px; overflow: visible; cursor: pointer; flex-shrink: 0; font-size: calc(22px * var(--fl-size)); }
.fl-logo { display: flex; align-items: baseline; position: relative; z-index: 2; }
.fl-logo span { font-family: 'Space Grotesk', sans-serif; font-size: 1em; font-weight: 700; color: #fff; display: inline-block; animation: flFloat 6s ease-in-out infinite; transition: letter-spacing 0.6s cubic-bezier(0.22,1,0.36,1); }
.fl-logo span:nth-child(1) { animation-delay: 0s; }
.fl-logo span:nth-child(2) { animation-delay: 0.4s; }
.fl-logo span:nth-child(3) { animation-delay: 0.8s; }
.fl-logo span:nth-child(4) { animation-delay: 1.2s; }
.fl-logo .fl-sun { color: #10b981; font-size: 1.18em; position: relative; animation: flFloat 6s ease-in-out infinite, flPulse 3s ease-in-out infinite; animation-delay: 1.5s, 0s; text-shadow: 0 0 0.55em rgba(16,185,129,0.5), 0 0 1.36em rgba(16,185,129,0.2); filter: drop-shadow(0 0 0.27em rgba(16,185,129,0.4)); }
.fl-logo span:nth-child(6) { animation-delay: 1.8s; color: rgba(255,255,255,0.4); font-weight: 300; }
.fl-logo span:nth-child(7) { animation-delay: 2.1s; color: rgba(255,255,255,0.4); font-weight: 300; }
.fl-logo span:nth-child(8) { animation-delay: 2.4s; color: rgba(255,255,255,0.4); font-weight: 300; }
.fl-logo span:nth-child(9) { animation-delay: 2.7s; color: rgba(255,255,255,0.4); font-weight: 300; }

@keyframes flFloat { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-0.14em); } 70% { transform: translateY(0.09em); } }
@keyframes flPulse { 0%,100% { text-shadow: 0 0 0.36em rgba(16,185,129,0.4), 0 0 0.9em rgba(16,185,129,0.15); } 50% { text-shadow: 0 0 0.82em rgba(16,185,129,0.7), 0 0 1.8em rgba(16,185,129,0.3), 0 0 2.7em rgba(16,185,129,0.1); } }

/* Underline glow */
.fl-logo::after { content: ''; position: absolute; bottom: -0.18em; left: 15%; width: 70%; height: 1px; background: linear-gradient(90deg, transparent, rgba(16,185,129,0.3), transparent); animation: flUnder 4s ease-in-out infinite; will-change: transform, opacity; }
@keyframes flUnder { 0%,100% { opacity: 0.3; transform: scaleX(0.7); } 50% { opacity: 0.7; transform: scaleX(1); } }

/* Orbiting data points */
.fl-orb { position: absolute; top: 50%; left: 50%; border-radius: 50%; pointer-events: none; z-index: 3; }
.fl-od { position: absolute; border-radius: 50%; }
.fl-orb-1 .fl-od { top: 0; left: 50%; transform: translate(-50%,-50%); }
.fl-orb-2 .fl-od { top: 50%; left: 100%; transform: translate(-50%,-50%); }
.fl-orb-3 .fl-od { top: 100%; left: 50%; transform: translate(-50%,-50%); }

/* Turquoise — inner */
.fl-orb-1 { width: 2em; height: 1.73em; margin-left: -1em; margin-top: -0.86em; animation: flSpin1 22s linear infinite; }
.fl-orb-1 .fl-od { width: 0.23em; height: 0.23em; background: #fff; box-shadow: 0 0 0.45em rgba(255,255,255,0.8), 0 0 1.1em rgba(255,255,255,0.35); animation: flBreath 4s ease-in-out infinite; }

/* Amber — middle (counter-orbit) */
.fl-orb-2 { width: 3.18em; height: 2.73em; margin-left: -1.59em; margin-top: -1.36em; animation: flSpin2 32s linear infinite; }
.fl-orb-2 .fl-od { width: 0.18em; height: 0.18em; background: #fff; box-shadow: 0 0 0.41em rgba(255,255,255,0.8), 0 0 1em rgba(255,255,255,0.35); animation: flBreath 5s ease-in-out infinite; animation-delay: 1s; }

/* Purple — outer */
.fl-orb-3 { width: 4.55em; height: 3.9em; margin-left: -2.27em; margin-top: -1.95em; animation: flSpin3 44s linear infinite; }
.fl-orb-3 .fl-od { width: 0.16em; height: 0.16em; background: #0a0e17; box-shadow: 0 0 0.36em rgba(10,14,23,0.7), 0 0 0.9em rgba(10,14,23,0.3); animation: flBreath 6s ease-in-out infinite; animation-delay: 2s; }

@keyframes flSpin1 { from { transform: rotateX(72deg) rotateY(15deg) rotateZ(0deg); } to { transform: rotateX(72deg) rotateY(15deg) rotateZ(360deg); } }
@keyframes flSpin2 { from { transform: rotateX(55deg) rotateY(-25deg) rotateZ(360deg); } to { transform: rotateX(55deg) rotateY(-25deg) rotateZ(0deg); } }
@keyframes flSpin3 { from { transform: rotateX(40deg) rotateY(35deg) rotateZ(0deg); } to { transform: rotateX(40deg) rotateY(35deg) rotateZ(360deg); } }
@keyframes flBreath { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }

/* Hover */
.fl-wrap:hover .fl-logo span:not(.fl-sun) { letter-spacing: 0.14em; }
.fl-wrap:hover .fl-sun { text-shadow: 0 0 1.1em rgba(16,185,129,0.9), 0 0 2.27em rgba(16,185,129,0.4) !important; }
.fl-wrap:hover .fl-od { opacity: 1 !important; filter: brightness(1.3); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { .fl-logo span, .fl-orb, .fl-od, .fl-logo::after { animation: none !important; } }