@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap");

/* ============================================================================
   Vernacular Cafe — Dual-Mode Editorial Theme
   Light mode (default) + Dark mode via [data-theme="dark"]
   ============================================================================ */

/* ==========================================================================
   LIGHT MODE (default)
   ========================================================================== */

:root {
  /* Backgrounds */
  --ed-bg: #f5f0e8;
  --ed-surface: #ffffff;
  --ed-surface-2: #f9f6f1;
  --ed-surface-3: #eee9e0;
  /* Borders */
  --ed-border: rgba(0, 0, 0, 0.08);
  --ed-border-warm: rgba(180, 160, 130, 0.2);
  /* Text */
  --ed-text: #1a1a1d;
  --ed-text-muted: #6b6862;
  /* Accent (gold — same in both modes) */
  --ed-accent: #c8a87c;
  --ed-accent-soft: #b08c5a;
  /* Fixed palette tokens (not mode-dependent) */
  --ed-cream: #f5f0e8;
  --ed-text-dark: #1a1a1d;
  --ed-text-light: #f2ede6;
  --ed-red: #c0392b;
  --ed-red-soft: #e05a4f;
  /* Alert tints */
  --ed-alert-info-bg: rgba(59, 130, 200, 0.08);
  --ed-alert-info-border: rgba(59, 130, 200, 0.18);
  --ed-alert-info-text: #2c5a8c;
  --ed-alert-success-bg: rgba(39, 174, 96, 0.08);
  --ed-alert-success-border: rgba(39, 174, 96, 0.18);
  --ed-alert-success-text: #1a7a42;
  --ed-alert-warning-bg: rgba(200, 168, 124, 0.1);
  --ed-alert-warning-border: rgba(200, 168, 124, 0.22);
  --ed-alert-warning-text: #7a5e30;
  --ed-alert-error-bg: rgba(192, 57, 43, 0.08);
  --ed-alert-error-border: rgba(192, 57, 43, 0.18);
  --ed-alert-error-text: #8b2920;
  /* Navbar */
  --ed-navbar-bg: rgba(255, 255, 255, 0.95);
  --ed-navbar-shadow: rgba(0, 0, 0, 0.06);
  /* Card */
  --ed-card-shadow: rgba(0, 0, 0, 0.06);
  --ed-card-hover-shadow: rgba(0, 0, 0, 0.1);
  /* Hero */
  --ed-hero-bg: linear-gradient(160deg, rgba(245,240,232,0.97) 0%, rgba(238,233,224,0.95) 45%, rgba(220,200,170,0.5) 100%);
  /* Scrollbar */
  --ed-scrollbar-track: #eee9e0;
  --ed-scrollbar-thumb: #d4cec4;
  /* Selection */
  --ed-selection-bg: rgba(200, 168, 124, 0.45);
  --ed-selection-text: #1a1a1d;
  /* Badge ghost */
  --ed-badge-ghost-bg: #eee9e0;
  --ed-badge-ghost-text: #6b6862;
  /* Stats bg */
  --ed-stats-bg: #ffffff;
  /* Progress track */
  --ed-progress-track: #eee9e0;
  /* Prose */
  --ed-prose-text: #2a2a2d;
  --ed-prose-heading: #1a1a1d;
  --ed-prose-strong: #7a5e30;
  /* Secondary btn */
  --ed-btn-secondary-text: #7a5e30;
  --ed-btn-secondary-hover-bg: rgba(200, 168, 124, 0.1);
  /* Outline btn */
  --ed-btn-outline-border: #8b7355;
  --ed-btn-outline-text: #8b7355;
  /* Badge info / secondary */
  --ed-badge-sec-bg: rgba(200, 168, 124, 0.12);
  --ed-badge-sec-border: rgba(200, 168, 124, 0.25);
  --ed-badge-sec-text: #7a5e30;
  /* Badge warning */
  --ed-badge-warn-bg: rgba(200, 168, 124, 0.15);
  --ed-badge-warn-border: rgba(200, 168, 124, 0.3);
  --ed-badge-warn-text: #5a4220;
  /* Avatar ring */
  --ed-avatar-bg: #eee9e0;
  --ed-avatar-text: #7a5e30;
  /* Divider */
  --ed-divider-line: rgba(0, 0, 0, 0.1);
  /* Collapse */
  --ed-collapse-text: #6b6862;
  /* Table hover */
  --ed-table-hover: rgba(200, 168, 124, 0.06);
  /* Footer */
  --ed-footer-bg: #eee9e0;
  /* Link primary */
  --ed-link-primary: #8a6c3e;
  --ed-link-primary-hover: #6a4e28;
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

[data-theme="dark"] {
  /* Backgrounds */
  --ed-bg: #0e0e11;
  --ed-surface: #161619;
  --ed-surface-2: #1c1c20;
  --ed-surface-3: #232328;
  /* Borders */
  --ed-border: rgba(255, 255, 255, 0.08);
  --ed-border-warm: rgba(200, 180, 150, 0.15);
  /* Text */
  --ed-text: #f2ede6;
  --ed-text-muted: #9e9a93;
  /* Accent */
  --ed-accent: #c8a87c;
  --ed-accent-soft: #d4b98e;
  /* Alerts */
  --ed-alert-info-bg: rgba(100, 140, 200, 0.1);
  --ed-alert-info-border: rgba(100, 140, 200, 0.2);
  --ed-alert-info-text: #c8d8f0;
  --ed-alert-success-bg: rgba(80, 160, 100, 0.1);
  --ed-alert-success-border: rgba(80, 160, 100, 0.2);
  --ed-alert-success-text: #c8ecd4;
  --ed-alert-warning-bg: rgba(200, 168, 124, 0.12);
  --ed-alert-warning-border: rgba(200, 168, 124, 0.2);
  --ed-alert-warning-text: #f0e0c8;
  --ed-alert-error-bg: rgba(192, 57, 43, 0.14);
  --ed-alert-error-border: rgba(192, 57, 43, 0.25);
  --ed-alert-error-text: #f0c8c4;
  /* Navbar */
  --ed-navbar-bg: rgba(14, 14, 17, 0.95);
  --ed-navbar-shadow: rgba(0, 0, 0, 0.4);
  /* Card */
  --ed-card-shadow: rgba(0, 0, 0, 0.25);
  --ed-card-hover-shadow: rgba(0, 0, 0, 0.35);
  /* Hero */
  --ed-hero-bg: linear-gradient(160deg, rgba(30,28,25,0.97) 0%, rgba(18,17,15,0.95) 45%, rgba(80,60,35,0.5) 100%);
  /* Scrollbar */
  --ed-scrollbar-track: #0e0e11;
  --ed-scrollbar-thumb: #232328;
  /* Selection */
  --ed-selection-bg: rgba(200, 168, 124, 0.55);
  --ed-selection-text: #f2ede6;
  /* Badge ghost */
  --ed-badge-ghost-bg: #232328;
  --ed-badge-ghost-text: #9e9a93;
  /* Stats bg */
  --ed-stats-bg: #161619;
  /* Progress track */
  --ed-progress-track: #232328;
  /* Prose */
  --ed-prose-text: #f2ede6;
  --ed-prose-heading: #f5f0e8;
  --ed-prose-strong: #d4b98e;
  /* Secondary btn */
  --ed-btn-secondary-text: #d4b98e;
  --ed-btn-secondary-hover-bg: rgba(200, 168, 124, 0.12);
  /* Outline btn */
  --ed-btn-outline-border: var(--ed-accent, #c8a87c);
  --ed-btn-outline-text: var(--ed-accent, #c8a87c);
  /* Badge info / secondary */
  --ed-badge-sec-bg: rgba(200, 168, 124, 0.12);
  --ed-badge-sec-border: rgba(200, 168, 124, 0.25);
  --ed-badge-sec-text: #d4b98e;
  /* Badge warning */
  --ed-badge-warn-bg: rgba(200, 168, 124, 0.18);
  --ed-badge-warn-border: rgba(200, 168, 124, 0.3);
  --ed-badge-warn-text: #f5f0e8;
  /* Avatar ring */
  --ed-avatar-bg: #232328;
  --ed-avatar-text: #d4b98e;
  /* Divider */
  --ed-divider-line: rgba(200, 180, 150, 0.15);
  /* Collapse */
  --ed-collapse-text: #9e9a93;
  /* Table hover */
  --ed-table-hover: rgba(200, 168, 124, 0.05);
  /* Footer */
  --ed-footer-bg: #0e0e11;
  /* Link primary */
  --ed-link-primary: #d4b98e;
  --ed-link-primary-hover: #c8a87c;
}

/* ==========================================================================
   SHARED COMPONENT STYLES (use variables, adapt to both modes)
   ========================================================================== */

/* ---------- Base ---------- */

body {
  background: var(--ed-bg);
  color: var(--ed-text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Typography ---------- */

h1, h2, h3, .card-title, .stat-value {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ed-text);
}

h1 { font-weight: 700; }

h2 {
  font-size: 2.2rem;
  font-weight: 600;
}

h4, h5, h6, label, .label-text, .footer-title {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

p, li, span, input, textarea, select, button, a {
  font-family: "Inter", system-ui, sans-serif;
}

/* ---------- Navbar ---------- */

.navbar {
  background: var(--ed-navbar-bg) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ed-border);
  box-shadow: 0 4px 30px var(--ed-navbar-shadow);
}

.navbar .menu a,
.navbar a,
.navbar .btn-ghost {
  color: var(--ed-text) !important;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.navbar .btn-ghost:hover,
.navbar .menu a:hover {
  background: rgba(200, 168, 124, 0.1) !important;
  color: var(--ed-accent) !important;
}

.navbar .btn-primary {
  background: var(--ed-accent) !important;
  border-color: var(--ed-accent) !important;
  color: var(--ed-text-dark) !important;
  font-weight: 700;
}

.navbar .btn-primary:hover {
  background: var(--ed-accent-soft) !important;
  border-color: var(--ed-accent-soft) !important;
}

/* ---------- Surfaces ---------- */

.bg-base-100,
.card,
.dropdown-content,
.menu,
.modal-box,
.collapse {
  background-color: var(--ed-surface) !important;
  border-color: var(--ed-border) !important;
  color: var(--ed-text) !important;
}

.bg-base-200 {
  background-color: var(--ed-bg) !important;
}

.card {
  border: 1px solid var(--ed-border-warm);
  box-shadow: 0 8px 32px var(--ed-card-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px var(--ed-card-hover-shadow);
}

/* ---------- Hero ---------- */

.hero.bg-primary {
  background: var(--ed-hero-bg) !important;
  position: relative;
}

.hero.bg-primary h1 {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 3.5rem;
  line-height: 1.1;
  color: var(--ed-text) !important;
}

@media (min-width: 640px) {
  .hero.bg-primary h1 { font-size: 4.5rem; }
}

.hero.bg-primary p {
  color: var(--ed-text-muted) !important;
  font-weight: 300;
  font-size: 1.15rem;
}

/* ---------- Buttons ---------- */

.btn {
  border-radius: 0.35rem;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  letter-spacing: 0.03em;
  transition: all 0.2s ease;
}

.btn-primary {
  background: var(--ed-accent) !important;
  border-color: var(--ed-accent) !important;
  color: var(--ed-text-dark) !important;
  font-weight: 700;
}

.btn-primary:hover {
  background: var(--ed-accent-soft) !important;
  border-color: var(--ed-accent-soft) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(200, 168, 124, 0.25);
}

.btn-secondary {
  background: transparent !important;
  border: 1.5px solid var(--ed-accent) !important;
  color: var(--ed-btn-secondary-text) !important;
}

.btn-secondary:hover {
  background: var(--ed-btn-secondary-hover-bg) !important;
  color: var(--ed-accent) !important;
}

.btn-outline {
  border: 1px solid var(--ed-accent, #c8a87c) !important;
  color: var(--ed-accent, #c8a87c) !important;
  background: transparent !important;
}

.btn-outline:hover {
  background: rgba(200, 168, 124, 0.15) !important;
  border-color: var(--ed-accent-soft, #d4b98e) !important;
  color: var(--ed-accent-soft, #d4b98e) !important;
}

.btn-error {
  background: var(--ed-red) !important;
  border-color: var(--ed-red) !important;
  color: #fff !important;
}

.btn-error:hover {
  background: var(--ed-red-soft) !important;
}

/* ---------- Forms ---------- */

.input,
.textarea,
.select,
.checkbox {
  background: var(--ed-surface-2) !important;
  border: 1px solid var(--ed-border-warm) !important;
  color: var(--ed-text) !important;
  font-family: "Inter", sans-serif;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--ed-text-muted) !important;
}

.input:focus,
.textarea:focus,
.select:focus {
  box-shadow: 0 0 0 3px rgba(200, 168, 124, 0.15) !important;
  border-color: var(--ed-accent) !important;
}

/* ---------- Alerts ---------- */

.alert {
  border: 1px solid var(--ed-border);
  border-radius: 0.5rem;
}

.alert-info {
  background: var(--ed-alert-info-bg) !important;
  border-color: var(--ed-alert-info-border) !important;
  color: var(--ed-alert-info-text) !important;
}

.alert-success {
  background: var(--ed-alert-success-bg) !important;
  border-color: var(--ed-alert-success-border) !important;
  color: var(--ed-alert-success-text) !important;
}

.alert-warning {
  background: var(--ed-alert-warning-bg) !important;
  border-color: var(--ed-alert-warning-border) !important;
  color: var(--ed-alert-warning-text) !important;
}

.alert-error {
  background: var(--ed-alert-error-bg) !important;
  border-color: var(--ed-alert-error-border) !important;
  color: var(--ed-alert-error-text) !important;
}

/* ---------- Badges ---------- */

.badge-primary {
  background: var(--ed-accent) !important;
  border-color: var(--ed-accent) !important;
  color: var(--ed-text-dark) !important;
  font-weight: 700;
}

.badge-secondary,
.badge-info {
  background: var(--ed-badge-sec-bg) !important;
  border-color: var(--ed-badge-sec-border) !important;
  color: var(--ed-badge-sec-text) !important;
}

.badge-warning {
  background: var(--ed-badge-warn-bg) !important;
  border-color: var(--ed-badge-warn-border) !important;
  color: var(--ed-badge-warn-text) !important;
}

.badge-ghost {
  background: var(--ed-badge-ghost-bg) !important;
  color: var(--ed-badge-ghost-text) !important;
}

/* ---------- Tables ---------- */

.table thead th {
  color: var(--ed-accent) !important;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--ed-border-warm) !important;
}

.table tbody tr:hover,
.data-table tbody tr:hover {
  background: var(--ed-table-hover) !important;
}

/* ---------- Stats ---------- */

.stats {
  background: var(--ed-stats-bg) !important;
  border: 1px solid var(--ed-border-warm);
}

.stat-title {
  color: var(--ed-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
}

.stat-value {
  font-family: "Playfair Display", Georgia, serif !important;
}

/* ---------- Progress ---------- */

.progress {
  background: var(--ed-progress-track) !important;
  height: 6px;
}

.progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--ed-accent), var(--ed-accent-soft)) !important;
  border-radius: 3px;
}

.progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--ed-accent), var(--ed-accent-soft)) !important;
  border-radius: 3px;
}

/* ---------- Collapse / Accordion ---------- */

.collapse-title {
  font-family: "Inter", sans-serif;
  font-weight: 600;
}

.collapse-content p {
  color: var(--ed-collapse-text) !important;
}

/* ---------- Footer ---------- */

footer, .footer {
  background: var(--ed-footer-bg) !important;
  border-top: 1px solid var(--ed-border) !important;
}

footer, footer a, .footer, .footer a, .footer .link {
  color: var(--ed-text-muted) !important;
}

.footer-title {
  color: var(--ed-accent) !important;
  font-size: 0.7rem !important;
}

footer a:hover, .footer a:hover, .footer .link:hover {
  color: var(--ed-accent) !important;
}

/* ---------- Prose (Legal Pages) ---------- */

.prose {
  color: var(--ed-prose-text) !important;
}

.prose h1, .prose h2, .prose h3 {
  color: var(--ed-prose-heading) !important;
  font-family: "Playfair Display", Georgia, serif;
}

.prose h2 {
  border-bottom-color: var(--ed-accent) !important;
  padding-bottom: 0.5rem;
}

.prose strong {
  color: var(--ed-prose-strong) !important;
}

.prose a {
  color: var(--ed-link-primary) !important;
  text-decoration-color: rgba(200, 168, 124, 0.3);
}

.prose a:hover {
  text-decoration-color: var(--ed-accent);
}

.prose table th {
  color: var(--ed-accent) !important;
}

/* ---------- Cream / Light Sections (landing page bands) ---------- */

.editorial-light {
  background: var(--ed-cream) !important;
  color: var(--ed-text-dark) !important;
}

.editorial-light h1,
.editorial-light h2,
.editorial-light h3 {
  color: var(--ed-text-dark) !important;
}

.editorial-light p,
.editorial-light li,
.editorial-light span {
  color: #3a3a3d !important;
}

.editorial-light .card {
  background: #ffffff !important;
  color: var(--ed-text-dark) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.editorial-light .card-title {
  color: var(--ed-text-dark) !important;
}

.editorial-light .opacity-70,
.editorial-light .opacity-60 {
  color: #5a5a5d !important;
}

.editorial-light .btn-primary {
  background: var(--ed-text-dark) !important;
  border-color: var(--ed-text-dark) !important;
  color: var(--ed-cream) !important;
}

.editorial-light .btn-primary:hover {
  background: #333 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.editorial-light .btn-outline {
  border-color: #8b7355 !important;
  color: #8b7355 !important;
  background: transparent !important;
}

.editorial-light .btn-outline:hover {
  background: rgba(139, 115, 85, 0.1) !important;
  border-color: #6b5a42 !important;
  color: #6b5a42 !important;
}

/* Light mode button overrides */
.editorial-light .btn-success {
  background-color: #8b7355 !important;
  color: #fff !important;
  border-color: #8b7355 !important;
}

.editorial-light .btn-success:hover:not(:disabled) {
  background-color: #6b5a42 !important;
}

.editorial-light .btn-info {
  background-color: rgba(139, 115, 85, 0.12) !important;
  color: #6b5a42 !important;
  border-color: rgba(139, 115, 85, 0.3) !important;
}

.editorial-light .btn-info:hover:not(:disabled) {
  background-color: rgba(139, 115, 85, 0.2) !important;
}

/* ---------- Testimonial Quote Styling ---------- */

.editorial-quote {
  position: relative;
  padding-top: 2.5rem;
}

.editorial-quote::before {
  content: "\201C";
  position: absolute;
  top: -0.5rem;
  left: 0.5rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--ed-accent);
  opacity: 0.35;
  pointer-events: none;
}

/* ---------- Avatar Ring ---------- */

.avatar .bg-primary,
.avatar .bg-secondary,
.avatar .bg-accent {
  background: var(--ed-avatar-bg) !important;
  color: var(--ed-avatar-text) !important;
  border: 2px solid var(--ed-accent) !important;
}

/* ---------- Divider ---------- */

.divider {
  color: var(--ed-text-muted) !important;
}

.divider::before,
.divider::after {
  background-color: var(--ed-divider-line) !important;
}

/* ---------- Decorative Accents ---------- */

.editorial-split-accent {
  position: relative;
  overflow: hidden;
}

.editorial-split-accent::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -100px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 40%,
    rgba(200, 168, 124, 0.18),
    rgba(200, 168, 124, 0) 70%
  );
  pointer-events: none;
}

/* ---------- Link Styling ---------- */

.link-primary,
a.link-primary {
  color: var(--ed-link-primary) !important;
}

.link-primary:hover,
a.link-primary:hover {
  color: var(--ed-link-primary-hover) !important;
}

/* ---------- Selection ---------- */

::selection {
  background: var(--ed-selection-bg);
  color: var(--ed-selection-text);
}

::-moz-selection {
  background: var(--ed-selection-bg);
  color: var(--ed-selection-text);
}

/* ---------- Scrollbar (webkit) ---------- */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--ed-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--ed-scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ed-accent);
}

