/* ============================================================
 * Hero section — soft warm aurora mesh + dot grid + phone halo
 * Loaded AFTER midnight-glass.css for the hero scope only.
 * Warm Sand light theme: subtle sand/gold/teal glows on a light bg.
 * ============================================================ */

.hero-section.layout-1 {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: 8rem;
  padding-bottom: 6rem;
}

/* ---- Layer 1: Aurora mesh — large, soft warm color blobs ---- */
.hero-section.layout-1::before {
  content: "";
  position: absolute;
  inset: -10% -5%;
  background:
    radial-gradient(ellipse 55% 50% at 20% 30%, rgba(168, 150, 95, 0.22), transparent 60%),
    radial-gradient(ellipse 45% 40% at 80% 20%, rgba(47, 184, 196, 0.16), transparent 65%),
    radial-gradient(ellipse 60% 50% at 70% 80%, rgba(185, 168, 120, 0.20), transparent 65%),
    radial-gradient(ellipse 45% 40% at 15% 90%, rgba(56, 198, 210, 0.12), transparent 70%);
  filter: blur(55px);
  opacity: 0.85;
  z-index: -2;
  animation: heroAurora 18s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes heroAurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -1.5%, 0) scale(1.05); }
  100% { transform: translate3d(-1.5%, 1.5%, 0) scale(1.02); }
}

/* ---- Layer 2: Dot grid overlay (subtle ink dots on light bg) ---- */
.hero-section.layout-1::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(42, 39, 34, 0.06) 1px, transparent 0);
  background-size: 28px 28px;
  background-position: 0 0;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 90%);
  z-index: -1;
  pointer-events: none;
}

/* ---- Layer 3: Floating decorative shapes ---- */
.hero-section.layout-1 .container {
  position: relative;
  z-index: 1;
}

.hero-section.layout-1 .container::before,
.hero-section.layout-1 .container::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.hero-section.layout-1 .container::before {
  width: 480px;
  height: 480px;
  top: -100px;
  right: -160px;
  background: radial-gradient(circle, rgba(47, 184, 196, 0.14) 0%, transparent 60%);
  filter: blur(30px);
  animation: heroFloatA 12s ease-in-out infinite alternate;
}

.hero-section.layout-1 .container::after {
  width: 380px;
  height: 380px;
  bottom: -120px;
  left: -120px;
  background: radial-gradient(circle, rgba(168, 150, 95, 0.16) 0%, transparent 60%);
  filter: blur(30px);
  animation: heroFloatB 14s ease-in-out infinite alternate;
}

@keyframes heroFloatA {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-20px, 30px); }
}
@keyframes heroFloatB {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(25px, -25px); }
}

/* ---- Layer 4: Glow halo behind the phone mockup ---- */
.hero-section.layout-1 .hero-thumb {
  position: relative;
  margin-top: 4rem;
}

@media (max-width: 991px) {
  .hero-section.layout-1 .hero-thumb {
    margin-top: 2rem;
  }
}

.hero-section.layout-1 .hero-thumb::before {
  content: "";
  position: absolute;
  inset: -30% -20%;
  background:
    radial-gradient(circle, rgba(168, 150, 95, 0.26) 0%, rgba(47, 184, 196, 0.14) 40%, transparent 70%);
  filter: blur(50px);
  z-index: -1;
  animation: heroGlow 6s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes heroGlow {
  0%   { opacity: 0.7; transform: scale(0.95); }
  100% { opacity: 1;   transform: scale(1.05); }
}

/* ---- Hero copy: tighten + ink subtitle for legibility on light bg ---- */
.hero-section.layout-1 .sub-heading {
  color: var(--mg-on-dark-72, #6E685C) !important;
  text-shadow: none;
  line-height: 1.75 !important;
  max-width: 540px;
}

/* ---- Shape-bottom SVG: blend into next section ---- */
.hero-section.layout-1 .shape-bottom {
  position: relative;
  z-index: 0;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-section.layout-1::before,
  .hero-section.layout-1 .container::before,
  .hero-section.layout-1 .container::after,
  .hero-section.layout-1 .hero-thumb::before {
    animation: none !important;
  }
}

/* ---- Mobile: tone down padding ---- */
@media (max-width: 767px) {
  .hero-section.layout-1 {
    padding-top: 6rem;
    padding-bottom: 4rem;
  }
  .hero-section.layout-1 .container::before {
    width: 320px; height: 320px; right: -120px;
  }
  .hero-section.layout-1 .container::after {
    width: 260px; height: 260px; left: -90px;
  }
}