/* Mondays Feel Good: motion components.
   One animation per situation, as listed in the brand pack's motion rulebook. Requires tokens.css; load components.css after this file.
   One-shot animations play when the element gets the class .is-playing (see play() in motion.js).
   Everything here respects prefers-reduced-motion (see the block at the end). */

/* Components size themselves; do not rely on the host page's box-sizing. */
[class^="mfg-"], [class*=" mfg-"], [class^="mfg-"]::before, [class*=" mfg-"]::before { box-sizing: border-box }

/* ===== Shared keyframes ===== */
@keyframes mfg-rise { from { transform: translateY(100%) } to { transform: none } }
@keyframes mfg-fade-up { from { opacity: 0; transform: translateY(var(--mfg-rise)) } to { opacity: 1; transform: none } }
@keyframes mfg-fade-in { from { opacity: 0 } to { opacity: 1 } }

/* ===== The symbol (built by markSVG() in motion.js) ===== */
.mfg-mark { display: block; overflow: visible }
.mfg-mark__m { fill: var(--mfg-mark-ink, var(--mfg-ink)) }
.mfg-mark__sun, .mfg-mark__sunc { fill: var(--mfg-sun); transform-box: fill-box; transform-origin: 50% 100% }

/* S1 Sunrise: the symbol appears on its own. 1.1s, once. */
.mfg-mark.is-playing .mfg-mark__sun { animation: mfg-rise var(--mfg-dur-intro) var(--mfg-ease-out) both }

/* S6 Day cycle: loading and waiting. A full sun rises above the M and sets behind it. 3s loop. */
.mfg-loader .mfg-mark__sunc { animation: mfg-cycle 3s ease-in-out infinite alternate }
@keyframes mfg-cycle { from { transform: translateY(26px) } to { transform: none } }

/* S13 Night to day: app splash screen only. 1.8s, once. */
.mfg-splash { background: var(--mfg-ink); --mfg-mark-ink: var(--mfg-white) }
.mfg-splash.is-playing { animation: mfg-night-day 1.8s ease-in-out both }
.mfg-splash.is-playing .mfg-mark__m { animation: mfg-ink-in 1.8s ease-in-out both }
.mfg-splash.is-playing .mfg-mark__sun { animation: mfg-rise 1.4s .2s var(--mfg-ease-out) both }
@keyframes mfg-night-day { from { background: var(--mfg-ink) } to { background: var(--mfg-daybreak) } }
@keyframes mfg-ink-in { from { fill: var(--mfg-white) } to { fill: var(--mfg-ink) } }

/* ===== The wordmark (built by wordmarkSVG() in motion.js) ===== */
.mfg-wm { display: block; overflow: visible }
.mfg-wm path { fill: var(--mfg-wm-ink, var(--mfg-ink)) }
.mfg-wm .mfg-wm__stop { fill: var(--mfg-sun); transform-box: fill-box; transform-origin: 50% 100% }

/* S16 Wordmark build: the full name appears. About 1.9s, once. */
.mfg-wm.is-playing .mfg-wm__m { animation: mfg-fade-up .5s var(--mfg-ease-std) both }
.mfg-wm.is-playing .mfg-wm__l { animation: mfg-fade-up .45s calc(.25s + var(--i) * .05s) var(--mfg-ease-std) both }
.mfg-wm.is-playing .mfg-wm__stop { animation: mfg-rise .7s 1.2s var(--mfg-ease-out) both }

/* ===== Everyday interface ===== */

/* P1 Button sunrise: primary button hover. */
/* The button itself (shape, variants, states) lives in components.css. */
.mfg-btn__label { position: relative }
.mfg-btn__sun { position: absolute; left: 50%; bottom: 0; width: 30px; height: 15px; margin-left: -15px; border-radius: 30px 30px 0 0;
  background: var(--mfg-sun); transform: translateY(16px); transition: transform var(--mfg-dur-hover) var(--mfg-ease-std) }
.mfg-btn:hover .mfg-btn__sun, .mfg-btn:focus-visible .mfg-btn__sun { transform: none }

/* P2 Card lift: job and company card hover. The card lifts 4px and a sun rises from behind it. */
.mfg-card-lift { position: relative; padding-top: 20px }
.mfg-card-lift__sun { position: absolute; right: 20px; top: 20px; width: 34px; height: 17px; border-radius: 34px 34px 0 0; background: var(--mfg-sun);
  transform: translateY(12px); transition: transform var(--mfg-dur-ui) var(--mfg-ease-out) }
