.aurora-wrap { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, #0a1628 0%, #0f2440 25%, #1a3a5c 45%, #2a5a7a 65%, #3a7a9a 80%, #4a9aaa 100%); }
.aurora-wrap::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 100% 60% at 50% 0%, rgba(30,15,60,0.2) 0%, transparent 70%); }
.stars { position: absolute; inset: 0; }
.star { position: absolute; background: #fff; border-radius: 50%; animation: twinkle ease-in-out infinite; }
@keyframes twinkle { 0%,100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } }
.aurora-layer { position: absolute; width: 150%; height: 70%; top: -5%; left: -25%; mix-blend-mode: screen; opacity: 0.5; mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 65%, transparent 85%); }
.aurora-green { background: radial-gradient(ellipse 55% 28% at 30% 30%, rgba(120,255,160,0.55) 0%, transparent 60%), radial-gradient(ellipse 45% 22% at 40% 42%, rgba(80,220,120,0.4) 0%, transparent 55%), radial-gradient(ellipse 40% 18% at 25% 48%, rgba(160,255,190,0.3) 0%, transparent 50%); animation: auroraShift1 22s ease-in-out infinite; filter: blur(35px); }
.aurora-pink { background: radial-gradient(ellipse 55% 28% at 70% 28%, rgba(255,140,200,0.5) 0%, transparent 60%), radial-gradient(ellipse 45% 22% at 60% 40%, rgba(255,120,180,0.35) 0%, transparent 55%), radial-gradient(ellipse 40% 18% at 75% 46%, rgba(220,160,255,0.25) 0%, transparent 50%); animation: auroraShift2 26s ease-in-out infinite; filter: blur(35px); }
.aurora-blue { background: radial-gradient(ellipse 60% 25% at 50% 35%, rgba(120,220,255,0.35) 0%, transparent 58%), radial-gradient(ellipse 50% 20% at 45% 45%, rgba(80,200,240,0.25) 0%, transparent 52%), radial-gradient(ellipse 45% 16% at 55% 50%, rgba(180,240,255,0.18) 0%, transparent 48%); animation: auroraShift3 20s ease-in-out infinite; filter: blur(45px); }
.aurora-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 35% at 30% 28%, rgba(120,255,160,0.08) 0%, transparent 60%), radial-gradient(ellipse 60% 30% at 70% 25%, rgba(255,140,200,0.08) 0%, transparent 55%), radial-gradient(ellipse 50% 25% at 50% 32%, rgba(120,220,255,0.05) 0%, transparent 50%); animation: glowPulse 18s ease-in-out infinite; mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 80%); }
@keyframes auroraShift1 { 0%,100% { transform: translateX(0) scale(1); } 33% { transform: translateX(5%) scale(1.05); } 66% { transform: translateX(-3%) scale(0.97); } }
@keyframes auroraShift2 { 0%,100% { transform: translateX(0) scale(1); } 50% { transform: translateX(-6%) scale(1.08); } }
@keyframes auroraShift3 { 0%,100% { transform: translateX(0) scale(1); } 25% { transform: translateX(4%) scale(1.03); } 75% { transform: translateX(-4%) scale(0.98); } }
@keyframes glowPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

.landscape-wrap { position: absolute; bottom: 0; left: 0; right: 0; height: 48vh; z-index: 3; pointer-events: none; }
.mtn-back { position: absolute; bottom: 15vh; width: 100%; height: 26vh; }
.mtn-back svg { width: 100%; height: 100%; }
.hill-mid { position: absolute; bottom: 8vh; width: 100%; height: 19vh; }
.hill-mid svg { width: 100%; height: 100%; }
.snow-front { position: absolute; bottom: 0; width: 100%; height: 12vh; }
.snow-front svg { width: 100%; height: 100%; }
.pine-tree { position: absolute; bottom: 0; z-index: 4; pointer-events: none; }
.pine-tree svg { width: 100%; height: 100%; }

