/*
 * The public E-Ticket pages: /e-ticket (landing) and /e-ticket/verify.
 * "Motor Park Green": the RTEAN logo's green canopy, its yellow, green
 * and red side bands as the strip under the header, yellow for the one
 * thing to press. Light and dark, from the same tokens; the theme is set
 * on <html data-theme> by eticket/partials/theme-head.blade.php, from the
 * same localStorage key ("theme") the panels use, so a choice made in
 * the panel carries to these pages and back.
 *
 * Plain CSS, served as-is: the deploy runs no asset build.
 */

:root {
    --ground: #f4f7f2;
    --ground-2: #e9f0ea;
    --surface: #ffffff;
    --surface-2: #f7faf7;
    --line: #dfe7e1;
    --ink: #13201a;
    --ink-soft: #33433a;
    --muted: #55655c;
    --canopy: #0b5d36;
    --canopy-2: #094d2d;
    --canopy-ink: #ffffff;
    --canopy-muted: #cfe8d9;
    --action: #007a45;
    --action-hover: #00663a;
    --action-ink: #ffffff;
    --yellow: #ffcb01;
    --yellow-hover: #ffd633;
    --yellow-ink: #13201a;
    --soft: #e3f2e9;
    --soft-ink: #0b5d36;
    --red: #d3161b;
    --red-soft: #fde4e4;
    --amber: #a86a00;
    --cleared: #007a45;
    --invalid: #c4161b;
    --idle: #2c3b33;
    --shadow: 0 24px 48px -28px rgba(11, 93, 54, .45);
    --shadow-sm: 0 10px 24px -18px rgba(11, 93, 54, .5);
    --tri-y: #ffcb01;
    --tri-g: #01a85a;
    --tri-r: #fe0002;

    --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --text: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --gutter: clamp(1rem, 4vw, 3.5rem);
    --radius: 18px;
    --ease: cubic-bezier(.16, 1, .3, 1);
    color-scheme: light;
}

:root[data-theme="dark"] {
    --ground: #0a120e;
    --ground-2: #0e1813;
    --surface: #121d17;
    --surface-2: #17251d;
    --line: #24352b;
    --ink: #e8f0ea;
    --ink-soft: #c5d4ca;
    --muted: #97ab9f;
    --canopy: #072a1a;
    --canopy-2: #0b3a24;
    --canopy-ink: #f1f8f3;
    --canopy-muted: #9cc7ae;
    --action: #2fbf71;
    --action-hover: #4fd08a;
    --action-ink: #04140b;
    --soft: #133325;
    --soft-ink: #8fe0b4;
    --red: #ff6b6b;
    --red-soft: #3a1416;
    --amber: #f2b84b;
    --cleared: #158a52;
    --invalid: #b3262b;
    --idle: #1d2a23;
    --shadow: 0 28px 56px -30px rgba(0, 0, 0, .8);
    --shadow-sm: 0 12px 28px -20px rgba(0, 0, 0, .8);
    color-scheme: dark;
}