/* The card itself lives in components.css; this adds the lift. */
.mfg-card-lift > .mfg-card { z-index: 1; transition: transform 200ms var(--mfg-ease-std), box-shadow 200ms var(--mfg-ease-std) }
.mfg-card__meta { color: var(--mfg-muted); font-size: 14px }
.mfg-card-lift:hover .mfg-card, .mfg-card-lift:focus-within .mfg-card { transform: translateY(calc(-1 * var(--mfg-lift))); box-shadow: var(--mfg-shadow-card) }
.mfg-card-lift:hover .mfg-card-lift__sun, .mfg-card-lift:focus-within .mfg-card-lift__sun { transform: translateY(-18px) }

/* Best-fit badge (used by P5, N1 and the L6 intro). */
.mfg-badge { display: inline-flex; gap: 6px; align-items: flex-end; justify-self: start; align-self: flex-start; background: var(--mfg-daybreak); color: var(--mfg-ink);
  font: 600 12px/1.2 var(--mfg-font); padding: 4px 9px; border-radius: var(--mfg-radius-control) }
.mfg-badge__sun { width: 14px; height: 7px; border-radius: 14px 14px 0 0; background: var(--mfg-sun); margin-bottom: 2px; transform-origin: bottom }

/* P5 Best-fit chip: top-match card hover. Replaces P2 on these cards: the badge's sun rises instead of the card lifting. */
.mfg-card--top .mfg-badge__sun { transform: translateY(3px) scaleY(.4); transition: transform var(--mfg-dur-ui) var(--mfg-ease-std) }
.mfg-card--top:hover .mfg-badge__sun, .mfg-card--top:focus-within .mfg-badge__sun { transform: none }

/* P6 Photo reveal: photo hover. The photo opens from a half sun at its bottom edge. Website only. */
.mfg-photo { position: relative; overflow: hidden; border-radius: var(--mfg-radius-photo) }
.mfg-photo > img { display: block; width: 100%; height: 100%; object-fit: cover; clip-path: circle(72% at 50% 100%); transition: clip-path var(--mfg-dur-moment) var(--mfg-ease-inout) }
.mfg-photo:hover > img, .mfg-photo:focus-within > img { clip-path: circle(150% at 50% 100%) }

/* P7 Sun toggle: on/off settings. The knob is a full sun, gray when off, yellow when on. */
.mfg-toggle { display: inline-flex; gap: 12px; align-items: center; cursor: pointer; font: 500 15px var(--mfg-font); color: var(--mfg-text) }
.mfg-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px }
.mfg-toggle__track { position: relative; flex: none; width: 52px; height: 30px; border-radius: var(--mfg-radius-pill); background: var(--mfg-line); transition: background var(--mfg-dur-hover) }
.mfg-toggle__sun { position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--mfg-off);
  transition: left var(--mfg-dur-ui) var(--mfg-ease-out), background var(--mfg-dur-ui), box-shadow var(--mfg-dur-ui) }
.mfg-toggle input:checked + .mfg-toggle__track { background: var(--mfg-ink) }
.mfg-toggle input:checked + .mfg-toggle__track .mfg-toggle__sun { left: 26px; background: var(--mfg-sun); box-shadow: var(--mfg-glow-sun) }
.mfg-toggle input:focus-visible + .mfg-toggle__track { outline: var(--mfg-border-strong) solid var(--mfg-focus); outline-offset: 2px }

/* P9 List marker: list item hover. A small sun slides in beside the item. */
.mfg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px }
.mfg-list > li { position: relative; padding: 9px 12px 9px 34px; border-radius: var(--mfg-radius-control); transition: background 200ms }
.mfg-list > li::before { content: ""; position: absolute; left: 10px; top: 50%; width: 16px; height: 8px; margin-top: -4px; border-radius: 16px 16px 0 0;
  background: var(--mfg-sun); transform: translateX(-8px); opacity: 0; transition: transform var(--mfg-dur-hover) var(--mfg-ease-std), opacity var(--mfg-dur-hover) }
.mfg-list > li:hover, .mfg-list > li:focus-within { background: var(--mfg-daybreak); color: var(--mfg-ink) }
.mfg-list > li:hover::before, .mfg-list > li:focus-within::before { transform: none; opacity: 1 }

/* P10 Icon lift: app icon and logo tile hover. The tile lifts 4px and the sun rises. */
.mfg-tile { display: grid; place-items: center; width: 110px; aspect-ratio: 1; border-radius: var(--mfg-radius-tile); background: var(--mfg-ink); --mfg-mark-ink: var(--mfg-white);
  transition: transform var(--mfg-dur-hover) var(--mfg-ease-std), box-shadow var(--mfg-dur-hover) }
