@layer base {
/* Login page styles.
 *
 * Extracted from an inline <style> in web/templates/registration/login.html,
 * which was 1128 lines with 1034 of them CSS — re-sent uncached on every hit of
 * the auth entry point, and effectively unreviewable in a diff.
 *
 * The page does inherit colours.css and base.css (it extends crm/base.html ->
 * shell/base.html), but deliberately carries its own palette: the portal is a
 * distinct pre-auth design, not an app surface. Left as-is in the move — porting
 * it onto the app tokens would change how the page looks, which is a design
 * decision, not a refactor.
 */

  /* ═══════════════════════════════════════════════════
   METIS LOGIN — Sci-Fi Portal
   CSS-only animations, no JS, no external fonts
   ═══════════════════════════════════════════════════ */

  /* ── Reset the base layout for full-bleed ────────── */
  .main {
    padding: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* ── Custom Properties ───────────────────────────── */
  :root {
    --m-glow: #7fdbca;
    --m-glow-alt: #c792ea;
    --m-glow-warm: #ffcb6b;
    --m-neon: rgba(127, 219, 202, 0.6);
    --m-neon-alt: rgba(199, 146, 234, 0.4);
    --m-surface: rgba(10, 14, 20, 0.55);
    --m-surface-solid: rgba(10, 14, 20, 0.85);
    --m-border: rgba(127, 219, 202, 0.15);
    --m-border-focus: rgba(127, 219, 202, 0.5);
    --m-text: #e0e6ed;
    --m-text-dim: rgba(224, 230, 237, 0.5);
    --m-danger: #ff5370;
  }

  /* ── Portal Container (viewport fill) ────────────── */
  .portal {
    position: fixed;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    background: #060a10;
  }

  /* ── Layer 0: Background Image ───────────────────── */
  .bg-image {
    position: absolute;
    inset: 0;
    background: url('../../crm/metis.png') center center / cover no-repeat;
    z-index: 0;
  }

  /* ── Layer 0b: Background Video ──────────────────── */
  .bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0;
    animation: videoFadeIn 3s ease-in 2.5s forwards;
  }

  @keyframes videoFadeIn {
    to {
      opacity: 1;
    }
  }

  /* ── Layer 1: Scanlines + Film Grain ─────────────── */
  .overlay-scanlines {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    /* Scanlines via repeating gradient */
    background:
      repeating-linear-gradient(0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.08) 2px,
        rgba(0, 0, 0, 0.08) 4px);
    opacity: 0.5;
  }

  /* Film grain overlay via pseudo-element */
  .overlay-scanlines::after {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background-image:
      url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    background-size: 128px 128px;
    opacity: 0.5;
    animation: grainDrift 8s linear infinite;
  }

  @keyframes grainDrift {
    0% {
      transform: translate(0, 0);
    }

    100% {
      transform: translate(-128px, -128px);
    }
  }

  /* ── Layer 2: Portal Halo ────────────────────────── */
  .overlay-halo {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Concentric rings */
  .overlay-halo::before {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    border: 1px solid rgba(127, 219, 202, 0.08);
    box-shadow:
      0 0 0 40px rgba(127, 219, 202, 0.02),
      0 0 0 80px rgba(127, 219, 202, 0.015),
      0 0 0 130px rgba(199, 146, 234, 0.01),
      0 0 0 190px rgba(127, 219, 202, 0.005),
      0 0 80px 10px rgba(127, 219, 202, 0.06),
      0 0 160px 40px rgba(199, 146, 234, 0.03);
    animation: haloRotate 60s linear infinite, haloPulse 6s ease-in-out infinite;
    /* Dashed ring effect */
    background:
      radial-gradient(circle, transparent 48%, rgba(127, 219, 202, 0.04) 49%, transparent 50%),
      radial-gradient(circle, transparent 58%, rgba(199, 146, 234, 0.03) 59%, transparent 60%),
      radial-gradient(circle, transparent 68%, rgba(127, 219, 202, 0.02) 69%, transparent 70%);
  }

  /* Arc segments */
  .overlay-halo::after {
    content: '';
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    border: 1px dashed rgba(127, 219, 202, 0.06);
    animation: haloRotate 45s linear infinite reverse;
  }

  @keyframes haloRotate {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes haloPulse {

    0%,
    100% {
      opacity: 0.7;
    }

    50% {
      opacity: 1;
    }
  }

  /* ── Layer 3: Aurora / Neon Fog ──────────────────── */
  .overlay-aurora {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
  }

  .overlay-aurora::before {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    background:
      radial-gradient(ellipse 600px 300px at 30% 60%, rgba(127, 219, 202, 0.1), transparent),
      radial-gradient(ellipse 500px 400px at 70% 30%, rgba(199, 146, 234, 0.08), transparent),
      radial-gradient(ellipse 400px 250px at 50% 80%, rgba(255, 203, 107, 0.04), transparent);
    filter: blur(60px);
    animation: auroraDrift 20s ease-in-out infinite alternate;
    mix-blend-mode: screen;
  }

  .overlay-aurora::after {
    content: '';
    position: absolute;
    width: 130%;
    height: 130%;
    top: -15%;
    left: -15%;
    background:
      radial-gradient(ellipse 500px 350px at 65% 55%, rgba(127, 219, 202, 0.06), transparent),
      radial-gradient(ellipse 350px 300px at 25% 40%, rgba(199, 146, 234, 0.05), transparent);
    filter: blur(80px);
    animation: auroraDrift2 25s ease-in-out infinite alternate;
    mix-blend-mode: screen;
  }

  @keyframes auroraDrift {
    0% {
      transform: translate(0, 0) scale(1);
    }

    100% {
      transform: translate(40px, -30px) scale(1.05);
    }
  }

  @keyframes auroraDrift2 {
    0% {
      transform: translate(0, 0) scale(1.05);
    }

    100% {
      transform: translate(-30px, 20px) scale(1);
    }
  }

  /* ── Vignette (subtle darkening at edges) ────────── */
  .overlay-vignette {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: radial-gradient(ellipse 70% 70% at 50% 45%,
        transparent 0%,
        rgba(6, 10, 16, 0.5) 100%);
  }

  /* ── Content stack ───────────────────────────────── */
  .portal-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    width: 100%;
    max-width: 400px;
    padding: 2rem 2.5rem;
  }

  /* ── Hero Text (absolutely centered on screen) ──── */
  .portal-header {
    position: absolute;
    top: 2.5rem;
    left: 2.5rem;
    z-index: 10;
    text-align: left;
    pointer-events: none;
  }

  .hero-title {
    font-family: 'Red Hat Display', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: clamp(3rem, 10vw, 5.5rem);
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    line-height: 1;
    color: #e8f0f0;
    text-align: center;
    margin: 0;
    position: relative;
    /* Chromatic aberration via layered text shadows */
    text-shadow:
      0 0 10px rgba(127, 219, 202, 0.6),
      0 0 30px rgba(127, 219, 202, 0.3),
      0 0 60px rgba(127, 219, 202, 0.15),
      2px 0 0 rgba(255, 83, 112, 0.25),
      -2px 0 0 rgba(130, 170, 255, 0.25);
    /* Power-on then continuous glitch */
    animation: titlePowerOn 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards,
      glitchMain 4s linear 2s infinite;
    opacity: 0;
  }

  /* Glitch pseudo-layers — red & blue channel offsets */
  .hero-title::before,
  .hero-title::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
  }

  .hero-title::before {
    color: rgba(255, 83, 112, 0.7);
    text-shadow: none;
    animation: glitchRed 4s linear 2s infinite;
    clip-path: inset(0 0 0 0);
    z-index: -1;
  }

  .hero-title::after {
    color: rgba(130, 170, 255, 0.7);
    text-shadow: none;
    animation: glitchBlue 4s linear 2s infinite;
    clip-path: inset(0 0 0 0);
    z-index: -1;
  }

  /* Main title subtle jitter */
  @keyframes glitchMain {

    0%,
    2% {
      transform: none;
    }

    2.5% {
      transform: translate(-2px, 1px) skewX(-0.5deg);
    }

    3% {
      transform: none;
    }

    15%,
    15.5% {
      transform: translate(1px, -1px);
    }

    16% {
      transform: none;
    }

    42%,
    42.5% {
      transform: translate(-1px, 0) skewX(0.3deg);
    }

    43% {
      transform: none;
    }

    65%,
    65.3% {
      transform: translate(2px, 1px);
      filter: brightness(1.3);
    }

    65.6% {
      transform: none;
      filter: brightness(1);
    }

    78%,
    78.4% {
      transform: translate(-1px, -1px) skewX(-0.2deg);
    }

    79% {
      transform: none;
    }

    100% {
      transform: none;
    }
  }

  /* Red channel offset with clip-path slicing */
  @keyframes glitchRed {

    0%,
    2% {
      clip-path: inset(0 0 100% 0);
      transform: none;
    }

    2.5% {
      clip-path: inset(20% 0 60% 0);
      transform: translate(-4px, -1px);
    }

    3.5% {
      clip-path: inset(70% 0 10% 0);
      transform: translate(3px, 1px);
    }

    4% {
      clip-path: inset(0 0 100% 0);
      transform: none;
    }

    15% {
      clip-path: inset(0 0 100% 0);
    }

    15.3% {
      clip-path: inset(40% 0 30% 0);
      transform: translate(-3px, 0);
    }

    16% {
      clip-path: inset(0 0 100% 0);
      transform: none;
    }

    42% {
      clip-path: inset(0 0 100% 0);
    }

    42.3% {
      clip-path: inset(10% 0 70% 0);
      transform: translate(-5px, 1px);
    }

    42.8% {
      clip-path: inset(60% 0 20% 0);
      transform: translate(2px, -1px);
    }

    43.3% {
      clip-path: inset(0 0 100% 0);
      transform: none;
    }

    65% {
      clip-path: inset(0 0 100% 0);
    }

    65.2% {
      clip-path: inset(30% 0 50% 0);
      transform: translate(-3px, 0);
    }

    65.6% {
      clip-path: inset(0 0 100% 0);
      transform: none;
    }

    78% {
      clip-path: inset(0 0 100% 0);
    }

    78.2% {
      clip-path: inset(55% 0 25% 0);
      transform: translate(-4px, 1px);
    }

    78.6% {
      clip-path: inset(0 0 100% 0);
      transform: none;
    }

    100% {
      clip-path: inset(0 0 100% 0);
      transform: none;
    }
  }

  /* Blue channel offset with clip-path slicing */
  @keyframes glitchBlue {

    0%,
    2% {
      clip-path: inset(0 0 100% 0);
      transform: none;
    }

    2.5% {
      clip-path: inset(60% 0 20% 0);
      transform: translate(4px, 1px);
    }

    3.5% {
      clip-path: inset(10% 0 70% 0);
      transform: translate(-2px, -1px);
    }

    4% {
      clip-path: inset(0 0 100% 0);
      transform: none;
    }

    15% {
      clip-path: inset(0 0 100% 0);
    }

    15.3% {
      clip-path: inset(50% 0 20% 0);
      transform: translate(3px, 0);
    }

    16% {
      clip-path: inset(0 0 100% 0);
      transform: none;
    }

    42% {
      clip-path: inset(0 0 100% 0);
    }

    42.3% {
      clip-path: inset(70% 0 10% 0);
      transform: translate(4px, -1px);
    }

    42.8% {
      clip-path: inset(20% 0 60% 0);
      transform: translate(-3px, 1px);
    }

    43.3% {
      clip-path: inset(0 0 100% 0);
      transform: none;
    }

    65% {
      clip-path: inset(0 0 100% 0);
    }

    65.2% {
      clip-path: inset(45% 0 35% 0);
      transform: translate(3px, 0);
    }

    65.6% {
      clip-path: inset(0 0 100% 0);
      transform: none;
    }

    78% {
      clip-path: inset(0 0 100% 0);
    }

    78.2% {
      clip-path: inset(25% 0 55% 0);
      transform: translate(4px, -1px);
    }

    78.6% {
      clip-path: inset(0 0 100% 0);
      transform: none;
    }

    100% {
      clip-path: inset(0 0 100% 0);
      transform: none;
    }
  }

  @keyframes titlePowerOn {
    0% {
      opacity: 0;
      letter-spacing: 0.8em;
      filter: blur(8px) brightness(2);
      transform: scaleY(0.3);
    }

    30% {
      opacity: 1;
      filter: blur(0) brightness(2.5);
      transform: scaleY(1);
    }

    50% {
      filter: blur(0) brightness(1.8);
      letter-spacing: 0.35em;
    }

    70% {
      filter: blur(1px) brightness(0.6);
    }

    80% {
      filter: blur(0) brightness(1.2);
    }

    100% {
      opacity: 1;
      letter-spacing: 0.35em;
      filter: blur(0) brightness(1);
      transform: scaleY(1);
    }
  }

  .hero-tagline {
    font-family: 'Red Hat Display', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: clamp(0.8rem, 2.2vw, 1rem);
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(200, 230, 225, 0.9);
    text-align: center;
    margin: 0.5rem 0 0 0;
    padding: 0.4rem 1.2rem;
    position: relative;
    background: none;
    text-shadow:
      0 0 15px rgba(127, 219, 202, 0.5),
      0 0 30px rgba(127, 219, 202, 0.2);
    animation: taglineFadeIn 1s ease-out 1.2s forwards;
    opacity: 0;
  }

  /* Blurred glowing background that syncs with the glitch */
  .hero-tagline::before {
    content: '';
    position: absolute;
    inset: -6px -16px;
    background: rgba(6, 10, 16, 0.5);
    border-radius: var(--radius-md);
    filter: blur(12px);
    z-index: -1;
    animation: taglineBgGlitch 4s linear 2s infinite;
  }

  /* Pulse the tagline bg in sync with the title glitch bursts */
  @keyframes taglineBgGlitch {

    0%,
    1.5% {
      background: rgba(6, 10, 16, 0.5);
      filter: blur(12px);
    }

    2.5% {
      background: rgba(127, 219, 202, 0.15);
      filter: blur(16px);
    }

    3.5% {
      background: rgba(199, 146, 234, 0.1);
      filter: blur(20px);
    }

    4.5% {
      background: rgba(6, 10, 16, 0.5);
      filter: blur(12px);
    }

    14.5% {
      background: rgba(6, 10, 16, 0.5);
      filter: blur(12px);
    }

    15.3% {
      background: rgba(127, 219, 202, 0.12);
      filter: blur(18px);
    }

    16.5% {
      background: rgba(6, 10, 16, 0.5);
      filter: blur(12px);
    }

    41.5% {
      background: rgba(6, 10, 16, 0.5);
      filter: blur(12px);
    }

    42.3% {
      background: rgba(199, 146, 234, 0.12);
      filter: blur(18px);
    }

    43% {
      background: rgba(127, 219, 202, 0.1);
      filter: blur(22px);
    }

    44% {
      background: rgba(6, 10, 16, 0.5);
      filter: blur(12px);
    }

    64.5% {
      background: rgba(6, 10, 16, 0.5);
      filter: blur(12px);
    }

    65.2% {
      background: rgba(127, 219, 202, 0.18);
      filter: blur(16px);
    }

    66% {
      background: rgba(6, 10, 16, 0.5);
      filter: blur(12px);
    }

    77.5% {
      background: rgba(6, 10, 16, 0.5);
      filter: blur(12px);
    }

    78.2% {
      background: rgba(199, 146, 234, 0.14);
      filter: blur(18px);
    }

    79% {
      background: rgba(6, 10, 16, 0.5);
      filter: blur(12px);
    }

    100% {
      background: rgba(6, 10, 16, 0.5);
      filter: blur(12px);
    }
  }

  @keyframes taglineFadeIn {
    to {
      opacity: 1;
    }
  }

  /* ── Login Card (Glassmorphism) ──────────────────── */
  .login-card {
    width: 100%;
    background: rgba(10, 14, 20, 0.25);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid var(--m-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.75rem;
    box-shadow:
      0 0 0 1px rgba(127, 219, 202, 0.05) inset,
      0 8px 32px rgba(0, 0, 0, 0.4),
      0 0 60px -10px rgba(127, 219, 202, 0.08);
    animation: cardSlideIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
    opacity: 0;
    transform: translateY(20px);
  }

  @keyframes cardSlideIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Subtle top-edge glow */
  .login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--m-glow) 30%,
        var(--m-glow-alt) 70%,
        transparent);
    opacity: 0.4;
    border-radius: var(--radius-sm);
  }

  /* ── Form Elements ───────────────────────────────── */
  .login-card .form-row {
    margin-bottom: 1.25rem;
    position: relative;
  }

  .login-card label {
    display: block;
    font-family: 'Red Hat Display', system-ui, sans-serif;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--m-text-dim);
    margin-bottom: 0.4rem;
  }

  .login-card input[type="text"],
  .login-card input[type="password"] {
    display: block;
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-family: 'Red Hat Display', system-ui, sans-serif;
    font-size: var(--text-md);
    color: var(--m-text);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(127, 219, 202, 0.12);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), background var(--dur-slow) var(--ease-out);
  }

  .login-card input[type="text"]:focus,
  .login-card input[type="password"]:focus {
    border-color: var(--m-border-focus);
    background: rgba(255, 255, 255, 0.06);
    box-shadow:
      0 0 0 3px rgba(127, 219, 202, 0.08),
      0 0 20px -4px rgba(127, 219, 202, 0.15);
  }

  .login-card input::placeholder {
    color: rgba(224, 230, 237, 0.2);
  }

  /* ── Sign In Button ──────────────────────────────── */
  .btn-portal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.75rem 1.5rem;
    margin-top: 0.5rem;
    font-family: 'Red Hat Display', system-ui, sans-serif;
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #0a0e14;
    background: linear-gradient(135deg, var(--m-glow) 0%, var(--m-glow-alt) 100%);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
    box-shadow: 0 0 20px -4px rgba(127, 219, 202, 0.3);
  }

  .btn-portal:hover {
    transform: translateY(-1px);
    box-shadow:
      0 0 30px -4px rgba(127, 219, 202, 0.5),
      0 0 60px -10px rgba(199, 146, 234, 0.2);
  }

  .btn-portal:active {
    transform: translateY(0);
  }

  /* Sweep shimmer on hover */
  .btn-portal::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.25),
        transparent);
    transition: none;
    animation: none;
  }

  .btn-portal:hover::after {
    animation: btnSweep 0.6s ease-out forwards;
  }

  @keyframes btnSweep {
    to {
      left: 100%;
    }
  }

  /* Focus ring for keyboard users */
  .btn-portal:focus-visible {
    outline: 2px solid var(--m-glow);
    outline-offset: 3px;
  }

  .login-card input:focus-visible {
    outline: 2px solid var(--m-glow);
    outline-offset: 1px;
    border-color: transparent;
  }

  /* ── Forgot Password Link ─────────────────────────── */
  .forgot-password {
    text-align: center;
    margin-top: 1rem;
  }

  .forgot-password a {
    font-family: 'Red Hat Display', system-ui, sans-serif;
    font-size: var(--text-sm);
    letter-spacing: 0.05em;
    color: var(--m-text-dim);
    text-decoration: none;
    transition: color var(--dur-slow) var(--ease-out);
  }

  .forgot-password a:hover {
    color: var(--m-glow);
  }

  .forgot-password a:focus-visible {
    outline: 2px solid var(--m-glow);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
  }

  /* ── Error Messages ──────────────────────────────── */
  .login-errors {
    background: rgba(255, 83, 112, 0.1);
    border: 1px solid rgba(255, 83, 112, 0.2);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.9rem;
    margin-bottom: 1.25rem;
    font-size: var(--text-base);
    color: var(--m-danger);
    backdrop-filter: blur(8px);
  }

  /* ── Decorative circuit lines (SVG inline) ───────── */
  .circuit-lines {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    opacity: 0.06;
  }

  .circuit-lines svg {
    width: 100%;
    height: 100%;
  }

  .circuit-line {
    stroke: var(--m-glow);
    stroke-width: 0.5;
    fill: none;
    stroke-dasharray: 8 12;
    animation: circuitFlow 12s linear infinite;
  }

  .circuit-line-alt {
    stroke: var(--m-glow-alt);
    animation-duration: 18s;
    animation-direction: reverse;
  }

  @keyframes circuitFlow {
    to {
      stroke-dashoffset: -100;
    }
  }

  /* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

  @media (max-width: 480px) {
    .portal-content {
      padding: 1rem;
      gap: 1.5rem;
      max-width: 100%;
    }

    .login-card {
      padding: 1.5rem 1.25rem;
    }

    .overlay-halo::before {
      width: 300px;
      height: 300px;
    }

    .overlay-halo::after {
      width: 260px;
      height: 260px;
    }
  }

  /* Safe areas for notched devices */
  @supports (padding: env(safe-area-inset-top)) {
    .portal {
      padding:
        env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    }
  }

  /* ═══════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════ */

  @media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
      animation-duration: 0.001ms !important;
      animation-delay: 0ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }

    .hero-title {
      opacity: 1;
      filter: none;
      transform: none;
    }

    .hero-tagline {
      opacity: 1;
    }

    .login-card {
      opacity: 1;
      transform: none;
    }

    .bg-video {
      opacity: 1;
    }
  }

  /* ═══════════════════════════════════════════════════
   COLOR SCHEME
   ═══════════════════════════════════════════════════ */
  @media (prefers-color-scheme: light) {

    /* Login portal is always dark regardless of system theme */
    .portal {
      color-scheme: dark;
    }
  }
}