/* =============================================================================
   auth-mobile.css
   Natywny, „aplikacyjny" wyglad ekranow wejscia na telefonie:
   pelnoekranowa aurora (animowany gradient marki) + szklany bottom-sheet
   z formularzem, dokowany do dolu ekranu.

   Aktywne WYLACZNIE < 640 px (breakpoint `sm` Tailwinda) — widok desktop
   pozostaje bez zmian.

   Klasy-haki dodane w markupie:
     .auth-shell    – kontener min-h-screen (dawniej tlo ze zdjeciem bg2.jpg)
     .auth-overlay  – polprzezroczysta przeslona z blur (na mobile ukryta)
     .auth-blobs    – warstwa dekoracyjna → na mobile staje sie aurora (position:fixed)
     .auth-card     – karta formularza → na mobile szklany sheet

   Podpiete w: index.php, register.php, forgot_password.php, reset_password.php,
   activate.php oraz components/main/login_form.php i components/main/register_form.php
   ============================================================================= */

@media (max-width: 639.98px) {

  /* ---------- Kontener pelnoekranowy ------------------------------------- */
  .auth-shell {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: normal !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    background-image: none !important;
    background-color: transparent !important;
    overflow-x: hidden;
  }

  /* stara przeslona z blur — zbedna, zastepuje ja aurora */
  .auth-overlay { display: none !important; }

  /* ---------- Aurora (tlo przyklejone do viewportu) -------------------- */
  .auth-blobs {
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(125% 60% at 10% 6%,
        color-mix(in srgb, var(--color-primary) 30%, transparent), transparent 60%),
      radial-gradient(120% 55% at 92% 2%,
        color-mix(in srgb, var(--color-primary) 40%, #6366f1), transparent 55%),
      radial-gradient(150% 75% at 50% 112%,
        color-mix(in srgb, var(--color-primary) 24%, transparent), transparent 64%),
      var(--color-bg);
  }

  .auth-blobs > * {
    position: absolute !important;
    border-radius: 50% !important;
    filter: blur(60px) !important;
    mix-blend-mode: normal !important;
    opacity: .4 !important;
    animation: auth-orb-drift 24s ease-in-out infinite;
    will-change: transform;
  }
  .auth-blobs > *:nth-child(1) {
    width: 62vw !important; height: 62vw !important;
    max-width: 440px; max-height: 440px;
    top: -14vw !important; right: -12vw !important; left: auto !important; bottom: auto !important;
    background: color-mix(in srgb, var(--color-primary) 72%, transparent) !important;
    animation-duration: 22s;
  }
  .auth-blobs > *:nth-child(2) {
    width: 56vw !important; height: 56vw !important;
    max-width: 420px; max-height: 420px;
    top: 15vh !important; left: -20vw !important; right: auto !important; bottom: auto !important;
    background: color-mix(in srgb, var(--color-primary) 42%, #8b5cf6) !important;
    opacity: .34 !important;
    animation-duration: 30s; animation-delay: -8s;
  }
  .auth-blobs > *:nth-child(3) {
    width: 70vw !important; height: 70vw !important;
    max-width: 460px; max-height: 460px;
    bottom: 20vh !important; left: 18vw !important; top: auto !important; right: auto !important;
    background: color-mix(in srgb, var(--color-primary) 55%, #ffffff) !important;
    opacity: .28 !important;
    animation-duration: 38s; animation-delay: -16s;
  }

  @keyframes auth-orb-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    30%      { transform: translate3d(7vw, -5vh, 0) scale(1.14); }
    62%      { transform: translate3d(-6vw, 4vh, 0) scale(.9); }
  }

  /* ---------- Szklany bottom-sheet ------------------------------------ */
  .auth-card {
    position: relative;
    z-index: 10;
    width: 100% !important;
    max-width: none !important;
    margin: auto 0 0 0 !important;
    border: 0 !important;
    border-top: 1px solid color-mix(in srgb, var(--color-text-primary) 10%, transparent) !important;
    border-radius: 26px 26px 0 0 !important;
    padding: 2.15rem 1.35rem calc(1.6rem + env(safe-area-inset-bottom, 0px)) !important;
    min-height: 54dvh;
    background: color-mix(in srgb, var(--color-card) 78%, transparent) !important;
    -webkit-backdrop-filter: blur(22px) saturate(155%);
    backdrop-filter: blur(22px) saturate(155%);
    box-shadow: 0 -16px 46px -20px rgba(0, 0, 0, .38) !important;
    animation: auth-sheet-rise .6s cubic-bezier(.16, 1, .3, 1) both;
  }
  /* uchwyt sheetu */
  .auth-card::before {
    content: "";
    position: absolute;
    top: 9px; left: 50%;
    width: 40px; height: 4px;
    transform: translateX(-50%);
    border-radius: 99px;
    background: color-mix(in srgb, var(--color-text-primary) 22%, transparent);
  }
  /* delikatna poswiata marki na styku sheetu z aurora */
  .auth-card::after {
    content: "";
    position: absolute;
    left: 50%; top: -2px;
    width: 66%; height: 120px;
    transform: translateX(-50%);
    background: radial-gradient(62% 100% at 50% 0%,
      color-mix(in srgb, var(--color-primary) 20%, transparent), transparent 72%);
    filter: blur(6px);
    pointer-events: none;
  }

  @keyframes auth-sheet-rise {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* AOS wylaczony w obrebie sheetu — wlasny, przewidywalny stagger wejscia */
  .auth-card [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .auth-card > .w-full > .mb-8 {
    animation: auth-rise-in .5s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: .08s;
  }
  .auth-card form > * { animation: auth-rise-in .5s cubic-bezier(.16, 1, .3, 1) both; }
  .auth-card form > *:nth-child(1)   { animation-delay: .18s; }
  .auth-card form > *:nth-child(2)   { animation-delay: .24s; }
  .auth-card form > *:nth-child(3)   { animation-delay: .30s; }
  .auth-card form > *:nth-child(4)   { animation-delay: .36s; }
  .auth-card form > *:nth-child(5)   { animation-delay: .42s; }
  .auth-card form > *:nth-child(n+6) { animation-delay: .48s; }
  .auth-card > .w-full > .text-center {
    animation: auth-rise-in .5s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: .5s;
  }

  @keyframes auth-rise-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  /* ---------- Typografia / logo ------------------------------------- */
  .auth-card .logo-container img { height: 3.25rem !important; }
  .auth-card h1 {
    font-size: clamp(1.7rem, 7vw, 2.05rem) !important;
    letter-spacing: -0.02em !important;
  }

  /* ---------- Pola (16px = brak auto-zoomu iOS przy focusie) ------- */
  .auth-card input:not([type="checkbox"]):not([type="radio"]) {
    font-size: 16px !important;
    padding-top: .95rem !important;
    padding-bottom: .95rem !important;
    border-radius: 14px !important;
  }

  /* ---------- Przyciski akcji ------------------------------------- */
  .auth-card button[type="submit"] {
    border-radius: 14px !important;
    padding-top: .95rem !important;
    padding-bottom: .95rem !important;
    min-height: 52px;
    font-size: 1rem !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .auth-card button[type="submit"]:active { transform: scale(.985); }

  /* ---------- Kod 2FA / kod aktywacyjny — siatka zamiast sztywnych szerokosci */
  #otpBoxes {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: .4rem !important;
  }
  #otpBoxes .otp-box {
    width: 100% !important;
    height: 3.35rem !important;
    font-size: 1.35rem !important;
  }

  /* (Stopka .mfoot sama trzyma position:relative + z-index, wiec aura jej nie
     przykrywa — patrz components/main/footer.php.) */

  /* ---------- Redukcja ruchu ------------------------------------ */
  @media (prefers-reduced-motion: reduce) {
    .auth-blobs > *,
    .auth-card,
    .auth-card > .w-full > .mb-8,
    .auth-card > .w-full > .text-center,
    .auth-card form > * {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }
}