.mfg-tile .mfg-mark { width: 78% }
.mfg-tile .mfg-mark__sun { transition: transform 350ms var(--mfg-ease-out) }
.mfg-tile:hover, .mfg-tile:focus-visible { transform: translateY(calc(-1 * var(--mfg-lift))); box-shadow: var(--mfg-shadow-tile) }
.mfg-tile:hover .mfg-mark__sun, .mfg-tile:focus-visible .mfg-mark__sun { transform: translateY(-16%) }

/* ===== Scroll (driven by motion.js) ===== */

/* P11 Scroll progress: long pages. The sun travels along a horizon line. Set --mfg-progress (0 to 1). */
.mfg-progress { position: sticky; top: 0; height: 14px; z-index: 10; pointer-events: none }
.mfg-progress::before { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: var(--mfg-ink); opacity: .25 }
.mfg-progress__sun { position: absolute; bottom: 3px; left: calc(var(--mfg-progress, 0) * (100% - 20px)); width: 20px; height: 10px; border-radius: 20px 20px 0 0; background: var(--mfg-sun) }

/* P12 Hero sunrise: hero on scroll, pages other than home. Set --mfg-hero (0 to 1). */
.mfg-hero-sunrise { position: relative; overflow: hidden; background: var(--mfg-daybreak); color: var(--mfg-ink) }
.mfg-hero-sunrise__sun { position: absolute; left: 50%; bottom: 44px; width: min(240px, 50vw); aspect-ratio: 1; border-radius: 50%; background: var(--mfg-sun);
  transform: translate(-50%, calc((1 - var(--mfg-hero, 0)) * 105%)) }
.mfg-hero-sunrise__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: var(--mfg-daybreak); z-index: 1 }
.mfg-hero-sunrise__line { position: absolute; left: 0; right: 0; bottom: 44px; height: 1px; background: var(--mfg-ink); opacity: .2; z-index: 2 }
.mfg-hero-sunrise__content { position: relative; z-index: 3 }

/* P13 Night to day: one How it works story page. motion.js sets the background; .is-day flips the text color. */
.mfg-story { background: var(--mfg-ink); color: var(--mfg-night-text); transition: color var(--mfg-dur-ui) }
.mfg-story.is-day { color: var(--mfg-ink) }

/* P17 Collapsing header: the full name collapses to the M on scroll down, and back on scroll up. */
.mfg-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; height: 58px; padding-inline: 18px; background: var(--mfg-surface); border-bottom: 1px solid var(--mfg-line) }
.mfg-header__name { display: block; width: 200px; transition: opacity var(--mfg-dur-ui), transform var(--mfg-dur-ui) }
.mfg-header__mark { position: absolute; left: 14px; width: 42px; opacity: 0; transform: translateY(6px); transition: opacity var(--mfg-dur-ui), transform var(--mfg-dur-ui) }
.mfg-header.is-compact .mfg-header__name { opacity: 0; transform: translateY(-6px) }
.mfg-header.is-compact .mfg-header__mark { opacity: 1; transform: none }

/* P19 Count up: numbers and stats. motion.js counts up; a sun-yellow underline draws when visible. 900ms, once. */
.mfg-stat { position: relative; display: grid; gap: 2px; padding-bottom: 10px }
.mfg-stat__value { font-variant-numeric: tabular-nums }
.mfg-stat__line { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; border-radius: 3px; background: var(--mfg-sun); transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--mfg-ease-std) }
.mfg-stat.is-in .mfg-stat__line { transform: none }

/* ===== Product moments ===== */

/* N1 Match reveal: Monday Matches results arrive. Cards rise one by one, then the top match's badge sun comes up. */
.mfg-matches > * { opacity: 0; transform: translateY(14px) }
.mfg-matches.is-playing > * { animation: mfg-card-in 420ms calc(var(--i, 0) * 90ms) var(--mfg-ease-out) both }
.mfg-matches.is-playing .mfg-card--top .mfg-badge__sun { animation: mfg-badge-up 550ms calc(var(--n, 3) * 90ms + 350ms) var(--mfg-ease-out) both }
@keyframes mfg-card-in { to { opacity: 1; transform: none } }
@keyframes mfg-badge-up { from { transform: translateY(3px) scaleY(.4) } to { transform: none } }

