/* ============================================
   ON THE DAY — Atmosphere
   Grain, cursor light, aurora, patterns, bleeds
   ============================================ */

/* ── Grain Overlay (canvas injected by JS) ── */
.otd-grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.035;
  image-rendering: pixelated;
}

/* ── Custom Cursor ── */
.otd-cursor-dot,
.otd-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  will-change: transform;
  transition: width var(--duration-fast) var(--ease-spring),
              height var(--duration-fast) var(--ease-spring),
              background var(--duration-fast) var(--ease-smooth),
              border-color var(--duration-fast) var(--ease-smooth),
              opacity var(--duration-fast) var(--ease-smooth);
}

.otd-cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--otd-green-400);
  margin-left: -4px;
  margin-top: -4px;
}

.otd-cursor-ring {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--otd-green-400);
  background: transparent;
  margin-left: -20px;
  margin-top: -20px;
  opacity: 0.5;
}

/* Cursor States */
.otd-cursor--pointer .otd-cursor-ring {
  width: 60px;
  height: 60px;
  margin-left: -30px;
  margin-top: -30px;
  border-color: var(--otd-green-500);
  opacity: 0.3;
}

.otd-cursor--pointer .otd-cursor-dot {
  width: 6px;
  height: 6px;
  margin-left: -3px;
  margin-top: -3px;
  background: var(--otd-green-500);
}

.otd-cursor--expand .otd-cursor-ring {
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
  border-color: var(--otd-green-400);
  opacity: 0.4;
}

.otd-cursor--text .otd-cursor-dot {
  width: 2px;
  height: 24px;
  border-radius: 1px;
  margin-left: -1px;
  margin-top: -12px;
}

.otd-cursor--text .otd-cursor-ring {
  opacity: 0;
}

.otd-cursor--hidden .otd-cursor-dot,
.otd-cursor--hidden .otd-cursor-ring {
  opacity: 0;
}

/* Hide custom cursor on touch devices */
@media (pointer: coarse) {
  .otd-cursor-dot,
  .otd-cursor-ring {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .otd-cursor-dot,
  .otd-cursor-ring {
    display: none !important;
  }
}

/* ── Cursor Light Effect (on dark sections) ── */
.cursor-light {
  position: relative;
}

.cursor-light::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(74, 222, 128, 0.06),
    transparent 40%
  );
  pointer-events: none;
  z-index: 1;
}

/* ── Aurora Background ── */
.aurora {
  position: fixed;
  inset: 0;
  z-index: var(--z-behind);
  pointer-events: none;
  overflow: hidden;
}

.aurora::before {
  content: '';
  position: absolute;
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  background: conic-gradient(
    from var(--aurora-angle, 0deg) at 50% 50%,
    transparent 0deg,
    rgba(34, 197, 94, 0.08) 60deg,
    transparent 120deg,
    rgba(6, 182, 212, 0.05) 180deg,
    transparent 240deg,
    rgba(74, 222, 128, 0.06) 300deg,
    transparent 360deg
  );
  animation: aurora-spin 30s linear infinite;
  filter: blur(100px);
  will-change: transform;
}

/* Stronger aurora variant */
.aurora--intense::before {
  background: conic-gradient(
    from var(--aurora-angle, 0deg) at 50% 50%,
    transparent 0deg,
    rgba(34, 197, 94, 0.15) 60deg,
    transparent 120deg,
    rgba(6, 182, 212, 0.1) 180deg,
    transparent 240deg,
    rgba(74, 222, 128, 0.12) 300deg,
    transparent 360deg
  );
}

/* Warm aurora (homeowner pages) */
.aurora--warm::before {
  background: conic-gradient(
    from var(--aurora-angle, 0deg) at 50% 50%,
    transparent 0deg,
    rgba(139, 92, 246, 0.08) 60deg,
    transparent 120deg,
    rgba(244, 63, 94, 0.05) 180deg,
    transparent 240deg,
    rgba(139, 92, 246, 0.06) 300deg,
    transparent 360deg
  );
}

@media (prefers-reduced-motion: reduce) {
  .aurora::before {
    animation: none;
  }
}

/* ── Grid Pattern Overlay ── */
.grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 1;
}

/* ── Dot Grid Pattern (for light sections) ── */
.dot-pattern {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--slate-300) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/* ── Mesh Gradient Backgrounds ── */
.mesh-gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.mesh-gradient--green {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(74, 222, 128, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(6, 182, 212, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 80%, rgba(52, 211, 153, 0.05) 0%, transparent 50%);
}

.mesh-gradient--violet {
  background:
    radial-gradient(ellipse at 30% 40%, rgba(139, 92, 246, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(244, 63, 94, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 10%, rgba(139, 92, 246, 0.04) 0%, transparent 50%);
}

/* ── Section Bleed Transitions ── */
.section-bleed {
  position: relative;
}

.section-bleed::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, currentColor, transparent);
  pointer-events: none;
  opacity: 0.03;
}

/* ── Noise Texture (applied to hero sections) ── */
.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 2;
  opacity: 0.4;
}

/* ── Suppress atmosphere on light-themed pages ── */
[data-theme="light"] .aurora,
[data-theme="light"] .otd-grain,
[data-theme="light"] .otd-cursor-dot,
[data-theme="light"] .otd-cursor-ring {
  display: none !important;
}

/* Restore native cursor when custom cursor is suppressed */
[data-theme="light"] body,
[data-theme="light"] button,
[data-theme="light"] a,
body[data-theme="light"],
body[data-theme="light"] button,
body[data-theme="light"] a {
  cursor: auto !important;
}
body[data-theme="light"] a:hover,
body[data-theme="light"] button:hover,
body[data-theme="light"] [role="button"]:hover,
body[data-theme="light"] label:hover,
body[data-theme="light"] select:hover {
  cursor: pointer !important;
}

/* ── Dark Section Base ── */
.dark-section {
  background: var(--dark-bg);
  color: var(--dark-text);
  position: relative;
  overflow: hidden;
}