/**
 * Nanotkar Studio — Motion layer (v5.0 · Cinematic Couture)
 * Intro, word-by-word headlines, hero atmosphere, word band, process timeline, arch frames,
 * card tilt/shine, button ripple, footer wordmark and a few smaller touches.
 * Loaded last. Builds on animations.css / nanotkar-luxe.css; nothing there is removed.
 *
 * Rules this file follows:
 *  - only transform / opacity / clip-path / filter animate; loops pause when off-screen (.ns-paused)
 *  - anything hidden until it is revealed is gated on .ns-js (set by the header script) and is shown
 *    again by .ns-motion-failed (header script, if nanotkar-motion.js never starts)
 *  - the whole file is switched off by the prefers-reduced-motion block at the end
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 */

@property --ns-ang {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  --ns-intro-wait: 0s;   /* how long the page-load choreography waits for the intro curtain */
  --ns-gilt-light: #D9BF8E;
}
html.ns-intro-on { --ns-intro-wait: 1.7s; }

/* ─────────────────────────────────────────────
 * 1. INTRO — logo reveal + two-tone curtain
 * ───────────────────────────────────────────── */
.ns-intro { display: none; }
html.ns-intro-on .ns-intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100000;
  animation: ns-introGone 0s linear 2.55s forwards;
}
html.ns-intro-lock { overflow: hidden !important; }

