/* ============================================================
   motion.css · sitewide motion layer
   1) Hero/band drifting orbs + staggered entrance (.pg-band)
   2) Universal card hover (lift + shadow)
   3) Scroll-reveal (gated on html.mtn, driven by motion.js)
   Linked AFTER each page's inline <style> and main.css so these
   rules win. County detail pages reuse .cty-band in county.css;
   the homepage hero has its own motion in main.css.
   ============================================================ */
/* Per-page colour comes from --b1/--b2/--b3 on each .pg-band (set in the
   page's own <style>); jade fallbacks keep any un-migrated page looking right.
   The light/shadow life lives here, shared by every hub page. */
.pg-band{position:relative;overflow:hidden;padding-bottom:82px;
  background-color:var(--b2,#2f7d6f);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'%3E%3Cpath d='M0,90 L1200,90 L1200,30 C860,104 360,2 0,52 Z' fill='%23ffffff'/%3E%3C/svg%3E"),
    linear-gradient(115deg,transparent 30%,rgba(255,255,255,.10) 45%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.10) 55%,transparent 70%),
    linear-gradient(135deg,var(--b1,#1b5c44) 0%,var(--b2,#2f7d6f) 62%,var(--b3,#3a7766) 100%);
  background-size:100% 90px,280% 100%,100% 100%;
  background-position:50% 100%,140% 0,0 0;
  background-repeat:no-repeat;
  animation:bandSweep 9s ease-in-out infinite;}
/* a soft diagonal light sweeps across the band (the white wave stays pinned
   to the bottom, carving a Changhua-style curved edge into the white below) */
@keyframes bandSweep{0%{background-position:50% 100%,140% 0,0 0;}55%,100%{background-position:50% 100%,-40% 0,0 0;}}

/* drifting + breathing orbs (the existing ::before is orb 1; ::after is new) */
.pg-band::before{background:radial-gradient(circle,rgba(255,255,255,.20) 0%,transparent 68%);
  animation:bandOrb1 17s ease-in-out infinite,bandGlow 7.5s ease-in-out infinite;}
.pg-band::after{content:"";position:absolute;bottom:-160px;left:-90px;width:380px;height:380px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16) 0%,transparent 70%);
  pointer-events:none;z-index:0;animation:bandOrb2 21s ease-in-out infinite,bandGlow 9.5s ease-in-out infinite;}
@keyframes bandOrb1{0%,100%{transform:translate(0,0);}50%{transform:translate(-30px,28px);}}
@keyframes bandOrb2{0%,100%{transform:translate(0,0);}50%{transform:translate(36px,-24px);}}
@keyframes bandGlow{0%,100%{opacity:.5;}50%{opacity:1;}}

/* staggered fade-up entrance for the band heading + subtitles */
.pg-band .eyebrow,.pg-band h1,.pg-band .sub,.pg-band .sub-zh{
  position:relative;z-index:1;opacity:0;transform:translateY(16px);
  animation:bandUp .7s cubic-bezier(.2,.7,.2,1) forwards;
}
.pg-band .eyebrow{animation-delay:.05s;}
.pg-band h1{animation-delay:.15s;}
.pg-band .sub{animation-delay:.30s;}
.pg-band .sub-zh{animation-delay:.40s;}
@keyframes bandUp{to{opacity:1;transform:none;}}

/* neutral light text so the band reads cleanly on ANY page colour
   (pages used to hard-code a mint tint that only suited the jade band) */
.pg-band .eyebrow{color:rgba(255,255,255,.82);}
.pg-band .sub{color:rgba(255,255,255,.95);}
.pg-band .sub-zh{color:rgba(255,255,255,.88);}

/* ============================================================
   2) COLOURFUL CARDS — faithful to the ruyimeditation cards.
   Each card carries a hue in --accent. Pages that set --accent
   inline keep their curated colour; the rest cycle a warm 6-hue
   palette. The hue drives: a soft corner colour-circle that grows
   on hover, the resting border, the accent-COLOURED lift shadow
   (the glow), and the tag/CTA colour.
   ============================================================ */
.card,.hub-card,.hub-school-card,.school-card,.fet-card,.about-card,
.story-card,.ce-card,.policy-card,.policy-feature,.bllc-card,.bc-moe-card,
.sdg-card,.sdg,.ccard,.cty-feat,.person,.theme,.dom-card,.progcard,.partner{
  position:relative;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s ease,border-color .28s ease;
}
/* cycle a hue per card where the page didn't set --accent inline (low-specificity
   :where so inline curated colours and --pc still win) */
