/* ============================================================================
   RADIORAZOR — All-Access Credential
   A layered 3D laminate "tour pass" that tilts with the pointer / device gyro.
   Decorative only: the scene is aria-hidden and pointer-events:none so it can
   never block the login form. Motion is disabled under prefers-reduced-motion.
   Driven by CSS custom properties the JS sets on .aac-scene:
     --rx / --ry  card tilt (deg)   --px / --py  pointer offset (-1..1)
     --gx / --gy  glare position (%)
   ========================================================================== */

:root {
    --aac-red: #fa2c37;
    --aac-red-2: #ff0157;
    --aac-red-soft: #ed6a6f;
    --aac-ink: #0b0b0d;
    --aac-card: #16161a;
    --aac-card-2: #0e0e11;
    --aac-line: rgba(255, 255, 255, 0.08);
    --aac-text: #fcfcfc;
    --aac-muted: #8a8a92;
}

.aac-scene {
    --rx: 0deg;
    --ry: 0deg;
    --px: 0;
    --py: 0;
    --gx: 50%;
    --gy: 0%;
    position: relative;
    width: min(340px, 78vw);
    aspect-ratio: 340 / 470;
    margin: 0 auto;
    perspective: 1300px;
    pointer-events: none;          /* never intercept clicks meant for the form */
    user-select: none;
    z-index: 1;
}