.ns-intro__bg { position: absolute; inset: 0; }
.ns-intro__bg--back {
  background: linear-gradient(135deg, #F3DDD5 0%, #EBD6BC 100%);
  animation: ns-introLift 0.95s cubic-bezier(0.76, 0, 0.2, 1) 1.5s both;
}
.ns-intro__bg--front {
  background: var(--ns-paper, #FBF8F3);
  animation: ns-introLift 0.95s cubic-bezier(0.76, 0, 0.2, 1) 1.4s both;
}
.ns-intro__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.7rem;
  padding: 0 1.5rem;
  animation: ns-introOut 0.45s ease 1.28s both;
}
/* hairline frame that fades in around the logo */
.ns-intro__inner::before {
  content: '';
  position: absolute;
  inset: clamp(12px, 2vw, 28px);
  border: 1px solid var(--ns-gilt-soft, rgba(184, 155, 106, 0.38));
  opacity: 0;
  animation: ns-fadeIn 1s ease 0.4s forwards;
}
.ns-intro__logo {
  display: block;
  width: min(520px, 74vw);
  aspect-ratio: 1400 / 619;
  background: linear-gradient(100deg, #2B2422 0 36%, #C9A86E 46%, #B05560 54%, #2B2422 64% 100%);
  background-size: 280% 100%;
  background-position: 100% 0;
  -webkit-mask: url(../media/logo-wbn.png) center / contain no-repeat;
  mask: url(../media/logo-wbn.png) center / contain no-repeat;
  clip-path: inset(0 100% 0 0);
  animation:
    ns-introWipe 1.05s cubic-bezier(0.65, 0, 0.15, 1) 0.35s forwards,
    ns-introSheen 1.1s ease-in-out 1s forwards;
}
.ns-intro__line {
  width: 150px;
  height: 1px;
  background: var(--ns-gilt, #B89B6A);
  transform: scaleX(0);
  animation: ns-lineDraw 0.8s var(--ns-ease, ease) 0.95s forwards;
}
.ns-intro__tag {
  font-family: var(--ns-font-body, 'Inter', sans-serif);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-align: center;
  text-transform: uppercase;
  color: var(--ns-gilt-ink, #85693B);
  opacity: 0;
  animation: ns-introTag 0.9s ease 1s forwards;
}

@keyframes ns-introWipe {
  from { clip-path: inset(0 100% 0 0); transform: scale(1.04); }
  to { clip-path: inset(0 0 0 0); transform: scale(1); }
}
@keyframes ns-introSheen {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}
@keyframes ns-introTag {
  from { opacity: 0; letter-spacing: 0.6em; }
  to { opacity: 1; letter-spacing: 0.34em; }
}
@keyframes ns-introOut { to { opacity: 0; transform: translateY(-16px); } }
@keyframes ns-introLift {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 0 100% 0); }
}
@keyframes ns-introGone { to { visibility: hidden; pointer-events: none; } }

/* skipped with a click / key: same moves, quicker (new names so the animations restart) */
.ns-intro.is-skip { animation: ns-introGoneQ 0s linear 0.75s forwards; }
.ns-intro.is-skip .ns-intro__bg--front { animation: ns-introLiftQ 0.55s cubic-bezier(0.76, 0, 0.2, 1) both; }
.ns-intro.is-skip .ns-intro__bg--back { animation: ns-introLiftQ 0.55s cubic-bezier(0.76, 0, 0.2, 1) 0.08s both; }
.ns-intro.is-skip .ns-intro__inner { animation: ns-introOutQ 0.25s ease both; }
@keyframes ns-introLiftQ { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes ns-introOutQ { to { opacity: 0; } }
@keyframes ns-introGoneQ { to { visibility: hidden; pointer-events: none; } }

/* the page-load choreography in animations.css waits for the curtain */
html.ns-intro-on .wp-site-blocks > header { animation-delay: calc(var(--ns-intro-wait) - 0.1s); }
html.ns-intro-on .ns-hero-text-col > *,
html.ns-intro-on .ns-page-hero__text > *,
html.ns-intro-on .ns-404 > * { animation-delay: calc(var(--ns-h, 0) * 130ms + 200ms + var(--ns-intro-wait)); }
html.ns-intro-on .ns-live-bg-container,
html.ns-intro-on .ns-page-hero__media { animation-delay: calc(0.35s + var(--ns-intro-wait)); }
html.ns-intro-on .ns-sidebar-column { animation-delay: calc(0.7s + var(--ns-intro-wait)); }
html.ns-intro-on .ns-ig-profile-card { animation-delay: calc(0.6s + var(--ns-intro-wait)); }

/* ─────────────────────────────────────────────
 * 2. HEADLINES — words rise out of a mask
 * (nanotkar-motion.js wraps the words and adds .ns-split-h, then .ns-in when the heading is visible)
 * ───────────────────────────────────────────── */
.ns-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.05em 0.16em;
  margin: 0 -0.05em -0.16em;
}
.ns-w > span { display: inline-block; }

.ns-js:not(.ns-motion-failed) .ns-split-h .ns-w > span { transform: translateY(118%); }
.ns-split-h.ns-in .ns-w > span {
  animation: ns-wordUp 1.1s var(--ns-ease, ease) calc(var(--ns-wi, 0) * 85ms + var(--ns-wd, 0s)) both;
}
@keyframes ns-wordUp {
  from { transform: translateY(118%) rotate(4deg); }
  to { transform: none; }
}

/* headings inside the hero block animate by words instead of the old whole-block fade */
.ns-js .ns-hero-text-col > .ns-split-h,
.ns-js .ns-page-hero__text > .ns-split-h,
.ns-js .ns-404 > .ns-split-h { animation: none; opacity: 1; filter: none; }
.ns-hero-title.ns-split-h,
.ns-page-title.ns-split-h { --ns-wd: calc(0.3s + var(--ns-intro-wait)); }

/* italic words catch a soft highlight once they have risen */
.ns-split-h.ns-in em .ns-w > span {
  background: linear-gradient(100deg, var(--ns-accent, #B05560) 0 42%, #E3B98B 50%, var(--ns-accent, #B05560) 58% 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    ns-wordUp 1.1s var(--ns-ease, ease) calc(var(--ns-wi, 0) * 85ms + var(--ns-wd, 0s)) both,
    ns-wordShine 1.8s ease-in-out calc(var(--ns-wi, 0) * 85ms + var(--ns-wd, 0s) + 0.9s) both;
}
@keyframes ns-wordShine { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* ─────────────────────────────────────────────
 * 3. SCROLL REVEAL VARIANTS (.ns-m + a variant, .ns-in added by nanotkar-motion.js)
 * ───────────────────────────────────────────── */
.ns-js:not(.ns-motion-failed) .ns-m { opacity: 0; }
.ns-m.ns-in {
  animation-duration: 1s;
  animation-timing-function: var(--ns-ease, ease);
  animation-fill-mode: both;
  animation-delay: calc(var(--ns-i, 0) * 110ms);
}
.ns-m.ns-atload.ns-in { animation-delay: calc(var(--ns-i, 0) * 110ms + var(--ns-intro-wait)); }
.ns-m--clip.ns-in { animation-name: ns-clipUp; }
.ns-m--pop.ns-in { animation-name: ns-popIn; animation-duration: 1.1s; }
.ns-m--blur.ns-in { animation-name: ns-blurIn; }
.ns-m--wipe.ns-in { animation-name: ns-wipeIn; animation-duration: 1.7s; }
@keyframes ns-clipUp {
  from { opacity: 1; clip-path: inset(0 0 100% 0); transform: translateY(26px); }
  to { opacity: 1; clip-path: inset(0 0 -20% 0); }
}
@keyframes ns-popIn {
  from { opacity: 0; transform: scale(0.9); filter: blur(8px); }
  to { opacity: 1; filter: none; }
}
@keyframes ns-blurIn {
  from { opacity: 0; transform: translateY(14px); filter: blur(12px); }
  to { opacity: 1; filter: none; }
}
@keyframes ns-wipeIn {
  from { opacity: 1; clip-path: inset(-10% 100% -10% 0); }
  to { opacity: 1; clip-path: inset(-10% -4% -10% 0); }
}

/* ─────────────────────────────────────────────
 * 4. HERO — aurora, reel media, flourish, glass chips, depth
 * ───────────────────────────────────────────── */
.ns-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.ns-aurora i {
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(56px);
  opacity: 0.55;
  animation: ns-drift 24s ease-in-out infinite alternate;
  translate: calc(var(--hx, 0) * 22px) calc(var(--hy, 0) * 16px);
}
.ns-aurora i:nth-child(1) { left: -10%; top: -24%; background: rgba(240, 188, 178, 0.75); }
.ns-aurora i:nth-child(2) { right: 8%; bottom: -34%; background: rgba(233, 214, 168, 0.8); animation-duration: 30s; animation-delay: -9s; }
.ns-aurora i:nth-child(3) { left: 34%; top: 26%; width: 30%; background: rgba(214, 228, 208, 0.7); animation-duration: 36s; animation-delay: -15s; }
@keyframes ns-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(8%, 6%, 0) scale(1.15); }
  100% { transform: translate3d(-6%, 10%, 0) scale(0.94); }
}
/* inner pages: the same slow colour behind the page hero */
.ns-page-hero > .ns-aurora i { opacity: 0.4; }
.ns-page-hero > .ns-aurora i:nth-child(1) { left: -12%; top: -50%; }
.ns-page-hero > .ns-aurora i:nth-child(2) { right: -4%; bottom: -60%; }
.ns-page-hero > .ns-aurora i:nth-child(3) { display: none; }

/* the reel sits in .ns-hero-media (feathered into the card); the still behind it is the poster */
.ns-hero-media,
.ns-reel-frame { container-type: size; }
.ns-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26%);
  mask-image: linear-gradient(to right, transparent 0, #000 26%);
}
.ns-hero-media video,
.ns-reel-frame video {
  position: relative;
  z-index: 1;
  background: transparent;
  -webkit-mask-image: none;
  mask-image: none;
}
.ns-hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ns-js .ns-hero-media {
  animation: ns-mediaWipe 1.7s cubic-bezier(0.7, 0, 0.2, 1) calc(0.45s + var(--ns-intro-wait)) both;
}
@keyframes ns-mediaWipe {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0 0 0 0); }
}