/* ========================================================
   HERO ANIMATED BACKGROUND
   ======================================================== */

.hero-visual {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Animated gradient orbs that drift across the hero */
.hero-visual::before,
.hero-visual::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: -2;
  pointer-events: none;
}

.hero-visual::before {
  background:
    radial-gradient(ellipse 600px 600px at 20% 50%, rgba(200, 168, 124, 0.25), transparent 70%),
    radial-gradient(ellipse 500px 500px at 80% 20%, rgba(120, 90, 60, 0.18), transparent 70%),
    radial-gradient(ellipse 400px 400px at 60% 80%, rgba(200, 168, 124, 0.15), transparent 70%);
  animation: heroOrbs 18s ease-in-out infinite alternate;
}

.hero-visual::after {
  background:
    radial-gradient(ellipse 550px 550px at 70% 60%, rgba(180, 140, 90, 0.20), transparent 70%),
    radial-gradient(ellipse 450px 450px at 30% 30%, rgba(200, 168, 124, 0.12), transparent 70%),
    radial-gradient(ellipse 350px 350px at 50% 70%, rgba(140, 110, 70, 0.14), transparent 70%);
  animation: heroOrbs2 22s ease-in-out infinite alternate;
}

@keyframes heroOrbs {
  0% {
    transform: translate(0%, 0%) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(5%, -3%) rotate(4deg) scale(1.05);
  }
  66% {
    transform: translate(-3%, 4%) rotate(-3deg) scale(0.97);
  }
  100% {
    transform: translate(2%, -2%) rotate(2deg) scale(1.02);
  }
}

