/* ==========================================================================
   NLPD DECORATIVE ANIMATION SYSTEM
   Playful, child-friendly decor layer: clouds, fish, butterflies, bubbles,
   dental mascots, floating icons and section dividers. Pure CSS keyframes;
   mouse-parallax + scroll-triggering handled in assets/js/decor.js.
   Sits purely behind content and never intercepts pointer events.
   ========================================================================== */

/* ---- stacking safety: give decor a home behind existing content ---- */
.about, .services, .journey, .spec, .gallery, .contact, .foot {
  position: relative
}

.about-in, .svgrid, .wgrid, .spec-in, .gtwrap, .cgrid, .ftop, .fbot {
  position: relative;
  z-index: 1
}

.decor-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease)
}

.decor-field.in { opacity: 1 }

[class*="decor-"] { pointer-events: none }

.decor-field svg { display: block; overflow: visible }

/* ---- clouds ---- */
.decor-cloud {
  position: absolute;
  opacity: .75;
  color: #fff;
  animation: cloudDrift 20s ease-in-out infinite;
  will-change: transform, opacity
}

.decor-cloud.sail { animation: cloudSail 46s linear infinite }
.decor-cloud.c2 { animation-duration: 27s; animation-delay: -8s; opacity: .55 }
.decor-cloud.c3 { animation-duration: 33s; animation-delay: -16s; opacity: .4 }
.decor-cloud.on-navy { color: rgba(255, 255, 255, .18) }

@keyframes cloudDrift {
  0%, 100% { transform: translate(0, 0) }
  50% { transform: translate(26px, -10px) }
}

@keyframes cloudSail {
  0% { transform: translateX(-12vw) translateY(0) }
  50% { transform: translateX(50vw) translateY(-14px) }
  100% { transform: translateX(112vw) translateY(0) }
}

/* ---- fish ---- */
.decor-fish {
  position: absolute;
  animation: fishSwim 7s ease-in-out infinite;
  will-change: transform
}

.decor-fish.sm { width: 34px }
.decor-fish.md { width: 52px }
.decor-fish.lg { width: 74px }
.decor-fish.d1 { animation-delay: -1.4s; animation-duration: 8.5s }
.decor-fish.d2 { animation-delay: -3.1s; animation-duration: 6.2s }
.decor-fish.rev { animation-direction: alternate-reverse }

@keyframes fishSwim {
  0% { transform: translate(0, 0) rotate(0deg) }
  25% { transform: translate(14px, -6px) rotate(4deg) }
  50% { transform: translate(2px, 4px) rotate(-2deg) }
  75% { transform: translate(-12px, -4px) rotate(-5deg) }
  100% { transform: translate(0, 0) rotate(0deg) }
}

/* ---- hero: fish swimming slowly across, one each direction ---- */
.decor-fish.swim-r { animation: fishCrossRight 26s linear infinite }
.decor-fish.swim-l { animation: fishCrossLeft 30s linear infinite }

@keyframes fishCrossRight {
  0%   { transform: translateX(-30vw) translateY(0) rotate(0deg) }
  25%  { transform: translateX(10vw) translateY(-16px) rotate(3deg) }
  50%  { transform: translateX(50vw) translateY(0) rotate(-2deg) }
  75%  { transform: translateX(90vw) translateY(-12px) rotate(2deg) }
  100% { transform: translateX(130vw) translateY(0) rotate(0deg) }
}

@keyframes fishCrossLeft {
  0%   { transform: translateX(30vw) translateY(0) rotate(0deg) scaleX(-1) }
  25%  { transform: translateX(-10vw) translateY(-14px) rotate(-3deg) scaleX(-1) }
  50%  { transform: translateX(-50vw) translateY(0) rotate(2deg) scaleX(-1) }
  75%  { transform: translateX(-90vw) translateY(-10px) rotate(-2deg) scaleX(-1) }
  100% { transform: translateX(-130vw) translateY(0) rotate(0deg) scaleX(-1) }
}

.fish-spout path {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: spoutPuff 1.4s ease-in-out infinite
}

.fish-spout path:nth-child(2) { animation-delay: .18s }
.fish-spout path:nth-child(3) { animation-delay: .36s }

@keyframes spoutPuff {
  0%, 100% { transform: translateY(0) scale(1); opacity: .6 }
  50% { transform: translateY(-3px) scale(1.12); opacity: 1 }
}

.fish-bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(149, 189, 215, .5);
  animation: bubbleRise 3.2s ease-in infinite
}

/* ---- butterflies ---- */
.decor-butterfly {
  position: absolute;
  width: 40px;
  animation: butterflyFly 14s ease-in-out infinite
}

.decor-butterfly.sm { width: 28px }
.decor-butterfly.lg { width: 50px }
.decor-butterfly.d1 { animation-delay: -3s; animation-duration: 17s }
.decor-butterfly.d2 { animation-delay: -7s; animation-duration: 12s }
.decor-butterfly.landed { animation: butterflyHover 3.6s ease-in-out infinite }

@keyframes butterflyFly {
  0% { transform: translate(0, 0) rotate(0deg) }
  20% { transform: translate(34px, -22px) rotate(8deg) }
  40% { transform: translate(58px, 10px) rotate(-6deg) }
  60% { transform: translate(30px, 34px) rotate(4deg) }
  80% { transform: translate(-20px, 12px) rotate(-8deg) }
  100% { transform: translate(0, 0) rotate(0deg) }
}

