/* New Horizons Country Day School: motion and playful details.
   Built from the school's own logo: the rising sun and the seven
   children holding hands. Everything here switches off for people
   who ask their device for reduced motion. */

@property --nh-n { syntax: '<integer>'; inherits: false; initial-value: 540; }

.nh-count { counter-reset: nhn var(--nh-n); }
.nh-count::after { content: counter(nhn); }

/* Hover details: always on, they answer the visitor's pointer */
.nh-cta { transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease; }
.nh-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(19, 41, 91, .55); }
.nh-cta .nh-cta-sun { transition: transform .6s cubic-bezier(.3,1.4,.5,1); transform-origin: 50% 50%; }
.nh-cta:hover .nh-cta-sun { transform: rotate(120deg) scale(1.12); }

.nh-link-sun { background-image: linear-gradient(#F2B41C, #F2B41C); background-repeat: no-repeat; background-position: 50% 100%; background-size: 0% 3px; transition: background-size .28s cubic-bezier(.2,.7,.2,1); }
.nh-link-sun:hover { background-size: 70% 3px; }

.nh-zoom { overflow: hidden; border-radius: 6px; }
.nh-zoom img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.nh-zoom:hover img { transform: scale(1.045); }

.nh-odo { transition: transform .7s cubic-bezier(.3,1.35,.45,1); }

.nh-friend { transition: transform .35s cubic-bezier(.3,1.5,.5,1), box-shadow .2s ease; }
.nh-friend:hover { transform: translateY(-6px); }

.nh-tab { transition: background-color .2s ease, color .2s ease; }

@media (prefers-reduced-motion: no-preference) {
  /* One orchestrated sunrise on load */
  .nh-rise { animation: nh-rise 1.2s cubic-bezier(.2,.7,.2,1) .1s both; }
  @keyframes nh-rise { from { transform: translateY(70px); opacity: .001; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }

  .nh-ray { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nh-ray-draw .55s cubic-bezier(.2,.7,.2,1) both, nh-ray-glow 5s ease-in-out infinite; animation-delay: calc(.75s + var(--i) * 55ms), calc(2s + var(--i) * 180ms); }
  @keyframes nh-ray-draw { to { stroke-dashoffset: 0; } }
  @keyframes nh-ray-glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

  .nh-in { animation: nh-in .9s cubic-bezier(.2,.7,.2,1) both; }
  .nh-in-1 { animation-delay: .15s; } .nh-in-2 { animation-delay: .3s; } .nh-in-3 { animation-delay: .45s; }
  @keyframes nh-in { from { transform: translateY(18px); opacity: .001; } to { transform: none; opacity: 1; } }

  /* The seven friends swing their hands */
  .nh-bob { display: inline-flex; animation: nh-bob 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); }
  @keyframes nh-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(3deg); } }

  .nh-pop { animation: nh-pop .45s cubic-bezier(.3,1.5,.5,1) both; }
  @keyframes nh-pop { from { transform: scale(.9) translateY(8px); opacity: .001; } to { transform: none; opacity: 1; } }

  /* Confirmed tour: a small sunrise */
  .nh-burst line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nh-ray-draw .5s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.15s + var(--i) * 45ms); }
  .nh-burst circle { transform-origin: 50% 50%; transform-box: fill-box; animation: nh-sun-up .7s cubic-bezier(.3,1.4,.5,1) both; }
  @keyframes nh-sun-up { from { transform: translateY(40%) scale(.6); opacity: .001; } to { transform: none; opacity: 1; } }

  .nh-spin-slow { animation: nh-spin 60s linear infinite; transform-origin: 50% 50%; transform-box: fill-box; }
  @keyframes nh-spin { to { transform: rotate(360deg); } }
}

/* Scroll-driven reveals: only where the browser supports them, and only with motion allowed.
   At rest (no scrolling, or older browsers) everything is fully visible. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .nh-unveil { animation: nh-unveil linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    @keyframes nh-unveil { from { clip-path: inset(22% 0 0 0); transform: translateY(36px); } to { clip-path: inset(0 0 0 0); transform: none; } }

    .nh-rise-in { animation: nh-rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes nh-rise-in { from { transform: translateY(32px); opacity: .001; } to { transform: none; opacity: 1; } }

    .nh-count { animation: nh-count linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    @keyframes nh-count { from { --nh-n: 0; } to { --nh-n: 540; } }
  }
}

/* ---------- Play elements: toy bricks, ABC blocks, sun, crayons, planes, kites ----------
   Decorative SVGs (aria-hidden). Positioned by their containers; animated only with motion allowed. */
