/* ==========================================================================
   FiveMRides Converter - NEON SKIN (synthwave overlay)
   Loaded AFTER converter.css - overrides only, fully removable.
   Adds the animated hero scene + amplifies the existing neon components.
   Uses the brand tokens already defined in converter.css (--frc-*).
   ========================================================================== */

/* decorative-only tertiary hue (sun / palms), not part of brand tokens */
.frc-converter { --frc-pink: #ff2f9e; --frc-cyan-glow: rgba(0,240,255,.5); }

/* make the tool a clean stacking context so the scene tucks behind content */
.frc-converter { isolation: isolate; }

/* ==========================================================================
   HERO SCENE  (scene markup injected as first child of .frc-header)
   ========================================================================== */
.frc-header {
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 2.25rem 1.5rem 2rem;
    overflow: hidden;
    border: 1px solid var(--frc-border);
    border-radius: var(--frc-radius);
    background: linear-gradient(180deg, #060910 0%, #0a0e14 100%);
    box-shadow: var(--frc-shadow-lg), inset 0 0 60px rgba(0,240,255,.04);
}
.frc-header > *:not(.frc-neon-scene) { position: relative; z-index: 2; }

.frc-neon-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: var(--frc-radius);
}
/* readability scrim: darkens the lower half where the title/subtitle sit */
.frc-neon-scene::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, transparent 30%, rgba(6,9,16,.35) 54%, rgba(6,9,16,.72) 100%);
}
/* glow halo behind the sun */
.frc-neon-sunglow {
    position: absolute; left: 50%; top: 29%; translate: -50% -50%;
    width: 620px; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(168,85,247,.32) 0%, rgba(255,47,158,.12) 38%, transparent 62%);
}
/* the synthwave sun with slat mask */
.frc-neon-sun {
    position: absolute; left: 50%; top: 29%; translate: -50% -50%;
    width: 214px; aspect-ratio: 1; border-radius: 50%;
    background: linear-gradient(180deg, var(--frc-accent) 0%, var(--frc-accent-2) 46%, var(--frc-pink) 100%);
    filter: blur(.3px);
}
.frc-neon-sun::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: repeating-linear-gradient(180deg, transparent 0 12px, #0a0e14 12px 18px);
    -webkit-mask-image: linear-gradient(180deg, transparent 44%, #000 54%);
            mask-image: linear-gradient(180deg, transparent 44%, #000 54%);
}
/* perspective grid floor */
.frc-neon-grid {
    position: absolute; left: 50%; bottom: -2px; translate: -50% 0;
    width: 260%; height: 55%; z-index: 0;
    background-image:
        linear-gradient(90deg, rgba(0,240,255,.45) 1px, transparent 1px),
        linear-gradient(180deg, rgba(0,240,255,.45) 1px, transparent 1px);
    background-size: 44px 44px;
    transform: perspective(120px) rotateX(74deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
    animation: frc-floor 5s linear infinite;
}
@keyframes frc-floor { to { background-position: 0 44px; } }
/* palm silhouettes */
.frc-neon-palm {
    position: absolute; bottom: -6px; height: 78%;
    opacity: .9; filter: drop-shadow(0 0 10px rgba(168,85,247,.4));
}
.frc-neon-palm path { fill: #04050a; }
.frc-neon-palm.l { left: -34px; transform: scaleX(-1); }
.frc-neon-palm.r { right: -34px; }
/* CRT scanlines */
.frc-neon-scan {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
}

/* hero title - bigger, more presence (Rajdhani already self-hosted) */
.frc-header h1 {
    font-size: clamp(2rem, 5vw, 3.1rem) !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: .95;
    filter: drop-shadow(0 0 22px rgba(0,240,255,.25));
}
.frc-header p {
    font-size: .95rem;
    max-width: 46ch;
    color: var(--frc-text);
    text-shadow: 0 1px 10px rgba(0,0,0,.85);
}
.frc-header::after { margin-top: 1rem; box-shadow: 0 0 12px var(--frc-cyan-glow); }

/* ==========================================================================
   COMPONENT NEON POLISH
   ========================================================================== */

/* upload / dropzone - holographic */
.frc-upload-zone {
    border-width: 2px;
    border-color: rgba(0,240,255,.35);
    background: linear-gradient(180deg, rgba(0,240,255,.03), var(--frc-surface));
    box-shadow: inset 0 0 40px rgba(0,240,255,.04);
}
.frc-upload-zone:hover,
.frc-dropzone--hover {
    box-shadow: 0 12px 40px rgba(0,240,255,.14), inset 0 0 50px rgba(0,240,255,.08);
}
.frc-upload-icon { filter: drop-shadow(0 0 14px var(--frc-cyan-glow)); }
.frc-upload-title { font-size: 1.5rem; }

/* dropzone -> holographic panel (matches the studio viz): corner brackets +
   a mini perspective neon grid rising from the bottom, like the hero. */
.frc-upload-zone { position: relative; overflow: hidden; }
.frc-upload-zone > *:not(.frc-dz-br):not(.frc-dz-grid) { position: relative; z-index: 1; }
.frc-dz-br { position: absolute; width: 22px; height: 22px; border: 2px solid var(--frc-accent); opacity: .6; pointer-events: none; z-index: 2; transition: opacity .25s ease; }
.frc-dz-br.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.frc-dz-br.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.frc-dz-br.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.frc-dz-br.br2 { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.frc-upload-zone:hover .frc-dz-br,
.frc-dropzone--hover .frc-dz-br { opacity: 1; box-shadow: 0 0 10px var(--frc-cyan-glow); }
.frc-dz-grid {
    position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: 200%; height: 48%;
    z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(90deg, rgba(0,240,255,.4) 1px, transparent 1px),
        linear-gradient(180deg, rgba(0,240,255,.4) 1px, transparent 1px);
    background-size: 34px 34px;
    transform: perspective(90px) rotateX(72deg); transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 60%);
    opacity: .62; animation: frc-floor 5s linear infinite;
}

/* primary buttons - gradient + glow */
.frc-btn--primary {
    background: linear-gradient(115deg, var(--frc-accent), var(--frc-accent-2)) !important;
    color: #04121a !important;
    border: none !important;
    font-weight: 700;
    box-shadow: 0 0 24px rgba(0,240,255,.28);
    transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.frc-btn--primary:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(0,240,255,.42);
}
.frc-btn--large { letter-spacing: .04em; text-transform: uppercase; }

/* tabs - neon active */
.frc-tab--active {
    color: var(--frc-accent);
    box-shadow: inset 0 -2px 0 var(--frc-accent), 0 0 0 1px var(--frc-border);
    text-shadow: 0 0 10px var(--frc-cyan-glow);
}

/* section headings */
.frc-panel-header h3 {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 1.25rem;
}

/* sound cards - stronger selected glow + hover lift */
.frc-sound-card:hover {
    box-shadow: 0 8px 22px -12px var(--frc-cyan-glow);
}
.frc-sound-card--selected {
    box-shadow: 0 0 22px rgba(0,240,255,.22), inset 0 0 30px rgba(0,240,255,.05);
}

/* mode buttons */
.frc-mode-btn--active {
    background: linear-gradient(115deg, var(--frc-accent), var(--frc-accent-2));
    color: #04121a;
    box-shadow: 0 0 16px rgba(0,240,255,.25);
}

/* files badge / meta badges */
.frc-badge--files { box-shadow: 0 0 12px rgba(0,240,255,.12); }

/* success card - RPF -> FiveM Ready energy */
.frc-success-card { position: relative; overflow: hidden; }
.frc-success-icon {
    color: var(--frc-success);
    filter: drop-shadow(0 0 20px rgba(52,211,153,.55));
}
.frc-success-card h2 {
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* holographic corner brackets on the vehicle summary card */
.frc-vehicle-card { position: relative; }
.frc-vehicle-card::before,
.frc-vehicle-card::after {
    content: ""; position: absolute; width: 20px; height: 20px;
    border: 2px solid var(--frc-accent); opacity: .55; pointer-events: none;
}
.frc-vehicle-card::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.frc-vehicle-card::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* ==========================================================================
   ENGINE LIBRARY -> studio-style tiles (waveform on top, name + desc, compact
   actions at the bottom). Restyles the functional sound picker to match the
   Studio "Engine Library" viz.
   ========================================================================== */
.frc-sound-grid { grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 10px; }

.frc-sound-card {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 9px;
    padding: 12px 12px 10px;
    text-align: left;
}
.frc-sound-card:hover { transform: translateY(-3px); }

/* full-width waveform strip on top; idle = static shape, hover/selected = dances */
.frc-eq { display: flex; align-items: flex-end; gap: 3px; width: 100%; height: 42px; margin: 0; opacity: .68; transition: opacity .2s ease; }
.frc-sound-card:hover .frc-eq,
.frc-sound-card--selected .frc-eq { opacity: 1; }
.frc-eq i { flex: 1; height: 42px; border-radius: 2px; transform-origin: bottom; background: linear-gradient(180deg, var(--frc-accent), var(--frc-accent-2)); }
.frc-eq i:nth-child(1) { transform: scaleY(.28); }
.frc-eq i:nth-child(2) { transform: scaleY(.58); }
.frc-eq i:nth-child(3) { transform: scaleY(.92); }
.frc-eq i:nth-child(4) { transform: scaleY(.44); }
.frc-eq i:nth-child(5) { transform: scaleY(.76); }
.frc-eq i:nth-child(6) { transform: scaleY(1); }
.frc-eq i:nth-child(7) { transform: scaleY(.5); }
.frc-eq i:nth-child(8) { transform: scaleY(.7); }
.frc-eq i:nth-child(9) { transform: scaleY(.36); }
.frc-sound-card:hover .frc-eq i,
.frc-sound-card--selected .frc-eq i { animation: frc-eqbar 1.05s ease-in-out infinite; }
.frc-eq i:nth-child(2){ animation-delay:.09s } .frc-eq i:nth-child(3){ animation-delay:.18s }
.frc-eq i:nth-child(4){ animation-delay:.27s } .frc-eq i:nth-child(5){ animation-delay:.36s }
.frc-eq i:nth-child(6){ animation-delay:.45s } .frc-eq i:nth-child(7){ animation-delay:.54s }
.frc-eq i:nth-child(8){ animation-delay:.63s } .frc-eq i:nth-child(9){ animation-delay:.72s }
@keyframes frc-eqbar { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }

/* name + one-line desc */
.frc-sound-info { flex: none; }
.frc-sound-info span { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* actions pinned to the bottom-right of the tile */
.frc-sound-actions { width: 100%; justify-content: flex-end; margin-top: 2px; }

/* ---------- neon progress bar with shimmer ---------- */
.frc-progress-bar { overflow: hidden; box-shadow: inset 0 0 8px rgba(0,0,0,.45); }
.frc-progress-fill {
    position: relative;
    background: linear-gradient(90deg, var(--frc-accent), var(--frc-accent-2)) !important;
    box-shadow: 0 0 16px var(--frc-cyan-glow);
}
.frc-progress-fill::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
    transform: translateX(-100%);
    animation: frc-shimmer 1.3s linear infinite;
}
@keyframes frc-shimmer { to { transform: translateX(220%); } }

/* ---------- Ready state: pulsing ring + gradient headline ---------- */
.frc-success-icon { position: relative; display: inline-grid; place-items: center; }
.frc-success-icon svg { position: relative; z-index: 1; }
.frc-success-icon::before {
    content: ""; position: absolute; width: 108px; height: 108px; border-radius: 50%;
    border: 2px solid var(--frc-success); opacity: .55;
    animation: frc-ring 2.1s ease-out infinite;
}
@keyframes frc-ring { 0% { transform: scale(.62); opacity: .6; } 100% { transform: scale(1.5); opacity: 0; } }
.frc-success-card h2 {
    background: linear-gradient(110deg, var(--frc-accent), var(--frc-success));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- handling preset cards ---------- */
.frc-preset-card--selected {
    box-shadow: 0 0 22px rgba(0,240,255,.22), inset 0 2px 0 var(--frc-accent);
}
.frc-preset-icon { filter: drop-shadow(0 0 8px var(--frc-cyan-glow)); }

/* ---------- driving neon car in the hero (with speed trail) ---------- */
.frc-neon-car {
    position: absolute; left: 50%; bottom: 15%; width: 118px; translate: -50% 0;
    z-index: 2; opacity: .9; animation: frc-drive 6s ease-in infinite;
}
.frc-neon-car svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 12px var(--frc-cyan-glow)); }
.frc-neon-car::after {
    content: ""; position: absolute; left: 50%; top: 88%; translate: -50% 0;
    width: 46%; height: 70px; border-radius: 50%;
    background: linear-gradient(180deg, rgba(0,240,255,.45), transparent 75%);
    filter: blur(5px); z-index: -1;
}
@keyframes frc-drive {
    0%   { translate: -50% 46px; scale: .5;   opacity: 0; }
    16%  { opacity: .95; }
    100% { translate: -50% -76px; scale: 1.18; opacity: 0; }
}

/* ---------- ambient: breathing hero glow + sun pulse ---------- */
.frc-header { animation: frc-breathe 5s ease-in-out infinite; }
@keyframes frc-breathe {
    0%, 100% { box-shadow: var(--frc-shadow-lg), inset 0 0 60px rgba(0,240,255,.04); }
    50%      { box-shadow: var(--frc-shadow-lg), inset 0 0 74px rgba(0,240,255,.08), 0 0 42px rgba(0,240,255,.08); }
}
.frc-neon-sunglow { animation: frc-sunpulse 4.5s ease-in-out infinite; }
@keyframes frc-sunpulse { 0%, 100% { opacity: .9; scale: 1; } 50% { opacity: 1; scale: 1.06; } }

/* ---------- holo corner brackets on the success card ---------- */
.frc-success-card { position: relative; }
.frc-success-card::before,
.frc-success-card::after {
    content: ""; position: absolute; width: 20px; height: 20px;
    border: 2px solid var(--frc-accent); opacity: .5; pointer-events: none;
}
.frc-success-card::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.frc-success-card::after  { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

/* ==========================================================================
   MOTION SAFETY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .frc-neon-grid,
    .frc-dz-grid,
    .frc-eq i,
    .frc-progress-fill::after,
    .frc-success-icon::before,
    .frc-header,
    .frc-neon-sunglow { animation: none; }
    .frc-neon-car { animation: none; opacity: .85; translate: -50% -8px; }
}