/* DMNT Hero Animation - extracted from premium-hero.html
 * Scoped under .dmnt-hero-wrapper. Hardcoded 30s replaced with var(--dmnt-cycle, 30s).
 * Hardcoded 1140px replaced with var(--dmnt-max, 1140px).
 * Pseudo-element image rules (.hero::before / .hero::after) replaced with .dmnt-bg-day / .dmnt-bg-night
 * which receive their background-image via inline style from the widget render method.
 * Global resets (* / html / body / .page-wrap / body::before) removed.
 */

.dmnt-hero-wrapper {
  --bg-cream: #e8dccb;
  --bg-page: #ede2d0;
  --brown-deep: #2b1d11;
  --brown-rich: #3d2a1a;
  --accent-tan: #a8835c;
  --accent-tan-soft: #c8a583;
  --ink-soft: #4a3a2c;
  --white-warm: #f6efe3;
  font-family: 'Inter Tight', sans-serif;
  color: var(--brown-deep);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  display: block;
  position: relative;
}
.dmnt-hero-wrapper *, .dmnt-hero-wrapper *::before, .dmnt-hero-wrapper *::after { box-sizing: border-box; }

.dmnt-hero-wrapper .hero {
  position: relative;
  width: 100%;
  margin: 0;
  height: 100vh;
  min-height: 720px;
  max-height: none;
  overflow: hidden;
  background: #0a0e1a;
  border-radius: 0;
  box-shadow: none;
  transform: translateZ(0);
  isolation: isolate;
  display: flex;
  align-items: center;
}
.dmnt-hero-wrapper .dmnt-bg-day,
.dmnt-hero-wrapper .dmnt-bg-night {
  content: '';
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 11;
  pointer-events: none;
  will-change: opacity;
  /* Mask out ONLY the narrow sky strip above the building rooftop so the building
     stays fully visible and the sun/moon pass behind it at the horizon.
     Adjust the % stops to match your photo's rooftop line. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 45%, #000 55%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, transparent 45%, #000 55%, #000 100%);
}
.dmnt-hero-wrapper .dmnt-bg-day {
  animation: dmntDayFade var(--dmnt-cycle, 30s) linear infinite;
}
.dmnt-hero-wrapper .dmnt-bg-night {
  animation: dmntNightFade var(--dmnt-cycle, 30s) linear infinite;
}
/* Smooth crossfade between the two building photos in sync with sky cycle */
@keyframes dmntDayFade {
  0%, 45%   { opacity: 1; }
  60%       { opacity: 0.55; }
  72%, 100% { opacity: 0; }
}
@keyframes dmntNightFade {
  0%, 50%   { opacity: 0; }
  60%       { opacity: 0.5; }
  75%, 100% { opacity: 1; }
}
.dmnt-hero-wrapper .hero.paused .dmnt-bg-day,
.dmnt-hero-wrapper .hero.paused .dmnt-bg-night { animation-play-state: paused; }

/* Building cutout layers — sit on top of the entire sky scene so sun/moon/birds/clouds always appear behind the building silhouette */
.dmnt-hero-wrapper .dmnt-cutout {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 13;
  pointer-events: none;
  will-change: opacity;
}
.dmnt-hero-wrapper .dmnt-cutout-day {
  animation: dmntDayFade var(--dmnt-cycle, 30s) linear infinite;
}
.dmnt-hero-wrapper .dmnt-cutout-night {
  animation: dmntNightFade var(--dmnt-cycle, 30s) linear infinite;
}
.dmnt-hero-wrapper .hero.paused .dmnt-cutout-day,
.dmnt-hero-wrapper .hero.paused .dmnt-cutout-night { animation-play-state: paused; }

.dmnt-hero-wrapper .sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: background;
  animation: dmntSkyCycle var(--dmnt-cycle, 30s) linear infinite;
}
@keyframes dmntSkyCycle {
  0%   { background: linear-gradient(180deg, #1a2545 0%, #4a4a6e 28%, #d4906a 70%, #f4c896 100%); }
  8%   { background: linear-gradient(180deg, #2c3e6a 0%, #8a6b8a 30%, #e8a075 65%, #fad4a5 100%); }
  15%  { background: linear-gradient(180deg, #4a6a9a 0%, #98b5d4 35%, #d8d4c8 70%, #f0e4d0 100%); }
  25%  { background: linear-gradient(180deg, #4878b5 0%, #7ba8d4 35%, #b8d2e4 70%, #d0e0ec 100%); }
  40%  { background: linear-gradient(180deg, #3a5a8a 0%, #6ea0c5 35%, #a8c8e0 70%, #c8dce8 100%); }
  50%  { background: linear-gradient(180deg, #4a6a9a 0%, #b09078 40%, #d8a888 70%, #e8c8a0 100%); }
  58%  { background: linear-gradient(180deg, #3a4a7a 0%, #c87858 35%, #e89868 65%, #f4c890 100%); }
  65%  { background: linear-gradient(180deg, #2a3460 0%, #b85648 35%, #d87858 65%, #e8a878 100%); }
  70%  { background: linear-gradient(180deg, #1a1f4a 0%, #5a3a6a 40%, #8a5070 65%, #b06880 100%); }
  74%  { background: linear-gradient(180deg, #0a1230 0%, #2a2858 40%, #4a3a68 70%, #6a4868 100%); }
  78%  { background: linear-gradient(180deg, #03050f 0%, #08122a 40%, #12203a 75%, #1a2848 100%); }
  85%  { background: linear-gradient(180deg, #02040d 0%, #060f24 40%, #0e1c34 75%, #16243e 100%); }
  92%  { background: linear-gradient(180deg, #0a1830 0%, #1a3450 35%, #3a4868 70%, #5a5878 100%); }
  100% { background: linear-gradient(180deg, #1a2545 0%, #4a4a6e 28%, #d4906a 70%, #f4c896 100%); }
}

.dmnt-hero-wrapper .horizon {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: dmntHorizonGlow var(--dmnt-cycle, 30s) linear infinite;
}
@keyframes dmntHorizonGlow {
  0%   { background: linear-gradient(180deg, transparent 0%, rgba(255, 180, 140, 0.4) 70%, rgba(255, 200, 160, 0.5) 100%); }
  15%  { background: linear-gradient(180deg, transparent 50%, rgba(255, 220, 180, 0.2) 100%); }
  30%, 45% { background: linear-gradient(180deg, transparent 60%, rgba(220, 230, 240, 0.1) 100%); }
  58%  { background: linear-gradient(180deg, transparent 30%, rgba(255, 160, 100, 0.5) 80%, rgba(255, 130, 80, 0.6) 100%); }
  65%  { background: linear-gradient(180deg, transparent 30%, rgba(255, 120, 80, 0.6) 70%, rgba(220, 80, 60, 0.7) 100%); }
  72%  { background: linear-gradient(180deg, transparent 50%, rgba(160, 80, 120, 0.3) 100%); }
  78%, 88% { background: linear-gradient(180deg, transparent 0%, transparent 100%); }
  95%  { background: linear-gradient(180deg, transparent 40%, rgba(255, 150, 110, 0.3) 90%, rgba(255, 180, 130, 0.4) 100%); }
  100% { background: linear-gradient(180deg, transparent 0%, rgba(255, 180, 140, 0.4) 70%, rgba(255, 200, 160, 0.5) 100%); }
}

.dmnt-hero-wrapper .sun-system {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity;
  animation: dmntSunArc var(--dmnt-cycle, 30s) linear infinite;
}

.dmnt-hero-wrapper .sun-scatter {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 700px;
  margin: -350px 0 0 -350px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(255, 240, 200, 0.18) 0%,
    rgba(255, 220, 170, 0.12) 25%,
    rgba(255, 200, 140, 0.06) 50%,
    transparent 70%);
  filter: blur(20px);
  animation: dmntSunScatterColor var(--dmnt-cycle, 30s) linear infinite;
  mix-blend-mode: screen;
}

.dmnt-hero-wrapper .sun-bloom {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  border-radius: 50%;
  animation: dmntSunBloomColor var(--dmnt-cycle, 30s) linear infinite;
  filter: blur(8px);
  mix-blend-mode: screen;
}

.dmnt-hero-wrapper .sun-corona {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border-radius: 50%;
  animation: dmntSunCoronaColor var(--dmnt-cycle, 30s) linear infinite;
  filter: blur(4px);
  mix-blend-mode: screen;
}

.dmnt-hero-wrapper .sun-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70px;
  height: 70px;
  margin: -35px 0 0 -35px;
  border-radius: 50%;
  animation: dmntSunCoreColor var(--dmnt-cycle, 30s) linear infinite, dmntSunCoreSize var(--dmnt-cycle, 30s) linear infinite;
  filter: blur(0.5px);
  box-shadow: 0 0 50px 10px rgba(255, 250, 230, 0.5);
}

.dmnt-hero-wrapper .sun-streak {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 4px;
  margin: -2px 0 0 -300px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 230, 180, 0.15) 35%,
    rgba(255, 240, 200, 0.4) 50%,
    rgba(255, 230, 180, 0.15) 65%,
    transparent 100%);
  filter: blur(2px);
  animation: dmntSunStreakFade var(--dmnt-cycle, 30s) linear infinite;
  mix-blend-mode: screen;
  border-radius: 50%;
}

@keyframes dmntSunScatterColor {
  0%, 5% { background: radial-gradient(circle, rgba(255, 140, 90, 0.3) 0%, rgba(255, 100, 60, 0.15) 30%, transparent 70%); }
  15%    { background: radial-gradient(circle, rgba(255, 200, 140, 0.25) 0%, rgba(255, 180, 110, 0.12) 30%, transparent 70%); }
  30%, 45% { background: radial-gradient(circle, rgba(255, 245, 210, 0.2) 0%, rgba(255, 230, 180, 0.1) 30%, transparent 70%); }
  55%    { background: radial-gradient(circle, rgba(255, 200, 130, 0.3) 0%, rgba(255, 150, 90, 0.15) 30%, transparent 70%); }
  63%    { background: radial-gradient(circle, rgba(255, 140, 80, 0.4) 0%, rgba(220, 90, 50, 0.2) 30%, transparent 70%); }
  68%    { background: radial-gradient(circle, rgba(220, 80, 50, 0.35) 0%, rgba(180, 50, 30, 0.18) 30%, transparent 70%); }
  72%, 100% { background: radial-gradient(circle, rgba(180, 60, 40, 0.2) 0%, transparent 70%); }
}

@keyframes dmntSunBloomColor {
  0%, 5% { background: radial-gradient(circle, rgba(255, 180, 130, 0.6) 0%, rgba(255, 130, 80, 0.4) 40%, rgba(255, 90, 50, 0.15) 70%, transparent 100%); }
  15% { background: radial-gradient(circle, rgba(255, 220, 170, 0.65) 0%, rgba(255, 190, 130, 0.45) 40%, rgba(255, 150, 90, 0.18) 70%, transparent 100%); }
  30%, 45% { background: radial-gradient(circle, rgba(255, 250, 230, 0.7) 0%, rgba(255, 240, 200, 0.5) 30%, rgba(255, 220, 160, 0.25) 60%, transparent 100%); }
  55% { background: radial-gradient(circle, rgba(255, 220, 160, 0.7) 0%, rgba(255, 170, 100, 0.5) 35%, rgba(255, 130, 70, 0.25) 70%, transparent 100%); }
  63% { background: radial-gradient(circle, rgba(255, 150, 90, 0.75) 0%, rgba(255, 90, 50, 0.55) 35%, rgba(220, 60, 30, 0.3) 65%, transparent 100%); }
  68% { background: radial-gradient(circle, rgba(255, 100, 60, 0.7) 0%, rgba(220, 60, 30, 0.5) 35%, rgba(180, 40, 20, 0.25) 65%, transparent 100%); }
  72%, 100% { background: radial-gradient(circle, rgba(180, 50, 30, 0.4) 0%, rgba(140, 30, 15, 0.2) 50%, transparent 100%); }
}

@keyframes dmntSunCoronaColor {
  0%, 5% { background: radial-gradient(circle, rgba(255, 230, 190, 0.9) 0%, rgba(255, 180, 120, 0.7) 30%, rgba(255, 130, 80, 0.4) 60%, rgba(255, 100, 60, 0.15) 85%, transparent 100%); }
  15% { background: radial-gradient(circle, rgba(255, 245, 220, 0.95) 0%, rgba(255, 220, 170, 0.75) 30%, rgba(255, 190, 130, 0.45) 60%, rgba(255, 150, 90, 0.18) 85%, transparent 100%); }
  30%, 45% { background: radial-gradient(circle, rgba(255, 255, 250, 1) 0%, rgba(255, 250, 220, 0.85) 25%, rgba(255, 235, 180, 0.6) 55%, rgba(255, 215, 145, 0.3) 80%, transparent 100%); }
  55% { background: radial-gradient(circle, rgba(255, 240, 200, 0.95) 0%, rgba(255, 200, 140, 0.7) 30%, rgba(255, 160, 100, 0.45) 60%, rgba(255, 120, 70, 0.2) 85%, transparent 100%); }
  63% { background: radial-gradient(circle, rgba(255, 200, 140, 0.95) 0%, rgba(255, 140, 80, 0.75) 30%, rgba(255, 90, 50, 0.5) 60%, rgba(220, 60, 30, 0.25) 85%, transparent 100%); }
  68% { background: radial-gradient(circle, rgba(255, 150, 90, 0.9) 0%, rgba(255, 100, 60, 0.7) 30%, rgba(220, 60, 30, 0.45) 60%, rgba(180, 40, 20, 0.2) 85%, transparent 100%); }
  72%, 100% { background: radial-gradient(circle, rgba(220, 80, 50, 0.7) 0%, rgba(180, 40, 20, 0.4) 50%, transparent 100%); }
}

@keyframes dmntSunCoreColor {
  0%, 5% { background: radial-gradient(circle, #fff5e0 0%, #ffd89a 40%, #ff9c5c 75%, #ff7040 100%); }
  15% { background: radial-gradient(circle, #ffffff 0%, #fff0c8 40%, #ffc888 75%, #ffa060 100%); }
  30%, 45% { background: radial-gradient(circle, #ffffff 0%, #fffcf0 50%, #fff4d4 80%, #ffe6b0 100%); }
  55% { background: radial-gradient(circle, #fffaf0 0%, #ffe8b8 40%, #ffb478 75%, #ff8048 100%); }
  63% { background: radial-gradient(circle, #fff0d8 0%, #ffc888 35%, #ff7848 70%, #e04a28 100%); }
  68% { background: radial-gradient(circle, #ffd8b0 0%, #ff9050 35%, #d04020 70%, #a02810 100%); }
  72%, 100% { background: radial-gradient(circle, #ff9050 0%, #c83820 50%, #802010 100%); }
}

@keyframes dmntSunCoreSize {
  0%, 8%   { width: 75px; height: 75px; margin: -37.5px 0 0 -37.5px; }
  20%      { width: 65px; height: 65px; margin: -32.5px 0 0 -32.5px; }
  35%, 45% { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  58%      { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
  63%      { width: 85px; height: 85px; margin: -42.5px 0 0 -42.5px; }
  66%      { width: 95px; height: 95px; margin: -47.5px 0 0 -47.5px; }
  69%, 100% { width: 90px; height: 90px; margin: -45px 0 0 -45px; }
}

@keyframes dmntSunStreakFade {
  0%, 25%   { opacity: 0; }
  35%, 50%  { opacity: 0.7; }
  58%       { opacity: 1; }
  63%       { opacity: 1.2; }
  68%       { opacity: 0.6; }
  72%, 100% { opacity: 0; }
}

@keyframes dmntSunArc {
  0%   { transform: translate(-700px, 280px); opacity: 0; }
  3%   { transform: translate(-680px, 240px); opacity: 0.7; }
  8%   { transform: translate(-580px, 100px); opacity: 1; }
  20%  { transform: translate(-360px, -100px); opacity: 1; }
  35%  { transform: translate(-100px, -260px); opacity: 1; }
  40%  { transform: translate(60px, -300px); opacity: 1; }
  50%  { transform: translate(280px, -240px); opacity: 1; }
  58%  { transform: translate(440px, -100px); opacity: 1; }
  63%  { transform: translate(540px, 40px); opacity: 1; }
  66%  { transform: translate(600px, 160px); opacity: 0.95; }
  69%  { transform: translate(640px, 280px); opacity: 0.5; }
  72%, 95% { transform: translate(700px, 380px); opacity: 0; }
  100% { transform: translate(-700px, 280px); opacity: 0; }
}

.dmnt-hero-wrapper .moon-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity;
  opacity: 0;
  animation: dmntMoonArc var(--dmnt-cycle, 30s) linear infinite, dmntMoonOpacity var(--dmnt-cycle, 30s) linear infinite;
}
/* Moon follows the same arc path as the sun, just shifted to the night window */
@keyframes dmntMoonArc {
  0%, 60%   { transform: translate(-700px, 280px) scale(1); }
  63%       { transform: translate(-680px, 240px) scale(1); }
  66%       { transform: translate(-580px, 100px) scale(1); }
  70%       { transform: translate(-360px, -100px) scale(1); }
  75%       { transform: translate(-100px, -260px) scale(1.05); }
  78%       { transform: translate(60px, -300px) scale(1.05); }
  82%       { transform: translate(280px, -240px) scale(1); }
  86%       { transform: translate(440px, -100px) scale(1); }
  89%       { transform: translate(540px, 40px) scale(1); }
  92%       { transform: translate(600px, 160px) scale(0.95); }
  95%       { transform: translate(640px, 280px) scale(0.9); }
  97%, 100% { transform: translate(700px, 380px) scale(0.85); }
}
@keyframes dmntMoonOpacity {
  0%, 60%  { opacity: 0; }
  63%      { opacity: 0.7; }
  68%, 92% { opacity: 1; }
  95%      { opacity: 0.5; }
  97%, 100% { opacity: 0; }
}

.dmnt-hero-wrapper .moon {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #faf6e8 0%, #ede6d0 40%, #c8c0a8 75%, #8a8270 100%);
  box-shadow:
    0 0 50px rgba(245, 240, 220, 0.45),
    0 0 100px rgba(220, 220, 240, 0.22),
    inset -10px -8px 26px rgba(40, 40, 60, 0.45),
    inset 6px 5px 16px rgba(255, 255, 240, 0.3);
  animation: dmntMoonFloat 8s ease-in-out infinite;
}
.dmnt-hero-wrapper .moon::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(140, 134, 120, 0.5);
  box-shadow:
    inset -2px -2px 4px rgba(80, 76, 65, 0.6),
    inset 2px 2px 4px rgba(220, 215, 195, 0.3);
  top: 28%; left: 24%;
}
.dmnt-hero-wrapper .moon::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(150, 142, 128, 0.45);
  box-shadow:
    inset -1px -1px 3px rgba(80, 76, 65, 0.55),
    22px 13px 0 -2px rgba(140, 134, 120, 0.4),
    7px 32px 0 -3px rgba(140, 134, 120, 0.4),
    -9px 21px 0 -4px rgba(140, 134, 120, 0.35);
  top: 58%; left: 38%;
}
.dmnt-hero-wrapper .moon-glow {
  position: absolute;
  top: -55px;
  left: -55px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 240, 220, 0.18) 0%, rgba(220, 220, 240, 0.08) 40%, transparent 70%);
  pointer-events: none;
  animation: dmntMoonHaloPulse 6s ease-in-out infinite;
}
@keyframes dmntMoonHaloPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.06); opacity: 1; }
}
@keyframes dmntMoonFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -3px; }
}

.dmnt-hero-wrapper .stars-far,
.dmnt-hero-wrapper .stars-mid,
.dmnt-hero-wrapper .stars-near {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}
.dmnt-hero-wrapper .stars-far {
  background-image:
    radial-gradient(0.5px 0.5px at 4% 8%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 12% 14%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 19% 6%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 27% 18%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 34% 9%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 41% 16%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 48% 4%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 55% 12%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 63% 20%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 71% 7%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 78% 15%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 86% 4%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 94% 13%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 8% 25%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 17% 30%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 24% 27%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 31% 33%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 38% 25%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 46% 32%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 53% 28%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 60% 34%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 68% 27%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 76% 31%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 83% 24%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 91% 29%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 3% 38%, rgba(255,255,255,0.6), transparent),
    radial-gradient(0.5px 0.5px at 11% 42%, rgba(255,255,255,0.6), transparent),
    radial-gradient(0.5px 0.5px at 18% 36%, rgba(255,255,255,0.6), transparent),
    radial-gradient(0.5px 0.5px at 26% 44%, rgba(255,255,255,0.6), transparent),
    radial-gradient(0.5px 0.5px at 33% 39%, rgba(255,255,255,0.6), transparent),
    radial-gradient(0.5px 0.5px at 42% 46%, rgba(255,255,255,0.6), transparent),
    radial-gradient(0.5px 0.5px at 49% 38%, rgba(255,255,255,0.6), transparent),
    radial-gradient(0.5px 0.5px at 57% 43%, rgba(255,255,255,0.6), transparent),
    radial-gradient(0.5px 0.5px at 65% 36%, rgba(255,255,255,0.6), transparent),
    radial-gradient(0.5px 0.5px at 72% 41%, rgba(255,255,255,0.6), transparent),
    radial-gradient(0.5px 0.5px at 79% 47%, rgba(255,255,255,0.6), transparent),
    radial-gradient(0.5px 0.5px at 86% 39%, rgba(255,255,255,0.6), transparent),
    radial-gradient(0.5px 0.5px at 93% 44%, rgba(255,255,255,0.6), transparent),
    radial-gradient(0.5px 0.5px at 6% 3%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 15% 21%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 29% 11%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 44% 22%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 58% 5%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 67% 14%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 81% 8%, rgba(255,255,255,0.7), transparent),
    radial-gradient(0.5px 0.5px at 89% 17%, rgba(255,255,255,0.7), transparent);
  animation: dmntStarsFar var(--dmnt-cycle, 30s) linear infinite;
}
.dmnt-hero-wrapper .stars-mid {
  background-image:
    radial-gradient(1px 1px at 7% 11%, #fff, transparent),
    radial-gradient(1px 1px at 22% 19%, #fff, transparent),
    radial-gradient(1px 1px at 37% 8%, #fff, transparent),
    radial-gradient(1px 1px at 51% 17%, #fff, transparent),
    radial-gradient(1px 1px at 64% 6%, #fff, transparent),
    radial-gradient(1px 1px at 79% 14%, #fff, transparent),
    radial-gradient(1px 1px at 88% 22%, #fff, transparent),
    radial-gradient(1px 1px at 14% 26%, #fff, transparent),
    radial-gradient(1px 1px at 32% 30%, #fff, transparent),
    radial-gradient(1px 1px at 47% 24%, #fff, transparent),
    radial-gradient(1px 1px at 65% 31%, #fff, transparent),
    radial-gradient(1px 1px at 82% 28%, #fff, transparent),
    radial-gradient(1px 1px at 5% 36%, #fff, transparent),
    radial-gradient(1px 1px at 19% 41%, #fff, transparent),
    radial-gradient(1px 1px at 28% 47%, #fff, transparent),
    radial-gradient(1px 1px at 39% 38%, #fff, transparent),
    radial-gradient(1px 1px at 52% 45%, #fff, transparent),
    radial-gradient(1px 1px at 63% 36%, #fff, transparent),
    radial-gradient(1px 1px at 74% 43%, #fff, transparent),
    radial-gradient(1px 1px at 86% 47%, #fff, transparent),
    radial-gradient(1px 1px at 92% 39%, #fff, transparent),
    radial-gradient(1px 1px at 11% 5%, rgba(220, 230, 255, 0.95), transparent),
    radial-gradient(1px 1px at 25% 13%, rgba(255, 240, 220, 0.95), transparent),
    radial-gradient(1px 1px at 43% 4%, rgba(220, 230, 255, 0.95), transparent),
    radial-gradient(1px 1px at 56% 21%, rgba(255, 240, 220, 0.95), transparent),
    radial-gradient(1px 1px at 71% 9%, rgba(220, 230, 255, 0.95), transparent),
    radial-gradient(1px 1px at 84% 18%, #fff, transparent),
    radial-gradient(1px 1px at 96% 6%, #fff, transparent);
  animation: dmntStarsMid var(--dmnt-cycle, 30s) linear infinite, dmntStarTwinkleMid 4s ease-in-out infinite;
}
.dmnt-hero-wrapper .stars-near {
  background-image:
    radial-gradient(1.5px 1.5px at 10% 13%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 26% 7%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 43% 19%, #fff, transparent),
    radial-gradient(2px 2px at 58% 9%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 73% 23%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 89% 11%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 19% 33%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 41% 28%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 71% 35%, #fff, transparent),
    radial-gradient(2px 2px at 14% 4%, rgba(255, 250, 230, 1), transparent),
    radial-gradient(1.8px 1.8px at 38% 14%, rgba(220, 235, 255, 1), transparent),
    radial-gradient(1.5px 1.5px at 52% 22%, #fff, transparent),
    radial-gradient(2px 2px at 67% 5%, rgba(255, 240, 210, 1), transparent),
    radial-gradient(1.8px 1.8px at 81% 17%, rgba(230, 240, 255, 1), transparent),
    radial-gradient(1.5px 1.5px at 4% 41%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 28% 47%, rgba(255, 245, 220, 1), transparent),
    radial-gradient(2px 2px at 49% 36%, rgba(220, 235, 255, 1), transparent),
    radial-gradient(1.5px 1.5px at 63% 44%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 86% 38%, #fff, transparent),
    radial-gradient(2.2px 2.2px at 33% 9%, rgba(255, 250, 230, 1), transparent),
    radial-gradient(2.2px 2.2px at 76% 27%, rgba(255, 250, 230, 1), transparent);
  animation: dmntStarsNear var(--dmnt-cycle, 30s) linear infinite, dmntStarTwinkleNear 3s ease-in-out infinite;
}
@keyframes dmntStarsFar {
  0%, 60%  { opacity: 0; }
  68%      { opacity: 0.5; }
  74%, 90% { opacity: 0.9; }
  95%, 100% { opacity: 0; }
}
@keyframes dmntStarsMid {
  0%, 62%  { opacity: 0; }
  70%      { opacity: 0.6; }
  76%, 88% { opacity: 1; }
  93%, 100% { opacity: 0; }
}
@keyframes dmntStarsNear {
  0%, 65%  { opacity: 0; }
  72%      { opacity: 0.7; }
  78%, 86% { opacity: 1; }
  91%, 100% { opacity: 0; }
}
@keyframes dmntStarTwinkleMid {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(0.5); }
}
@keyframes dmntStarTwinkleNear {
  0%, 100% { filter: brightness(1); }
  33%      { filter: brightness(0.4); }
  66%      { filter: brightness(1.1); }
}

.dmnt-hero-wrapper .shooting-star {
  position: absolute;
  top: 15%;
  left: -100px;
  width: 120px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
  z-index: 2;
  opacity: 0;
  transform: rotate(15deg);
  pointer-events: none;
  animation: dmntShootingStar var(--dmnt-cycle, 30s) linear infinite;
  will-change: transform, opacity;
}
@keyframes dmntShootingStar {
  0%, 76%, 100% { opacity: 0; transform: translate(0, 0) rotate(15deg); }
  77% { opacity: 0; transform: translate(0, 0) rotate(15deg); }
  77.5% { opacity: 1; transform: translate(0, 0) rotate(15deg); }
  79% { opacity: 1; transform: translate(800px, 200px) rotate(15deg); }
  79.5%, 100% { opacity: 0; transform: translate(900px, 230px) rotate(15deg); }
}

.dmnt-hero-wrapper .clouds {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  animation: dmntCloudOpacity var(--dmnt-cycle, 30s) linear infinite;
  will-change: opacity;
}
@keyframes dmntCloudOpacity {
  0%       { opacity: 0.6; }
  15%      { opacity: 0.9; }
  35%, 50% { opacity: 1; }
  65%      { opacity: 0.65; }
  72%      { opacity: 0.3; }
  78%, 88% { opacity: 0.15; }
  95%      { opacity: 0.5; }
  100%     { opacity: 0.6; }
}
.dmnt-hero-wrapper .clouds-tint {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: overlay;
  animation: dmntCloudTint var(--dmnt-cycle, 30s) linear infinite;
}
@keyframes dmntCloudTint {
  0%, 8%   { background: rgba(255, 180, 130, 0.5); }
  15%, 25% { background: rgba(255, 235, 200, 0.2); }
  35%, 48% { background: rgba(255, 255, 255, 0); }
  58%      { background: rgba(255, 160, 100, 0.4); }
  65%      { background: rgba(255, 100, 70, 0.5); }
  72%      { background: rgba(120, 80, 130, 0.4); }
  78%, 88% { background: rgba(40, 50, 80, 0.3); }
  95%      { background: rgba(180, 130, 110, 0.4); }
  100%     { background: rgba(255, 180, 130, 0.5); }
}

.dmnt-hero-wrapper .cloud { position: absolute; will-change: transform; }
.dmnt-hero-wrapper .cloud-shape { position: absolute; background: rgba(255, 255, 255, 0.78); border-radius: 50%; filter: blur(8px); }

.dmnt-hero-wrapper .cloud-1 { top: 12%; width: 380px; height: 50px; animation: dmntDrift1 110s linear infinite; }
.dmnt-hero-wrapper .cloud-1 .s1 { width: 240px; height: 18px; left: 0; top: 14px; opacity: 0.5; filter: blur(12px); }
.dmnt-hero-wrapper .cloud-1 .s2 { width: 180px; height: 14px; left: 60px; top: 10px; opacity: 0.6; filter: blur(10px); }
.dmnt-hero-wrapper .cloud-1 .s3 { width: 140px; height: 12px; left: 140px; top: 18px; opacity: 0.5; filter: blur(11px); }

.dmnt-hero-wrapper .cloud-2 { top: 22%; width: 320px; height: 80px; animation: dmntDrift2 130s linear infinite; animation-delay: -50s; }
.dmnt-hero-wrapper .cloud-2 .s1 { width: 180px; height: 60px; left: 0; top: 20px; opacity: 0.7; filter: blur(15px); border-radius: 60% 40% 50% 50%; }
.dmnt-hero-wrapper .cloud-2 .s2 { width: 140px; height: 70px; left: 80px; top: 0; opacity: 0.85; filter: blur(13px); border-radius: 50% 60% 40% 50%; }
.dmnt-hero-wrapper .cloud-2 .s3 { width: 120px; height: 55px; left: 160px; top: 15px; opacity: 0.7; filter: blur(14px); border-radius: 50% 50% 60% 40%; }
.dmnt-hero-wrapper .cloud-2 .s4 { width: 100px; height: 48px; left: 220px; top: 25px; opacity: 0.6; filter: blur(16px); border-radius: 60% 40% 50% 60%; }

.dmnt-hero-wrapper .cloud-3 { top: 30%; width: 240px; height: 40px; animation: dmntDrift3 200s linear infinite; animation-delay: -100s; opacity: 0.55; }
.dmnt-hero-wrapper .cloud-3 .s1 { width: 140px; height: 12px; left: 0; top: 14px; opacity: 0.5; filter: blur(11px); }
.dmnt-hero-wrapper .cloud-3 .s2 { width: 100px; height: 10px; left: 80px; top: 18px; opacity: 0.4; filter: blur(13px); }
.dmnt-hero-wrapper .cloud-3 .s3 { width: 80px; height: 8px; left: 160px; top: 22px; opacity: 0.4; filter: blur(12px); }

.dmnt-hero-wrapper .cloud-4 { top: 5%; width: 360px; height: 90px; animation: dmntDrift4 140s linear infinite; animation-delay: -25s; }
.dmnt-hero-wrapper .cloud-4 .s1 { width: 200px; height: 70px; left: 0; top: 18px; opacity: 0.75; filter: blur(14px); border-radius: 55% 45% 50% 50%; }
.dmnt-hero-wrapper .cloud-4 .s2 { width: 150px; height: 80px; left: 90px; top: 0; opacity: 0.9; filter: blur(12px); border-radius: 50% 55% 45% 50%; }
.dmnt-hero-wrapper .cloud-4 .s3 { width: 130px; height: 65px; left: 180px; top: 12px; opacity: 0.78; filter: blur(13px); border-radius: 50% 50% 55% 45%; }
.dmnt-hero-wrapper .cloud-4 .s4 { width: 110px; height: 55px; left: 250px; top: 20px; opacity: 0.65; filter: blur(15px); border-radius: 55% 45% 55% 45%; }

.dmnt-hero-wrapper .cloud-5 { top: 18%; width: 200px; height: 35px; animation: dmntDrift5 150s linear infinite; animation-delay: -75s; opacity: 0.65; }
.dmnt-hero-wrapper .cloud-5 .s1 { width: 120px; height: 14px; left: 0; top: 8px; opacity: 0.6; filter: blur(11px); }
.dmnt-hero-wrapper .cloud-5 .s2 { width: 90px; height: 18px; left: 60px; top: 4px; opacity: 0.7; filter: blur(10px); border-radius: 60% 40% 50% 50%; }
.dmnt-hero-wrapper .cloud-5 .s3 { width: 70px; height: 12px; left: 120px; top: 12px; opacity: 0.5; filter: blur(12px); }

@keyframes dmntDrift1 { from { transform: translateX(-400px); } to { transform: translateX(110%); } }
@keyframes dmntDrift2 { from { transform: translateX(-340px); } to { transform: translateX(110%); } }
@keyframes dmntDrift3 { from { transform: translateX(-260px); } to { transform: translateX(110%); } }
@keyframes dmntDrift4 { from { transform: translateX(-380px); } to { transform: translateX(110%); } }
@keyframes dmntDrift5 { from { transform: translateX(-220px); } to { transform: translateX(110%); } }
@keyframes dmntDrift6 { from { transform: translateX(110%); } to { transform: translateX(-420px); } }
@keyframes dmntDrift7 { from { transform: translateX(-300px); } to { transform: translateX(110%); } }
@keyframes dmntDrift8 { from { transform: translateX(110%); } to { transform: translateX(-360px); } }
@keyframes dmntDrift9 { from { transform: translateX(-200px); } to { transform: translateX(110%); } }

/* Extra clouds (6-9) for denser sky */
.dmnt-hero-wrapper .cloud-6 { top: 8%; width: 420px; height: 95px; animation: dmntDrift6 175s linear infinite; animation-delay: -90s; opacity: 0.85; }
.dmnt-hero-wrapper .cloud-6 .s1 { width: 230px; height: 75px; left: 0; top: 12px; opacity: 0.7; filter: blur(16px); border-radius: 60% 40% 50% 50%; }
.dmnt-hero-wrapper .cloud-6 .s2 { width: 180px; height: 85px; left: 110px; top: 0; opacity: 0.85; filter: blur(13px); border-radius: 50% 60% 45% 50%; }
.dmnt-hero-wrapper .cloud-6 .s3 { width: 150px; height: 60px; left: 220px; top: 18px; opacity: 0.75; filter: blur(14px); border-radius: 50% 50% 60% 45%; }
.dmnt-hero-wrapper .cloud-6 .s4 { width: 120px; height: 50px; left: 300px; top: 28px; opacity: 0.6; filter: blur(17px); border-radius: 60% 40% 50% 60%; }

.dmnt-hero-wrapper .cloud-7 { top: 26%; width: 280px; height: 38px; animation: dmntDrift7 220s linear infinite; animation-delay: -130s; opacity: 0.45; }
.dmnt-hero-wrapper .cloud-7 .s1 { width: 160px; height: 14px; left: 0; top: 10px; opacity: 0.55; filter: blur(13px); }
.dmnt-hero-wrapper .cloud-7 .s2 { width: 120px; height: 12px; left: 90px; top: 16px; opacity: 0.45; filter: blur(15px); }
.dmnt-hero-wrapper .cloud-7 .s3 { width: 100px; height: 10px; left: 180px; top: 20px; opacity: 0.4; filter: blur(14px); }

.dmnt-hero-wrapper .cloud-8 { top: 14%; width: 340px; height: 70px; animation: dmntDrift8 165s linear infinite; animation-delay: -40s; }
.dmnt-hero-wrapper .cloud-8 .s1 { width: 190px; height: 55px; left: 0; top: 14px; opacity: 0.7; filter: blur(15px); border-radius: 55% 45% 55% 45%; }
.dmnt-hero-wrapper .cloud-8 .s2 { width: 150px; height: 65px; left: 90px; top: 0; opacity: 0.85; filter: blur(13px); border-radius: 50% 55% 50% 45%; }
.dmnt-hero-wrapper .cloud-8 .s3 { width: 130px; height: 50px; left: 170px; top: 12px; opacity: 0.7; filter: blur(14px); border-radius: 55% 50% 45% 50%; }
.dmnt-hero-wrapper .cloud-8 .s4 { width: 105px; height: 45px; left: 240px; top: 20px; opacity: 0.55; filter: blur(16px); border-radius: 50% 50% 55% 45%; }

.dmnt-hero-wrapper .cloud-9 { top: 32%; width: 220px; height: 32px; animation: dmntDrift9 240s linear infinite; animation-delay: -160s; opacity: 0.4; }
.dmnt-hero-wrapper .cloud-9 .s1 { width: 130px; height: 12px; left: 0; top: 8px; opacity: 0.5; filter: blur(12px); }
.dmnt-hero-wrapper .cloud-9 .s2 { width: 95px; height: 10px; left: 70px; top: 14px; opacity: 0.4; filter: blur(13px); }
.dmnt-hero-wrapper .cloud-9 .s3 { width: 75px; height: 8px; left: 130px; top: 18px; opacity: 0.4; filter: blur(12px); }

/* Milky Way diffuse band — visible only at deep night */
.dmnt-hero-wrapper .milky-way {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 70% 12% at 50% 18%, rgba(180, 200, 255, 0.18) 0%, rgba(180, 200, 255, 0.08) 40%, transparent 70%),
    radial-gradient(ellipse 50% 8% at 60% 22%, rgba(220, 200, 255, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 6% at 35% 14%, rgba(200, 220, 255, 0.1) 0%, transparent 70%);
  filter: blur(2px);
  mix-blend-mode: screen;
  transform: rotate(-8deg);
  animation: dmntMilkyWay var(--dmnt-cycle, 30s) linear infinite;
}
@keyframes dmntMilkyWay {
  0%, 65%   { opacity: 0; }
  74%       { opacity: 0.7; }
  78%, 88%  { opacity: 1; }
  93%, 100% { opacity: 0; }
}

/* Extra shooting stars at different angles/times */
.dmnt-hero-wrapper .shooting-star-2 {
  top: 8%;
  left: -100px;
  width: 140px;
  transform: rotate(22deg);
  animation: dmntShootingStar2 var(--dmnt-cycle, 30s) linear infinite;
}
@keyframes dmntShootingStar2 {
  0%, 81%, 100% { opacity: 0; transform: translate(0, 0) rotate(22deg); }
  81.5% { opacity: 0; transform: translate(0, 0) rotate(22deg); }
  82% { opacity: 1; transform: translate(0, 0) rotate(22deg); }
  84% { opacity: 1; transform: translate(700px, 280px) rotate(22deg); }
  84.5%, 100% { opacity: 0; transform: translate(800px, 320px) rotate(22deg); }
}
.dmnt-hero-wrapper .shooting-star-3 {
  top: 22%;
  left: -100px;
  width: 100px;
  transform: rotate(8deg);
  animation: dmntShootingStar3 var(--dmnt-cycle, 30s) linear infinite;
}
@keyframes dmntShootingStar3 {
  0%, 86%, 100% { opacity: 0; transform: translate(0, 0) rotate(8deg); }
  86.5% { opacity: 0; transform: translate(0, 0) rotate(8deg); }
  87% { opacity: 1; transform: translate(0, 0) rotate(8deg); }
  88.5% { opacity: 1; transform: translate(900px, 130px) rotate(8deg); }
  89%, 100% { opacity: 0; transform: translate(1000px, 150px) rotate(8deg); }
}

.dmnt-hero-wrapper .hero.paused .cloud-6,
.dmnt-hero-wrapper .hero.paused .cloud-7,
.dmnt-hero-wrapper .hero.paused .cloud-8,
.dmnt-hero-wrapper .hero.paused .cloud-9,
.dmnt-hero-wrapper .hero.paused .milky-way,
.dmnt-hero-wrapper .hero.paused .shooting-star-2,
.dmnt-hero-wrapper .hero.paused .shooting-star-3 { animation-play-state: paused; }

.dmnt-hero-wrapper .birds {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  animation: dmntBirdsVisible var(--dmnt-cycle, 30s) linear infinite;
}
@keyframes dmntBirdsVisible {
  0%, 8%   { opacity: 0; }
  14%      { opacity: 0.85; }
  25%, 55% { opacity: 1; }
  65%      { opacity: 0.6; }
  72%      { opacity: 0; }
  78%, 92% { opacity: 0; }
  97%      { opacity: 0.5; }
  100%     { opacity: 0; }
}
.dmnt-hero-wrapper .bird { position: absolute; will-change: transform; }
.dmnt-hero-wrapper .bird svg { width: 100%; height: 100%; overflow: visible; }
/* Realistic flapping via wing rotation. Left wing rotates clockwise on downstroke,
   right wing mirrors. Pivot is at the body (viewBox 0,12). */
.dmnt-hero-wrapper .bw {
  transform-box: view-box;
  transform-origin: 0px 12px;
  will-change: transform;
}
.dmnt-hero-wrapper .bw-l { transform-origin: 0px 12px; }
.dmnt-hero-wrapper .bw-r { transform-origin: 0px 12px; }
@keyframes dmntFlapL {
  0%   { transform: rotate(-35deg); }
  25%  { transform: rotate(-5deg); }
  50%  { transform: rotate(45deg); }
  75%  { transform: rotate(-5deg); }
  100% { transform: rotate(-35deg); }
}
@keyframes dmntFlapR {
  0%   { transform: rotate(35deg); }
  25%  { transform: rotate(5deg); }
  50%  { transform: rotate(-45deg); }
  75%  { transform: rotate(5deg); }
  100% { transform: rotate(35deg); }
}
@keyframes dmntFlapL2 {
  0%   { transform: rotate(-30deg); }
  20%  { transform: rotate(0deg); }
  50%  { transform: rotate(55deg); }
  80%  { transform: rotate(0deg); }
  100% { transform: rotate(-30deg); }
}
@keyframes dmntFlapR2 {
  0%   { transform: rotate(30deg); }
  20%  { transform: rotate(0deg); }
  50%  { transform: rotate(-55deg); }
  80%  { transform: rotate(0deg); }
  100% { transform: rotate(30deg); }
}
.dmnt-hero-wrapper .bird-flock { position: absolute; top: 18%; width: 200px; height: 60px; animation: dmntFlockFly 25s linear infinite; animation-delay: -8s; will-change: transform; }
@keyframes dmntFlockFly { 0% { transform: translate(110vw, 0) scale(1); } 100% { transform: translate(-200px, -40px) scale(0.7); } }
.dmnt-hero-wrapper .bird-small { position: absolute; width: 24px; height: 14px; }
.dmnt-hero-wrapper .bird-small.b1 { top: 0; left: 90px; }
.dmnt-hero-wrapper .bird-small.b2 { top: 8px; left: 70px; }
.dmnt-hero-wrapper .bird-small.b3 { top: 8px; left: 110px; }
.dmnt-hero-wrapper .bird-small.b4 { top: 16px; left: 50px; }
.dmnt-hero-wrapper .bird-small.b5 { top: 16px; left: 130px; }
.dmnt-hero-wrapper .bird-small.b6 { top: 24px; left: 30px; }
.dmnt-hero-wrapper .bird-small.b7 { top: 24px; left: 150px; }
.dmnt-hero-wrapper .bird-small svg .bw,
.dmnt-hero-wrapper .bird-small svg .bb { fill: rgba(35, 30, 25, 0.85); }
.dmnt-hero-wrapper .bird-small.b1 svg .bw-l { animation: dmntFlapL 0.45s ease-in-out infinite; }
.dmnt-hero-wrapper .bird-small.b1 svg .bw-r { animation: dmntFlapR 0.45s ease-in-out infinite; }
.dmnt-hero-wrapper .bird-small.b2 svg .bw-l { animation: dmntFlapL 0.48s ease-in-out infinite; animation-delay: -0.05s; }
.dmnt-hero-wrapper .bird-small.b2 svg .bw-r { animation: dmntFlapR 0.48s ease-in-out infinite; animation-delay: -0.05s; }
.dmnt-hero-wrapper .bird-small.b3 svg .bw-l { animation: dmntFlapL 0.46s ease-in-out infinite; animation-delay: -0.1s; }
.dmnt-hero-wrapper .bird-small.b3 svg .bw-r { animation: dmntFlapR 0.46s ease-in-out infinite; animation-delay: -0.1s; }
.dmnt-hero-wrapper .bird-small.b4 svg .bw-l { animation: dmntFlapL 0.50s ease-in-out infinite; animation-delay: -0.15s; }
.dmnt-hero-wrapper .bird-small.b4 svg .bw-r { animation: dmntFlapR 0.50s ease-in-out infinite; animation-delay: -0.15s; }
.dmnt-hero-wrapper .bird-small.b5 svg .bw-l { animation: dmntFlapL 0.47s ease-in-out infinite; animation-delay: -0.2s; }
.dmnt-hero-wrapper .bird-small.b5 svg .bw-r { animation: dmntFlapR 0.47s ease-in-out infinite; animation-delay: -0.2s; }
.dmnt-hero-wrapper .bird-small.b6 svg .bw-l { animation: dmntFlapL 0.49s ease-in-out infinite; animation-delay: -0.07s; }
.dmnt-hero-wrapper .bird-small.b6 svg .bw-r { animation: dmntFlapR 0.49s ease-in-out infinite; animation-delay: -0.07s; }
.dmnt-hero-wrapper .bird-small.b7 svg .bw-l { animation: dmntFlapL 0.46s ease-in-out infinite; animation-delay: -0.12s; }
.dmnt-hero-wrapper .bird-small.b7 svg .bw-r { animation: dmntFlapR 0.46s ease-in-out infinite; animation-delay: -0.12s; }
.dmnt-hero-wrapper .bird-solo-1 { position: absolute; width: 36px; height: 22px; top: 0; left: 0; animation: dmntSoloFly1 35s linear infinite; animation-delay: -15s; will-change: transform; }
@keyframes dmntSoloFly1 {
  0% { transform: translate(-50px, 200px) rotate(-3deg); }
  25% { transform: translate(30vw, 140px) rotate(-2deg); }
  45% { transform: translate(50vw, 280px) rotate(2deg); }
  70% { transform: translate(80vw, 180px) rotate(-1deg); }
  100% { transform: translate(110vw, 220px) rotate(0deg); }
}
.dmnt-hero-wrapper .bird-solo-1 svg .bw,
.dmnt-hero-wrapper .bird-solo-1 svg .bb { fill: rgba(30, 25, 20, 0.9); }
.dmnt-hero-wrapper .bird-solo-1 svg .bw-l { animation: dmntFlapL2 0.4s ease-in-out infinite; }
.dmnt-hero-wrapper .bird-solo-1 svg .bw-r { animation: dmntFlapR2 0.4s ease-in-out infinite; }
.dmnt-hero-wrapper .bird-solo-2 { position: absolute; width: 22px; height: 14px; top: 0; left: 0; animation: dmntSoloFly2 50s linear infinite; animation-delay: -28s; will-change: transform; }
@keyframes dmntSoloFly2 {
  0% { transform: translate(110vw, 80px) rotate(2deg); }
  30% { transform: translate(70vw, 50px) rotate(-1deg); }
  60% { transform: translate(40vw, 100px) rotate(1deg); }
  100% { transform: translate(-50px, 70px) rotate(0deg); }
}
.dmnt-hero-wrapper .bird-solo-2 svg .bw,
.dmnt-hero-wrapper .bird-solo-2 svg .bb { fill: rgba(40, 35, 30, 0.75); }
.dmnt-hero-wrapper .bird-solo-2 svg .bw-l { animation: dmntFlapL 0.55s ease-in-out infinite; }
.dmnt-hero-wrapper .bird-solo-2 svg .bw-r { animation: dmntFlapR 0.55s ease-in-out infinite; }
.dmnt-hero-wrapper .bird-solo-3 { position: absolute; width: 14px; height: 9px; top: 0; left: 0; animation: dmntSoloFly3 30s linear infinite; animation-delay: -10s; will-change: transform; }
@keyframes dmntSoloFly3 {
  0% { transform: translate(-30px, 110px) rotate(0deg); }
  50% { transform: translate(50vw, 130px) rotate(1deg); }
  100% { transform: translate(110vw, 90px) rotate(-1deg); }
}
.dmnt-hero-wrapper .bird-solo-3 svg .bw,
.dmnt-hero-wrapper .bird-solo-3 svg .bb { fill: rgba(50, 45, 40, 0.6); }
.dmnt-hero-wrapper .bird-solo-3 svg .bw-l { animation: dmntFlapL 0.6s ease-in-out infinite; }
.dmnt-hero-wrapper .bird-solo-3 svg .bw-r { animation: dmntFlapR 0.6s ease-in-out infinite; }
.dmnt-hero-wrapper .bird-pair { position: absolute; top: 0; left: 0; width: 60px; height: 30px; animation: dmntPairFly 40s linear infinite; animation-delay: -22s; will-change: transform; }
@keyframes dmntPairFly {
  0% { transform: translate(-80px, 250px); }
  40% { transform: translate(35vw, 200px); }
  70% { transform: translate(70vw, 240px); }
  100% { transform: translate(110vw, 210px); }
}
.dmnt-hero-wrapper .bird-pair .bp1 { position: absolute; top: 0; left: 0; width: 26px; height: 15px; }
.dmnt-hero-wrapper .bird-pair .bp2 { position: absolute; top: 12px; left: 30px; width: 24px; height: 14px; }
.dmnt-hero-wrapper .bird-pair svg .bw,
.dmnt-hero-wrapper .bird-pair svg .bb { fill: rgba(35, 30, 25, 0.85); }
.dmnt-hero-wrapper .bird-pair .bp1 svg .bw-l { animation: dmntFlapL2 0.42s ease-in-out infinite; }
.dmnt-hero-wrapper .bird-pair .bp1 svg .bw-r { animation: dmntFlapR2 0.42s ease-in-out infinite; }
.dmnt-hero-wrapper .bird-pair .bp2 svg .bw-l { animation: dmntFlapL2 0.44s ease-in-out infinite; animation-delay: -0.1s; }
.dmnt-hero-wrapper .bird-pair .bp2 svg .bw-r { animation: dmntFlapR2 0.44s ease-in-out infinite; animation-delay: -0.1s; }

.dmnt-hero-wrapper .building-day,
.dmnt-hero-wrapper .building-night {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  transition: transform 0.6s ease-out;
  will-change: transform, opacity;
}
.dmnt-hero-wrapper .building-day {
  z-index: 5;
  animation: dmntBuildingDayCycle var(--dmnt-cycle, 30s) linear infinite;
}
.dmnt-hero-wrapper .building-night {
  z-index: 7;
  opacity: 0;
  animation: dmntBuildingNightCycle var(--dmnt-cycle, 30s) linear infinite;
}

@keyframes dmntBuildingDayCycle {
  0%, 8%   { filter: brightness(0.55) saturate(0.7) contrast(1.05); opacity: 1; }
  18%, 25% { filter: brightness(0.85) saturate(0.95) contrast(1); opacity: 1; }
  35%, 50% { filter: brightness(1) saturate(1) contrast(1); opacity: 1; }
  58%      { filter: brightness(0.95) saturate(1.1) contrast(1.05); opacity: 1; }
  65%      { filter: brightness(0.7) saturate(1.05) contrast(1.1); opacity: 1; }
  70%      { filter: brightness(0.5) saturate(0.8) contrast(1.1); opacity: 1; }
  74%      { filter: brightness(0.35) saturate(0.6) contrast(1.1); opacity: 1; }
  78%, 88% { filter: brightness(0.2) saturate(0.4) contrast(1.15); opacity: 1; }
  92%      { filter: brightness(0.35) saturate(0.5) contrast(1.1); opacity: 1; }
  96%      { filter: brightness(0.5) saturate(0.7) contrast(1.05); opacity: 1; }
  100%     { filter: brightness(0.55) saturate(0.7) contrast(1.05); opacity: 1; }
}

@keyframes dmntBuildingNightCycle {
  0%, 68%  { opacity: 0; }
  72%      { opacity: 0.4; }
  76%      { opacity: 0.85; }
  80%, 88% { opacity: 1; }
  92%      { opacity: 0.6; }
  95%      { opacity: 0.2; }
  97%, 100% { opacity: 0; }
}

.dmnt-hero-wrapper .building-tint {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  mix-blend-mode: multiply;
  animation: dmntBuildingTint var(--dmnt-cycle, 30s) linear infinite;
}
@keyframes dmntBuildingTint {
  0%, 5%   { background: rgba(180, 140, 180, 0.35); }
  15%      { background: rgba(255, 220, 195, 0.2); }
  25%, 50% { background: rgba(255, 255, 255, 0); }
  58%      { background: rgba(255, 200, 150, 0.3); }
  65%      { background: rgba(255, 150, 100, 0.45); }
  72%      { background: rgba(120, 80, 140, 0.55); }
  78%, 88% { background: rgba(0, 0, 0, 0); }
  95%      { background: rgba(160, 130, 170, 0.4); }
  100%     { background: rgba(180, 140, 180, 0.35); }
}

.dmnt-hero-wrapper .moonlight {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(ellipse at 30% 25%, rgba(140, 170, 220, 0.18) 0%, transparent 55%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: dmntMoonlightFade var(--dmnt-cycle, 30s) linear infinite;
}
@keyframes dmntMoonlightFade {
  0%, 65%  { opacity: 0; }
  72%      { opacity: 0.4; }
  78%, 88% { opacity: 0.7; }
  93%      { opacity: 0.4; }
  97%, 100% { opacity: 0; }
}

.dmnt-hero-wrapper .sunlight {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(ellipse at 75% 40%, rgba(255, 180, 100, 0.35) 0%, transparent 50%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: dmntSunlightFade var(--dmnt-cycle, 30s) linear infinite;
}
@keyframes dmntSunlightFade {
  0%, 50%  { opacity: 0; }
  58%      { opacity: 0.7; }
  63%      { opacity: 1; }
  68%      { opacity: 0.5; }
  72%, 100% { opacity: 0; }
}

.dmnt-hero-wrapper .fog {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(40, 50, 80, 0.12) 50%, rgba(40, 50, 80, 0.22) 100%);
  opacity: 0;
  animation: dmntFogFade var(--dmnt-cycle, 30s) linear infinite;
  mix-blend-mode: multiply;
}
@keyframes dmntFogFade {
  0%, 65% { opacity: 0; }
  75%, 88% { opacity: 1; }
  93%, 100% { opacity: 0; }
}

.dmnt-hero-wrapper .vignette {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  animation: dmntVignetteShift var(--dmnt-cycle, 30s) linear infinite;
}
@keyframes dmntVignetteShift {
  0%, 18%  { background: radial-gradient(ellipse at 50% 60%, transparent 50%, rgba(0, 0, 0, 0.3) 100%); }
  40%      { background: radial-gradient(ellipse at 50% 60%, transparent 60%, rgba(0, 0, 0, 0.2) 100%); }
  65%      { background: radial-gradient(ellipse at 50% 60%, transparent 40%, rgba(0, 0, 0, 0.5) 100%); }
  78%, 88% { background: radial-gradient(ellipse at 50% 60%, transparent 25%, rgba(0, 0, 0, 0.65) 100%); }
  100%     { background: radial-gradient(ellipse at 50% 60%, transparent 50%, rgba(0, 0, 0, 0.3) 100%); }
}

.dmnt-hero-wrapper .content-gradient {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(8, 12, 22, 0.85) 0%,
      rgba(8, 12, 22, 0.7) 30%,
      rgba(8, 12, 22, 0.35) 55%,
      rgba(8, 12, 22, 0) 75%),
    linear-gradient(180deg,
      rgba(8, 12, 22, 0) 0%,
      rgba(8, 12, 22, 0) 50%,
      rgba(8, 12, 22, 0.45) 100%);
}

.dmnt-hero-wrapper .hero-content {
  position: relative;
  z-index: 20;
  padding: 24px;
  width: 100%;
  max-width: var(--dmnt-max, 1140px);
  margin: 0 auto;
  text-align: left;
}
.dmnt-hero-wrapper h1.hero-title,
.dmnt-hero-wrapper .hero-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(40px, 4.8vw, 72px);
  font-weight: 400;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  text-shadow:
    0 2px 18px rgba(0, 0, 0, 0.55),
    0 1px 4px rgba(0, 0, 0, 0.5);
}
.dmnt-hero-wrapper .hero-title .line { display: block; overflow: hidden; }
.dmnt-hero-wrapper .hero-title .line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: dmntLineUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.dmnt-hero-wrapper .hero-title .line:nth-child(1) > span { animation-delay: 0.3s; }
.dmnt-hero-wrapper .hero-title .line:nth-child(2) > span { animation-delay: 0.45s; }
.dmnt-hero-wrapper .hero-title .line:nth-child(3) > span { animation-delay: 0.6s; }
@keyframes dmntLineUp { to { transform: translateY(0); } }

.dmnt-hero-wrapper .accent-bar {
  width: 56px;
  height: 2px;
  background: var(--accent-tan-soft);
  margin: 24px 0;
  transform: scaleX(0);
  transform-origin: left;
  animation: dmntBarIn 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.9s forwards;
}
@keyframes dmntBarIn { to { transform: scaleX(1); } }

.dmnt-hero-wrapper .hero-desc {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.92);
  max-width: 560px;
  margin: 0 0 32px;
  opacity: 0;
  animation: dmntFadeUp 0.9s ease 1.1s forwards;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.dmnt-hero-wrapper .hero-meta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 32px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  opacity: 0;
  animation: dmntFadeUp 0.9s ease 1.25s forwards;
  flex-wrap: wrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.dmnt-hero-wrapper .hero-meta-row .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}
.dmnt-hero-wrapper .meta-loc { display: inline-flex; align-items: center; gap: 10px; }
.dmnt-hero-wrapper .meta-loc svg,
.dmnt-hero-wrapper .meta-loc i { width: 15px; height: 15px; color: var(--accent-tan-soft); font-size: 15px; }

.dmnt-hero-wrapper .hero-actions {
  display: flex;
  gap: 14px;
  margin-bottom: 40px;
  opacity: 0;
  animation: dmntFadeUp 0.9s ease 1.4s forwards;
  flex-wrap: wrap;
}
.dmnt-hero-wrapper .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  background: var(--accent-tan);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  overflow: hidden;
  position: relative;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.dmnt-hero-wrapper .btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--white-warm);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.dmnt-hero-wrapper .btn-primary:hover { color: var(--brown-deep); }
.dmnt-hero-wrapper .btn-primary:hover::before { transform: translateY(0); }
.dmnt-hero-wrapper .btn-primary > * { position: relative; z-index: 1; }
.dmnt-hero-wrapper .btn-primary svg,
.dmnt-hero-wrapper .btn-primary i { width: 15px; height: 15px; transition: transform 0.3s ease; }
.dmnt-hero-wrapper .btn-primary:hover svg,
.dmnt-hero-wrapper .btn-primary:hover i { transform: translateX(4px); }

.dmnt-hero-wrapper .btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  text-decoration: none;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
}
.dmnt-hero-wrapper .btn-outline:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }
.dmnt-hero-wrapper .btn-outline svg,
.dmnt-hero-wrapper .btn-outline i { width: 15px; height: 15px; transition: transform 0.3s ease; }
.dmnt-hero-wrapper .btn-outline:hover svg,
.dmnt-hero-wrapper .btn-outline:hover i { transform: translateX(4px); }

@keyframes dmntFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.dmnt-hero-wrapper .scene-controls {
  position: absolute;
  bottom: 40px;
  right: max(24px, calc((100vw - var(--dmnt-max, 1140px)) / 2 + 24px));
  z-index: 21;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  border: 1px solid #000;
  color: #000;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  animation: dmntFadeUp 0.9s ease 1.6s forwards;
}
.dmnt-hero-wrapper .control-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid #000; color: #000; cursor: pointer;
  display: grid; place-items: center;
  transition: all 0.3s ease;
}
.dmnt-hero-wrapper .control-btn:hover { background: var(--accent-tan); }
.dmnt-hero-wrapper .control-btn svg { width: 12px; height: 12px; display: block; margin: 0; }
.dmnt-hero-wrapper .control-btn { padding: 0; line-height: 0; }

.dmnt-hero-wrapper .hero.paused .sky,
.dmnt-hero-wrapper .hero.paused .horizon,
.dmnt-hero-wrapper .hero.paused .sun-system,
.dmnt-hero-wrapper .hero.paused .sun-scatter,
.dmnt-hero-wrapper .hero.paused .sun-bloom,
.dmnt-hero-wrapper .hero.paused .sun-corona,
.dmnt-hero-wrapper .hero.paused .sun-core,
.dmnt-hero-wrapper .hero.paused .sun-streak,
.dmnt-hero-wrapper .hero.paused .moon-wrapper,
.dmnt-hero-wrapper .hero.paused .stars-far,
.dmnt-hero-wrapper .hero.paused .stars-mid,
.dmnt-hero-wrapper .hero.paused .stars-near,
.dmnt-hero-wrapper .hero.paused .shooting-star,
.dmnt-hero-wrapper .hero.paused .clouds,
.dmnt-hero-wrapper .hero.paused .clouds-tint,
.dmnt-hero-wrapper .hero.paused .cloud,
.dmnt-hero-wrapper .hero.paused .building-day,
.dmnt-hero-wrapper .hero.paused .building-night,
.dmnt-hero-wrapper .hero.paused .building-tint,
.dmnt-hero-wrapper .hero.paused .moonlight,
.dmnt-hero-wrapper .hero.paused .sunlight,
.dmnt-hero-wrapper .hero.paused .fog,
.dmnt-hero-wrapper .hero.paused .vignette,
.dmnt-hero-wrapper .hero.paused .birds,
.dmnt-hero-wrapper .hero.paused .bird-flock,
.dmnt-hero-wrapper .hero.paused .bird-solo-1,
.dmnt-hero-wrapper .hero.paused .bird-solo-2,
.dmnt-hero-wrapper .hero.paused .bird-solo-3,
.dmnt-hero-wrapper .hero.paused .bird-pair,
.dmnt-hero-wrapper .hero.paused svg path {
  animation-play-state: paused !important;
}

.dmnt-hero-wrapper .scroll-hint {
  position: absolute;
  bottom: 40px;
  left: max(24px, calc((100vw - var(--dmnt-max, 1140px)) / 2 + 24px));
  z-index: 21;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0;
  animation: dmntFadeUp 0.9s ease 1.7s forwards;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.dmnt-hero-wrapper .scroll-line {
  width: 50px; height: 1px;
  background: rgba(255, 255, 255, 0.3);
  position: relative; overflow: hidden;
}
.dmnt-hero-wrapper .scroll-line::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--accent-tan-soft);
  animation: dmntScrollLine 2s ease-in-out infinite;
}
@keyframes dmntScrollLine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .dmnt-hero-wrapper .sky, .dmnt-hero-wrapper .horizon, .dmnt-hero-wrapper .sun-system,
  .dmnt-hero-wrapper .sun-scatter, .dmnt-hero-wrapper .sun-bloom, .dmnt-hero-wrapper .sun-corona,
  .dmnt-hero-wrapper .sun-core, .dmnt-hero-wrapper .sun-streak,
  .dmnt-hero-wrapper .moon-wrapper, .dmnt-hero-wrapper .stars-far, .dmnt-hero-wrapper .stars-mid, .dmnt-hero-wrapper .stars-near,
  .dmnt-hero-wrapper .shooting-star, .dmnt-hero-wrapper .clouds, .dmnt-hero-wrapper .clouds-tint, .dmnt-hero-wrapper .cloud,
  .dmnt-hero-wrapper .building-day, .dmnt-hero-wrapper .building-night, .dmnt-hero-wrapper .building-tint,
  .dmnt-hero-wrapper .moonlight, .dmnt-hero-wrapper .sunlight, .dmnt-hero-wrapper .fog, .dmnt-hero-wrapper .vignette, .dmnt-hero-wrapper .birds {
    animation-duration: 180s !important;
  }
}

@media (max-width: 1100px) {
  .dmnt-hero-wrapper .hero { min-height: 640px; }
  .dmnt-hero-wrapper .hero-content { padding: 110px 24px 40px; max-width: 100%; }
  .dmnt-hero-wrapper .scene-controls, .dmnt-hero-wrapper .scroll-hint { bottom: 24px; top: auto; }
  .dmnt-hero-wrapper .scroll-hint { left: 24px; }
  .dmnt-hero-wrapper .scene-controls { right: 24px; }
  .dmnt-hero-wrapper .hero-content { padding-bottom: 110px; }
  .dmnt-hero-wrapper .moon { width: 90px; height: 90px; }
  .dmnt-hero-wrapper .moon-glow { width: 180px; height: 180px; top: -45px; left: -45px; }
}

@media (max-width: 600px) {
  .dmnt-hero-wrapper .hero-content { padding: 100px 20px 32px; }
}

/* ============ MOBILE STICKY BOTTOM BAR ============ */
.dmnt-hero-wrapper .dmnt-mobile-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: 100%;
  z-index: 9999;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: rgba(20, 18, 16, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
  gap: 8px;
  box-sizing: border-box;
  overflow: hidden;
  flex-wrap: nowrap;
}
.dmnt-hero-wrapper .dmnt-mobile-bar .mb-btn {
  flex: 1 1 0;
  min-width: 0;          /* allow flex items to shrink below content size */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  transition: transform 0.15s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.dmnt-hero-wrapper .dmnt-mobile-bar .mb-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.dmnt-hero-wrapper .dmnt-mobile-bar .mb-btn:active { transform: scale(0.97); }
.dmnt-hero-wrapper .dmnt-mobile-bar .mb-btn svg {
  width: 16px; height: 16px; flex-shrink: 0;
}
.dmnt-hero-wrapper .dmnt-mobile-bar .mb-call {
  background: var(--accent-tan, #c9a574);
  color: #1a1714;
}
.dmnt-hero-wrapper .dmnt-mobile-bar .mb-units {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

@media (max-width: 768px) {
  .dmnt-hero-wrapper .dmnt-mobile-bar { display: flex; }
  .dmnt-hero-wrapper .hero { padding-bottom: 76px; }
}
@media (max-width: 360px) {
  .dmnt-hero-wrapper .dmnt-mobile-bar { padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); gap: 6px; }
  .dmnt-hero-wrapper .dmnt-mobile-bar .mb-btn { font-size: 13px; padding: 0 8px; min-height: 42px; gap: 4px; }
  .dmnt-hero-wrapper .dmnt-mobile-bar .mb-btn svg { width: 14px; height: 14px; }
}

/* ============ MOBILE PAINT/GPU BUDGET TRIMMING ============
   Big Gaussian blurs and backdrop-filters are the hottest path on mid-range phones.
   We keep all the layers/animations visible (no design change) but cut blur radius —
   visually indistinguishable on a small screen, ~3-5x cheaper per frame. */
@media (max-width: 768px) {
  .dmnt-hero-wrapper .dmnt-mobile-bar { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}
@media (max-width: 540px) {
  /* Drop heaviest blurs on phones. Stars/clouds remain; just less GPU-expensive. */
  .dmnt-hero-wrapper .sun-bloom    { filter: blur(10px); }
  .dmnt-hero-wrapper .sun-corona   { filter: blur(4px); }
  .dmnt-hero-wrapper .sun-scatter  { filter: blur(2px); }
  .dmnt-hero-wrapper .moon-halo    { filter: blur(6px); }
  .dmnt-hero-wrapper .fog          { filter: blur(8px); }
}
/* Save GPU memory by clearing will-change once initial intro animations have settled.
   The static 2s window covers all named animation-delays in the intro. */
.dmnt-hero-wrapper .hero.dmnt-settled .moon,
.dmnt-hero-wrapper .hero.dmnt-settled .stars-far,
.dmnt-hero-wrapper .hero.dmnt-settled .stars-mid,
.dmnt-hero-wrapper .hero.dmnt-settled .stars-near,
.dmnt-hero-wrapper .hero.dmnt-settled .building-day,
.dmnt-hero-wrapper .hero.dmnt-settled .building-night { will-change: auto; }