/* ==========================================================================
   Nirmoka Studios — Base reset, brand utility classes & keyframes
   These are the reusable visual treatments lifted from the product: the glass
   panels, film grain, soft shadows, and the cinematic motion library.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* ---- Wordmark --------------------------------------------------------- */
.font-display,
.wordmark {
  font-family: var(--font-display);
  letter-spacing: var(--ls-wide);
  font-weight: 400;       /* Bagel Fat One ships a single weight */
}

/* ---- Shadow utilities ------------------------------------------------- */
.subtle-shadow   { box-shadow: var(--shadow-subtle); }
.elevated-shadow { box-shadow: var(--shadow-elevated); }
.card-shadow     { box-shadow: var(--shadow-card); }

/* ---- Borders ---------------------------------------------------------- */
.clean-border { border: 1px solid var(--border); }

/* ---- Gentle interaction transition ------------------------------------ */
.gentle-animation { transition: all var(--dur-base) var(--ease-gentle); }

/* ---- Glass panels ----------------------------------------------------- */
.glass-effect {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: all var(--dur-base) var(--ease-gentle);
}
.glass-effect:hover {
  background: var(--glass-bg-hover);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
.glass-navbar {
  background: var(--glass-navbar-bg);
  backdrop-filter: var(--glass-navbar-blur);
  -webkit-backdrop-filter: var(--glass-navbar-blur);
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* ---- Text shadows for legibility over video / imagery ----------------- */
.text-shadow-strong {
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.9);
}
.text-shadow-medium {
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.7),
    0 1px 1px rgba(0, 0, 0, 0.8);
}

/* ---- Film grain overlay (drop inside a position:relative parent) ------ */
.film-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.02;
  background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.8) 1px, transparent 0);
  background-size: 3px 3px;
  animation: filmGrain 8s infinite;
}

/* ==========================================================================
   Keyframes — the cinematic motion library
   ========================================================================== */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(1deg); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255,255,255,0.1); }
  50%      { box-shadow: 0 0 40px rgba(255,255,255,0.3); }
}
@keyframes filmGrain {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(1px, 1px); }
  50%      { transform: translate(-1px, 1px); }
  75%      { transform: translate(1px, -1px); }
}
@keyframes photoSway1 {
  0%, 100% { transform: rotate(2deg) translateY(0); }
  50%      { transform: rotate(-1deg) translateY(-3px); }
}
@keyframes photoSway2 {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50%      { transform: rotate(3deg) translateY(-2px); }
}
@keyframes projectorLight {
  0%, 100% { opacity: 0.05; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.15; transform: translate(-50%, -50%) scale(1.1); }
}

.float-gentle { animation: float-gentle 6s ease-in-out infinite; }
.pulse-glow   { animation: pulse-glow 3s ease-in-out infinite; }
.photo-sway-1 { animation: photoSway1 8s ease-in-out infinite; }
.photo-sway-2 { animation: photoSway2 9s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}