@keyframes heroOrbs2 {
  0% {
    transform: translate(0%, 0%) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(-4%, 3%) rotate(-5deg) scale(1.04);
  }
  66% {
    transform: translate(3%, -4%) rotate(4deg) scale(0.96);
  }
  100% {
    transform: translate(-2%, 2%) rotate(-2deg) scale(1.01);
  }
}

/* Flowing ink ripple layer */
.hero-ink-flow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.hero-ink-flow span {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: inkRipple 8s ease-in-out infinite;
}

.hero-ink-flow span:nth-child(1) {
  width: 300px;
  height: 300px;
  top: 10%;
  left: 15%;
  background: radial-gradient(circle, rgba(200, 168, 124, 0.15), transparent 70%);
  animation-delay: 0s;
  animation-duration: 10s;
}

.hero-ink-flow span:nth-child(2) {
  width: 250px;
  height: 250px;
  top: 50%;
  right: 10%;
  background: radial-gradient(circle, rgba(180, 140, 90, 0.12), transparent 70%);
  animation-delay: 2.5s;
  animation-duration: 12s;
}

.hero-ink-flow span:nth-child(3) {
  width: 350px;
  height: 350px;
  bottom: 5%;
  left: 40%;
  background: radial-gradient(circle, rgba(200, 168, 124, 0.10), transparent 70%);
  animation-delay: 5s;
  animation-duration: 14s;
}

