/* =====================================================================================================================
   Petrol Soft sign-in (2026-11-08): the brand panel is an animated night forecourt – lit canopy, two pumps whose screens
   count liters, an underground tank filling, a tanker and a car on the road, stars and warm glows. Always dark, brand
   orange. Pure SVG / CSS (nothing to download). Motion stops with "reduce motion". Markup: views/auth/top.php.
   ===================================================================================================================== */
.au-panel.is-petrol { color: #e2e8f0; background: radial-gradient(1100px 650px at 85% -5%, #3b1408 0%, #121b2e 42%, #070d1a 100%); overflow: hidden; }
.ps-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ps-stars { position: absolute; inset: 0 0 45% 0; opacity: .75;
    background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 28% 8%, #fde68a 50%, transparent 51%),
        radial-gradient(1px 1px at 46% 22%, #fff 50%, transparent 51%), radial-gradient(1.6px 1.6px at 63% 12%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 78% 30%, #fde68a 50%, transparent 51%), radial-gradient(1.3px 1.3px at 91% 9%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 6% 40%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 38% 36%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 70% 44%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 86% 52%, #fde68a 50%, transparent 51%);
    animation: ps-twinkle 4s ease-in-out infinite alternate; }
.ps-glow { position: absolute; border-radius: 50%; filter: blur(90px); }
.ps-glow.is-a { width: 560px; height: 560px; inset-block-start: -220px; inset-inline-end: -160px; background: #ee7a2f; opacity: .26; animation: ps-breathe 8s ease-in-out infinite alternate; }
.ps-glow.is-b { width: 440px; height: 440px; inset-block-end: -180px; inset-inline-start: -140px; background: #f6a868; opacity: .12; animation: ps-breathe 10s ease-in-out infinite alternate-reverse; }

/* the station (SVG): canopy, beams, two pumps, underground tank */
.ps-station { position: absolute; inset-inline-end: 0; inset-block-end: 72px; width: min(64%, 700px); height: auto; }
.ps-station text { direction: ltr; unicode-bidi: plaintext; }
.ps-canopy-light { animation: ps-flicker 6s ease-in-out infinite; }
.ps-beam { opacity: .5; animation: ps-beam 5s ease-in-out infinite alternate; }
.ps-screen { fill: #0b1b33; stroke: #ee7a2f; stroke-width: 1.2; }
.ps-digits { font: 700 11px/1 'Inter', ui-monospace, monospace; fill: #f6a868; letter-spacing: .04em; }
.ps-digits.is-small { font-size: 8px; fill: #fde68a; opacity: .85; }
.ps-label { font: 800 8.5px/1 'Inter', system-ui, sans-serif; fill: #0f2341; letter-spacing: .14em; }
.ps-hose { fill: none; stroke: #0f2341; stroke-width: 3.2; stroke-linecap: round; }
.ps-drip { fill: #f6a868; filter: drop-shadow(0 0 4px #ee7a2f); animation: ps-drip 2.4s ease-in infinite; }
.ps-drip.is-2 { animation-delay: 1.2s; }
.ps-tank-fill { animation: ps-fill 9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: bottom; }
.ps-tank-text { font: 700 9.5px/1 'Inter', system-ui, sans-serif; fill: #fde68a; letter-spacing: .12em; }
.ps-pipe { fill: none; stroke: rgba(238, 122, 47, .35); stroke-width: 3; stroke-dasharray: 4 7; animation: ps-flow 1.4s linear infinite; }

/* the road with a tanker and a car */
.ps-road { position: absolute; inset-inline: 0; inset-block-end: 0; height: 74px; background: linear-gradient(180deg, #0b1220 0%, #05080f 100%); border-block-start: 2px solid rgba(238, 122, 47, .28); }
.ps-road::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 34px; height: 3px;
    background: repeating-linear-gradient(90deg, rgba(253, 230, 138, .55) 0 34px, transparent 34px 70px); animation: ps-lane 1.6s linear infinite; }
.ps-truck { position: absolute; inset-block-end: 22px; inset-inline-start: -220px; width: 190px; height: auto; filter: drop-shadow(0 0 14px rgba(238, 122, 47, .45)); animation: ps-drive 17s linear infinite; }
.ps-car { position: absolute; inset-block-end: 12px; inset-inline-start: 108%; width: 92px; height: auto; animation: ps-drive-back 11s linear infinite; animation-delay: -4s; opacity: .9; }
.ps-wheel { transform-box: fill-box; transform-origin: center; animation: ps-spin .6s linear infinite; }
[dir="rtl"] .ps-truck, [dir="rtl"] .ps-car { transform: scaleX(-1); }

/* the brand panel's text in the forecourt colours */
.au-panel.is-petrol .au-panel-in { position: relative; z-index: 2; justify-content: space-between; }
.au-panel.is-petrol .au-lockup { animation: ps-in .8s ease-out both; }
.au-panel.is-petrol .au-lockup .ve-brand-logo { width: clamp(260px, 21vw, 360px); margin: 0; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .5)); }
.au-panel.is-petrol .au-hero { margin-block: auto; max-width: 560px; }
.au-panel.is-petrol .au-hero > * { animation: ps-in .8s ease-out both; }
.au-panel.is-petrol .au-hero > :nth-child(2) { animation-delay: .12s; } .au-panel.is-petrol .au-hero > :nth-child(3) { animation-delay: .24s; }
.au-panel.is-petrol .au-hero > :nth-child(4) { animation-delay: .36s; } .au-panel.is-petrol .au-hero > :nth-child(5) { animation-delay: .48s; }
.ps-kicker { display: inline-flex; align-items: center; gap: 8px; margin-block-end: 14px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
    color: #fbcc9f; background: rgba(238, 122, 47, .14); border: 1px solid rgba(238, 122, 47, .4); }
.ps-kicker i { color: #ee7a2f; }
.au-panel.is-petrol .au-h1 { color: #f8fafc; font-size: clamp(32px, min(3.3vw, 5.6vh), 54px); text-shadow: 0 6px 30px rgba(0, 0, 0, .5); }
.au-panel.is-petrol .au-g { background: linear-gradient(90deg, #ee7a2f, #f6a868 45%, #fde68a 70%, #f6a868); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: ps-shine 6s linear infinite; }
.au-panel.is-petrol .au-lead { color: #cbd5e1; max-width: 480px; }
.ps-rotator { display: flex; align-items: center; gap: 10px; min-height: 28px; margin: 0 0 18px; font-size: 15.5px; font-weight: 650; color: #fff7ed; }
.ps-rotator i { color: #ee7a2f; }
.ps-rotator [data-ps-word] { display: inline-block; transition: opacity .35s ease, transform .35s ease; }
.ps-rotator [data-ps-word].is-out { opacity: 0; transform: translateY(8px); }
.au-panel.is-petrol .au-feats.is-chips li { background: rgba(15, 23, 42, .55); border-color: rgba(238, 122, 47, .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.au-panel.is-petrol .au-fi { width: 30px; height: 30px; border-radius: 50%; font-size: 13px; color: #f6a868; background: rgba(238, 122, 47, .16); border-color: rgba(238, 122, 47, .38); }
.au-panel.is-petrol .au-feats b { color: #f1f5f9; font-size: 13px; }

/* the sign-in card in the brand orange */
.au .au-btn { background: linear-gradient(135deg, #d25a12 0%, #8a3510 100%); box-shadow: 0 10px 26px rgba(138, 53, 16, .35); }
.au .au-btn:hover { box-shadow: 0 12px 30px rgba(138, 53, 16, .45); }
.au .au-box:focus-within { border-color: #ee7a2f; box-shadow: 0 0 0 4px rgba(238, 122, 47, .18); }
.au .au-card-mark img { filter: drop-shadow(0 8px 18px rgba(238, 122, 47, .35)); }
.au .au-check input { accent-color: #ee7a2f; }

@media (max-width: 1280px) { .ps-station { opacity: .5; width: 82%; } }
@media (max-width: 900px) { .au-panel.is-petrol .au-lead, .au-feats.is-chips, .ps-rotator, .ps-station, .ps-car { display: none; } .ps-road { height: 52px; } .ps-truck { width: 130px; inset-block-end: 12px; } }
@media (prefers-reduced-motion: reduce) { .ps-scene *, .au-panel.is-petrol *, .ps-road::after { animation: none !important; } .ps-truck { inset-inline-start: 55%; } }

@keyframes ps-twinkle { from { opacity: .45; } to { opacity: .95; } }
@keyframes ps-breathe { from { transform: scale(1); } to { transform: scale(1.18); } }
@keyframes ps-flicker { 0%, 46%, 49%, 100% { opacity: 1; } 47% { opacity: .78; } 48% { opacity: .95; } }
@keyframes ps-beam { from { opacity: .3; } to { opacity: .6; } }
@keyframes ps-drip { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { transform: translateY(14px); opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }
@keyframes ps-fill { from { transform: scaleY(.35); } to { transform: scaleY(.9); } }
@keyframes ps-flow { to { stroke-dashoffset: -22; } }
@keyframes ps-lane { from { background-position: 0 0; } to { background-position: -70px 0; } }
@keyframes ps-drive { from { inset-inline-start: -220px; } to { inset-inline-start: 108%; } }
@keyframes ps-drive-back { from { inset-inline-start: 108%; } to { inset-inline-start: -120px; } }
@keyframes ps-spin { to { transform: rotate(360deg); } }
@keyframes ps-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ps-shine { to { background-position: 200% center; } }