/* ============================================================
   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{
  /* Cloth's own ink. NOT a brand variable — Ndop must never drift with the
     UI palette. */
  --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)}

/* Two colours only: ink draws on light grounds, ground draws on dark — how
   resist-dyed Ndop reads. No tint, no second ink. */
.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:var(--nd-full)}
.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 hero pattern -------------------------------
   The navy section under the header, which carries the page H1. Matched as
   first child of <main>: no per-page class, and it can never hit the homepage
   (whose first child is .hero).

   wash.svg has its ink baked in and a background-image cannot be recoloured,
   so it is used as a MASK over a white fill — geometry untouched, only what
   shows through it. Panel rung, one loom-shuttle wipe on load. */
main > .section.navy:first-child{position:relative;isolation:isolate;overflow:hidden}
main > .section.navy:first-child::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--nd-ground);
  /* -266px lifts the band row clear of the header. */
  -webkit-mask:var(--nd-url) center -266px/1100px auto;
  mask:var(--nd-url) center -266px/1100px auto;
  opacity:var(--nd-panel);
  transform-origin:left center;
  animation:nd-shuttle .62s cubic-bezier(.16,.84,.44,1) both;
}
@media(max-width:560px){
  main > .section.navy:first-child::before{
    -webkit-mask-size:760px auto;mask-size:760px auto;
    -webkit-mask-position:center -185px;mask-position:center -185px;
  }
}
@media(prefers-reduced-motion:reduce){
  main > .section.navy:first-child::before{animation:none;transform:none}
}

/* ---- 9. Philosophy wash. Not .nd-wash: that must not nest. ---- */
.phil-text::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--nd-url) center -266px/1100px auto;opacity:var(--nd-panel)}