/* Delight layer — additive motion + accents that enhance the existing markup.
   Loads after site.css so its hover/transition rules win on shared selectors.
   Everything is gated on html.js-motion and fully disabled for reduced-motion. */

/* 1. Draw-on for the existing hand-drawn underline (.scribble). JS adds .dl-draw
   (so if JS is absent the underline just shows normally), then .dl-in on scroll. */
html.js-motion .scribble.dl-draw::after{clip-path:inset(0 100% 0 0);transition:clip-path .85s cubic-bezier(.62,.08,.2,1) .12s;}
html.js-motion .scribble.dl-draw.dl-in::after{clip-path:inset(0 0 0 0);}

/* 2. Bouncier hover on the cards/rows/tiles the site already uses. */
html.js-motion .card, html.js-motion .prog-card, html.js-motion .honor-card,
html.js-motion .event-card, html.js-motion .prog-row, html.js-motion .tile{
  transition:transform .2s cubic-bezier(.2,.8,.2,1.35), box-shadow .2s var(--ease-out, ease);}
html.js-motion .card:hover, html.js-motion .prog-card:hover, html.js-motion .honor-card:hover{transform:translateY(-6px) scale(1.012);}
html.js-motion .prog-row:hover{transform:translateY(-3px);}
html.js-motion .tile:hover{transform:translateY(-4px) rotate(-.5deg);}
html.js-motion .btn:active{transform:translateY(1px) scale(.985);}

/* 3. Marker-circle accent (opt-in: a number host gets .dl-ringhost + an svg.dl-ring). */
.dl-ringhost{position:relative;display:inline-block;}
/* KEEP THESE THREE RULES. Deleted in 22244d2 and again in 24ba230, both times
   silently, inside commits about something else. Without them the circle draws
   over the 0 and trails into blank space. Verified rendered at 390 and 1280.

   1. The community strip sets display:block on the numeral at higher specificity,
      so inline-block never lands and the <b> stretches to its sibling label's
      width, throwing the centered ring off the digits. Restate the component
      selector and shrink-wrap instead of fighting the display value. */
.community-strip .cs-n b.dl-ringhost{width:fit-content;}
/* 2. Size the circle in em so it tracks the fluid numeral instead of staying 86px
      while the type shrinks, which made it read 3.1x the digits on a phone. */
.community-strip .cs-n .dl-ring{width:2.6em;height:auto;}
/* 3. max-width:none defeats the global `img, picture, svg { max-width:100% }` reset,
      which otherwise shrinks the circle to the width of the numeral it encloses. */
.dl-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:visible;pointer-events:none;z-index:1;max-width:none;}
html.js-motion .dl-ring path{stroke-dasharray:var(--len,780);stroke-dashoffset:var(--len,780);transition:stroke-dashoffset 1.1s cubic-bezier(.62,.08,.2,1) .2s;}
html.js-motion .dl-ring.dl-in path{stroke-dashoffset:0;}

/* 4. Doodle accents (opt-in: an absolutely-placed .dl-doodle with .dl-bob or .dl-tw). */
.dl-doodle{position:absolute;pointer-events:none;z-index:1;}
@keyframes dl-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(4deg)}}
@keyframes dl-tw{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.12)}}
html.js-motion .dl-bob{animation:dl-bob 4.5s ease-in-out infinite;}
html.js-motion .dl-tw{animation:dl-tw 2.8s ease-in-out infinite;}

/* 0. Tighten sitewide vertical rhythm. Base --section-y capped at 6rem, so on wide
   desktop sections ran ~12rem apart and felt empty. Pull it in and tame the gap
   under section headings. Loads after site.css so these win. */
:root{ --section-y: clamp(2.25rem, 1.6rem + 1.8vw, 4rem); }
.section-head{ margin-bottom: clamp(1.4rem, 1rem + 1.3vw, 2.4rem); }

