/* New SR Videos — design system extracted from grandwedcreation.com reference
   (vintage/film aesthetic: Playfair headings, gold accent, polaroid cards,
    film-grain bands, square 2px-border vintage buttons) */

:root {
  --background: 0 0% 8%;          /* #141414 */
  --foreground: 0 0% 95%;         /* #f2f2f2 */
  --primary: 0 0% 95%;
  --primary-foreground: 0 0% 8%;
  --accent: 48 100% 64%;          /* #ffd54a gold */
  --accent-muted: 48 50% 25%;
  --muted: 0 0% 15%;              /* #262626 */
  --muted-foreground: 0 0% 65%;   /* #a6a6a6 */
  --card: 0 0% 10%;               /* #1a1a1a */
  --border: 0 0% 20%;             /* #333333 */
  --film-grain: 0 0% 80%;
  --vintage-shadow: 0 0% 95%;
  --radius: .5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --shadow-vintage: 0 8px 32px -4px hsla(0, 0%, 0%, .35);
  --shadow-polaroid: 0 4px 16px -2px hsla(0, 0%, 0%, .25);
  --shadow-film: 0 2px 8px -1px hsla(0, 0%, 0%, .2);
  --transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);
}

/* ---------- fonts (reference utility names) ---------- */
.font-heading { font-family: "Playfair Display", Georgia, serif; }
.font-body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.font-Story { font-family: "Story Script", cursive; }
.font-lobster { font-family: "Lobster Two", cursive; }
.font-Epunda { font-family: "Epunda Slab", serif; }
.font-caveat { font-family: "Caveat", cursive; }

.heading-vintage {
  font-family: "Playfair Display", Georgia, serif;
  text-shadow: 1px 1px 2px hsla(var(--vintage-shadow), .1);
}

/* ---------- film grain overlay (light bands) ---------- */
.film-grain { position: relative; }
.film-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .06;
  background-image:
    radial-gradient(circle at 25% 25%, hsl(var(--film-grain)) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, hsl(var(--film-grain)) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  pointer-events: none;
  z-index: 1;
}

/* ---------- service card: gradient top bar + hover lift ---------- */
.service-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
  box-shadow: var(--shadow-polaroid);
  transition: var(--transition-smooth);
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, hsl(var(--accent)), hsl(var(--accent-muted)));
}
.service-card:hover {
  transform: translateY(-0.5rem);
  box-shadow: var(--shadow-vintage);
}

/* ---------- vintage buttons (square, 2px border) ---------- */
.btn-vintage,
.btn-accent,
.btn-outline,
.btn-dark {
  border-radius: var(--radius);
  border-width: 2px;
  border-style: solid;
  padding: .75rem 1.5rem;
  font-weight: 500;
  letter-spacing: .025em;
  transition: var(--transition-smooth);
  display: inline-block;
  text-align: center;
}
.btn-vintage {
  border-color: hsl(var(--primary));
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-film);
}
.btn-vintage:hover { background-color: hsl(var(--primary) / .9); }
.btn-accent {
  border-color: hsl(var(--accent));
  background-color: hsl(var(--accent));
  color: #000;
  box-shadow: var(--shadow-film);
}
.btn-accent:hover { background-color: hsl(var(--accent) / .9); }
.btn-outline {
  border-color: hsl(var(--primary));
  background-color: transparent;
  color: hsl(var(--primary));
}
.btn-outline:hover {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.btn-dark {
  border-color: hsl(var(--background));
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: var(--shadow-film);
}
.btn-dark:hover { background-color: hsl(var(--background) / .85); }

/* small button variant (used in header, contact and product cards) */
.btn-sm { padding: .375rem 1.25rem; font-size: .875rem; }

/* text colours for light film-grain bands (WCAG-friendly on #f2f2f2) */
.on-light-kicker { color: #92400e; }
.on-light-muted { color: #525252; }

/* ---------- polaroid gallery card ---------- */
.polaroid-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
  box-shadow: var(--shadow-polaroid);
  padding: 1rem 1rem 3rem;
  transform: rotate(-1deg);
  transition: var(--transition-smooth);
}
.polaroid-card::after {
  content: "";
  position: absolute;
  bottom: .5rem;
  left: 50%;
  transform: translate(-50%);
  width: 80%;
  height: 2rem;
  background: linear-gradient(90deg, transparent 0%, hsl(var(--muted)) 20%, hsl(var(--muted)) 80%, transparent 100%);
  opacity: .6;
}
.polaroid-card:nth-child(2n) { transform: rotate(1deg); }
.polaroid-card:hover,
.polaroid-card:nth-child(2n):hover {
  transform: rotate(0) translateY(-4px);
  box-shadow: var(--shadow-vintage);
}

/* ---------- hero: ken-burns zoom + morphing border radius ---------- */
@keyframes hero-zoom {
  0% { transform: scale(1); }
  50% { transform: scale(1.14); }
  100% { transform: scale(1); }
}
@keyframes hero-radius {
  0% { border-radius: 1.25rem; }
  50% { border-radius: 3.5rem; }
  100% { border-radius: 1.25rem; }
}
.hero-media {
  animation: hero-radius 14s ease-in-out infinite;
}
.hero-media .hero-frame {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: hero-zoom 14s ease-in-out infinite;
  transform-origin: center;
}

/* ---------- floating action buttons (reference: fixed right stack) ---------- */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fade-in 0.4s ease-out both;
}
.fab-1 { animation-delay: 0s; }
.fab-2 { animation-delay: 0.1s; }
.fab-3 { animation-delay: 0.2s; }
.fab-4 { animation-delay: 0.3s; }

/* ---------- misc component styles ---------- */
details > summary::-webkit-details-marker { display: none; }

.video-facade:focus-visible,
[data-lightbox]:focus-visible,
.filter-btn:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 3px;
}

#lightbox:not(.hidden) {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(9 9 9 / 0.95);
}
#lightbox img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-vintage);
}

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