/* No script: follow the device. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --ground: #0a120e; --ground-2: #0e1813; --surface: #121d17; --surface-2: #17251d;
        --line: #24352b; --ink: #e8f0ea; --ink-soft: #c5d4ca; --muted: #97ab9f;
        --canopy: #072a1a; --canopy-2: #0b3a24; --canopy-ink: #f1f8f3; --canopy-muted: #9cc7ae;
        --action: #2fbf71; --action-hover: #4fd08a; --action-ink: #04140b;
        --soft: #133325; --soft-ink: #8fe0b4; --red: #ff6b6b; --red-soft: #3a1416; --amber: #f2b84b;
        --cleared: #158a52; --invalid: #b3262b; --idle: #1d2a23;
        color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    font-family: var(--text);
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--ink);
    background: var(--ground);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    transition: background-color .35s var(--ease), color .35s var(--ease);
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: var(--action); }
::selection { background: var(--yellow); color: var(--yellow-ink); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.canopy {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--canopy) 94%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    color: var(--canopy-ink);
}
.canopy-inner {
    max-width: 82rem;
    margin: 0 auto;
    padding: .7rem var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .75rem; color: inherit; text-decoration: none; min-width: 0; }
.brand-logo {
    width: 46px; height: 46px; flex: none;
    border-radius: 50%;
    background: #fff;
    padding: 2px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
    transition: transform .5s var(--ease);
}
.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.04); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand-name { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: .05em; white-space: nowrap; }
.brand-org { font-size: .78rem; color: var(--canopy-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav-link {
    color: var(--canopy-ink);
    text-decoration: none;
    font-weight: 600;
    font-size: .98rem;
    padding: .6rem .85rem;
    border-radius: 999px;
    transition: background-color .2s var(--ease);
}
.nav-link:hover { background: rgba(255, 255, 255, .1); }
.icon-btn {
    width: 44px; height: 44px;
    display: inline-grid; place-items: center;
    border-radius: 999px;
    border: 0;
    background: rgba(255, 255, 255, .1);
    color: var(--canopy-ink);
    cursor: pointer;
    transition: background-color .2s var(--ease), transform .3s var(--ease);
}
.icon-btn:hover { background: rgba(255, 255, 255, .18); }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 20px; height: 20px; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; }

.pill {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 44px;
    padding: .65rem 1.25rem;
    border-radius: 999px;
    border: 0;
    font: 700 1rem/1 var(--text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .25s var(--ease), background-color .2s var(--ease), box-shadow .25s var(--ease);
}
.pill svg { width: 18px; height: 18px; }
.pill:active { transform: scale(.97); }
.pill-yellow { background: var(--yellow); color: var(--yellow-ink); box-shadow: 0 8px 20px -10px rgba(255, 203, 1, .7); }
.pill-yellow:hover { background: var(--yellow-hover); transform: translateY(-1px); }
.pill-green { background: var(--action); color: var(--action-ink); }
.pill-green:hover { background: var(--action-hover); transform: translateY(-1px); }
.pill-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.pill-line:hover { box-shadow: inset 0 0 0 2px var(--action); color: var(--action); }
.pill-ghost { background: rgba(255, 255, 255, .1); color: var(--canopy-ink); }
.pill-ghost:hover { background: rgba(255, 255, 255, .18); }
.me i {
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-grid; place-items: center;
    background: var(--yellow-ink); color: var(--yellow);
    font-style: normal; font-weight: 800; font-size: .85rem;
}

/* The logo's three bands, run along under the header. */
.tricolour { display: flex; height: 6px; }
.tricolour i { flex: 1; }
.tricolour i:nth-child(1) { background: var(--tri-y); }
.tricolour i:nth-child(2) { background: var(--tri-g); }
.tricolour i:nth-child(3) { background: var(--tri-r); }
@media (prefers-reduced-motion: no-preference) {
    .tricolour i { transform-origin: left; animation: band-in .9s var(--ease) both; }
    .tricolour i:nth-child(2) { animation-delay: .08s; }
    .tricolour i:nth-child(3) { animation-delay: .16s; }
    @keyframes band-in { from { transform: scaleX(0); } to { transform: none; } }
}

/* ---------- Shared bits ---------- */
.wrap { max-width: 82rem; margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    align-self: flex-start;
    padding: .35rem .85rem;
    border-radius: 999px;
    background: var(--soft);
    color: var(--soft-ink);
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tri-g); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tri-g) 25%, transparent); }
@media (prefers-reduced-motion: no-preference) {
    .eyebrow::before { animation: pulse 2.4s ease-in-out infinite; }
    @keyframes pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--tri-g) 0%, transparent); } }
}
h1, h2, h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .95; letter-spacing: -.005em; }
.section-title { font-size: clamp(2.2rem, 5.4vw, 3.6rem); }
.section-lede { margin-top: .9rem; color: var(--muted); font-size: 1.12rem; max-width: 40rem; }

