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

.fro-optimizer, .frm-app { --fro-pink: #ff2f9e; --fro-cyan-glow: rgba(0,240,255,.5); }
.fro-optimizer, .frm-app { isolation: isolate; }

/* ==========================================================================
   HERO SCENE  (scene markup injected as first child of .fro-header)
   ========================================================================== */
.fro-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(--fro-border);
    border-radius: var(--fro-radius);
    background: linear-gradient(180deg, #060910 0%, #0a0e14 100%);
    box-shadow: var(--fro-shadow-lg), inset 0 0 60px rgba(0,240,255,.04);
}
.fro-header > *:not(.fro-neon-scene) { position: relative; z-index: 2; }

.fro-neon-scene {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none; overflow: hidden; border-radius: var(--fro-radius);
}
/* readability scrim: darkens the lower half where the title/subtitle sit */
.fro-neon-scene::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, transparent 28%, rgba(6,9,16,.38) 52%, rgba(6,9,16,.74) 100%);
}
.fro-neon-sunglow {
    position: absolute; left: 50%; top: 27%; 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%);
}
.fro-neon-sun {
    position: absolute; left: 50%; top: 27%; translate: -50% -50%;
    width: 210px; aspect-ratio: 1; border-radius: 50%;
    background: linear-gradient(180deg, var(--fro-accent) 0%, var(--fro-accent-2) 46%, var(--fro-pink) 100%);
    filter: blur(.3px);
}
.fro-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%);
}
.fro-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: fro-floor 5s linear infinite;
}
@keyframes fro-floor { to { background-position: 0 44px; } }
.fro-neon-palm {
    position: absolute; bottom: -6px; height: 78%;
    opacity: .9; filter: drop-shadow(0 0 10px rgba(168,85,247,.4));
}
.fro-neon-palm path { fill: #04050a; }
.fro-neon-palm.l { left: -34px; transform: scaleX(-1); }
.fro-neon-palm.r { right: -34px; }
.fro-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 (Rajdhani already self-hosted). Keep BETA tag inline. */
.fro-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));
}
.fro-header p { font-size: .95rem; max-width: 48ch; color: var(--fro-text); text-shadow: 0 1px 10px rgba(0,0,0,.85); }
.fro-header::after { margin-top: 1rem; box-shadow: 0 0 12px var(--fro-cyan-glow); }
/* keep the beta notice readable when it sits inside the hero */
.fro-header .fro-beta-notice { backdrop-filter: blur(4px); }

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

/* dropzones -> holographic panels (matches the studio viz): corner brackets +
   a mini perspective neon grid rising from the bottom, like the hero.
   Covers the optimizer upload zone AND the map-merger dropzone. */
.fro-upload-zone, .frm-dropzone { position: relative; overflow: hidden; }
.fro-upload-zone > *:not(.fro-dz-br):not(.fro-dz-grid),
.frm-dropzone > *:not(.fro-dz-br):not(.fro-dz-grid) { position: relative; z-index: 1; }
.fro-dz-br { position: absolute; width: 22px; height: 22px; border: 2px solid var(--fro-accent); opacity: .6; pointer-events: none; z-index: 2; transition: opacity .25s ease; }
.fro-dz-br.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.fro-dz-br.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.fro-dz-br.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.fro-dz-br.br2 { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.fro-upload-zone:hover .fro-dz-br,
.fro-dropzone--hover .fro-dz-br,
.frm-dropzone:hover .fro-dz-br,
.frm-dropzone--hover .fro-dz-br { opacity: 1; box-shadow: 0 0 10px var(--fro-cyan-glow); }
.fro-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: fro-floor 5s linear infinite;
}

/* both naming variants exist: --primary (optimizer) and -primary (map merger) */
.fro-btn--primary, .fro-btn-primary {
    background: linear-gradient(115deg, var(--fro-accent), var(--fro-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;
}
.fro-btn--primary:hover, .fro-btn-primary:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
    box-shadow: 0 0 40px rgba(0,240,255,.42);
}

/* preset cards - stronger selected glow + hover lift */
.fro-preset-card:hover { box-shadow: 0 10px 26px -14px var(--fro-cyan-glow); }
.fro-preset-card--selected {
    box-shadow: 0 0 24px rgba(0,240,255,.22), inset 0 0 30px rgba(0,240,255,.05);
}

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

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

/* ---------- headline savings %: value-driven circular gauge ---------- */
.fro-savings-big { --pct: 0; }
.fro-gauge {
    position: relative; display: inline-grid; place-items: center;
    width: 172px; height: 172px; margin: 0 auto .6rem; border-radius: 50%;
    background: conic-gradient(from -90deg, var(--fro-accent) calc(var(--pct, 0) * 1%), rgba(58,69,96,.28) 0);
    box-shadow: 0 0 28px rgba(0,240,255,.25);
    animation: fro-gauge-in .6s ease-out both;
}
.fro-gauge::before {
    content: ""; position: absolute; inset: 13px; border-radius: 50%;
    background: var(--fro-surface); box-shadow: inset 0 0 24px rgba(0,240,255,.08);
}
.fro-gauge .fro-savings-pct {
    position: relative; z-index: 1; margin: 0;
    filter: drop-shadow(0 0 16px var(--fro-cyan-glow));
}
@keyframes fro-gauge-in { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

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

/* ---------- driving neon car in the hero (with speed trail) ---------- */
.fro-neon-car {
    position: absolute; left: 50%; bottom: 15%; width: 118px; translate: -50% 0;
    z-index: 2; opacity: .9; animation: fro-drive 6s ease-in infinite;
}
.fro-neon-car svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 12px var(--fro-cyan-glow)); }
.fro-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 fro-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 ---------- */
.fro-header { animation: fro-breathe 5s ease-in-out infinite; }
@keyframes fro-breathe {
    0%, 100% { box-shadow: var(--fro-shadow-lg), inset 0 0 60px rgba(0,240,255,.04); }
    50%      { box-shadow: var(--fro-shadow-lg), inset 0 0 74px rgba(0,240,255,.08), 0 0 42px rgba(0,240,255,.08); }
}
.fro-neon-sunglow { animation: fro-sunpulse 4.5s ease-in-out infinite; }
@keyframes fro-sunpulse { 0%, 100% { opacity: .9; scale: 1; } 50% { opacity: 1; scale: 1.06; } }

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

@media (prefers-reduced-motion: reduce) {
    .fro-neon-grid,
    .fro-dz-grid,
    .fro-progress-fill::after,
    .fro-success-icon::before,
    .fro-header,
    .fro-neon-sunglow,
    .fro-gauge { animation: none; }
    .fro-neon-car { animation: none; opacity: .85; translate: -50% -8px; }
}