@keyframes butterflyHover {
  0%, 100% { transform: translateY(0) rotate(0deg) }
  50% { transform: translateY(-6px) rotate(3deg) }
}

.bfly-wing-l, .bfly-wing-r { transform-origin: 40px 35px; animation: wingFlap 0.42s ease-in-out infinite }
.bfly-wing-r { animation-delay: .02s }

@keyframes wingFlap {
  0%, 100% { transform: scaleX(1) }
  50% { transform: scaleX(.4) }
}

/* ---- bubbles ---- */
.decor-bubble {
  position: absolute;
  border-radius: 50%;
  border: 1.4px solid rgba(149, 189, 215, .55);
  background: rgba(255, 255, 255, .18);
  animation: bubbleRise 5.5s ease-in infinite;
  opacity: 0
}

.decor-bubble.d1 { animation-delay: 1.1s }
.decor-bubble.d2 { animation-delay: 2.4s }
.decor-bubble.d3 { animation-delay: 3.6s }
.decor-bubble.d4 { animation-delay: .6s }

@keyframes bubbleRise {
  0% { transform: translateY(0) scale(.6); opacity: 0 }
  12% { opacity: .8 }
  85% { opacity: .35 }
  100% { transform: translateY(-140px) scale(1.1); opacity: 0 }
}

/* ---- floating medical icons ---- */
.decor-icon {
  position: absolute;
  color: var(--blue);
  opacity: .5;
  animation: iconFloat 6s ease-in-out infinite
}

.decor-icon.d1 { animation-delay: -1.8s; animation-duration: 7.5s; color: var(--orange) }
.decor-icon.d2 { animation-delay: -3.4s; animation-duration: 5.4s; color: #2ba868 }
.decor-icon.d3 { animation-delay: -.9s; animation-duration: 8.2s; color: #c4a800 }

@keyframes iconFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: .35 }
  50% { transform: translateY(-14px) rotate(10deg); opacity: .65 }
}

/* ---- stars / sparkle / sun glow ---- */
.decor-star {
  position: absolute;
  color: var(--yellow);
  animation: sparklePulse 2.6s ease-in-out infinite
}

.decor-star.d1 { animation-delay: -.7s }
.decor-star.d2 { animation-delay: -1.6s }
.decor-star.d3 { animation-delay: -2.1s }

@keyframes sparklePulse {
  0%, 100% { opacity: .25; transform: scale(.7) rotate(0deg) }
  50% { opacity: 1; transform: scale(1.05) rotate(20deg) }
}

.decor-sun {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 225, 106, .5), transparent 70%);
  filter: blur(6px);
  animation: glowPulse 5s ease-in-out infinite
}

@keyframes glowPulse {
  0%, 100% { opacity: .5; transform: scale(1) }
  50% { opacity: .85; transform: scale(1.12) }
}

/* ---- dental mascots ---- */
.decor-mascot {
  position: absolute;
  animation: iconFloat 7s ease-in-out infinite
}

.decor-mascot.d1 { animation-delay: -2.2s; animation-duration: 8s }

/* ---- section dividers ---- */
.decor-divider {
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 1;
  pointer-events: none
}

.decor-divider svg { display: block; width: 100%; height: 64px }
.decor-divider.top { top: -1px }
.decor-divider.bottom { bottom: -1px; transform: scaleY(-1) }

/* ---- service card sparkle-on-hover (layered onto existing .svcard:hover) ---- */
.svcard { position: relative }

.svcard::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 16px;
  height: 16px;
  z-index: 2;
  opacity: 0;
  background: radial-gradient(circle, var(--yellow) 0%, transparent 70%);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  transform: scale(.4) rotate(0deg)
}

.svcard:hover::after {
  opacity: 1;
  transform: scale(1) rotate(90deg)
}

/* ---- back-to-top butterfly (spawned by decor.js) ---- */
.btt-fly {
  position: fixed;
  width: 30px;
  z-index: 999;
  pointer-events: none;
  animation: bttFly 1.1s ease-out forwards
}

@keyframes bttFly {
  0% { transform: translateY(0) scale(.8); opacity: 1 }
  70% { opacity: 1 }
  100% { transform: translateY(-70vh) scale(1.05); opacity: 0 }
}

/* ---- reduced motion: freeze everything ---- */
@media (prefers-reduced-motion: reduce) {
  .decor-cloud, .decor-fish, .fish-spout path, .fish-bubble, .decor-butterfly,
  .bfly-wing-l, .bfly-wing-r, .decor-bubble, .decor-icon, .decor-star,
  .decor-sun, .decor-mascot, .btt-fly {
    animation: none !important
  }
}

/* ---- mobile: thin the decor layer down to the essentials ---- */
@media (max-width: 900px) {
  .decor-cloud:nth-of-type(n+3),
  .decor-fish:nth-of-type(n+2),
  .decor-butterfly:nth-of-type(n+3),
  .decor-bubble:nth-of-type(n+4),
  .decor-icon:nth-of-type(n+3),
  .decor-star:nth-of-type(n+3),
  .decor-mascot:nth-of-type(n+2) {
    display: none
  }
}

@media (max-width: 640px) {
  .decor-divider svg { height: 40px }
}