/* Shared auth-page chrome — see
   contexts/features/auth-liquid-glass-redesign-spec.md for the original
   glass-card language, still used on the card itself below. The page
   backdrop itself moved to a split-screen layout (photo column + plain
   white form column, Leboncoin/Airbnb-style) instead of a colored
   gradient the card floats over — see .splash-shell below. */

/* ── Split-screen shell ───────────────────────────────────────────────────
   Mobile-first default: stacked, photo column collapses to a short band
   above the form. Desktop gets its own explicit rules in the media query
   below — not just a stretched version of the mobile layout. */
.splash-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Top-left logo, scrolls away with the icon column rather than staying
   pinned (see base-splash.html's comment — avoids the logo ending up
   sitting on the white form column once the page is scrolled). */
.splash-brand-link {
  position: absolute;
  top: 16px;
  left: 20px;
  z-index: 3;
  display: inline-flex;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.12));
  text-decoration: none;
}

.splash-photo-col {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 45%, #eff6ff 100%);
  height: 220px;
  flex-shrink: 0;
}

/* ── Rising/falling marketplace-item icons (see macros/splash_icons.html) ──
   Small hand-drawn flat illustrations, not photos. Each sits in its own
   vertical "lane" and continuously drifts up or down — fading in as it
   enters the lane, fading out as it exits, then looping back in from the
   opposite edge, like items continuously rising/falling past the viewport.
   Alternating lanes go opposite directions (odd = rise, even = fall) for
   visual variety. 3 lanes shown on mobile's shorter band, 14 on desktop's
   full-height column (see media query). */
.splash-icon-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  padding-top: 56px;
  overflow: hidden;
}
.splash-icon-lane {
  position: relative;
  flex: 0 0 112px;
  height: 100%;
}
.splash-icon-lane--desktop { display: none; }