.nh-doodle { display: block; overflow: visible; }
.nh-play { position: absolute; z-index: 2; pointer-events: none; }
.nh-play-wrap { position: relative; }
.nh-toy { pointer-events: auto; transition: scale .35s cubic-bezier(.3,1.6,.5,1), rotate .35s ease; }
.nh-studs { position: absolute; left: 0; right: 0; top: -13px; height: 14px; display: block; }
.nh-scribble { position: relative; display: inline-block; white-space: nowrap; isolation: isolate; }
.nh-scribble > .nh-doodle { position: absolute; left: -2%; width: 104%; bottom: -0.16em; height: 0.34em; z-index: -1; }
.nh-tower { display: flex; flex-direction: column-reverse; align-items: center; gap: 0; }
.nh-tower .nh-tb { width: 64px; margin-top: -9px; transition: transform .55s cubic-bezier(.3,1.5,.5,1), opacity .3s ease; }
.nh-tower .nh-tb.off { transform: translateY(-160px); opacity: 0; }
@media (max-width: 700px) { .nh-hide-sm { display: none !important; } .nh-tower .nh-tb { width: 46px; margin-top: -7px; } }

@media (prefers-reduced-motion: no-preference) {
  .nh-toy:hover { scale: 1.14; rotate: -6deg; }
  .nh-float { animation: nh-float var(--d, 6s) ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.1s); }
  @keyframes nh-float { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-14px) rotate(calc(var(--r, 0deg) + 5deg)); } }
  .nh-bobble { animation: nh-bobble var(--d, 3.6s) ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.6s); transform-origin: 50% 100%; }
  @keyframes nh-bobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
  .nh-spin { animation: nh-spin 22s linear infinite; transform-origin: 50% 50%; transform-box: fill-box; }
  .nh-twinkle { animation: nh-twinkle 2.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); transform-origin: 50% 50%; }
  @keyframes nh-twinkle { 0%, 100% { transform: scale(.6) rotate(0deg); opacity: .55; } 50% { transform: scale(1.1) rotate(25deg); opacity: 1; } }
  .nh-drift { animation: nh-drift var(--d, 38s) linear infinite; animation-delay: calc(var(--i, 0) * -9s); }
  @keyframes nh-drift { from { transform: translateX(-30px); } 50% { transform: translateX(40px); } to { transform: translateX(-30px); } }
  .nh-drop { animation: nh-drop .9s cubic-bezier(.3,1.45,.5,1) both; animation-delay: calc(.35s + var(--i, 0) * .14s); }
  @keyframes nh-drop { from { transform: translateY(-140px) rotate(-14deg); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
  .nh-bounce { animation: nh-bounce 1.8s cubic-bezier(.45,0,.55,1) infinite; transform-origin: 50% 100%; }
  @keyframes nh-bounce { 0%, 100% { transform: translateY(0) scale(1.08, .9); } 12% { transform: translateY(-4px) scale(.96, 1.05); } 50% { transform: translateY(-46px) scale(1, 1); } 88% { transform: translateY(-4px) scale(.96, 1.05); } }
  .nh-fly { offset-path: path("M0 110 C 60 110, 70 30, 130 40 S 200 100, 256 8"); offset-rotate: auto; animation: nh-fly 7s cubic-bezier(.45,0,.55,1) infinite; }
  @keyframes nh-fly { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
  .nh-trail { animation: nh-trail 1.6s linear infinite; }
  @keyframes nh-trail { to { stroke-dashoffset: -24; } }
  .nh-sway { animation: nh-sway 5s ease-in-out infinite; transform-origin: 50% 0%; }
  @keyframes nh-sway { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-10px); } }
  .nh-tail { animation: nh-tail 1.4s ease-in-out infinite alternate; transform-origin: 50% 0%; transform-box: fill-box; }
  @keyframes nh-tail { from { transform: skewX(-8deg); } to { transform: skewX(8deg); } }
  .nh-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: nh-draw 1.1s cubic-bezier(.6,0,.3,1) .9s forwards; }
  @keyframes nh-draw { to { stroke-dashoffset: 0; } }
  .nh-wiggle:hover, .nh-toy.nh-wiggle { animation: nh-wiggle 4s ease-in-out infinite; }
  @keyframes nh-wiggle { 0%, 86%, 100% { rotate: 0deg; } 89% { rotate: -9deg; } 92% { rotate: 8deg; } 95% { rotate: -5deg; } 98% { rotate: 3deg; } }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .nh-par { animation: nh-par linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes nh-par { from { translate: 0 var(--p, 60px); } to { translate: 0 calc(var(--p, 60px) * -1); } }
    .nh-draw-in { stroke-dasharray: 1; animation: nh-draw-in linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    @keyframes nh-draw-in { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  }
}