/* 5. Program photo-cards (reusable across pages: replaces flat prog-row lists). */
.hp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:20px;}
.hp-card{display:block;background:#fff;border:1px solid var(--line,#CBDCEC);border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;}
.hp-card .hp-ph{height:140px;background-size:cover;background-position:center;position:relative;background-color:#5B89B4;}
.hp-card .hp-ic{position:absolute;left:15px;bottom:-20px;width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(0,0,0,.15);border:3px solid #fff;}
.hp-card .hp-body{padding:28px 18px 20px;}
.hp-card h3{font-family:var(--f-display,Fredoka),Montserrat,sans-serif;color:var(--navy,#1C355E);font-size:1.18rem;margin:0 0 .3rem;}
.hp-card .hp-desc{display:block;color:var(--ink-soft,#5b6167);font-size:.92rem;line-height:1.45;margin:0 0 .8rem;}
.hp-card .hp-go{font-family:var(--f-display,Fredoka),Montserrat,sans-serif;font-weight:600;color:var(--blue,#345D9D);font-size:.9rem;}
html.js-motion .hp-card{transition:transform .16s cubic-bezier(.2,.8,.2,1.3),box-shadow .16s ease;}
html.js-motion .hp-card:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(28,53,94,.15);}
html.js-motion .hp-card:hover .hp-ic{animation:dl-pop .5s ease;}
@keyframes dl-pop{0%{transform:scale(1)}45%{transform:scale(1.2) rotate(-8deg)}100%{transform:scale(1)}}

@media (prefers-reduced-motion: reduce){
  html.js-motion .hp-card{transition:none;}
  html.js-motion .hp-card:hover .hp-ic{animation:none;}
  html.js-motion .scribble.dl-draw::after{clip-path:none;transition:none;}
  html.js-motion .dl-ring path{stroke-dashoffset:0;transition:none;}
  html.js-motion .dl-bob, html.js-motion .dl-tw{animation:none;}
  html.js-motion .card, html.js-motion .prog-card, html.js-motion .honor-card,
  html.js-motion .event-card, html.js-motion .prog-row, html.js-motion .tile{transition:none;}
}

/* ============================================================
   Homepage rebuild (2026-08): Option B hero, relocated give,
   spiritual strip. Real photos only, reduced-motion safe.
   ============================================================ */
.hero-bleed .bg{background-size:cover;background-position:center;}
.hero-slides{position:absolute;inset:0;overflow:hidden;}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center center;
  opacity:0;will-change:opacity,transform;animation:hhHeroFade 24s linear infinite;}
.hero-slide:nth-child(2){animation-delay:6s;}
.hero-slide:nth-child(3){animation-delay:12s;}
.hero-slide:nth-child(4){animation-delay:18s;}
@keyframes hhHeroFade{
  0%{opacity:0;transform:scale(1.0);}
  3%{opacity:1;}
  25%{opacity:1;transform:scale(1.08);}
  30%{opacity:0;transform:scale(1.08);}
  100%{opacity:0;transform:scale(1.0);}
}
@media (prefers-reduced-motion: reduce){
  .hero-slide{animation:none;opacity:0;}
  .hero-slide:first-child{opacity:1;}
}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.5rem;}
.hero-bleed-grid--single{display:block;max-width:720px;}

/* Relocated give section */
.give-relocate{display:grid;grid-template-columns:1fr minmax(320px,430px);gap:2.5rem;align-items:center;}
.give-relocate .give-card{margin:0;}
@media (max-width:860px){.give-relocate{grid-template-columns:1fr;gap:1.75rem;}}

/* Spiritual Life strip */
.spirit-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;}
.spirit-media picture,.spirit-media img{display:block;width:100%;height:auto;border-radius:20px;}
@media (max-width:860px){.spirit-grid{grid-template-columns:1fr;gap:1.5rem;}}


/* About: give Vision/Work real card treatment (was transparent) */
.about-vw{background:#fff;border:1px solid var(--line,#D9E7F2);border-radius:16px;
  box-shadow:0 6px 20px rgba(28,53,94,.07);border-top:3px solid var(--orange,#EE7623);}
.about-vw strong{display:block;color:var(--navy,#1C355E);font-size:1.05rem;margin-bottom:.15rem;}