.splash-icon-card {
  position: absolute;
  left: 50%;
  top: 0;
  width: 108px;
  height: 108px;
  margin-left: -54px;
  background: var(--c, #f3f4f6);
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
  opacity: 0;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-delay: var(--d, 0s);
}
.splash-icon-card svg { width: 64%; height: 64%; }

.splash-icon-lane:nth-child(odd) .splash-icon-card { animation-name: splashRise; }
.splash-icon-lane:nth-child(even) .splash-icon-card { animation-name: splashFall; }

@keyframes splashRise {
  0%   { top: 110%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: -25%; opacity: 0; }
}
@keyframes splashFall {
  0%   { top: -25%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* ── Car, truck, motorcycle driving across, among the icons (see
   macros/splash_icons.html) — no dedicated strip, so the rising/falling
   lanes keep their full height. Each lives at its own fixed height within
   the same area, z-index BELOW .splash-icon-card (which sits in
   .splash-icon-grid's own z-index:2 stacking context) — whenever their
   paths cross, the opaque icon card simply draws on top and the vehicle
   passes behind it, so it never visually touches/overlaps an icon on top.
   Different heights/speeds per vehicle (set inline per instance) keep the
   three from ever colliding with each other either. */
.splash-vehicle {
  position: absolute;
  left: -20%;
  z-index: 1;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.splash-vehicle--ltr { animation-name: splashDriveLTR; }
.splash-vehicle--rtl { animation-name: splashDriveRTL; }
@keyframes splashDriveLTR {
  0%   { left: -20%; }
  100% { left: 115%; }
}
@keyframes splashDriveRTL {
  0%   { left: 115%; }
  100% { left: -20%; }
}

/* ── Houses — one at a time, each fading in, holding, fading out, then a
   different one takes its turn at a different position (see
   macros/splash_icons.html). All houses share one animation (same
   duration + keyframe shape); each is only "on" during its own slice of
   the shared cycle via a negative animation-delay offset, so turns never
   overlap — a relay, not independent random pulsing. Sits behind
   everything (lowest z-index). */
.splash-houses {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.splash-house {
  position: absolute;
  width: 42px;
  height: 42px;
  opacity: 0;
  animation: splashHouseTurn var(--hcycle, 21s) ease-in-out infinite;
  animation-delay: var(--hd, 0s);
}
/* One house/building's turn = first ~1/7th of the shared cycle (opacity 0
   the rest of the way) — seven items' delays stagger their turns end to
   end so only one is ever visible. */
@keyframes splashHouseTurn {
  0%     { opacity: 0; transform: scale(0.8); }
  1.7%   { opacity: 0.9; transform: scale(1); }
  11%    { opacity: 0.9; transform: scale(1); }
  14.3%  { opacity: 0; transform: scale(0.8); }
  100%   { opacity: 0; transform: scale(0.8); }
}

.splash-form-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  padding: 2rem 1.25rem 3rem;
}

/* ── Desktop: true side-by-side split, photo column full height ────────── */
@media (min-width: 900px) {
  .splash-shell {
    flex-direction: row;
  }
  .splash-photo-col {
    position: sticky;
    top: 0;
    height: 100vh;
    flex: 1 1 50%;
    align-self: flex-start; /* stops it stretching to match a tall form column */
  }
  .splash-brand-link {
    top: 32px;
    left: 40px;
  }
  .splash-icon-grid {
    padding-top: 110px;
    padding-left: 32px;
    padding-right: 32px;
  }
  .splash-icon-lane {
    flex: 0 0 190px;
  }
  .splash-icon-lane--desktop { display: block; }
  .splash-icon-card {
    width: 172px;
    height: 172px;
    margin-left: -86px;
    border-radius: 36px;
  }
  .splash-vehicle {
    transform: scale(1.6);
    transform-origin: left center;
  }
  .splash-house {
    width: 76px;
    height: 76px;
  }
  .splash-form-col {
    flex: 1 1 50%;
    padding: 2rem;
  }
}

/* ── Card glass rim ──────────────────────────────────────────────────────
   Additive — layer onto an existing solid card (.auth-card / .signup-card).
   The card stays opaque for form legibility; this just adds the inset
   highlight + softer shadow so it still reads as part of the glass
   language, the way Apple's own sign-in sheets sit solid over a blurred
   backdrop rather than going translucent all the way through. */
.auth-card-glass-rim {
  box-shadow:
    0 8px 28px rgba(0,0,0,0.10),
    0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #e5e7eb;
}

/* ── Frosted-pill chip ───────────────────────────────────────────────────
   For secondary buttons/links that sit directly on the photo/gradient
   backdrop (outside the solid card) — not currently used by login/signup's
   own content (their secondary links sit below the card as plain text,
   see .auth-below-card-link below), kept here for reuse by later passes. */
.auth-glass-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.25);
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background 0.15s;
}
.auth-glass-chip:hover { background: rgba(255,255,255,0.26); }

/* ── Below-card footer links ─────────────────────────────────────────────
   Sits in the form column on plain white, below the card. */
.auth-below-card {
  width: 100%;
  max-width: 480px;
  margin-top: 1.25rem;
  text-align: center;
}
.auth-below-card-line {
  color: #4b5563;
  font-size: 0.875rem;
  margin: 0.5rem 0;
}
.auth-below-card-line a {
  color: #16a34a;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(22,163,74,0.35);
}
.auth-below-card-line a:hover { text-decoration-color: #16a34a; }
.auth-below-card-line.muted {
  opacity: 0.85;
  font-size: 0.75rem;
}
.auth-below-card-line.muted a {
  color: #15803d;
  font-weight: 600;
}

/* ── Admin dashboard chrome (sidebar + header) ───────────────────────────
   Same glass-rim language as the auth cards above, lighter weight — a
   sidebar and page header are persistent chrome, not a hero, so the blur
   and shadow here are subtler. Never applied to data tables/rows: a
   working tool's dense content needs full contrast, same reasoning as the
   auth forms staying on a solid card instead of glass. */
.admin-shell-wash {
  background: linear-gradient(135deg, #f0fdf4 0%, #f8fafc 50%, #eff6ff 100%);
}
.admin-sidebar-glass {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid rgba(255,255,255,0.6);
  box-shadow: 2px 0 24px rgba(0,0,0,0.04);
}
.admin-header-glass {
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
  padding: 16px 20px;
}