/* stored on its side (landscape picture inside a portrait frame): turn it upright.
   Individual transform properties, so the slow-zoom animation (transform) still composes with them. */
.ns-rot > video {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100cqh;
  height: 100cqw;
  translate: -50% -50%;
  rotate: -90deg;
  object-fit: cover;
}

.ns-hero-title { position: relative; margin-bottom: 2.2rem; }
.ns-flourish {
  position: absolute;
  left: 0.05em;
  bottom: -0.2em;
  width: 3.1em;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: var(--ns-gilt, #B89B6A);
  stroke-width: 1.4;
  stroke-linecap: round;
  pointer-events: none;
}
.ns-js .ns-flourish path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ns-draw 1.7s var(--ns-ease, ease) calc(1.3s + var(--ns-intro-wait)) forwards;
}
.ns-motion-failed .ns-flourish path { stroke-dashoffset: 0; animation: none; }
@keyframes ns-draw { to { stroke-dashoffset: 0; } }

.ns-hero-chip {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  background: rgba(43, 36, 34, 0.3);   /* a little dark tint so the white text stays readable on bright frames */
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.5);
  color: #fff;
  pointer-events: none;
  translate: calc(var(--hx, 0) * -18px) calc(var(--hy, 0) * -12px);
  animation:
    ns-chipIn 0.9s var(--ns-ease, ease) calc(1.25s + var(--ns-intro-wait)) both,
    ns-chipFloat 6s ease-in-out calc(2.2s + var(--ns-intro-wait)) infinite;
}
.ns-hero-chip strong {
  font-family: var(--ns-font-heading);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}
