/* ================================================
   AUTH-VISUAL.CSS — Split layout + cinematic panel
   for login.html and signup.html
   ================================================ */

/* ── Override auth.css body to grid layout ── */
body {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  padding: 0 !important;
  min-height: 100vh;
  gap: 0;
}

/* suppress the ambient blob — panel handles it */
body::before { display: none !important; }

/* ══════════════════════════════════════════════
   CINEMATIC LEFT PANEL
══════════════════════════════════════════════ */
.auth-visual-panel {
  position: relative;
  overflow: hidden;
  background: #050515;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  gap: 28px;
  min-height: 100vh;
}

/* Deep cinematic gradient */
.auth-visual-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(255,101,0,0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 85%, rgba(90,24,154,0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 60% 40%, rgba(90,24,154,0.2) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

/* Animated film strip — left edge */
.auth-visual-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 100%;
  background: repeating-linear-gradient(
    180deg,
    #1a1a1a 0px,  #1a1a1a 18px,
    transparent   18px, transparent 26px,
    #1a1a1a 26px, #1a1a1a 44px
  );
  opacity: 0.8;
  z-index: 1;
}

/* Scrolling film strip animation */
.auth-visual-panel::after {
  animation: filmScroll 6s linear infinite;
}

@keyframes filmScroll {
  from { background-position: 0 0; }
  to   { background-position: 0 44px; }
}

.avp-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 380px;
}

/* ── Brand ── */
.avp-brand { text-align: center; }

.avp-brand-logo {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.8rem;
  font-weight: 900;
  color: #ff6500;
  letter-spacing: 2px;
  text-shadow: 0 0 40px rgba(255,101,0,0.5);
  display: block;
  margin-bottom: 6px;
}

.avp-brand-tagline {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ── Photo Collage ── */
.avp-photo-collage {
  position: relative;
  width: 280px;
  height: 230px;
  flex-shrink: 0;
}

.avp-photo {
  position: absolute;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s ease;
  cursor: default;
}

.avp-photo-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Card positions & rotations */
.avp-photo--1 { width: 158px; height: 128px; top: 0; left: 0; transform: rotate(-4deg); z-index: 2; }
.avp-photo--2 { width: 142px; height: 118px; top: 18px; right: 0; transform: rotate(3deg); z-index: 3; }
.avp-photo--3 { width: 148px; height: 108px; bottom: 0; left: 28px; transform: rotate(2deg); z-index: 1; }

/* Unique cinematic gradients per card */
.avp-photo--1 .avp-photo-inner { background: linear-gradient(145deg, #0d0618 0%, #2f0e4f 50%, #ff6500 100%); }
.avp-photo--2 .avp-photo-inner { background: linear-gradient(145deg, #0a0a1a 0%, #1a0f2e 40%, #5a189a 80%, #ff6500 100%); }
.avp-photo--3 .avp-photo-inner { background: linear-gradient(145deg, #0d1b2a 0%, #1b2838 40%, #2f0e4f 70%, #5a189a 100%); }

/* Hover lift with preserved rotation */
.avp-photo--1:hover { transform: rotate(-4deg) translateY(-8px) scale(1.04); box-shadow: 0 28px 56px rgba(0,0,0,0.65); }
.avp-photo--2:hover { transform: rotate(3deg)  translateY(-8px) scale(1.04); box-shadow: 0 28px 56px rgba(0,0,0,0.65); }
.avp-photo--3:hover { transform: rotate(2deg)  translateY(-8px) scale(1.04); box-shadow: 0 28px 56px rgba(0,0,0,0.65); }

/* Cinematic light bleed */
.avp-photo-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,101,0,0.3) 0%, transparent 60%),
    radial-gradient(circle at 72% 70%, rgba(90,24,154,0.35) 0%, transparent 55%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Person silhouette */
.avp-photo-inner::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 58px;
  background: rgba(0,0,0,0.4);
  clip-path: polygon(35% 0%, 65% 0%, 72% 28%, 78% 100%, 22% 100%, 28% 28%);
  filter: blur(1px);
}

/* Icon overlay */
.avp-photo-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.25rem;
  color: rgba(255,255,255,0.65);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  z-index: 1;
}

/* ── Stats row (signup only) ── */
.avp-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.avp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  min-width: 68px;
  transition: background 0.3s ease;
}

.avp-stat:hover { background: rgba(255,101,0,0.1); border-color: rgba(255,101,0,0.25); }

.avp-stat-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: #ff6500;
  line-height: 1;
  text-shadow: 0 0 20px rgba(255,101,0,0.5);
}

.avp-stat-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.5);
  text-align: center;
  line-height: 1.3;
  margin-top: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── 3D Clapperboard (login) ── */
.avp-clapper {
  animation: avpClapperFloat 4s ease-in-out infinite;
  perspective: 600px;
}

@keyframes avpClapperFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-10px) rotate(2deg); }
}

