/* ============================================================================
   PostPilot — fx.css · shared effect utilities (loaded by all three layouts)
   States only — entrance/scroll animation is driven by fx.js (GSAP).
   IMPORTANT: nothing here may hide content by default; if JS never runs the
   page must remain fully readable.
   ============================================================================ */

/* Frosted glass panel */
.glass {
    background: var(--pp-glass-bg);
    -webkit-backdrop-filter: blur(var(--pp-glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--pp-glass-blur)) saturate(160%);
    border: 1px solid var(--pp-glass-border);
    box-shadow: inset 0 1px 0 var(--pp-glass-highlight), var(--pp-shadow);
}

/* Sunset glow auras */
.glow { box-shadow: var(--pp-glow); }
.glow-soft { box-shadow: var(--pp-glow-soft); }
.glow-teal { box-shadow: var(--pp-glow-teal); }

/* Gradient ink for headline fragments and hero numbers */
.gradient-text {
    background: var(--pp-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 3D tilt targets — give children depth so tilt reads as volume, not a sticker */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-tilt] .tilt-inner { transform: translateZ(28px); }
[data-tilt] .js-tilt-glare { border-radius: inherit; }

/* Magnetic buttons: fx.js translates these toward the cursor */
[data-magnetic] { will-change: transform; display: inline-block; }

/* WebGL background host (Vanta) — parent must be position:relative */
.vanta-host { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.vanta-host canvas { display: block; }

/* Gradient-border panel (pricing "popular", highlight cards) */
.gradient-border {
    position: relative;
    background:
        linear-gradient(var(--pp-surface), var(--pp-surface)) padding-box,
        var(--pp-gradient) border-box;
    border: 1px solid transparent;
}

/* Marching conic highlight for hero badges / featured chips */
@keyframes fx-rotate { to { transform: rotate(360deg); } }
.conic-ring { position: relative; overflow: hidden; }
.conic-ring::before {
    content: ""; position: absolute; inset: -60%;
    background: conic-gradient(transparent 0deg, transparent 300deg, rgba(var(--pp-primary-rgb), .8) 330deg, transparent 360deg);
    animation: fx-rotate 4.5s linear infinite;
}
.conic-ring > * { position: relative; z-index: 1; }

/* Soft floating idle motion (decorative elements only) */
@keyframes fx-drift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } }
.fx-drift { animation: fx-drift 7s ease-in-out infinite; }
.fx-drift-slow { animation: fx-drift 11s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .conic-ring::before, .fx-drift, .fx-drift-slow { animation: none; }
    [data-tilt], [data-magnetic] { transform: none !important; }
}