.ns-hero-chip span {
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.92;
}
.ns-hero-chip--a { left: 15%; top: 15%; }
.ns-hero-chip--b { right: 6%; top: 46%; animation-delay: calc(1.45s + var(--ns-intro-wait)), calc(3s + var(--ns-intro-wait)); }
@keyframes ns-chipIn { from { opacity: 0; scale: 0.85; } to { opacity: 1; scale: 1; } }
@keyframes ns-chipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* story-style progress under the active reel pill (nanotkar-motion.js sets --p) */
.ns-reel-btn { position: relative; }
.ns-reel-btn.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--ns-accent, #B05560);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

/* a quiet pulse on the main hero button */
.ns-hero-actions .ns-b--primary { animation: ns-btnPulse 3.4s ease-out calc(3.5s + var(--ns-intro-wait)) infinite; }
@keyframes ns-btnPulse {
  0% { box-shadow: 0 0 0 0 rgba(176, 85, 96, 0.4); }
  70%, 100% { box-shadow: 0 0 0 16px rgba(176, 85, 96, 0); }
}

/* sparkle canvas on the closing banner (gilt specks) */
.ns-cta-band .ns-sparkle-canvas { z-index: 0; opacity: 0.75; }

/* ─────────────────────────────────────────────
 * 5. WORD BAND
 * ───────────────────────────────────────────── */