/* The verify box: scan, or type the number. */
.verify {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 1rem;
    box-shadow: var(--shadow);
}
.scan {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: .65rem;
    min-height: 58px;
    border: 0; border-radius: 14px;
    background: var(--action); color: var(--action-ink);
    font: 800 1.35rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em;
    cursor: pointer;
    position: relative; overflow: hidden;
    transition: background-color .2s var(--ease), transform .25s var(--ease);
}
.scan:hover { background: var(--action-hover); }
.scan:active { transform: scale(.985); }
.scan svg { width: 26px; height: 26px; }
@media (prefers-reduced-motion: no-preference) {
    .scan::after {
        content: ''; position: absolute; inset: 0;
        background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%);
        transform: translateX(-100%);
        animation: sheen 3.8s 1.2s var(--ease) infinite;
    }
    @keyframes sheen { 0%, 60% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
}
.or { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .85rem; font-weight: 600; margin: .8rem .2rem; }
.or::before, .or::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.plate-row { display: flex; gap: .6rem; }
.plate-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.plate-wrap::before {
    content: 'RTEAN';
    position: absolute; top: .45rem; left: 0; right: 0;
    text-align: center;
    font: 700 .62rem/1 var(--text); letter-spacing: .32em;
    color: var(--action);
    pointer-events: none;
}
.plate {
    flex: 1; min-width: 0;
    font: 700 1.45rem/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-align: center;
    color: #13201a;
    background: #ffffff;
    border: 0; border-radius: 12px;
    padding: 1.2rem .9rem .5rem;
    outline: none;
    box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 5px #13201a;
    transition: box-shadow .2s var(--ease);
}
.plate::placeholder { color: #6b7a71; letter-spacing: .04em; font-size: 1.1rem; text-transform: none; }
.plate:focus { box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 5px var(--action); }
.check-btn {
    border: 0; border-radius: 12px;
    padding: 0 1.4rem;
    background: var(--ink); color: var(--ground);
    font: 800 1.2rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em;
    cursor: pointer;
    transition: transform .25s var(--ease), opacity .2s;
}
.check-btn:hover { opacity: .9; }
.check-btn:active { transform: scale(.97); }
.hint { margin: .7rem .25rem 0; font-size: .88rem; color: var(--muted); }
@media (max-width: 380px) {
    .plate-row { flex-direction: column; }
    .check-btn { padding: .9rem; }
}

/* ---------- Footer ---------- */
.foot { margin-top: auto; background: var(--canopy); color: var(--canopy-muted); }
.foot-inner {
    max-width: 82rem; margin: 0 auto;
    padding: 2rem var(--gutter);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
    font-size: .92rem;
}
.foot-brand { display: flex; align-items: center; gap: .6rem; color: var(--canopy-ink); font-weight: 700; }
.foot-brand img { width: 34px; height: 34px; border-radius: 50%; background: #fff; padding: 1px; }
.foot a { color: var(--canopy-ink); text-underline-offset: 3px; }
.foot-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }

/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
    .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
    .js .reveal.in { opacity: 1; transform: none; }
    .js .reveal-d1 { transition-delay: .08s; }
    .js .reveal-d2 { transition-delay: .16s; }
    .js .reveal-d3 { transition-delay: .24s; }
}

@media (max-width: 720px) {
    .nav-link.hide-sm, .pill .hide-sm { display: none; }
    .brand-org { display: none; }
    .brand-logo { width: 40px; height: 40px; }
    .brand-name { font-size: 1.3rem; }
}
@media (max-width: 440px) {
    .canopy-inner { gap: .5rem; }
    .nav { gap: .25rem; }
    .nav .js-install { display: none; }
    .brand-name { font-size: 1.12rem; letter-spacing: .03em; }
    .brand-logo { width: 36px; height: 36px; }
    .pill { padding: .6rem 1rem; }
}