/* Hymnphony, original design: motion and the living watermark.
   Linked into every page in public/_classic/ by redesign/tools/classic_inject.py (with motion.js and, on most
   pages, the .hpm-bg mark at the end of <body>). Nothing here changes words, fonts or layout.

   Who switches what on:
   - html.hpm-pre    set by the tiny inline script in <head> (and again by motion.js) when JS runs, the visitor has
                     not asked for reduced motion and the page is not in the editor. Only under this class are things
                     ever hidden before they animate in, so without JS every word and picture shows at once.
   - html.hpm-ready  set by motion.js once it watches the page. If motion.js never arrives, everything that was
                     waiting to scroll in fades in by itself after a few seconds.
   - html[data-hp-edit]  the editor at /admin: no motion at all and no watermark, so everything sits still. */

:root {
  --hpm-e: cubic-bezier(.22, .68, .26, 1);  /* reveals: an unhurried rise and a soft landing */
  --hpm-e2: cubic-bezier(.2, .7, .2, 1);    /* hovers */
}

/* ---------------------------------------------------------------------------------------------------------------
   1. The watermark: the five-bar Hymnphony mark (the insights sign in mark, 96 unit box) moving like a slow sound
   meter, behind the words. It is fixed at z-index 0 and comes after every band in the page, so it paints over the
   bands' colours; the content of each band (its .hp-w) is lifted to z-index 1, so cards, pictures, phones and words
   paint over it. It never catches a click.
   Two identical copies: one multiplies navy and gold into the white and cream bands, the other screens pale blue and
   gold into the navy bands. Each is all but invisible where the other shows, so the mark reads evenly on every band.
   Each bar is an outer pill that clips an inner pill of the same size; the inner one slides down and back, so the
   top keeps a true round cap at every height (scaling the bar would squash its ends), and only transform moves.
   --------------------------------------------------------------------------------------------------------------- */
.hp .hp-hero .hp-heroin, .hp .hp-hd .hp-w, .hp .hp-sec > .hp-w, .hp .hp-foot > .hp-w { position: relative; z-index: 1; }
.hpm-bg { display: contents; }
.hpm-mk {
  --s: clamp(300px, min(100vw, 78vh), 780px);
  position: fixed;
  z-index: 0;                                    /* over the bands' colours, under their content (z-index 1) */
  left: calc(50% - var(--s) / 2);
  top: calc(50vh - var(--s) / 2 + 30px);
  top: calc(50svh - var(--s) / 2 + 30px);        /* svh: no jump when a phone's address bar slides away */
  width: var(--s);
  height: var(--s);
  pointer-events: none;
  user-select: none;
  animation: hpm-breathe 16s ease-in-out infinite;
}
@supports (height: 1svh) { .hpm-mk { --s: clamp(300px, min(100vw, 78svh), 780px); } }
.hpm-mk i {
  position: absolute;
  bottom: 14.583%;                               /* bars stand on y = 82 of 96 */
  width: 11.458%;                                /* 11 of 96 */
  border-radius: 999px;
  overflow: hidden;                              /* the round foot of the bar, whatever the inner pill does */
  isolation: isolate;                            /* Safari: clip the moving inner pill to the round corners too */
}
.hpm-mk b {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--hpm-n);
  animation: hpm-eq 6.2s cubic-bezier(.45, 0, .35, 1) infinite;
  will-change: transform;
}
.hpm-mk i:nth-child(1) { left: 10.417%; height: 37.5%; }
.hpm-mk i:nth-child(2) { left: 27.083%; height: 56.25%; }
.hpm-mk i:nth-child(3) { left: 43.75%;  height: 70.833%; }
.hpm-mk i:nth-child(4) { left: 60.417%; height: 56.25%; }
.hpm-mk i:nth-child(5) { left: 77.083%; height: 37.5%; }
.hpm-mk i:nth-child(1) b { animation-duration: 5.4s; animation-delay: -1.1s; }
.hpm-mk i:nth-child(2) b { animation-duration: 6.6s; animation-delay: -3.4s; }
.hpm-mk i:nth-child(3) b { animation-duration: 7.8s; animation-delay: -5.2s; background: var(--hpm-g); }
.hpm-mk i:nth-child(4) b { animation-duration: 6s;   animation-delay: -2.2s; }
.hpm-mk i:nth-child(5) b { animation-duration: 5.1s; animation-delay: -4.3s; }
.hpm-mk-l { --hpm-n: #2F4A6E; --hpm-g: #B8891F; mix-blend-mode: multiply; opacity: .06; }
.hpm-mk-d { --hpm-n: #8DA8CF; --hpm-g: #E0B45A; mix-blend-mode: screen;   opacity: .045; }
/* Bar strengths, so that every bar differs from its band by about the same small amount (CIE76 ΔE 3 to 3.8) on the
   white, cream and navy bands alike: navy multiplies darker than gold, and gold screens brighter than the pale blue. */
.hpm-mk-l i:not(:nth-child(3)) { opacity: .78; }
.hpm-mk-l i:nth-child(3) { opacity: .86; }
.hpm-mk-d i:nth-child(3) { opacity: .52; }
/* Heights 1, .72, .92, .8 of the bar: the inner pill slides down by the rest. */
@keyframes hpm-eq { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(28%); } 60% { transform: translateY(8%); } 80% { transform: translateY(20%); } }
@keyframes hpm-breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-14px) scale(1.012); } }
/* On opening, the mark only fades in once the hero's words have arrived, so it never comes first. */
.hpm-pre .hpm-mk { animation: hpm-mk-in 1.4s ease .9s both, hpm-breathe 16s ease-in-out infinite; }
@keyframes hpm-mk-in { from { opacity: 0; } }
html[data-hp-edit] .hpm-bg, html[data-hp-edit] .hpm-mk { display: none !important; }
@media print { .hpm-bg, .hpm-mk { display: none !important; } }
@media (forced-colors: active) { .hpm-bg, .hpm-mk { display: none !important; } }

/* ---------------------------------------------------------------------------------------------------------------
   2. The owner's house rules on these pages: no underlined links, no decorative horizontal lines.
   --------------------------------------------------------------------------------------------------------------- */
.hp a, .hp a:hover, .hp a:focus, a.skip-link { text-decoration: none !important; }
.hp .hp-prose a, .hp .hp-sec p > a:not([class]) { transition: color .25s ease; }
.hp .hp-prose a:hover, .hp .hp-sec p > a:not([class]):hover { color: #B8891F !important; }
.hp .hp-hero::before, .hp .hp-hd::before { display: none !important; }   /* the staff line texture */
.hp .hp-links a.on::after { display: none !important; }                  /* the bar under the current page */
.hp .hp-nav { border-bottom-color: transparent; }
.hp .hp-fbot { border-top: 0; }
.hp .hp-plat .meta { border-top: 0; }
.hp .hp-rule { display: none; }
@media (max-width: 1010px) { .hp .hp-links { border-bottom: 0; } }

/* ---------------------------------------------------------------------------------------------------------------
   3. Header: a soft shadow once the page has moved (motion.js adds .hpm-scrolled).
   --------------------------------------------------------------------------------------------------------------- */
.hp .hp-nav::after {
  /* A soft shade just under the bar, drawn as a gradient strip the bar's own width, so it runs evenly from edge to
     edge (a box-shadow fades out before the screen's sides) and never widens the page. It falls off like a shadow
     of about 0 10px 28px: a quarter of the darkness by 8px, gone by 30px. The phone menu panel sits over it. */
  content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 30px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 8, 26, .15), rgba(4, 8, 26, .085) 4px, rgba(4, 8, 26, .04) 10px,
              rgba(4, 8, 26, .014) 18px, rgba(4, 8, 26, 0));
  opacity: 0; transition: opacity .5s ease;
}
.hp .hp-nav.hpm-scrolled::after { opacity: 1; }

/* Menu button turns into a close mark, and the phone menu drops in. */
.hp .hp-burger span { transition: transform .4s var(--hpm-e2), opacity .25s ease; }
.hp .hp-mtoggle:checked + .hp-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hp .hp-mtoggle:checked + .hp-burger span:nth-child(2) { opacity: 0; }
.hp .hp-mtoggle:checked + .hp-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1010px) {
  /* The panel stays fully opaque and unrolls down from under the header, so the page never shows through it;
     its links rise in one after another as it opens. */
  .hpm-pre .hp-mtoggle:checked ~ .hp-links { animation: hpm-drop .46s var(--hpm-e); }
  .hpm-pre .hp-mtoggle:checked ~ .hp-links a { animation: hpm-rise-sm .6s var(--hpm-e) .06s both; }
  .hpm-pre .hp-mtoggle:checked ~ .hp-links a:nth-child(2) { animation-delay: .1s; }
  .hpm-pre .hp-mtoggle:checked ~ .hp-links a:nth-child(3) { animation-delay: .14s; }
  .hpm-pre .hp-mtoggle:checked ~ .hp-links a:nth-child(4) { animation-delay: .18s; }
  .hpm-pre .hp-mtoggle:checked ~ .hp-links a:nth-child(5) { animation-delay: .22s; }
  .hpm-pre .hp-mtoggle:checked ~ .hp-links a:nth-child(6) { animation-delay: .26s; }
  .hpm-pre .hp-mtoggle:checked ~ .hp-links a:nth-child(7) { animation-delay: .3s; }
}
@keyframes hpm-drop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes hpm-rise-sm { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: none; } }

/* ---------------------------------------------------------------------------------------------------------------
   4. Hover: cards lift with a deeper, softer shadow; buttons answer with a quiet lift and glow.
   --------------------------------------------------------------------------------------------------------------- */
.hp .hp-card { transition: transform .6s var(--hpm-e2), box-shadow .6s var(--hpm-e2), border-color .45s ease, background-color .45s ease; }
.hp .hp-card:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 137, 31, .3);
  box-shadow: 0 1px 2px rgba(11, 18, 48, .04), 0 12px 24px -12px rgba(11, 18, 48, .14), 0 34px 70px -26px rgba(11, 18, 48, .24);
}
.hp .hp-dark .hp-card:hover {
  background-color: rgba(255, 255, 255, .065);
  border-color: rgba(239, 201, 105, .3);
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .7);
}
.hp .hp-card .hp-ico { transition: transform .6s var(--hpm-e2); }
.hp .hp-card:hover .hp-ico { transform: translateY(-2px) scale(1.06); }

.hp a.hp-btn, .hp button.hp-btn {
  transition: transform .45s var(--hpm-e2), box-shadow .45s var(--hpm-e2), background-color .3s ease, border-color .3s ease, color .3s ease, filter .3s ease;
}
.hp a.hp-btn:hover { transform: translateY(-2px); }
.hp a.hp-btn:active { transform: translateY(0) scale(.985); transition-duration: .12s; }
.hp a.hp-gold:hover { box-shadow: 0 16px 32px -10px rgba(184, 137, 31, .55), 0 4px 12px rgba(184, 137, 31, .2); filter: saturate(1.06) brightness(1.03); }
.hp a.hp-navy:hover { background-color: #18245A; box-shadow: 0 16px 32px -12px rgba(11, 18, 48, .5); }
.hp a.hp-ghostd:hover { box-shadow: 0 14px 30px -14px rgba(11, 18, 48, .28); }
.hp a.hp-ghost:hover { border-color: rgba(255, 255, 255, .55); }
.hp a.hp-store { transition: transform .45s var(--hpm-e2), border-color .3s ease, box-shadow .45s var(--hpm-e2); }
.hp a.hp-store:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .55); }
.hp a.hp-store.light:hover { box-shadow: 0 16px 32px -14px rgba(11, 18, 48, .3); }
.hp a.hp-store:active { transform: translateY(0) scale(.985); transition-duration: .12s; }
.hp .hp-links a.hp-navcta { transition: transform .4s var(--hpm-e2), box-shadow .4s var(--hpm-e2), filter .3s ease, color .16s, background .16s; }
.hp .hp-links a.hp-navcta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(239, 201, 105, .6); filter: brightness(1.04); }
.hp .hp-links a { transition: color .25s ease, background-color .25s ease; }
.hp .hp-shot img { transition: transform .7s var(--hpm-e2); }
.hp .hp-shot:hover img { transform: translateY(-6px); }

/* FAQ: the box warms as it opens; motion.js eases the height. */
.hp .hp-faq details { transition: border-color .4s ease, box-shadow .4s ease; }
.hp .hp-faq summary::after { transition: transform .45s var(--hpm-e2), top .45s var(--hpm-e2); }

/* ---------------------------------------------------------------------------------------------------------------
   5. Opening: the hero's lines arrive one after another, then the phones rise into place (pure CSS, from the
   first paint, so nothing flashes).
   --------------------------------------------------------------------------------------------------------------- */
.hpm-pre :where(.hp-hero .hp-heroin > div:first-child > *, .hp-hd .hp-w > *) {
  animation: hpm-rise 1.1s var(--hpm-e) both;
}
.hpm-pre :where(.hp-hero .hp-heroin > div:first-child > *, .hp-hd .hp-w > *):nth-child(1) { animation-delay: .1s; }
.hpm-pre :where(.hp-hero .hp-heroin > div:first-child > *, .hp-hd .hp-w > *):nth-child(2) { animation-delay: .22s; }
.hpm-pre :where(.hp-hero .hp-heroin > div:first-child > *, .hp-hd .hp-w > *):nth-child(3) { animation-delay: .36s; }
.hpm-pre :where(.hp-hero .hp-heroin > div:first-child > *, .hp-hd .hp-w > *):nth-child(4) { animation-delay: .5s; }
.hpm-pre :where(.hp-hero .hp-heroin > div:first-child > *, .hp-hd .hp-w > *):nth-child(n+5) { animation-delay: .62s; }
.hpm-pre :where(.hp-hero .hp-phones > .hp-ph) { animation: hpm-rise-ph 1.5s var(--hpm-e) .42s both; }
.hpm-pre :where(.hp-hero .hp-phones > .hp-ph:nth-child(2)) { animation-delay: .62s; }
@keyframes hpm-rise { from { opacity: 0; translate: 0 30px; } to { opacity: 1; translate: none; } }
@keyframes hpm-rise-ph { from { opacity: 0; translate: 0 70px; scale: .96; } to { opacity: 1; translate: none; scale: none; } }

/* Phones and tablets float gently (motion.js also lets them drift a little against the scroll). */
.hpm-pre .hp-phones > .hp-ph > :first-child { animation: hpm-float 7.5s ease-in-out infinite; }
.hpm-pre .hp-phones > .hp-ph:nth-child(2) > :first-child { animation-duration: 8.6s; animation-delay: -3.9s; }
.hpm-ready .hp-phones { will-change: translate; }
@keyframes hpm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ---------------------------------------------------------------------------------------------------------------
   6. Scrolling: sections, cards, lists, questions and footer columns rise and fade in as they arrive, staggered
   within each group (motion.js sets --hpm-d per element, adds .hpm-go for the ride and .hpm-in to stay).
   Keep this list the same as REVEAL in motion.js.
   --------------------------------------------------------------------------------------------------------------- */
.hpm-pre :where(
  .hp-sec .hp-w:not(.hp-split) > :not(.hp-grid, .hp-center, .hp-faq, .hp-shots, .hp-stats, .hp-tl, .hp-sup, .hp-plat, .hp-cta, .hp-prose),
  .hp-sec .hp-center > *, .hp-sec .hp-grid > *, .hp-sec .hp-sup > *, .hp-sec .hp-plat > *, .hp-sec .hp-stats > *,
  .hp-sec .hp-shots > *, .hp-sec .hp-faq > *, .hp-sec .hp-tl > *, .hp-sec .hp-cta, .hp-sec .hp-cta > *, .hp-sec .hp-prose > *,
  .hp-sec .hp-split > .a > :not(.hp-check), .hp-sec .hp-split > .a > .hp-check > li, .hp-sec .hp-split > :not(.a),
  .hp-foot .hp-fgrid > *, .hp-foot .hp-fbot
) { opacity: 0; translate: 0 30px; }
.hpm-pre :where(.hp-sec .hp-prose > *, .hp-sec .hp-split > .a > .hp-check > li, .hp-foot .hp-fgrid > *, .hp-foot .hp-fbot) { translate: 0 16px; }
.hpm-pre :where(.hp-sec .hp-cta) { translate: 0 24px; scale: .97; }
.hpm-pre :where(.hp-sec .hp-split > :not(.a)) { translate: 0 54px; }
html.hpm-pre .hpm-in { opacity: 1; translate: none; scale: none; }
html.hpm-pre .hpm-go {
  transition: opacity 1.05s var(--hpm-e) var(--hpm-d, 0s), translate 1.25s var(--hpm-e) var(--hpm-d, 0s), scale 1.25s var(--hpm-e) var(--hpm-d, 0s),
              transform .6s var(--hpm-e2), box-shadow .6s var(--hpm-e2), border-color .45s ease, background-color .45s ease;
}
/* If motion.js never runs, nothing stays hidden: everything waiting to scroll in fades in by itself. */
.hpm-pre:not(.hpm-ready) :where(
  .hp-sec .hp-w:not(.hp-split) > :not(.hp-grid, .hp-center, .hp-faq, .hp-shots, .hp-stats, .hp-tl, .hp-sup, .hp-plat, .hp-cta, .hp-prose),
  .hp-sec .hp-center > *, .hp-sec .hp-grid > *, .hp-sec .hp-sup > *, .hp-sec .hp-plat > *, .hp-sec .hp-stats > *,
  .hp-sec .hp-shots > *, .hp-sec .hp-faq > *, .hp-sec .hp-tl > *, .hp-sec .hp-cta, .hp-sec .hp-cta > *, .hp-sec .hp-prose > *,
  .hp-sec .hp-split > .a > :not(.hp-check), .hp-sec .hp-split > .a > .hp-check > li, .hp-sec .hp-split > :not(.a),
  .hp-foot .hp-fgrid > *, .hp-foot .hp-fbot
) { animation: hpm-show .9s var(--hpm-e) 2.8s both; }
@keyframes hpm-show { to { opacity: 1; translate: none; scale: none; } }

/* ---------------------------------------------------------------------------------------------------------------
   7. Stillness. The editor never gets .hpm-pre (so nothing hides or moves there) and never shows the watermark.
   Reduced motion (even when switched on after the page opened) and print show everything in place.
   --------------------------------------------------------------------------------------------------------------- */
html[data-hp-edit] .hp-phones { translate: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hpm-mk, .hpm-mk b { animation: none !important; }
  .hp .hp-card:hover, .hp .hp-card:hover .hp-ico, .hp a.hp-btn:hover, .hp a.hp-store:hover, .hp .hp-links a.hp-navcta:hover,
  .hp .hp-shot:hover img { transform: none; }
  .hp .hp-phones { translate: none !important; }
  .hpm-pre .hp-phones > .hp-ph > :first-child { animation: none !important; }
}
@media (prefers-reduced-motion: reduce), print {
  html.hpm-pre :where(
    .hp-hero .hp-heroin > div:first-child > *, .hp-hd .hp-w > *, .hp-hero .hp-phones > .hp-ph,
    .hp-sec .hp-w:not(.hp-split) > :not(.hp-grid, .hp-center, .hp-faq, .hp-shots, .hp-stats, .hp-tl, .hp-sup, .hp-plat, .hp-cta, .hp-prose),
    .hp-sec .hp-center > *, .hp-sec .hp-grid > *, .hp-sec .hp-sup > *, .hp-sec .hp-plat > *, .hp-sec .hp-stats > *,
    .hp-sec .hp-shots > *, .hp-sec .hp-faq > *, .hp-sec .hp-tl > *, .hp-sec .hp-cta, .hp-sec .hp-cta > *, .hp-sec .hp-prose > *,
    .hp-sec .hp-split > .a > :not(.hp-check), .hp-sec .hp-split > .a > .hp-check > li, .hp-sec .hp-split > :not(.a),
    .hp-foot .hp-fgrid > *, .hp-foot .hp-fbot
  ) { opacity: 1 !important; translate: none !important; scale: none !important; animation: none !important; transition: none !important; }
}

/* The menu has eight links since Learn joined (29 Oct 2026): keep it on one line until the menu button takes over. */
@media (min-width: 1011px) { .hp-links a { white-space: nowrap; } }
@media (min-width: 1011px) and (max-width: 1220px) { .hp-links { gap: 0; } .hp-links a { padding: 9px 8px; font-size: 14px; } }