:where(.card,.hub-card,.hub-school-card,.school-card,.fet-card,.about-card,.story-card,.ce-card,.policy-card,.policy-feature,.bllc-card,.bc-moe-card,.sdg-card,.sdg,.ccard,.cty-feat,.person,.theme,.dom-card,.progcard):nth-child(6n+1){--accent:#b8431c;}
:where(.card,.hub-card,.hub-school-card,.school-card,.fet-card,.about-card,.story-card,.ce-card,.policy-card,.policy-feature,.bllc-card,.bc-moe-card,.sdg-card,.sdg,.ccard,.cty-feat,.person,.theme,.dom-card,.progcard):nth-child(6n+2){--accent:#0c8599;}
:where(.card,.hub-card,.hub-school-card,.school-card,.fet-card,.about-card,.story-card,.ce-card,.policy-card,.policy-feature,.bllc-card,.bc-moe-card,.sdg-card,.sdg,.ccard,.cty-feat,.person,.theme,.dom-card,.progcard):nth-child(6n+3){--accent:#7048e8;}
:where(.card,.hub-card,.hub-school-card,.school-card,.fet-card,.about-card,.story-card,.ce-card,.policy-card,.policy-feature,.bllc-card,.bc-moe-card,.sdg-card,.sdg,.ccard,.cty-feat,.person,.theme,.dom-card,.progcard):nth-child(6n+4){--accent:#2f9e44;}
:where(.card,.hub-card,.hub-school-card,.school-card,.fet-card,.about-card,.story-card,.ce-card,.policy-card,.policy-feature,.bllc-card,.bc-moe-card,.sdg-card,.sdg,.ccard,.cty-feat,.person,.theme,.dom-card,.progcard):nth-child(6n+5){--accent:#d6336c;}
:where(.card,.hub-card,.hub-school-card,.school-card,.fet-card,.about-card,.story-card,.ce-card,.policy-card,.policy-feature,.bllc-card,.bc-moe-card,.sdg-card,.sdg,.ccard,.cty-feat,.person,.theme,.dom-card,.progcard):nth-child(6n+6){--accent:#e8590c;}
.partner{--accent:var(--pc);}
/* soft colour-circle in the top-right corner; grows + brightens on hover */
.card::after,.hub-card::after,.hub-school-card::after,.school-card::after,.fet-card::after,
.about-card::after,.story-card::after,.ce-card::after,.policy-card::after,.policy-feature::after,
.bllc-card::after,.bc-moe-card::after,.sdg-card::after,.sdg::after,.ccard::after,.cty-feat::after,
.person::after,.theme::after,.dom-card::after,.progcard::after,.partner::after{
  content:"";position:absolute;right:-55px;top:-55px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle at 32% 32%,var(--accent,#0d7a6e),transparent 70%);
  opacity:.08;pointer-events:none;z-index:0;
  transition:opacity .35s ease,transform .6s cubic-bezier(.22,.61,.36,1);
}
/* TEXT cards get a bold colour LEFT-BAR via an inset shadow — visible at rest,
   no border/pseudo cascade fight (this is the ruyimeditation "spine"). */
.card,.hub-card,.policy-card,.sdg-card,.sdg,.ccard,.cty-feat,.person,.theme,
.dom-card,.story-card,.about-card,.ce-card,.bllc-card,.bc-moe-card{
  box-shadow:inset 5px 0 0 0 var(--accent,#0d7a6e),0 1px 3px rgba(20,24,31,.05);
}
.card:hover,.hub-card:hover,.policy-card:hover,.sdg-card:hover,.sdg:hover,.ccard:hover,
.cty-feat:hover,.person:hover,.theme:hover,.dom-card:hover,.story-card:hover,
.about-card:hover,.ce-card:hover,.bllc-card:hover,.bc-moe-card:hover{
  transform:translateY(-8px);border-color:var(--accent);
  box-shadow:inset 5px 0 0 0 var(--accent,#0d7a6e),0 26px 52px -18px var(--accent,rgba(20,24,31,.45)),0 8px 18px rgba(20,24,31,.08);
}
/* PHOTO / top-bar cards: their coloured top bar carries the hue at rest; on
   hover they lift with an accent-COLOURED glow. */
.school-card:hover,.hub-school-card:hover,.fet-card:hover,.policy-feature:hover,
.progcard:hover,.partner:hover{
  transform:translateY(-8px);border-color:var(--accent);
  box-shadow:0 26px 52px -18px var(--accent,rgba(20,24,31,.45)),0 8px 18px rgba(20,24,31,.08);
}
.card:hover::after,.hub-card:hover::after,.hub-school-card:hover::after,.school-card:hover::after,
.fet-card:hover::after,.about-card:hover::after,.story-card:hover::after,.ce-card:hover::after,
.policy-card:hover::after,.policy-feature:hover::after,.bllc-card:hover::after,.bc-moe-card:hover::after,
.sdg-card:hover::after,.sdg:hover::after,.ccard:hover::after,.cty-feat:hover::after,
.person:hover::after,.theme:hover::after,.dom-card:hover::after,.progcard:hover::after,.partner:hover::after{
  opacity:.2;transform:scale(1.35);
}
/* the small tag + CTA pick up the card hue */
.card-tag,.card-go,.card-action,.card-meta,.card-loc+.card-go{color:var(--accent);}

/* ============================================================
   3) SCROLL REVEAL — only active when the head guard set html.mtn
   (so no flash, and no-JS / disabled-JS users still see content).
   motion.js adds .mtn-in as each element scrolls into view.
   ============================================================ */
html.mtn .card,html.mtn .hub-card,html.mtn .hub-school-card,html.mtn .school-card,
html.mtn .fet-card,html.mtn .about-card,html.mtn .story-card,html.mtn .ce-card,
html.mtn .policy-card,html.mtn .policy-feature,html.mtn .bllc-card,html.mtn .bc-moe-card,
html.mtn .sdg-card,html.mtn .sdg,html.mtn .ccard,html.mtn .cty-feat,html.mtn .person,
html.mtn .theme,html.mtn .dom-card,html.mtn .progcard,html.mtn .partner,
html.mtn [data-mtn]{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
html.mtn .card.mtn-in,html.mtn .hub-card.mtn-in,html.mtn .hub-school-card.mtn-in,
html.mtn .school-card.mtn-in,html.mtn .fet-card.mtn-in,html.mtn .about-card.mtn-in,
html.mtn .story-card.mtn-in,html.mtn .ce-card.mtn-in,html.mtn .policy-card.mtn-in,
html.mtn .policy-feature.mtn-in,html.mtn .bllc-card.mtn-in,html.mtn .bc-moe-card.mtn-in,
html.mtn .sdg-card.mtn-in,html.mtn .sdg.mtn-in,html.mtn .ccard.mtn-in,
html.mtn .cty-feat.mtn-in,html.mtn .person.mtn-in,html.mtn .theme.mtn-in,
html.mtn .dom-card.mtn-in,html.mtn .progcard.mtn-in,html.mtn .partner.mtn-in,
html.mtn [data-mtn].mtn-in{opacity:1;transform:none;}

/* Hover must out-rank the reveal rule above (which otherwise keeps a slow .7s
   transform), so the lift stays snappy like the ruyimeditation cards. */
html.mtn .card:hover,html.mtn .hub-card:hover,html.mtn .hub-school-card:hover,
html.mtn .school-card:hover,html.mtn .fet-card:hover,html.mtn .about-card:hover,
html.mtn .story-card:hover,html.mtn .ce-card:hover,html.mtn .policy-card:hover,
html.mtn .policy-feature:hover,html.mtn .bllc-card:hover,html.mtn .bc-moe-card:hover,
html.mtn .sdg-card:hover,html.mtn .sdg:hover,html.mtn .ccard:hover,html.mtn .cty-feat:hover,
html.mtn .person:hover,html.mtn .theme:hover,html.mtn .dom-card:hover,
html.mtn .progcard:hover,html.mtn .partner:hover{
  transform:translateY(-8px);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

@media (prefers-reduced-motion: reduce){
  .pg-band{animation:none;background-position:50% 100%,0 0,0 0;}
  .pg-band::before,.pg-band::after{animation:none;}
  .pg-band .eyebrow,.pg-band h1,.pg-band .sub,.pg-band .sub-zh{opacity:1;transform:none;animation:none;}
  html.mtn .card,html.mtn .hub-card,html.mtn .hub-school-card,html.mtn .school-card,
  html.mtn .fet-card,html.mtn .about-card,html.mtn .story-card,html.mtn .ce-card,
  html.mtn .policy-card,html.mtn .policy-feature,html.mtn .bllc-card,html.mtn .bc-moe-card,
  html.mtn .sdg-card,html.mtn .sdg,html.mtn .ccard,html.mtn .cty-feat,html.mtn .person,
  html.mtn .theme,html.mtn .dom-card,html.mtn .progcard,html.mtn .partner,
  html.mtn [data-mtn]{opacity:1!important;transform:none!important;transition:none!important;}
  .card:hover,.hub-card:hover,.hub-school-card:hover,.school-card:hover,.fet-card:hover,
  .about-card:hover,.story-card:hover,.ce-card:hover,.policy-card:hover,.policy-feature:hover,
  .bllc-card:hover,.bc-moe-card:hover,.sdg-card:hover,.sdg:hover,.ccard:hover,.cty-feat:hover,
  .person:hover,.theme:hover,.dom-card:hover,.progcard:hover{transform:none;}
}