/* ============================================================
   SYNAETHEX DESIGN SYSTEM — main.css
   Omni-Protocol Enforcement Layer
   This file MUST load last. It is the system-of-record.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   PROTOCOL 1 — The 'Goldilocks' Media Protocol
   Default: padding 40px, object-fit contain on gallery media.
   Scoped to gallery/modal contexts to avoid clobbering nav/hero.
   ───────────────────────────────────────────────────────────── */

.card-image img,
.card-image video,
.modal-slide img,
.modal-slide video {
  padding: 40px;
  object-fit: contain;
  box-sizing: border-box;
}

/* Exception: .subhasis07 — full-bleed override */
.subhasis07,
img.subhasis07,
video.subhasis07,
.card-image .subhasis07,
.modal-slide .subhasis07 {
  padding: 0 !important;
  object-fit: cover !important;
}

/* ─────────────────────────────────────────────────────────────
   PROTOCOL 3 — Universal Media Controls (UI Layer)
   Injected dynamically by site-config.js.
   ───────────────────────────────────────────────────────────── */

.media-controls-layer {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;          /* let clicks pass through to card */
  opacity: 0;
  transition: opacity 0.25s ease;
}
/* Show on hover */
.card-image:hover > .media-controls-layer,
.modal-slide:hover > .media-controls-layer,
.modal-slide.active > .media-controls-layer {
  opacity: 1;
}

.mc-btn {
  position: absolute;
  pointer-events: auto;          /* re-enable clicks on buttons */
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.mc-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: scale(1.12);
}

/* Positions */
.mc-fullscreen { bottom: 12px; right: 12px; }
.mc-playpause  { bottom: 12px; left: 12px; }
.mc-mute       { bottom: 12px; left: 50px; }

/* ─────────────────────────────────────────────────────────────
   PROTOCOL 4 — Synced Content Logic: Stable layout
   ───────────────────────────────────────────────────────────── */

.modal-sync-desc {
  min-height: 80px;
}
.modal-sync-title.fade-swap,
.modal-sync-desc.fade-swap {
  opacity: 0;
}

/* ─────────────────────────────────────────────────────────────
   PROTOCOL 5 — Abstract Geometric Background & Gradients
   ───────────────────────────────────────────────────────────── */

#bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--bg-primary);
  transition: background 1s ease-in-out;
  overflow: hidden;
}

/* Base geometric motifs using SVG/CSS */
.bg-shape {
  position: absolute;
  pointer-events: none;
  opacity: 0.15;
}

.bg-shape.circle {
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}

.bg-shape.block {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.bg-shape.scribble {
  /* Using an inline SVG background for a scribble texture */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 180 Q 40 20, 80 160 T 160 40' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: cover;
}

/* The gradient overlay that transitions on scroll */
#bg-gradient-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(212, 169, 106, 0.15) 0%, transparent 60%);
  opacity: 0.5;
  transition: background 1s ease-in-out;
}

/* We'll use classes toggled by JS to switch the gradient accents */
#bg-canvas.theme-digital #bg-gradient-overlay {
  background: radial-gradient(circle at 30% 40%, rgba(0, 167, 157, 0.15) 0%, transparent 60%),
              radial-gradient(circle at 70% 60%, rgba(79, 137, 200, 0.15) 0%, transparent 60%);
}

#bg-canvas.theme-paintings #bg-gradient-overlay {
  background: radial-gradient(circle at 50% 50%, rgba(212, 169, 106, 0.15) 0%, transparent 60%);
}

#bg-canvas.theme-photography #bg-gradient-overlay {
  background: radial-gradient(circle at 60% 30%, rgba(43, 107, 93, 0.15) 0%, transparent 60%),
              radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
}

/* ─────────────────────────────────────────────────────────────
   PROTOCOL 6 — Kinetic Interstitial
   ───────────────────────────────────────────────────────────── */

.interstitial {
  position: relative;
  height: 20vh;
  min-height: 120px;
  overflow: hidden;
  /* bg is set dynamically by JS lerp */
}

.interstitial canvas.kinetic-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* canvas should NOT inherit gallery padding */
  padding: 0;
}

/* ─────────────────────────────────────────────────────────────
   PROTOCOL 7 — System-Level Overrides & Fixes
   Ensures the Goldilocks protocol doesn't leak into non-gallery
   elements (hero, nav, footer, blog, contact, icons).
   ───────────────────────────────────────────────────────────── */

/* Omni-Protocol: Static high-contrast border (replaces removed neon-glow) */
.neon-glow-border {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
  border-radius: var(--radius-sm, 8px);
}

/* Hero background must remain full-bleed */
.hero-bg {
  padding: 0;
  object-fit: cover;
}
/* Card dots/buttons should not have gallery padding */
.card-dot,
.slider-dot,
.slider-arrow,
.mc-btn {
  padding: 0;
}

@media (max-width: 768px) {
  .mc-btn { width: 28px; height: 28px; font-size: 0.7rem; }
}