.ns-marquee {
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.4rem) 0;
  border-bottom: 1px solid var(--ns-line, #E9DFD0);
  background: var(--ns-paper, #FBF8F3);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.ns-marquee__row { overflow: hidden; }
.ns-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ns-marq 70s linear infinite;
}
.ns-marquee__row--rev .ns-marquee__track { animation-direction: reverse; animation-duration: 90s; }
.ns-marquee__track > span {
  padding: 0 clamp(1.2rem, 3vw, 3rem);
  font-family: var(--ns-font-heading);
  font-size: clamp(3rem, 1.6rem + 6vw, 7.5rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.18;
  white-space: nowrap;
  color: var(--ns-ink, #2B2422);
}
.ns-marquee__row--rev .ns-marquee__track > span {
  font-style: normal;
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--ns-gilt, #B89B6A);
}
.ns-marquee__track > i {
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--ns-gilt, #B89B6A);
  transform: rotate(45deg);
}
.ns-marquee:hover .ns-marquee__track { animation-play-state: paused; }

/* ─────────────────────────────────────────────
 * 6. OUR PROCESS
 * ───────────────────────────────────────────── */
.ns-process { border-top: 1px solid var(--ns-line, #E9DFD0); background: var(--ns-blush-wash, #F8ECE7); }
.ns-process .ns-h2 { margin-bottom: 0; }
.ns-process__steps {
  --p: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 4.2rem;
}
.ns-process__line {
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 34px;
  height: 1px;
  background: var(--ns-gilt-soft, rgba(184, 155, 106, 0.38));
}
.ns-process__line i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ns-gilt, #B89B6A), var(--ns-accent, #B05560));
  transform: scaleX(var(--p));
  transform-origin: left;
}
.ns-step { position: relative; padding: 0 0.5rem; text-align: center; }
.ns-step__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 1.7rem;
  border: 1px solid var(--ns-gilt, #B89B6A);
  border-radius: 50%;
  background: var(--ns-paper, #FBF8F3);
  font-family: var(--ns-font-heading);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--ns-gilt-ink, #85693B);
  transition: background 0.6s, color 0.6s, border-color 0.6s, transform 0.9s var(--ns-ease, ease), box-shadow 0.9s var(--ns-ease, ease);
}
.ns-step.is-on .ns-step__node {
  border-color: var(--ns-accent, #B05560);
  background: var(--ns-accent, #B05560);
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 0 9px rgba(176, 85, 96, 0.12);
}
.ns-step h3 {
  margin: 0 0 0.6rem;
  font-family: var(--ns-font-heading);
  font-size: 1.95rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ns-ink, #2B2422);
}
.ns-step p {
  max-width: 30ch;
  margin: 0 auto;
  font-size: 0.9rem;
  line-height: 1.85;
  color: var(--ns-ink-soft, #5E5350);
}

/* ─────────────────────────────────────────────
 * 7. OUR STORY + CTA — arch frames, collage, turning badge, signature
 * ───────────────────────────────────────────── */
.ns-story-photo {
  width: min(100%, 400px);
  height: clamp(380px, 38vw, 520px);
  margin-inline: auto;
}
.ns-story-photo::before { border-radius: 999px 999px 0 0; }
.ns-story-photo > img { border-radius: 999px 999px 0 0; }
.ns-story-photo__alt {
  position: absolute;
  right: -15%;
  bottom: -7%;
  z-index: 3;
  width: 38%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 6px solid #fff;
  border-radius: 999px 999px 0 0;
  background: var(--ns-cream, #F6EFE6);
  box-shadow: var(--ns-shadow-lift);
}
.ns-story-photo__alt img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ns-ease, ease); }
.ns-home-story-section:hover .ns-story-photo__alt img { transform: scale(1.06); }

.ns-badge {
  position: absolute;
  left: -11%;
  top: 7%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--ns-paper, #FBF8F3);
  border: 1px solid var(--ns-gilt, #B89B6A);
  box-shadow: var(--ns-shadow-lift);
  color: var(--ns-gilt-ink, #85693B);
}
.ns-badge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: ns-spin 24s linear infinite;
}
.ns-badge text {
  font-family: var(--ns-font-body, 'Inter', sans-serif);
  font-size: 9.4px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: currentColor;
}
.ns-badge i {
  width: 9px;
  height: 9px;
  background: var(--ns-accent, #B05560);
  transform: rotate(45deg);
}
@keyframes ns-spin { to { transform: rotate(360deg); } }

.ns-signature { display: block; width: fit-content; }

/* closing banner: a tall arch, not a half-circle */
.ns-cta-photo {
  width: min(100%, 400px);
  height: clamp(360px, 36vw, 470px);
  margin-left: auto;
}
.ns-cta-photo::before { border-radius: 999px 999px 0 0; }
.ns-cta-photo img { border-radius: 999px 999px 0 0; object-position: 50% 30%; }

/* ─────────────────────────────────────────────
 * 8. SERVICES, CARDS, STATS
 * ───────────────────────────────────────────── */
/* service icons draw themselves (pathLength set by nanotkar-motion.js) */
.ns-js .ns-service-card .ns-icon.ns-draw :is(path, circle, rect, line, polyline) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.ns-service-card.ns-animated .ns-icon.ns-draw :is(path, circle, rect, line, polyline) {
  animation: ns-draw 1.6s var(--ns-ease, ease) calc(var(--ns-i, 0) * 110ms + 0.35s) forwards;
}
.ns-motion-failed .ns-service-card .ns-icon.ns-draw :is(path, circle, rect, line, polyline) { stroke-dashoffset: 0; }

/* gilt-to-rose line grows under a service card on hover */
.ns-service-card {
  background-image: linear-gradient(90deg, var(--ns-gilt, #B89B6A), var(--ns-accent, #B05560));
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 0% 2px;
  transition: background-color 0.6s var(--ns-ease, ease), background-size 0.8s var(--ns-ease, ease);
}
.ns-service-card:hover { background-size: 72% 2px; }

/* 3D tilt (nanotkar-motion.js sets the individual `rotate` property) */
.ns-story-grid,
.ns-film-grid,
.ns-portfolio-grid,
.ns-package-grid,
.ns-reviews__grid { perspective: 1100px; }
.ns-tilt { will-change: rotate; }

/* light sweeps across a card's picture on hover */
.ns-story-tile__img::before,
.ns-film-card__media::before,
.ns-wed-card__media::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -80%;
  z-index: 3;
  width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  transform: skewX(-18deg);
  transition: left 1.1s var(--ns-ease, ease);
  pointer-events: none;
}
.ns-story-tile:hover .ns-story-tile__img::before,
.ns-film-card:hover .ns-film-card__media::before,
.ns-wed-card:hover .ns-wed-card__media::before { left: 140%; }

/* stat numerals: a slow gilt shine passes through */
.ns-stat__num {
  background: linear-gradient(100deg, var(--ns-ink, #2B2422) 0 40%, var(--ns-gilt, #B89B6A) 50%, var(--ns-ink, #2B2422) 60% 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ns-numShine 7s linear infinite;
}
@keyframes ns-numShine { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.ns-stat__label { position: relative; }
.ns-stat__label::before {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  margin: 0 auto 0.8rem;
  background: var(--ns-gilt, #B89B6A);
  transform: scaleX(0);
  transition: transform 1s var(--ns-ease, ease) 0.5s;
}
.ns-stat.ns-animated .ns-stat__label::before { transform: scaleX(1); }

/* ─────────────────────────────────────────────
 * 9. ENQUIRY FORM
 * ───────────────────────────────────────────── */
.ns-enquire__card { position: relative; isolation: isolate; }
.ns-enquire__card::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 2;
  padding: 1px;
  background: conic-gradient(from var(--ns-ang), transparent 0 60%, var(--ns-gilt, #B89B6A) 76%, var(--ns-accent, #B05560) 88%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ns-ang 8s linear infinite;
  pointer-events: none;
}
@keyframes ns-ang { to { --ns-ang: 360deg; } }

.ns-form__input,
.ns-form__select {
  background-image: linear-gradient(var(--ns-accent, #B05560), var(--ns-accent, #B05560));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 2px;
  transition: border-color 0.4s, background-size 0.6s var(--ns-ease, ease);
}
.ns-form__input:focus,
.ns-form__select:focus { background-size: 100% 2px; }

/* ─────────────────────────────────────────────
 * 10. BUTTONS — ripple + arrow shoot-through
 * ───────────────────────────────────────────── */
.ns-b { position: relative; overflow: hidden; }
.ns-ripple {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  pointer-events: none;
  animation: ns-ripple 0.8s ease-out forwards;
}
.ns-b--dark .ns-ripple,
.ns-b--outline .ns-ripple,
.ns-b--wa .ns-ripple { background: rgba(184, 155, 106, 0.4); }
@keyframes ns-ripple { to { transform: scale(1); opacity: 0; } }
.ns-b:hover .ns-arrow { animation: ns-arrowShoot 0.7s var(--ns-ease, ease); }
@keyframes ns-arrowShoot {
  0% { transform: translateX(0); opacity: 1; }
  45% { transform: translateX(160%); opacity: 0; }
  46% { transform: translateX(-160%); opacity: 0; }
  100% { transform: translateX(4px); opacity: 1; }
}

/* ─────────────────────────────────────────────
 * 11. FOOTER WORDMARK, BRAND LOGO, FLOATING BUTTONS, DRAWER, LIGHTBOX
 * ───────────────────────────────────────────── */
.ns-footer-wordmark {
  margin: 0 0 3rem;
  padding: 0 0 0.12em;
  overflow: hidden;
  font-family: var(--ns-font-heading);
  font-size: clamp(4.5rem, 1.5rem + 15vw, 15rem);
  font-style: italic;
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px var(--ns-gilt, #B89B6A);
  user-select: none;
}
.ns-footer-wordmark .ns-ch { display: inline-block; transition: color 0.5s; }
.ns-footer-wordmark .ns-ch:hover { color: var(--ns-accent-tint, #F3DDD5); }
.ns-js:not(.ns-motion-failed) .ns-footer-wordmark .ns-ch { transform: translateY(105%); }
.ns-footer-wordmark.ns-in .ns-ch { animation: ns-wordUp 1.2s var(--ns-ease, ease) calc(var(--ns-ci, 0) * 70ms) both; }

/* brand logo (header, drawer, footer) */
.ns-logo__img {
  display: block;
  width: auto;
  max-width: none;
  height: var(--ns-logo-h, 50px);
  transition: height 0.5s var(--ns-ease, ease), transform 0.6s var(--ns-ease, ease);
}
.ns-logo--header { --ns-logo-h: clamp(40px, 3.3vw, 52px); }
.ns-logo--drawer { --ns-logo-h: 44px; }
.ns-logo--footer { --ns-logo-h: clamp(64px, 6vw, 88px); }
.ns-logo:hover .ns-logo__img { transform: translateY(-2px); }
.ns-site-header.ns-header--scrolled .ns-logo--header .ns-logo__img { height: calc(var(--ns-logo-h) * 0.86); }

/* back-to-top: scroll-progress ring */
.ns-btt-ring {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  transform: rotate(-90deg);
  fill: none;
  stroke: var(--ns-accent, #B05560);
  stroke-width: 2;
  pointer-events: none;
}
.ns-btt-ring circle { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--ns-sp, 0)); }

/* WhatsApp button: a small wiggle now and then */
.ns-whatsapp-float__link svg { transform-origin: 50% 85%; animation: ns-wiggle 8s ease-in-out 6s infinite; }
@keyframes ns-wiggle {
  0%, 86%, 100% { transform: rotate(0); }
  88% { transform: rotate(-14deg); }
  90% { transform: rotate(12deg); }
  92% { transform: rotate(-9deg); }
  94% { transform: rotate(6deg); }
  96% { transform: rotate(0); }
}

/* mobile drawer: links slide in one after another */
.ns-mobile-drawer[style*="flex"] .ns-drawer-links a {
  animation: ns-drawerLink 0.7s var(--ns-ease, ease) calc(var(--i, 0) * 55ms + 0.12s) both;
}
.ns-drawer-links a:nth-child(1) { --i: 0; }
.ns-drawer-links a:nth-child(2) { --i: 1; }
.ns-drawer-links a:nth-child(3) { --i: 2; }
.ns-drawer-links a:nth-child(4) { --i: 3; }
.ns-drawer-links a:nth-child(5) { --i: 4; }
.ns-drawer-links a:nth-child(6) { --i: 5; }
.ns-drawer-links a:nth-child(7) { --i: 6; }
.ns-drawer-links a:nth-child(8) { --i: 7; }
.ns-drawer-links a:nth-child(9) { --i: 8; }
@keyframes ns-drawerLink { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; } }

/* filter tabs: visible items stagger back in */
.ns-restagger { animation: ns-fadeUp 0.7s var(--ns-ease, ease) calc(var(--ns-i, 0) * 70ms) both; }

/* lightbox: opens with a soft zoom, items cross-fade */
.ns-lightbox-modal.is-active .ns-lightbox__wrapper { animation: ns-lbIn 0.6s var(--ns-ease, ease) both; }
@keyframes ns-lbIn { from { opacity: 0; transform: translateY(26px) scale(0.94); } to { opacity: 1; } }
.ns-lightbox__viewport.ns-lb-swap { animation: ns-lbSwap 0.45s var(--ns-ease, ease) both; }
@keyframes ns-lbSwap { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; } }
/* a real landscape video (e.g. a 16:9 film) gets the wide player instead of the narrow reel box */
.ns-lightbox__wrapper.is-landscape { max-width: 980px; }
.ns-lightbox__wrapper.is-reel.is-landscape .ns-lightbox__stage { min-height: 0; }
.ns-lightbox__wrapper.is-landscape .ns-lightbox__video { height: auto; max-height: 70vh; }
/* a landscape video is still shown upright like a reel: a 9:16 box cropped from the centre of the picture */
.ns-lightbox__video.is-crop {
  width: auto;
  height: min(75vh, 760px);
  max-width: 100%;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  object-fit: cover;
  object-position: center;
}
/* a reel stored on its side is shown as a wide player */
.ns-lightbox__wrapper.is-rotvid { max-width: 980px; }
.ns-lightbox__wrapper.is-rotvid .ns-lightbox__stage {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  max-height: 76vh;
  container-type: size;
}
.ns-lightbox__wrapper.is-rotvid .ns-lightbox__viewport { position: absolute; inset: 0; max-width: none; max-height: none; }
.ns-lightbox__video.is-rot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100cqh;
  height: 100cqw;
  max-height: none;
  translate: -50% -50%;
  rotate: -90deg;
  object-fit: contain;
}

/* ─────────────────────────────────────────────
 * 12. RESPONSIVE (infinite loops are paused off-screen by nanotkar-motion.js)
 * ───────────────────────────────────────────── */
@media (max-width: 991px) {
  /* a bolder headline on phones and tablets (ui.css fixes it at ~50px with !important) */
  html .ns-hero-card .ns-hero-title { font-size: clamp(3.4rem, 15.5vw, 5.4rem) !important; }
  .ns-hero-media { -webkit-mask-image: none; mask-image: none; }
  .ns-js .ns-hero-media { animation-name: ns-mediaWipeY; }
  .ns-hero-chip { display: none; }
  .ns-aurora i { filter: blur(40px); }
  .ns-hero-title { margin-bottom: 2rem; }
  .ns-story-photo { width: min(100%, 290px); height: 370px; }
  .ns-story-photo__alt { right: -12%; }
  .ns-badge { left: -10%; width: 92px; height: 92px; }
  .ns-cta-photo { height: 300px; }
}
@keyframes ns-mediaWipeY {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

@media (max-width: 768px) {
  .ns-process__steps { grid-template-columns: 1fr; gap: 2.2rem; margin-top: 3rem; }
  .ns-process__line { left: 34px; right: auto; top: 34px; bottom: 34px; width: 1px; height: auto; }
  .ns-process__line i { transform: scaleY(var(--p)); transform-origin: top; }
  .ns-step {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    column-gap: 1.3rem;
    align-items: start;
    text-align: left;
    padding: 0;
  }
  .ns-step__node { grid-row: 1 / span 2; margin: 0; }
  .ns-step h3 { align-self: end; font-size: 1.75rem; }
  .ns-step p { margin: 0; max-width: none; }
  .ns-marquee__track > span { font-size: clamp(2.6rem, 2rem + 6vw, 4rem); }
  .ns-footer-wordmark { margin-bottom: 2rem; }
}

@media (hover: none) {
  .ns-story-tile__img::before,
  .ns-film-card__media::before,
  .ns-wed-card__media::before { display: none; }
}

/* ─────────────────────────────────────────────
 * 14. REDUCED MOTION — everything above stops, every hidden thing is visible
 * ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ns-intro { display: none !important; }
  html.ns-intro-lock { overflow: visible !important; }

  .ns-m,
  .ns-split-h .ns-w > span,
  .ns-footer-wordmark .ns-ch {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    animation: none !important;
  }
  .ns-split-h em .ns-w > span {
    background: none;
    -webkit-text-fill-color: currentColor;
  }

  .ns-aurora { display: none; }
  .ns-js .ns-hero-media { animation: none; }
  .ns-hero-chip { animation: none; opacity: 1; scale: 1; translate: none; }
  .ns-flourish path { animation: none !important; stroke-dashoffset: 0 !important; }
  .ns-hero-actions .ns-b--primary { animation: none; }

  .ns-marquee__track { animation: none; }
  .ns-marquee__row { overflow-x: auto; scrollbar-width: none; }

  .ns-process__line i { transform: none; }
  .ns-step__node { border-color: var(--ns-accent, #B05560); background: var(--ns-accent, #B05560); color: #fff; }

  .ns-badge svg,
  .ns-stat__num,
  .ns-enquire__card::before,
  .ns-whatsapp-float__link svg,
  .ns-b:hover .ns-arrow { animation: none; }
  .ns-stat__num { background: none; -webkit-text-fill-color: currentColor; color: var(--ns-ink, #2B2422); }
  .ns-enquire__card::before { display: none; }
  .ns-stat__label::before { transform: none; transition: none; }

  .ns-service-card .ns-icon.ns-draw :is(path, circle, rect, line, polyline) { stroke-dashoffset: 0 !important; animation: none !important; }
  .ns-ripple { display: none; }
  .ns-tilt { rotate: none !important; }
  .ns-mobile-drawer[style*="flex"] .ns-drawer-links a { animation: none; }
  .ns-restagger { animation: none; }
  .ns-lightbox-modal.is-active .ns-lightbox__wrapper,
  .ns-lightbox__viewport.ns-lb-swap { animation: none; }
}

/* the lightbox header shows only the counter and the close button (no "Nanotkar Cinema" label) */
.ns-lightbox__badge { display: none; }

/* hero reel switcher: small dots instead of "Reel 1 / Reel 2" labels; the active dot stretches and fills as the reel plays */
.ns-reel-pills { gap: 8px; padding: 9px 12px; border-radius: 999px; align-items: center; }
.ns-reel-btn {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 999px;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  background: rgba(255, 255, 255, 0.5);
  transition: width 0.4s var(--ns-ease, ease), background 0.3s;
}
.ns-reel-btn:hover { background: rgba(255, 255, 255, 0.85); }
.ns-reel-btn.active { width: 30px; background: rgba(255, 255, 255, 0.5); }
.ns-reel-btn.active::after { height: 100%; background: #fff; }
.ns-reel-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }