/* Chipstead Lodge motion layer, September 2026.
   Principle: motion explains, it does not perform. Every piece plays once,
   ends in a calm resting state and is skipped for "reduce motion" users.
   Remove this file and assets/motion.js to return to the static site. */

:root {
  --mo-navy: #0e1e3a;
  --mo-navy-soft: #1d3760;
  --mo-gold: #c9a84c;
  --mo-gold-light: #e2c97e;
  --mo-gold-deep: #7a6421;
  --mo-cream: #f8f6f1;
  --mo-paper: #f0f0f0;
  --mo-paper-muted: #9badc4;
  --mo-ink: #1a1a1a;
  --mo-ink-light: #4a4a4a;
  --mo-ease: cubic-bezier(.22, .61, .36, 1);
  --mo-ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ------------------------------------------------------------------
   1. Homepage hero. CSS only, so nothing waits for a script.
   The square and compasses are drafting tools, so the crest draws itself
   as if by pen. Strokes keep their colour and weight, nothing rotates.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .home-page .hero-emblem { animation: none; }
  .home-page .hero-emblem svg > circle {
    stroke-dasharray: 1730; transform: rotate(-90deg); transform-origin: 250px 250px;
    animation: mo-draw-1730 2.2s .35s var(--mo-ease-io) both;
  }
  .home-page .hero-emblem svg > circle + circle { stroke-dasharray: 1666; animation-name: mo-draw-1666; animation-delay: .5s; }
  /* Compass legs, drawn down from the pivot */
  .home-page .hero-emblem svg > g > g:last-child > path:nth-child(1),
  .home-page .hero-emblem svg > g > g:last-child > path:nth-child(2) {
    stroke-dasharray: 636; animation: mo-draw-636 1.1s .25s var(--mo-ease-io) both;
  }
  /* Pivot ring, then its solid centre */
  .home-page .hero-emblem svg > g > g:last-child > path:nth-child(3) {
    stroke-dasharray: 196; animation: mo-draw-196 .6s .15s var(--mo-ease) both;
  }
  .home-page .hero-emblem svg > g > g:last-child > path:nth-child(4) {
    animation: mo-fade 0.5s 1.1s var(--mo-ease) both;
  }
  /* The square, then its graduation marks */
  .home-page .hero-emblem svg > g > g:first-child > path {
    stroke-dasharray: 925; animation: mo-draw-925 1.3s .75s var(--mo-ease-io) both;
  }
  .home-page .hero-emblem svg > g > g:first-child > g {
    animation: mo-fade .7s 1.65s var(--mo-ease) both;
  }

  /* Words arrive in reading order, gently */
  .home-page .hero-content > h1,
  .home-page .hero-content > .hero-tagline,
  .home-page .hero-content > .hero-reasons,
  .home-page .hero-content > .hero-welcome,
  .home-page .hero-content > .hero-actions {
    animation: mo-rise .9s var(--mo-ease) both;
  }
  .home-page .hero-content > h1 { animation-delay: .1s; }
  .home-page .hero-content > .hero-tagline { animation-delay: .2s; }
  .home-page .hero-content > .hero-reasons { animation-delay: .3s; }
  .home-page .hero-content > .hero-welcome { animation-delay: .4s; }
  .home-page .hero-content > .hero-actions { animation-delay: .5s; }

  /* The real photograph settles into place. Scale only, so it paints at once. */
  .home-page .hero-photograph.real-photo {
    transform-origin: 62% 42%;
    animation: mo-settle 2.8s var(--mo-ease) both;
  }

  /* A gold rule sweeps under the one highlighted word */
  .home-page .hero-reasons-highlight {
    box-shadow: none;
    background: linear-gradient(rgba(201, 168, 76, .32), rgba(201, 168, 76, .32)) no-repeat 0 100% / 100% .36em;
    animation: mo-underline .9s 1.15s var(--mo-ease) both;
  }
}

@keyframes mo-draw-1730 { from { stroke-dashoffset: 1730; } to { stroke-dashoffset: 0; } }
@keyframes mo-draw-1666 { from { stroke-dashoffset: 1666; } to { stroke-dashoffset: 0; } }
@keyframes mo-draw-925 { from { stroke-dashoffset: 925; } to { stroke-dashoffset: 0; } }
@keyframes mo-draw-636 { from { stroke-dashoffset: 636; } to { stroke-dashoffset: 0; } }
@keyframes mo-draw-196 { from { stroke-dashoffset: 196; } to { stroke-dashoffset: 0; } }
@keyframes mo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mo-settle { from { transform: scale(1.05); } to { transform: none; } }
@keyframes mo-underline { from { background-size: 0% .36em; } to { background-size: 100% .36em; } }

/* ------------------------------------------------------------------
   2. Year dial: "Four evenings a year"
   ------------------------------------------------------------------ */
.mo-year { margin: 0; color: var(--mo-paper); }
.mo-year-dial { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; overflow: visible; }
.mo-year-dial text { font-family: Raleway, 'Helvetica Neue', Arial, sans-serif; }
.mo-year .mo-ring-base { fill: none; stroke: rgba(240, 240, 240, .16); stroke-width: 1.5; }
.mo-year .mo-tick { stroke: rgba(240, 240, 240, .22); stroke-width: 1; }
.mo-year .mo-sweep { fill: none; stroke: var(--mo-gold); stroke-width: 2.5; stroke-linecap: round; opacity: .75; transition: opacity 1.2s var(--mo-ease); }
.mo-year.is-done .mo-sweep { opacity: .22; }
.mo-year .mo-season { fill: none; stroke: var(--mo-gold-light); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 7.2; opacity: .8; }
.mo-year .mo-month { font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; fill: var(--mo-paper-muted); transition: fill .6s var(--mo-ease); }
.mo-year .mo-month.is-meeting.is-lit { fill: var(--mo-gold-light); font-weight: 700; }
.mo-year .mo-marker { fill: var(--mo-gold); stroke: var(--mo-navy); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); }
.mo-year .mo-marker.is-lit { transform: scale(1); }
.mo-year .mo-halo { fill: none; stroke: var(--mo-gold); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.mo-year .mo-halo.is-lit { animation: mo-halo 1.1s var(--mo-ease) both; }
.mo-year .mo-count { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 76px; font-weight: 600; font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1; fill: var(--mo-gold); transition: opacity .5s var(--mo-ease); }
.mo-year .mo-count-label { transition: opacity .5s var(--mo-ease); font-size: 9.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; fill: var(--mo-paper); }
.mo-year .mo-count-sub { font-size: 9.5px; letter-spacing: .08em; fill: var(--mo-paper-muted); }
@keyframes mo-halo { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }

.mo-year-legend { list-style: none; margin: 1.25rem auto 0; padding: 0; max-width: 320px; display: grid; gap: .55rem; }
.mo-year-legend li { display: flex; align-items: center; gap: .75rem; margin: 0; padding: 0; font: 400 .92rem/1.45 Raleway, 'Helvetica Neue', Arial, sans-serif; color: #dce4ef; }
.mo-year-legend li::before { content: none; }
.mo-key { flex: 0 0 22px; height: 12px; display: inline-flex; align-items: center; justify-content: center; }
.mo-key-meeting::after { content: ''; width: 11px; height: 11px; border-radius: 50%; background: var(--mo-gold); box-shadow: 0 0 0 2px var(--mo-navy), 0 0 0 3px rgba(201, 168, 76, .5); }
.mo-key-season::after { content: ''; width: 22px; height: 3px; background: radial-gradient(circle, var(--mo-gold-light) 1.4px, transparent 1.6px) 0 50% / 7px 3px repeat-x; }
.mo-key-quiet::after { content: ''; width: 22px; height: 1.5px; background: rgba(240, 240, 240, .3); }

/* Dark homepage section: text left, dial right */
.mo-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
#meetings .section-inner.mo-has-split { max-width: 1080px; }

/* Light pages (cream or white) */
.mo-year--light { color: var(--mo-ink); margin: 2.25rem 0 2.5rem; display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); gap: 2rem; align-items: center; }
.mo-year--light .mo-year-dial { max-width: 280px; }
.mo-year--light .mo-ring-base { stroke: rgba(14, 30, 58, .16); }
.mo-year--light .mo-tick { stroke: rgba(14, 30, 58, .22); }
.mo-year--light .mo-sweep { stroke: var(--mo-gold); opacity: .9; }
.mo-year--light.is-done .mo-sweep { opacity: .4; }
.mo-year--light .mo-season { stroke: var(--mo-gold-deep); opacity: .85; }
.mo-year--light .mo-month { fill: var(--mo-ink-light); }
.mo-year--light .mo-month.is-meeting.is-lit { fill: var(--mo-navy); }
.mo-year--light .mo-marker { fill: var(--mo-navy); stroke: #fff; }
.mo-year--light .mo-halo { stroke: var(--mo-gold); }
.mo-year--light .mo-count { fill: var(--mo-navy); }
.mo-year--light .mo-count-label { fill: var(--mo-navy); }
.mo-year--light .mo-count-sub { fill: var(--mo-ink-light); }
.mo-year--light .mo-year-legend { margin: 0; max-width: none; }
.mo-year--light .mo-year-legend li { color: var(--mo-ink); font-size: .98rem; }
.mo-year--light .mo-key-meeting::after { background: var(--mo-navy); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--mo-gold); }
.mo-year--light .mo-key-season::after { background-image: radial-gradient(circle, var(--mo-gold-deep) 1.4px, transparent 1.6px); }
.mo-year--light .mo-key-quiet::after { background: rgba(14, 30, 58, .3); }
.mo-year-title { margin: 0 0 .9rem; font: 600 .78rem/1.4 Raleway, 'Helvetica Neue', Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--mo-gold-deep); }

@media (max-width: 800px) {
  .mo-split { grid-template-columns: 1fr; }
  .mo-split .mo-year { max-width: 320px; width: 100%; margin: 0 auto; }
}
@media (max-width: 600px) {
  .mo-year--light { grid-template-columns: 1fr; gap: 1.25rem; }
  .mo-year--light .mo-year-dial { max-width: 260px; }
}

/* ------------------------------------------------------------------
   3. Heritage line (homepage history teaser)
   ------------------------------------------------------------------ */
.mo-heritage { list-style: none; margin: 2.25rem 0 .5rem; padding: 0; position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.mo-heritage::before, .mo-heritage::after { content: ''; position: absolute; top: 5px; left: 5px; right: calc(20% - 5px); height: 1px; }
.mo-heritage::before { background: rgba(240, 240, 240, .16); }
.mo-heritage::after { background: var(--mo-gold); opacity: .75; transform-origin: left center; transform: scaleX(var(--mo-line, 1)); }
.mo-heritage li { position: relative; padding: 1.4rem .75rem 0 0; margin: 0; }
.mo-heritage li::before { content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 10px; background: var(--mo-navy); border: 1.5px solid var(--mo-gold); transform: rotate(45deg); z-index: 1; }
.mo-heritage li.is-chipstead::before { background: var(--mo-gold); }
.mo-heritage-year { display: block; font: 600 1.45rem/1.1 'Cormorant Garamond', Georgia, serif; color: var(--mo-gold-light); margin-bottom: .35rem; }
.mo-heritage-text { display: block; font: 400 .88rem/1.5 Raleway, 'Helvetica Neue', Arial, sans-serif; color: #dce4ef; }
.mo-heritage li.is-chipstead .mo-heritage-year { color: #f1d990; }
.mo-anim .mo-heritage li { opacity: 0; transform: translateY(8px); transition: opacity .7s var(--mo-ease), transform .7s var(--mo-ease); }
.mo-anim .mo-heritage li::before { transform: rotate(45deg) scale(0); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.mo-anim .mo-heritage li.is-in { opacity: 1; transform: none; }
.mo-anim .mo-heritage li.is-in::before { transform: rotate(45deg) scale(1); }
@media (max-width: 640px) {
  .mo-heritage { grid-template-columns: 1fr; gap: 1.1rem; padding-left: 1.75rem; }
  .mo-heritage::before, .mo-heritage::after { top: 10px; bottom: auto; left: 5px; right: auto; width: 1px; height: calc(100% - 3.2rem); }
  .mo-heritage::after { transform-origin: center top; transform: scaleY(var(--mo-line, 1)); }
  .mo-heritage li { padding: 0; }
  .mo-heritage li::before { left: -1.75rem; top: .45rem; }
}

/* ------------------------------------------------------------------
   4. Joining path (homepage four steps)
   ------------------------------------------------------------------ */
.mo-path { position: absolute; top: 27px; left: 12.5%; right: 12.5%; height: 2px; background: var(--mo-gold); opacity: .7; transform-origin: left center; pointer-events: none; }
.mo-anim .mo-path { transform: scaleX(0); }
.journey-num.is-reached { animation: mo-reach 1.1s var(--mo-ease) both; }
@keyframes mo-reach {
  0% { box-shadow: 0 0 0 0 rgba(201, 168, 76, .55); background: var(--mo-gold); color: var(--mo-navy); }
  45% { background: var(--mo-gold); color: var(--mo-navy); }
  100% { box-shadow: 0 0 0 14px rgba(201, 168, 76, 0); }
}
@media (max-width: 600px) { .mo-path { display: none; } }

/* ------------------------------------------------------------------
   5. Progress rail (how-to-join steps, for-dads evening)
   The rail follows the reader's scroll, so the reader stays in control.
   ------------------------------------------------------------------ */
.mo-rail { position: relative; }
.mo-rail-track, .mo-rail-fill { position: absolute; left: var(--mo-rail-x, 42px); top: var(--mo-rail-top, 0); height: var(--mo-rail-h, 0); pointer-events: none; }
.mo-rail-track { width: 1px; background: rgba(14, 30, 58, .14); }
.mo-rail-fill { width: 2px; margin-left: -.5px; background: var(--mo-gold); transform-origin: center top; transform: scaleY(var(--mo-rail-p, 1)); }
.mo-rail-node { position: absolute; left: var(--mo-rail-x, 42px); width: 9px; height: 9px; margin: -4.5px 0 0 -4px; background: #fff; border: 1.5px solid var(--mo-gold-deep); transform: rotate(45deg); transition: background .4s var(--mo-ease), border-color .4s var(--mo-ease); pointer-events: none; }
.mo-rail-node.is-reached { background: var(--mo-gold); border-color: var(--mo-gold); }
.guide-page .step-list.mo-rail li { padding-left: 4.25rem; }
.evening-list.mo-rail { --mo-rail-x: 108px; }
@media (min-width: 601px) { .evening-list.mo-rail li { gap: 2.5rem; } }
/* Brand contrast rule: gold text on white is decoration only, so the times use gold-deep. */
.landing-page .evening-time { color: var(--mo-gold-deep); }
@media (max-width: 600px) {
  .evening-list.mo-rail { --mo-rail-x: 4px; }
  .evening-list.mo-rail li { padding-left: 1.6rem; }
}

/* ------------------------------------------------------------------
   6. Quiet reveals. Only content that starts below the fold is held back,
   and only once the script has confirmed it can reveal it again.
   ------------------------------------------------------------------ */
.mo-anim .mo-pending { opacity: 0; transform: translateY(18px); }
.mo-anim .mo-reveal { transition: opacity .9s var(--mo-ease), transform .9s var(--mo-ease); transition-delay: var(--mo-delay, 0s); }
.mo-anim .mo-photo-pending { clip-path: inset(6% 4% 6% 4%); }
.mo-anim .mo-photo-pending img { transform: scale(1.06); }
.mo-anim .mo-photo { transition: clip-path 1.3s var(--mo-ease); }
.mo-anim .mo-photo img { transition: transform 1.8s var(--mo-ease); }

@media print {
  .mo-anim .mo-pending, .mo-anim .mo-heritage li { opacity: 1 !important; transform: none !important; }
  .mo-anim .mo-photo-pending { clip-path: none !important; }
}