.avp-clapper-body {
  width: 104px;
  transform: rotateY(-18deg) rotateX(6deg);
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.65));
  transform-style: preserve-3d;
}

.avp-clapper-top {
  height: 30px;
  background: #1a1a1a;
  border-radius: 5px 5px 0 0;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 7px;
  overflow: hidden;
}

.avp-clapper-stripe {
  flex: 1;
  height: 16px;
  background: repeating-linear-gradient(
    45deg, #ff6500, #ff6500 3px, #1a1a1a 3px, #1a1a1a 7px
  );
  border-radius: 2px;
}

.avp-clapper-board {
  background: #f5f0e0;
  border: 2px solid #1a1a1a;
  border-top: none;
  border-radius: 0 0 5px 5px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.avp-clapper-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 900;
  color: #1a1a1a;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.avp-clapper-text span { color: #ff6500; }
.avp-clapper-text.sm  { font-size: 0.58rem; opacity: 0.72; }

/* ── Feature pills ── */
.avp-features {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
}

.avp-feature-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 13px;
  color: rgba(255,255,255,0.85);
  font-size: 0.84rem;
  font-weight: 600;
  animation: pillFadeIn 0.5s ease both;
  transition: background 0.3s ease, border-color 0.3s ease;
}

.avp-feature-pill:hover {
  background: rgba(255,101,0,0.1);
  border-color: rgba(255,101,0,0.25);
}

.avp-feature-pill:nth-child(1) { animation-delay: 0.1s; }
.avp-feature-pill:nth-child(2) { animation-delay: 0.2s; }
.avp-feature-pill:nth-child(3) { animation-delay: 0.3s; }
.avp-feature-pill:nth-child(4) { animation-delay: 0.4s; }

@keyframes pillFadeIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}

.avp-feature-pill i {
  color: #ff6500;
  font-size: 0.95rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.pill-badge {
  margin-left: auto;
  background: rgba(255,101,0,0.18);
  color: #ff6500;
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 700;
  border: 1px solid rgba(255,101,0,0.28);
}

/* ── Quote (login) ── */
.avp-quote { text-align: center; padding: 0 8px; }

.avp-quote-text {
  font-size: 0.88rem;
  font-style: italic;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
}

.avp-quote-text strong {
  color: rgba(255,101,0,0.85);
  font-style: normal;
}

/* ══════════════════════════════════════════════
   RIGHT / FORM SIDE
══════════════════════════════════════════════ */
.auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  background: var(--bg-body, #f4f7f9);
  position: relative;
  overflow-y: auto;
  min-height: 100vh;
}

/* Ambient blobs on form side */
.auth-form-side::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 10%,  rgba(90,24,154,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%,  rgba(255,195,0,0.14) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

/* Re-scope container to form side */
.auth-form-side .container {
  position: relative;
  z-index: 1;
  background: var(--bg-glass-panel, rgba(255,255,255,0.55));
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--border-glass, rgba(255,255,255,0.7));
  border-radius: 20px;
  padding: 44px 36px;
  box-shadow:
    0 8px 32px rgba(90,24,154,0.12),
    0 2px 8px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.5);
  width: 100%;
  max-width: 480px;
  margin: auto;
}

body.dark .auth-form-side .container {
  border-color: rgba(90,24,154,0.35);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.45),
    0 0 0 1px rgba(90,24,154,0.15),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 900px) {
  body {
    grid-template-columns: 1fr !important;
    align-items: start;
  }

  .auth-visual-panel {
    min-height: auto;
    padding: 40px 24px 32px;
    /* Cap height in landscape so the panel doesn't consume the full screen */
    max-height: 40vh;
    overflow: hidden;
  }

  /* On landscape phones, collapse the panel further */
  @media (max-height: 500px) {
    .auth-visual-panel {
      max-height: 30vh;
      padding: 20px 24px;
    }
  }

  /* Hide heavier elements on small screens */
  .avp-features,
  .avp-clapper,
  .avp-quote { display: none; }

  .avp-photo-collage { width: 240px; height: 196px; }
  .avp-photo--1 { width: 130px; height: 108px; }
  .avp-photo--2 { width: 118px; height: 100px; }
  .avp-photo--3 { width: 122px; height: 90px; }

  .auth-form-side {
    padding: 28px 16px 48px;
    min-height: auto;
    align-items: flex-start;
  }

  .auth-form-side .container {
    padding: 32px 20px;
  }
}

@media (max-width: 480px) {
  .avp-photo-collage,
  .avp-stats { display: none; }

  .auth-visual-panel {
    padding: 28px 20px 22px;
    gap: 16px;
  }

  .avp-brand-logo { font-size: 2.2rem; }
}