/* ============================================================
   Nayem Dental Care - motion layer.
   Rules
   - Only transform, opacity and one custom property (the ring "draw") are animated; nothing here animates width, height,
     padding or margin, so layout never shifts (CLS stays ~0).
   - The headline and the hero image are visible in the very first frame (their start states are transform-only), so LCP
     is not delayed by the choreography.
   - Hidden start states for scroll reveals live under html.motion. motion.js adds that class only when JS runs,
     IntersectionObserver exists and the visitor has not asked for reduced motion (and only after marking the blocks
     already on screen). Without JS every block is simply visible.
   - Tokens only: no raw colour values here.
   ============================================================ */

/* ---------- keyframes ---------- */
@property --nd-p { syntax: "<angle>"; inherits: false; initial-value: 360deg; }
@keyframes nd-in     { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes nd-rise   { from { transform: translateY(.5em); } to { transform: none; } }
@keyframes nd-word   { from { transform: translateY(.42em) rotate(1.6deg); } to { transform: none; } }
@keyframes nd-settle { from { transform: scale(1.14); } to { transform: none; } }
@keyframes nd-pop    { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes nd-ring   { from { --nd-p: 0deg; } to { --nd-p: 360deg; } }
@keyframes nd-swash  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nd-progress { to { transform: scaleX(1); } }

/* ---------- home hero: choreography on load (pure CSS, so it starts with the first frame) ---------- */
.nd-hero__copy > :not(h1) { animation: nd-rise .9s var(--nd-ease) both; }
.nd-hero__copy > :nth-child(1) { animation-delay: .05s; }
.nd-hero__copy > :nth-child(3) { animation-delay: .55s; }
.nd-hero__copy > :nth-child(4) { animation-delay: .68s; }
.nd-hero__copy > :nth-child(5) { animation-delay: .80s; }
.nd-hero__title .nd-w { display: inline-block; animation: nd-word .85s var(--nd-ease) both; }
.nd-hero__title .nd-w:nth-child(1)  { animation-delay: .10s; }
.nd-hero__title .nd-w:nth-child(2)  { animation-delay: .17s; }
.nd-hero__title .nd-w:nth-child(3)  { animation-delay: .24s; }
.nd-hero__title .nd-w:nth-child(4)  { animation-delay: .31s; }
.nd-hero__title .nd-w:nth-child(5)  { animation-delay: .38s; }
.nd-hero__title .nd-w:nth-child(6)  { animation-delay: .45s; }
.nd-hero__title .nd-w:nth-child(7)  { animation-delay: .52s; }
.nd-hero__title .nd-w:nth-child(8)  { animation-delay: .59s; }
.nd-hero__title .nd-w:nth-child(n+9) { animation-delay: .66s; }
.nd-hero__title .nd-em::before { animation: nd-swash .8s var(--nd-ease) 1.05s both; }
.nd-hero__art .nd-arch img { animation: nd-settle 1.5s var(--nd-ease) both; }
.nd-hero__badge { animation: nd-pop .7s var(--nd-ease) 1.15s both; }
.nd-hero__cta .btn-cta, .nd-band .btn-cta { transition: transform .25s var(--nd-ease), background-color .15s, border-color .15s, box-shadow .15s; }

/* ---------- the brand's double rings draw themselves (conic mask; without @property they simply stay visible) ---------- */
.nd-rings::before, .nd-rings::after, .page-hero::before, .page-hero::after, .nd-band::before, .nd-band::after {
  -webkit-mask-image: conic-gradient(from -90deg, var(--nd-ink) var(--nd-p), transparent 0);
  mask-image: conic-gradient(from -90deg, var(--nd-ink) var(--nd-p), transparent 0);
}
.nd-hero__art.nd-rings::before { animation: nd-ring 1.7s var(--nd-ease) .2s both; }
.nd-hero__art.nd-rings::after  { animation: nd-ring 1.7s var(--nd-ease) .5s both; }
.page-hero::before { animation: nd-ring 1.6s var(--nd-ease) .1s both; }
.page-hero::after  { animation: nd-ring 1.6s var(--nd-ease) .35s both; }
.page-hero .nd-em::before { animation: nd-swash .8s var(--nd-ease) .5s both; }

/* ---------- scroll reveal (html.motion only) ---------- */
.motion [data-reveal]:not(.in), .motion [data-stagger]:not(.in) > * { opacity: 0; }
.motion [data-reveal].in:not(.no-anim) { animation: nd-in .75s var(--nd-ease) backwards; }
.motion [data-stagger].in:not(.no-anim) > * { animation: nd-in .7s var(--nd-ease) backwards; }
.motion [data-stagger].in:not(.no-anim) > :nth-child(2) { animation-delay: .07s; }
.motion [data-stagger].in:not(.no-anim) > :nth-child(3) { animation-delay: .14s; }
.motion [data-stagger].in:not(.no-anim) > :nth-child(4) { animation-delay: .21s; }
.motion [data-stagger].in:not(.no-anim) > :nth-child(5) { animation-delay: .28s; }
.motion [data-stagger].in:not(.no-anim) > :nth-child(6) { animation-delay: .35s; }
.motion [data-stagger].in:not(.no-anim) > :nth-child(7) { animation-delay: .42s; }
.motion [data-stagger].in:not(.no-anim) > :nth-child(n+8) { animation-delay: .49s; }

/* headline accent swash and rings follow their block into view */
.motion [data-reveal]:not(.in) .nd-title .nd-em::before { transform: scaleX(0); }
.motion [data-reveal].in:not(.no-anim) .nd-title .nd-em::before { animation: nd-swash .8s var(--nd-ease) .35s both; }
.motion [data-reveal]:not(.in) .nd-rings::before, .motion [data-reveal]:not(.in) .nd-rings::after,
.motion .nd-band:not(.in)::before, .motion .nd-band:not(.in)::after { --nd-p: 0deg; }
.motion [data-reveal].in:not(.no-anim) .nd-rings::before, .motion .nd-band.in:not(.no-anim)::before { animation: nd-ring 1.6s var(--nd-ease) .15s both; }
.motion [data-reveal].in:not(.no-anim) .nd-rings::after, .motion .nd-band.in:not(.no-anim)::after { animation: nd-ring 1.6s var(--nd-ease) .4s both; }

/* ---------- pointer-only polish: spotlight on cards (position comes from motion.js) ---------- */
@media (hover: hover) and (pointer: fine) {
  .nd-tcard, .nd-person, .nd-tip, .nd-step { position: relative; isolation: isolate; }
  .nd-tcard::before, .nd-person::before, .nd-tip::before, .nd-step::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(20rem circle at var(--mx, 50%) var(--my, 50%), rgba(var(--nd-sky-rgb), .18), transparent 65%);
    transition: opacity .3s ease;
  }
  .nd-tcard:hover::before, .nd-person:hover::before, .nd-tip:hover::before, .nd-step:hover::before { opacity: 1; }
}

/* ---------- scroll-driven progress line under the header (supporting browsers only) ---------- */
@supports (animation-timeline: scroll()) {
  .nd-header::after {
    content: ""; position: absolute; inset: auto 0 -1px 0; height: 3px; pointer-events: none;
    background: linear-gradient(90deg, var(--nd-blue), var(--nd-sky) 70%, var(--nd-red));
    transform: scaleX(0); transform-origin: left center;
    animation: nd-progress linear both; animation-timeline: scroll(root block);
  }
}

/* ---------- reduced motion: no waiting, no progress line (durations are already ~0 in site.css) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-delay: 0s !important; transition-delay: 0s !important; }
  .nd-header::after { display: none; }
}

/* ---------- print: everything visible ---------- */
@media print {
  .motion [data-reveal]:not(.in), .motion [data-stagger]:not(.in) > * { opacity: 1 !important; }
  .nd-header::after { display: none; }
}