/* Reveal on ready (JS adds .is-ready once assets/layout settle) */
.aac-stage {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.aac-scene.is-ready .aac-stage {
    opacity: 1;
    transform: none;
}

/* Ambient red glow behind the card */
.aac-glow {
    position: absolute;
    inset: -12% -12% -4%;
    background:
        radial-gradient(60% 45% at 50% 30%, rgba(250, 44, 55, 0.45), transparent 70%),
        radial-gradient(45% 40% at 70% 80%, rgba(255, 1, 87, 0.28), transparent 70%);
    filter: blur(26px);
    transform: translate(calc(var(--px) * -10px), calc(var(--py) * -10px)) translateZ(-140px);
    opacity: 0.85;
}

/* ---- Lanyard ---- */
.aac-lanyard {
    position: absolute;
    top: -8%;
    left: 50%;
    width: 60px;
    height: 20%;
    transform: translateX(-50%) translate(calc(var(--px) * 8px), 0) translateZ(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}
.aac-lanyard-strap {
    position: relative;
    width: 40px;
    flex: 1;
    overflow: hidden;
    background: linear-gradient(180deg, var(--aac-red-2), var(--aac-red) 55%, #c31026);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 6px 14px rgba(0, 0, 0, 0.4);
    border-radius: 3px 3px 0 0;
}
.aac-lanyard-strap span {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    white-space: nowrap;
    font: 700 8px/1 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.28em;
    color: rgba(255, 255, 255, 0.85);
    animation: aac-strap 9s linear infinite;
}
@keyframes aac-strap { to { transform: translateX(-50%) rotate(180deg) translateY(-50%); } }
.aac-clip {
    width: 34px;
    height: 16px;
    margin-top: -2px;
    border-radius: 5px;
    background: linear-gradient(180deg, #d7d7dc, #8f8f98 60%, #6a6a72);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.aac-clip::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: 9px auto 0;
    border-radius: 50%;
    background: var(--aac-ink);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ---- Card ---- */
.aac-card {
    position: absolute;
    inset: 12% 0 0;
    transform-style: preserve-3d;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}
.aac-scene.is-tilting .aac-card { transition: none; }

.aac-card-inner {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background:
        linear-gradient(160deg, var(--aac-card), var(--aac-card-2));
    border: 1px solid var(--aac-line);
    box-shadow:
        0 32px 60px -20px rgba(0, 0, 0, 0.75),
        0 6px 18px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    transform-style: preserve-3d;
}
/* red accent header band */
.aac-card-inner::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, var(--aac-red), var(--aac-red-2));
}

/* punch hole */
.aac-hole {
    position: absolute;
    top: 16px;
    left: 50%;
    width: 46px;
    height: 12px;
    transform: translate(-50%, 0) translateZ(2px);
    border-radius: 8px;
    background: #000;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* holographic sheen sweep */
.aac-sheen {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(
        115deg,
        transparent 30%,
        rgba(255, 0, 128, 0.14),
        rgba(0, 200, 255, 0.12),
        rgba(120, 255, 160, 0.12),
        transparent 70%);
    mix-blend-mode: screen;
    background-size: 250% 250%;
    background-position: calc(var(--gx)) calc(var(--gy));
    opacity: 0.7;
    transform: translateZ(30px);
    pointer-events: none;
}

/* pointer glare */
.aac-glare {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: radial-gradient(180px 180px at var(--gx) var(--gy),
        rgba(255, 255, 255, 0.22), transparent 60%);
    mix-blend-mode: soft-light;
    transform: translateZ(40px);
    pointer-events: none;
}

/* ---- Content ---- */
.aac-content {
    position: absolute;
    inset: 0;
    padding: 42px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transform: translate(calc(var(--px) * 6px), calc(var(--py) * 6px)) translateZ(24px);
    color: var(--aac-text);
}

.aac-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.aac-logo { height: 18px; width: auto; display: block; }
.aac-access {
    font: 800 10px/1 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.22em;
    color: var(--aac-ink);
    background: linear-gradient(90deg, var(--aac-red), var(--aac-red-2));
    padding: 5px 8px;
    border-radius: 5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(250, 44, 55, 0.4);
}

.aac-holder {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}
.aac-photo {
    position: relative;
    width: 62px;
    height: 62px;
    flex: none;
    border-radius: 12px;
    background:
        radial-gradient(circle at 50% 38%, #2a2a30 0 34%, transparent 35%),
        linear-gradient(180deg, #202026, #101014);
    border: 1px solid var(--aac-line);
    overflow: hidden;
}
.aac-photo::after {  /* shoulders silhouette */
    content: "";
    position: absolute;
    left: 50%;
    bottom: -18px;
    width: 52px;
    height: 40px;
    transform: translateX(-50%);
    border-radius: 50% 50% 0 0;
    background: #2a2a30;
}
.aac-holder-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aac-name {
    font: 800 15px/1.1 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.aac-role {
    font: 600 9px/1.2 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--aac-red-soft);
}
.aac-led {
    margin-left: auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #38e07b;
    box-shadow: 0 0 0 0 rgba(56, 224, 123, 0.6);
    animation: aac-led 2.4s ease-out infinite;
}
@keyframes aac-led {
    0% { box-shadow: 0 0 0 0 rgba(56, 224, 123, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(56, 224, 123, 0); }
    100% { box-shadow: 0 0 0 0 rgba(56, 224, 123, 0); }
}

.aac-meta {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.aac-qr {
    position: relative;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 5px;
    background:
        conic-gradient(#0b0b0d 90deg, #f4f4f6 0 180deg, #0b0b0d 0 270deg, #f4f4f6 0) 0 0 / 6px 6px;
    background-color: #f4f4f6;
    box-shadow: inset 0 0 0 4px #f4f4f6, 0 0 0 1px var(--aac-line);
}
/* QR finder squares (top-left + top-right) for a believable code look */
.aac-qr::before,
.aac-qr::after {
    content: "";
    position: absolute;
    top: 6px;
    width: 13px;
    height: 13px;
    background: #f4f4f6;
    box-shadow: inset 0 0 0 2px #0b0b0d, inset 0 0 0 4px #f4f4f6, inset 0 0 0 6px #0b0b0d;
}
.aac-qr::before { left: 6px; }
.aac-qr::after { right: 6px; }
.aac-codewrap { flex: 1; min-width: 0; }
.aac-barcode {
    height: 34px;
    border-radius: 3px;
    background: repeating-linear-gradient(90deg,
        #f4f4f6 0 2px, transparent 2px 4px, #f4f4f6 4px 5px, transparent 5px 9px,
        #f4f4f6 9px 12px, transparent 12px 13px);
    background-color: #0b0b0d;
    padding: 0;
}
.aac-serial {
    margin-top: 6px;
    font: 600 9px/1 ui-monospace, "SF Mono", Menlo, monospace;
    letter-spacing: 0.18em;
    color: var(--aac-muted);
}

.aac-bottom {
    font: 700 7.5px/1.3 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aac-muted);
    border-top: 1px solid var(--aac-line);
    padding-top: 10px;
    white-space: nowrap;
}
/* Compact (mobile) pass has less width — let the footer wrap there. */
.aac-scene.aac-compact .aac-bottom {
    white-space: normal;
    letter-spacing: 0.08em;
}

/* ---- Loading skeleton ---- */
.aac-skeleton {
    position: absolute;
    inset: 12% 0 0;
    border-radius: 20px;
    background: linear-gradient(160deg, #16161a, #0e0e11);
    border: 1px solid var(--aac-line);
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.4s ease;
}
.aac-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.06) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: aac-shimmer 1.5s infinite;
}
@keyframes aac-shimmer { to { transform: translateX(100%); } }
.aac-scene.is-ready .aac-skeleton { opacity: 0; }

/* ---- Compact variant (mobile / above the form) ---- */
.aac-scene.aac-compact {
    width: min(200px, 52vw);
}
.aac-scene.aac-compact .aac-content { padding: 34px 15px 14px; gap: 10px; }
.aac-scene.aac-compact .aac-holder { gap: 9px; }
/* Let the name/role column take the remaining width so a name like
   "Backstage" reads in full instead of truncating to "Backsta…". */
.aac-scene.aac-compact .aac-holder-info { flex: 1 1 auto; }
.aac-scene.aac-compact .aac-name { font-size: 12px; letter-spacing: 0; }
.aac-scene.aac-compact .aac-role { font-size: 6.5px; letter-spacing: 0.1em; white-space: nowrap; }
.aac-scene.aac-compact .aac-photo { width: 42px; height: 42px; }
.aac-scene.aac-compact .aac-logo { height: 15px; }
.aac-scene.aac-compact .aac-access { font-size: 8px; padding: 4px 6px; }

/* ---- Login integration: credential behind a frosted form card ---- */
.aac-login-backdrop {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 0;
    pointer-events: none;
}
.aac-login-card {
    position: relative;
    z-index: 10;
}
@media (min-width: 1024px) {
    .aac-login-backdrop {
        display: flex;
    }
    .aac-login-backdrop .aac-scene {
        transform: scale(1.5);
    }
    /* The holder row (photo/name/role) peeks awkwardly beside the login card —
       hide it in the behind-the-form context so the pass frames cleanly with the
       logo/badge above and QR/barcode below. Kept on the mobile compact pass. */
    .aac-login-backdrop .aac-holder {
        display: none;
    }
    .aac-login-card {
        border-radius: 18px;
        padding: 34px 30px;
        background: rgba(11, 11, 13, 0.86);
        border: 1px solid rgba(255, 255, 255, 0.10);
        box-shadow: 0 30px 70px -18px rgba(0, 0, 0, 0.82);
        -webkit-backdrop-filter: blur(8px) saturate(120%);
        backdrop-filter: blur(8px) saturate(120%);
    }
    /* Force readable light structural text on the dark card, whatever the app
       theme is (inputs keep their own Flux styling and stay readable). */
    .aac-login-card :is(h1, h2, h3) {
        color: #ffffff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    }
    .aac-login-card :is(label, ui-label),
    .aac-login-card :is(label, ui-label) * {
        color: #f4f4f6 !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    }
    .aac-login-card :is(p, .text-zinc-500, .text-muted) {
        color: #c2c2ca !important;
    }
}

/* ---- Accessibility: reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .aac-stage { transition: opacity 0.3s ease; transform: none; }
    .aac-card { transition: none; transform: rotateX(0) rotateY(0) !important; }
    .aac-sheen, .aac-lanyard-strap span, .aac-led, .aac-skeleton::after { animation: none; }
    .aac-glow, .aac-lanyard, .aac-content { transform: none !important; }
}