.hero-ink-flow span:nth-child(4) {
  width: 200px;
  height: 200px;
  top: 30%;
  left: 60%;
  background: radial-gradient(circle, rgba(160, 120, 70, 0.12), transparent 70%);
  animation-delay: 3.5s;
  animation-duration: 11s;
}

@keyframes inkRipple {
  0% {
    opacity: 0;
    transform: scale(0.5) translate(0, 0);
  }
  20% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
    transform: scale(1.3) translate(20px, -15px);
  }
  80% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    transform: scale(1.8) translate(-10px, 20px);
  }
}

/* Subtle floating text symbols in background */
.hero-floating-text {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.hero-floating-text span {
  position: absolute;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 6rem;
  font-weight: 700;
  opacity: 0;
  color: rgba(200, 168, 124, 0.06);
  animation: floatChar 16s ease-in-out infinite;
  user-select: none;
}

.hero-floating-text span:nth-child(1) {
  top: 8%;
  left: 5%;
  animation-delay: 0s;
}

.hero-floating-text span:nth-child(2) {
  top: 60%;
  right: 8%;
  font-size: 5rem;
  animation-delay: 4s;
  animation-duration: 18s;
}

.hero-floating-text span:nth-child(3) {
  bottom: 15%;
  left: 20%;
  font-size: 4rem;
  animation-delay: 8s;
  animation-duration: 20s;
}

.hero-floating-text span:nth-child(4) {
  top: 25%;
  right: 15%;
  font-size: 7rem;
  animation-delay: 2s;
  animation-duration: 14s;
}

.hero-floating-text span:nth-child(5) {
  bottom: 30%;
  left: 65%;
  font-size: 3.5rem;
  animation-delay: 6s;
  animation-duration: 22s;
}

@keyframes floatChar {
  0% {
    opacity: 0;
    transform: translateY(30px) rotate(-5deg);
  }
  15% {
    opacity: 0.08;
  }
  50% {
    opacity: 0.05;
    transform: translateY(-20px) rotate(3deg);
  }
  85% {
    opacity: 0.08;
  }
  100% {
    opacity: 0;
    transform: translateY(30px) rotate(-5deg);
  }
}

/* Dark overlay for text readability */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(18, 18, 22, 0.55) 0%,
    rgba(18, 18, 22, 0.40) 50%,
    rgba(18, 18, 22, 0.65) 100%
  );
  pointer-events: none;
}

[data-theme="light"] .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(245, 241, 235, 0.55) 0%,
    rgba(245, 241, 235, 0.40) 50%,
    rgba(245, 241, 235, 0.60) 100%
  );
}

/* Hero content sits above everything */
.hero-visual .hero-content {
  position: relative;
  z-index: 1;
}

/* Video background (hidden by default, shown when video element is uncommented) */
.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.hero-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}