.water-path { position: absolute; bottom: 0; left: 28%; width: 44%; height: 7vh; z-index: 3; pointer-events: none; overflow: hidden; border-radius: 50% 50% 0 0 / 20px 20px 0 0; }
.water-surface { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(140,220,240,0.35) 0%, rgba(100,200,230,0.20) 30%, rgba(80,180,220,0.10) 55%, rgba(2,2,10,0.9) 100%); }
.water-shimmer { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(200,240,255,0.18) 20%, rgba(160,230,250,0.25) 45%, rgba(200,240,255,0.18) 70%, transparent 100%); animation: waterShimmer 5s ease-in-out infinite; }
.water-ripple { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(200,240,255,0.35), transparent); animation: rippleMove 4s linear infinite; }
.water-ripple:nth-child(3) { animation-delay: 1.3s; opacity: 0.6; }
.water-ripple:nth-child(4) { animation-delay: 2.6s; opacity: 0.3; }
@keyframes waterShimmer { 0%,100% { opacity: 0.3; transform: translateX(-15%); } 50% { opacity: 0.9; transform: translateX(15%); } }
@keyframes rippleMove { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

.walker { position: absolute; bottom: 4.5vh; left: 30%; z-index: 5; pointer-events: none; animation: walkAcross 20s ease-in-out infinite; }
.bear-wrap { position: relative; width: 70px; height: 55px; animation: bearBob 0.5s ease-in-out infinite; }
.bear-torso { position: absolute; bottom: 14px; left: 12px; width: 44px; height: 30px; background: linear-gradient(180deg, #f0f4f8 0%, #dce4ec 100%); border-radius: 50% 50% 45% 45%; box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 -3px 6px rgba(180,200,220,0.3); z-index: 2; }
.bear-head { position: absolute; bottom: 32px; left: 6px; width: 28px; height: 26px; background: linear-gradient(180deg, #f0f4f8 0%, #dce4ec 100%); border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,0.15); z-index: 3; animation: headBob 0.5s ease-in-out infinite; }
.bear-ear { position: absolute; width: 8px; height: 8px; background: #dce4ec; border-radius: 50%; top: -2px; }
.bear-ear.left { left: 2px; } .bear-ear.right { right: 2px; }
.bear-ear::after { content: ''; position: absolute; width: 4px; height: 4px; background: #c0d0e0; border-radius: 50%; top: 2px; left: 2px; }
.bear-eye { position: absolute; width: 3.5px; height: 3.5px; background: #2a3a4a; border-radius: 50%; top: 10px; }
.bear-eye.left { left: 7px; } .bear-eye.right { right: 7px; }
.bear-eye::after { content: ''; position: absolute; width: 1.5px; height: 1.5px; background: #fff; border-radius: 50%; top: 0.5px; right: 0.5px; }
.bear-snout { position: absolute; width: 12px; height: 9px; background: #e8eef4; border-radius: 50%; bottom: 5px; left: 8px; }
.bear-nose { position: absolute; width: 5px; height: 3.5px; background: #3a4a5a; border-radius: 50%; top: 1px; left: 3.5px; }
.bear-tail { position: absolute; bottom: 22px; right: 4px; width: 8px; height: 8px; background: #dce4ec; border-radius: 50%; z-index: 1; animation: tailWag 0.5s ease-in-out infinite; }
.bear-leg { position: absolute; width: 10px; height: 16px; background: linear-gradient(180deg, #dce4ec 0%, #c0d0e0 100%); border-radius: 0 0 40% 40%; bottom: 0; z-index: 1; transform-origin: top center; }
.bear-leg.fl { left: 14px; animation: legWalk1 0.5s ease-in-out infinite; }
.bear-leg.fr { left: 26px; animation: legWalk2 0.5s ease-in-out infinite; }
.bear-leg.bl { left: 38px; animation: legWalk2 0.5s ease-in-out infinite; }
.bear-leg.br { left: 50px; animation: legWalk1 0.5s ease-in-out infinite; }
.bear-leg::after { content: ''; position: absolute; bottom: 1px; left: 2px; width: 6px; height: 4px; background: #b0c0d0; border-radius: 50%; }
.bear-reflection { position: absolute; top: 100%; left: 0; width: 70px; height: 55px; opacity: 0.1; transform: scaleY(-0.5); filter: blur(2px); pointer-events: none; }
.bear-reflection .bear-torso, .bear-reflection .bear-head, .bear-reflection .bear-leg, .bear-reflection .bear-tail, .bear-reflection .bear-ear, .bear-reflection .bear-snout { background: #a0b8c8; }
.bear-reflection .bear-eye, .bear-reflection .bear-nose { background: #708090; }

@keyframes walkAcross { 0% { left: 28%; transform: scaleX(1); } 45% { left: 60%; transform: scaleX(1); } 50% { left: 60%; transform: scaleX(-1); } 95% { left: 28%; transform: scaleX(-1); } 100% { left: 28%; transform: scaleX(1); } }
@keyframes bearBob { 0%,100% { transform: translateY(0); } 25% { transform: translateY(-3px); } 50% { transform: translateY(0); } 75% { transform: translateY(-2px); } }
@keyframes headBob { 0%,100% { transform: rotate(0deg); } 25% { transform: rotate(2deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-1deg); } }
@keyframes tailWag { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(15deg); } }
@keyframes legWalk1 { 0%,100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes legWalk2 { 0%,100% { transform: rotate(12deg); } 50% { transform: rotate(-12deg); } }

/* WordPress placement: preserve the original artwork inside the editable homepage. */
.np-aurora::after,
.np-aurora > .wp-block-group::before,
.np-winter-scene { display:none !important; }
.np-aurora .aurora-wrap { position:absolute; top:0; right:auto; bottom:auto; left:50%; width:100vw; max-width:none !important; margin:0 !important; height:var(--np-scene-height-pc,850px); z-index:2; transform:translateX(-50%); }
.np-aurora.np-scene-width-content .aurora-wrap { width:min(1180px,100%); }
.np-aurora.np-scene-no-bear .walker { display:none !important; }
.np-aurora.np-scene-no-mountains .mtn-back { display:none !important; }
.np-aurora.np-scene-no-trees .pine-tree { display:none !important; }
.np-aurora .walker { scale:var(--np-bear-size,1); transform-origin:center bottom; animation-duration:var(--np-bear-speed,20s); }
.np-aurora.np-scene-no-motion .aurora-layer,.np-aurora.np-scene-no-motion .aurora-glow,.np-aurora.np-scene-no-motion .star,.np-aurora.np-scene-no-motion .walker,.np-aurora.np-scene-no-motion .bear-wrap,.np-aurora.np-scene-no-motion .bear-leg,.np-aurora.np-scene-no-motion .bear-head,.np-aurora.np-scene-no-motion .bear-tail,.np-aurora.np-scene-no-motion .water-shimmer,.np-aurora.np-scene-no-motion .water-ripple { animation:none !important; }
.np-aurora > .wp-block-group { position:relative; z-index:7; }
.np-aurora .np-pill ~ h2 { margin-top:clamp(470px,48vh,540px) !important; }
@media (max-width:781px) {
  .np-aurora .aurora-wrap { height:var(--np-scene-height-tablet,760px); }
  .np-aurora .landscape-wrap { height:42vh; transform:scale(1.16); transform-origin:center bottom; }
  .np-aurora .walker { transform:scale(.82); transform-origin:center bottom; }
  .np-aurora .np-pill ~ h2 { margin-top:390px !important; }
}
@media (max-width:420px) {
  .np-aurora .aurora-wrap { height:var(--np-scene-height-phone,680px); }
  .np-aurora .pine-tree:nth-of-type(4), .np-aurora .pine-tree:nth-of-type(5) { display:none; }
  .np-aurora .np-pill ~ h2 { margin-top:350px !important; }
}
@media (prefers-reduced-motion:reduce) {
  .np-aurora .aurora-layer,.np-aurora .aurora-glow,.np-aurora .star,.np-aurora .walker,.np-aurora .bear-wrap,.np-aurora .bear-leg,.np-aurora .bear-head,.np-aurora .bear-tail,.np-aurora .water-shimmer,.np-aurora .water-ripple { animation:none !important; }
}