/* N2 Success: saved, applied, profile done. A sun rises, a check draws over it, one soft ring. Under 1s. */
.mfg-success__horizon { stroke: currentColor; stroke-opacity: .3; stroke-width: 1.4 }
.mfg-success__sun { fill: var(--mfg-sun); transform: translateY(34px) }
.mfg-success__ring { fill: none; stroke: var(--mfg-sun); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: 50% 50% }
.mfg-success__check { fill: none; stroke: var(--mfg-ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0 }
.mfg-success.is-playing .mfg-success__sun { animation: mfg-success-rise 500ms var(--mfg-ease-out) both }
.mfg-success.is-playing .mfg-success__ring { animation: mfg-success-ring 900ms 450ms ease-out both }
.mfg-success.is-playing .mfg-success__check { animation: mfg-success-check 300ms 420ms ease-out forwards }
@keyframes mfg-success-rise { to { transform: none } }
@keyframes mfg-success-ring { 0% { opacity: .7; transform: scale(1) } 100% { opacity: 0; transform: scale(1.7) } }
@keyframes mfg-success-check { from { opacity: 1; stroke-dashoffset: 1 } to { opacity: 1; stroke-dashoffset: 0 } }
.mfg-success.is-done .mfg-success__sun { transform: none }
.mfg-success.is-done .mfg-success__check { opacity: 1; stroke-dashoffset: 0 }

/* N3c Sun slices: onboarding and multi-step forms. Slices fill in step by step, then close into one whole sun. */
.mfg-slices { display: block; overflow: visible }
.mfg-slices__slice { fill: var(--mfg-sun-off); stroke: var(--mfg-surface); stroke-width: 3; stroke-linejoin: round; transition: fill 350ms var(--mfg-ease-std), stroke-width 450ms var(--mfg-ease-std) }
.mfg-slices__slice[data-state="current"] { fill: var(--mfg-sun-pale) }
.mfg-slices__slice[data-state="past"] { fill: var(--mfg-sun) }
.mfg-slices.is-done .mfg-slices__slice { fill: var(--mfg-sun); stroke-width: 0 }
.mfg-slices__horizon { stroke: var(--mfg-ink); stroke-opacity: .25; stroke-width: 1.4 }

/* ===== No sun on purpose ===== */
/* Page transitions: fade and 8px rise, 200 to 300ms. */
.mfg-enter { animation: mfg-fade-up var(--mfg-dur-hover) var(--mfg-ease-std) both }
/* Text links: plain underline on hover, 120ms. */
.mfg-link { color: inherit; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--mfg-dur-press) }
.mfg-link:hover, .mfg-link:focus-visible { text-decoration-color: currentColor }
/* Empty states use the still symbol with the sun low on the horizon (markSVG({ sunDrop: .5 })). Errors never use sun motion. */

/* ===== Reduced motion: fades only, final states shown ===== */
@media (prefers-reduced-motion: reduce) {
  .mfg-mark.is-playing .mfg-mark__sun, .mfg-splash.is-playing .mfg-mark__sun,
  .mfg-wm.is-playing .mfg-wm__stop, .mfg-success.is-playing .mfg-success__sun { animation: mfg-fade-in 200ms both }
  .mfg-wm.is-playing .mfg-wm__m, .mfg-wm.is-playing .mfg-wm__l { animation: mfg-fade-in 200ms both }
  .mfg-splash.is-playing, .mfg-splash.is-playing .mfg-mark__m { animation-duration: 200ms }
  .mfg-loader .mfg-mark__sunc { animation: mfg-breathe 2s ease-in-out infinite alternate; transform: translateY(13px) }
  @keyframes mfg-breathe { from { opacity: .55 } to { opacity: 1 } }
  .mfg-matches.is-playing > * { animation: mfg-fade-in 200ms both }
  .mfg-matches.is-playing .mfg-card--top .mfg-badge__sun { animation: none; transform: none }
  .mfg-success.is-playing .mfg-success__ring { animation: none }
  .mfg-success.is-playing .mfg-success__check { animation: mfg-fade-in 200ms forwards; stroke-dashoffset: 0 }
  .mfg-enter { animation: mfg-fade-in 200ms both }
  .mfg-btn__sun, .mfg-card, .mfg-card-lift__sun, .mfg-card--top .mfg-badge__sun, .mfg-photo > img, .mfg-toggle__sun,
  .mfg-list > li::before, .mfg-tile, .mfg-tile .mfg-mark__sun, .mfg-header__name, .mfg-header__mark, .mfg-stat__line, .mfg-slices__slice { transition-duration: 1ms }
  .mfg-card-lift:hover .mfg-card, .mfg-tile:hover, .mfg-tile:focus-visible { transform: none }
}