/* ============================================================
   Ndop pattern system - Mfah-Mfah Academy
   Append to the v2 stylesheet. Assumes --vivid / --navy / --sky
   are already defined by the brand palette.
   ============================================================ */

/* ---- 1. Intensity ladder. Four rungs, never a fifth. -------- */
:root{
  /* The cloth's own ink. Deliberately NOT a brand variable: Ndop is a
     single-ink resist dye and must never drift with the UI palette.
     Sampled from the client's pattern document. */
  --nd-ink:#003497;
  --nd-ground:#FFFFFF;

  --nd-full:1;
  --nd-panel:.14;
  --nd-page:.07;
  --nd-ghost:.03;
  --nd-url:url("/assets/ndop/wash.svg");
}

/* ---- 2. Background wash via pseudo-element ------------------
   Applied to the parent, so page text is never dimmed with it. */
.nd-wash{position:relative;isolation:isolate}
.nd-wash::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--nd-url);
  background-size:1500px auto;      /* LARGE. Scale is what makes it
                                       read as woven, not as noise. */
  opacity:var(--nd-page);
}
.nd-wash--ghost::before{opacity:var(--nd-ghost)}
.nd-wash--panel::before{opacity:var(--nd-panel);background-size:1100px auto}

/* ---- 3. Dividers and bands ---------------------------------- */
.nd-divider{
  height:26px;width:100%;display:block;
  background:url("/assets/ndop/divider.svg") repeat-x center/auto 26px;
}
.nd-band{
  height:30px;width:100%;display:block;
  background:url("/assets/ndop/band.svg") repeat-x center/auto 30px;
}
.nd-edge{
  position:absolute;top:0;bottom:0;left:0;width:34px;
  background:url("/assets/ndop/edge.svg") repeat-y left top/34px auto;
}

/* ---- 4. Inline symbol usage --------------------------------- */
.nd-field{display:block;color:var(--nd-ink)}

/* The cloth is two colours: #003497 ink on a #FFFFFF ground. On a light
   surface the ink draws the pattern; on a dark one the ground does, which is
   how resist-dyed Ndop actually reads. Same two colours either way — no tint,
   no second ink, no accent. */
.hero .nd-field,.section.navy .nd-field,.cta-band .nd-field{color:var(--nd-ground)}
.nd-brush{filter:url(#nd-brushed)}
.nd-lvl-full{opacity:1}
.nd-lvl-panel{opacity:var(--nd-panel)}
.nd-lvl-page{opacity:var(--nd-page)}
.nd-lvl-ghost{opacity:var(--nd-ghost)}

.nd-mark{width:1em;height:1em;color:var(--nd-ink);flex:none}

/* medallion as list bullet - Pillars, Vision, FAQ */
.nd-list{list-style:none;padding-left:0}
.nd-list li{position:relative;padding-left:2em;margin-bottom:.6em}
.nd-list li::before{
  content:"";position:absolute;left:0;top:.42em;width:1em;height:1em;
  background:url("/assets/ndop/medallion.svg") no-repeat center/contain;
}

/* ---- 5. Hero ------------------------------------------------- */
.nd-hero{position:relative;overflow:hidden}
.nd-hero-bg{
  position:absolute;inset:-40px;pointer-events:none;
  width:calc(100% + 80px);height:calc(100% + 80px);
}
.nd-hero-bg svg{width:100%;height:100%}
.nd-hero>*:not(.nd-hero-bg){position:relative}

/* ---- 6. Motion ---------------------------------------------- */
.nd-band-anim{transform-origin:left center;
  animation:nd-shuttle .62s cubic-bezier(.16,.84,.44,1) both}
@keyframes nd-shuttle{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.nd-p{animation:nd-inkin .7s ease-out both}
@keyframes nd-inkin{from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}}
.nd-p0{animation-delay:.10s}  .nd-p1{animation-delay:.16s}
.nd-p2{animation-delay:.22s}  .nd-p3{animation-delay:.28s}
.nd-p4{animation-delay:.34s}  .nd-p5{animation-delay:.40s}
.nd-p6{animation-delay:.46s}  .nd-p7{animation-delay:.52s}
.nd-p8{animation-delay:.58s}  .nd-p9{animation-delay:.64s}
.nd-p10{animation-delay:.70s} .nd-p11{animation-delay:.76s}

.nd-drift{animation:nd-drift 90s linear infinite alternate}
@keyframes nd-drift{from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-26px,-14px,0)}}

.nd-eyemark{stroke-dasharray:320;stroke-dashoffset:320;
  animation:nd-draw 1.5s .85s ease-out forwards}
@keyframes nd-draw{to{stroke-dashoffset:0}}

.nd-breathe{animation:nd-breathe 9s ease-in-out 2.4s infinite}
@keyframes nd-breathe{0%,100%{opacity:var(--nd-page)}
  50%{opacity:calc(var(--nd-page) * 2)}}

.nd-rise{animation:nd-rise .8s 1s cubic-bezier(.16,.84,.44,1) both}
.nd-rise2{animation-delay:1.14s}
.nd-rise3{animation-delay:1.28s}
@keyframes nd-rise{from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}}

.nd-reveal{clip-path:inset(0 100% 0 0);
  transition:clip-path 1.1s cubic-bezier(.16,.84,.44,1)}
.nd-reveal.is-in{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  .nd-band-anim,.nd-p,.nd-drift,.nd-eyemark,.nd-breathe,.nd-rise{
    animation:none!important}
  .nd-eyemark{stroke-dashoffset:0}
  .nd-reveal{clip-path:none;transition:none}
}

/* ---- 7. Print: drop the cloth ------------------------------- */
@media print{
  .nd-wash::before,.nd-hero-bg,.nd-divider,.nd-band{display:none}
}

/* ---- 8. Inner-page band ---------------------------------------
   Shallow band under the site header on every route except the homepage.
   Panel rung at large scale; the fill carries the loom-shuttle so the band
   wipes in once on load. It sits above the page title, never behind it, so
   it cannot affect H1 contrast. */
.nd-inner-band{
  height:104px;width:100%;overflow:hidden;position:relative;
  background:var(--nd-ground);
}
.nd-inner-band__fill{
  position:absolute;inset:0;
  background-image:var(--nd-url);
  background-size:1100px auto;      /* matches .nd-wash--panel */
  background-position:center;
  opacity:var(--nd-panel);
  transform-origin:left center;
}
@media(max-width:560px){
  .nd-inner-band{height:64px}
  .nd-inner-band__fill{background-size:760px auto}
}