/* Auth Layout
 * Standalone branded auth experience — no nav, stage lights, aurora blobs,
 * rotating gradient card border. Matches festmate.app landing page effects.
 */

@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@layer components {
  /* --- Page body --- */

  .auth-body {
    /* Force dark regardless of theme toggle or OS preference */
    color-scheme: dark;
    --lch-flare: 69% 0.20 35;
    --lch-golden: 84% 0.16 84;
    --lch-uv: 63% 0.23 304;
    --lch-laser: 78% 0.16 167;
    --color-canvas: oklch(17% 0.02 276);
    --color-surface: oklch(22% 0.03 278);
    --color-ink: oklch(96% 0.007 295);
    --color-ink-muted: oklch(69% 0.04 293);
    --color-border: oklch(30% 0.02 278);

    background: var(--color-canvas);
    color: var(--color-ink);
    min-height: 100dvh;
    overflow-x: hidden;
    position: relative;
  }

  /* Film grain overlay */
  .auth-body::after {
    content: "";
    position: fixed;
    inset: 0;
    opacity: 0.035;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 100;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='0.65' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  }

  /* --- Stage light beams --- */

  .auth-beams {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  .auth-beam {
    position: absolute;
    bottom: 0;
    width: 2px;
    height: 100%;
    opacity: 0;
    mix-blend-mode: screen;
    transform-origin: bottom center;

    &::before,
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, var(--beam-color) 0%, transparent 100%);
    }

    /* Narrow core */
    &::before {
      width: 2px;
      filter: blur(6px);
      opacity: 0.95;
    }

    /* Atmospheric scatter */
    &::after {
      width: 80px;
      margin-inline-start: -39px;
      filter: blur(16px);
      opacity: 0.25;
    }
  }

  .auth-beam--1 {
    --beam-color: oklch(70% 0.25 330);
    left: 15%;
    opacity: 0.6;
    animation: beamSweep1 14s ease-in-out infinite;
  }

  .auth-beam--2 {
    --beam-color: oklch(75% 0.15 195);
    left: 35%;
    opacity: 0.5;
    animation: beamSweep2 18s ease-in-out infinite;
  }

  .auth-beam--3 {
    --beam-color: oklch(60% 0.2 265);
    left: 55%;
    opacity: 0.55;
    animation: beamSweep3 16s ease-in-out infinite;
  }

  .auth-beam--4 {
    --beam-color: oklch(var(--lch-laser));
    left: 72%;
    opacity: 0.45;
    animation: beamSweep4 20s ease-in-out infinite;
  }

  .auth-beam--5 {
    --beam-color: oklch(var(--lch-uv));
    left: 88%;
    opacity: 0.5;
    animation: beamSweep5 12s ease-in-out infinite;
  }

  @keyframes beamSweep1 { 0%, 100% { transform: rotate(-15deg); } 50% { transform: rotate(10deg); } }
  @keyframes beamSweep2 { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-12deg); } }
  @keyframes beamSweep3 { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(15deg); } }
  @keyframes beamSweep4 { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(-8deg); } }
  @keyframes beamSweep5 { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(5deg); } }

  /* --- Aurora blobs --- */

  .auth-aurora {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }

  .auth-aurora__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(200px);
  }

  .auth-aurora__blob--1 {
    width: 500px;
    height: 500px;
    top: -10%;
    left: -5%;
    opacity: 0.07;
    background: conic-gradient(from 0deg, oklch(var(--lch-flare)), oklch(var(--lch-uv)), oklch(var(--lch-golden)), oklch(var(--lch-laser)), oklch(var(--lch-flare)));
    animation: auroraRotate 14s linear infinite, auroraMorph 16s ease-in-out infinite;
  }

  .auth-aurora__blob--2 {
    width: 400px;
    height: 400px;
    bottom: -10%;
    right: -5%;
    opacity: 0.06;
    background: conic-gradient(from 180deg, oklch(var(--lch-laser)), oklch(var(--lch-flare)), oklch(var(--lch-uv)), oklch(var(--lch-golden)), oklch(var(--lch-laser)));
    animation: auroraRotate 12s linear infinite reverse, auroraMorph 18s ease-in-out infinite reverse;
  }

  @keyframes auroraRotate {
    to { rotate: 360deg; }
  }

  @keyframes auroraMorph {
    0%, 100% { border-radius: 50% 40% 60% 50%; }
    25% { border-radius: 40% 60% 50% 50%; }
    50% { border-radius: 60% 50% 40% 60%; }
    75% { border-radius: 50% 50% 60% 40%; }
  }

  /* --- Auth page container --- */

  .auth-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: var(--block-space-l) var(--inline-space-l);
    position: relative;
    z-index: 1;
  }

  /* --- Festmate logo --- */

  .auth-logo {
    font-family: "Outfit", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 2.75rem);
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, oklch(var(--lch-flare)), oklch(var(--lch-golden)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
    margin-block-end: var(--block-space-l);
    animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes heroFadeUp {
    from {
      opacity: 0;
      translate: 0 30px;
    }
  }

  /* --- Auth card with rotating gradient border --- */

  .auth-card {
    --border-angle: 0deg;

    width: 100%;
    max-width: 26rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;

    /* Rotating gradient border */
    border: 2px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image:
      linear-gradient(oklch(22% 0.03 278), oklch(22% 0.03 278)),
      conic-gradient(from var(--border-angle), oklch(var(--lch-flare)), oklch(var(--lch-golden)), oklch(var(--lch-uv)), oklch(var(--lch-laser)), oklch(var(--lch-flare)));
    animation: heroFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both, borderRotate 4s linear infinite;
  }

  @keyframes borderRotate {
    to { --border-angle: 360deg; }
  }

  .auth-card__body {
    padding: var(--block-space-l) var(--inline-space-l);

    & h1, & h2 {
      text-align: center;
      margin-block-end: var(--block-space);
    }

    & .flash {
      text-align: center;
      justify-content: center;
      border-radius: var(--radius-pill);
      margin-block-end: var(--block-space);
      font-weight: 500;
      border-width: 2px;
    }

    & .flash--alert {
      background: color-mix(in oklch, var(--color-negative) 12%, var(--color-surface));
      border-color: color-mix(in oklch, var(--color-negative) 50%, transparent);
      color: oklch(85% 0.12 30);
      box-shadow: 0 0 16px color-mix(in oklch, var(--color-negative) 15%, transparent);
    }

    & .flash--notice {
      background: color-mix(in oklch, var(--color-positive) 12%, var(--color-surface));
      border-color: color-mix(in oklch, var(--color-positive) 50%, transparent);
      color: oklch(85% 0.12 167);
      box-shadow: 0 0 16px color-mix(in oklch, var(--color-positive) 15%, transparent);
    }

    & .field + .field {
      margin-block-start: 0;
    }

    & > .btn,
    & form .btn {
      width: 100%;
      margin-block-start: var(--block-space);
    }
  }

  .auth-card__footer {
    padding: var(--block-space) var(--inline-space-l);
    border-block-start: 1px solid var(--color-border);
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-ink-muted);

    & a {
      color: var(--color-link);
    }
  }

  /* --- Divider --- */

  .auth-divider {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    margin-block: var(--block-space);
    color: var(--color-ink-muted);
    font-size: 0.8125rem;

    &::before,
    &::after {
      content: "";
      flex: 1;
      border-block-start: 1px solid var(--color-border);
    }
  }

  /* --- Password toggle --- */

  .field--password {
    display: grid;

    & label { grid-column: 1 / -1; }

    & input {
      grid-column: 1;
      grid-row: 2;
      padding-inline-end: 3rem;
    }

    & .field__error {
      grid-column: 1 / -1;
    }
  }

  .field__password-toggle {
    grid-column: 1;
    grid-row: 2;
    justify-self: end;
    align-self: center;
    display: flex;
    align-items: center;
    padding-inline: 0.75em;
    background: none;
    border: none;
    color: var(--color-ink-muted);
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 500;

    &:hover {
      color: var(--color-ink);
    }
  }

  /* --- Auth links row --- */

  .auth-links {
    text-align: center;
    margin-block-start: var(--block-space);
    font-size: 0.875rem;
    color: var(--color-ink-muted);

    & a {
      color: var(--color-ink-muted);

      &:hover {
        color: var(--color-ink);
      }
    }
  }

  /* --- Reduce motion --- */

  @media (prefers-reduced-motion: reduce) {
    .auth-beam,
    .auth-aurora__blob,
    .auth-card,
    .auth-logo {
      animation: none;
    }

    .auth-beam {
      opacity: 0.3;
      transform: none;
    }

    .auth-card {
      border-color: var(--color-border);
      background-image: none;
      background: var(--color-surface);
    }
  }
}