/* ============================================
   StranicaZaMene — Shared Animation System
   ============================================ */

/* ─── Landing-page tokens (scoped to data-theme, won’t touch templates) ─── */
[data-theme="light"] {
  --bg: #faf9f7;
  --surface: #ffffff;
  --surface-2: #f3f1ee;
  --text: #1a1a1a;
  --text-dim: #6b6b6b;
  --accent: #c4a27c;
  --accent-hover: #b08d6a;
  --border: #e8e4de;
  --shadow: 0 1px 2px rgba(0,0,0,0.04);
  --radius: 16px;
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg: #0e0f11;
  --surface: #16171a;
  --surface-2: #1e2024;
  --text: #f1f1f1;
  --text-dim: #9a9a9a;
  --accent: #e8a87c;
  --accent-hover: #d4956e;
  --border: #2a2c32;
  --shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* ─── Base Transitions ─── */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg, #faf9f7);
  color: var(--text, #1a1a1a);
  transition: background var(--transition, 0.35s ease), color var(--transition, 0.35s ease);
}

a, button, .btn, nav, .card, section, footer {
  transition: background var(--transition, 0.35s ease), color var(--transition, 0.35s ease), border-color var(--transition, 0.35s ease), transform 0.25s ease;
}

/* ─── Page Load Curtain ─── */
.page-curtain {
  position: fixed;
  inset: 0;
  background: var(--bg, #faf9f7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: curtainReveal 1s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  animation-delay: 0.1s;
  pointer-events: none;
}

.page-curtain::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent, #c4a27c), transparent 60%);
  opacity: 0.15;
  animation: curtainFade 0.8s ease forwards;
  animation-delay: 0.6s;
}

@keyframes curtainReveal {
  0% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 100% 0); }
}

@keyframes curtainFade {
  0% { opacity: 0.15; }
  100% { opacity: 0; }
}

/* ─── Scroll Reveal ─── */
.reveal {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ─── Hero Background Video Treatment ─── */
.hero-video-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero-video-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.2) 0%,
    rgba(0,0,0,0.5) 100%);
  z-index: 1;
}

.hero-video-bg video,
.hero-video-bg .video-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.hero-video-bg .video-fallback {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a1810 50%, #1a1a1a 100%);
}

/* ─── Mobile menu ─── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 4rem;
    left: 0;
    right: 0;
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--border, #e5e2dc);
    padding: 1rem;
    gap: 0.75rem;
  }
}

/* ─── Smooth image reveal ─── */
.img-reveal {
  overflow: hidden;
}

.img-reveal img {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.img-reveal:hover img {
  transform: scale(1.05);
}