/* SubMac motion layer (js/motion.js, js/hero-demo.js). Transforms and opacity only; every rule here is
   cosmetic, so content is fully visible without JS and with prefers-reduced-motion (see the block at the end). */

/* ---------- ambient hero: slow warm glow + paper grain (behind content, clipped to the hero) ---------- */
.hero, .pg-hero { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.hero::before, .pg-hero::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; left: -15%; right: -15%; top: -30%; height: 150%;
  background:
    radial-gradient(36% 42% at 74% 30%, rgba(194, 54, 27, .085), transparent 70%),
    radial-gradient(42% 50% at 18% 18%, rgba(255, 251, 240, .95), transparent 72%),
    radial-gradient(30% 30% at 50% 62%, rgba(214, 160, 120, .09), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 40%, transparent 84%); mask-image: linear-gradient(#000 40%, transparent 84%);
  animation: mo-glow 26s ease-in-out infinite alternate; will-change: transform;
}
.hero::after, .pg-hero::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none; inset: -64px; opacity: .55;
  -webkit-mask-image: linear-gradient(#000 50%, transparent 96%); mask-image: linear-gradient(#000 50%, transparent 96%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .08 0 0 0 0 .06 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: mo-grain 1.6s steps(5) infinite;
}
.mo-off::before, .mo-off::after { animation-play-state: paused; }
@media (pointer: coarse), (max-width: 759px) { .hero::after, .pg-hero::after { animation: none; } }
@keyframes mo-glow { 0% { transform: translate3d(-2%, 0, 0) scale(1); } 50% { transform: translate3d(2%, 2%, 0) scale(1.06); } 100% { transform: translate3d(0, -2%, 0) scale(1.02); } }
@keyframes mo-grain { 0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-23px, 11px, 0); } 40% { transform: translate3d(17px, -29px, 0); } 60% { transform: translate3d(-9px, 31px, 0); } 80% { transform: translate3d(29px, 7px, 0); } 100% { transform: translate3d(0, 0, 0); } }

/* ---------- headline words: soft mask-up on load (spans written at build time, text unchanged) ---------- */
.display .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .14em; margin: 0 -.06em -.14em; }
.display .w > span { display: inline-block; animation: mo-wup .95s cubic-bezier(.2, .75, .15, 1) both; animation-delay: calc(var(--i, 0) * 55ms + 60ms); }
@keyframes mo-wup { from { transform: translate3d(0, 104%, 0); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }

/* ---------- wordmark dot: a quiet breath every ~8s; the menu dot pulses once when the menu opens ---------- */
.wordmark .dot { position: relative; }
.wordmark .dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--red); opacity: 0; animation: mo-breathe 8s ease-out 2s infinite; }
@keyframes mo-breathe { 0%, 86% { transform: scale(1); opacity: 0; } 88% { opacity: .45; } 100% { transform: scale(2.8); opacity: 0; } }
.site-head.menu-open .nav-kicker .dot { animation: mo-pulse .7s cubic-bezier(.3, .7, .3, 1) .12s 1 both; }
@keyframes mo-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(194, 54, 27, .45); } 50% { transform: scale(1.5); } 100% { transform: scale(1); box-shadow: 0 0 0 9px rgba(194, 54, 27, 0); } }
.site-head.menu-open .nav-list > li, .site-head.menu-open .nav-foot { animation: mo-navin .38s cubic-bezier(.2, .7, .2, 1) both; }
.site-head.menu-open .nav-list > li:nth-child(2) { animation-delay: 35ms; } .site-head.menu-open .nav-list > li:nth-child(3) { animation-delay: 70ms; }
.site-head.menu-open .nav-list > li:nth-child(4) { animation-delay: 105ms; } .site-head.menu-open .nav-list > li:nth-child(5) { animation-delay: 140ms; }
.site-head.menu-open .nav-list > li:nth-child(6) { animation-delay: 175ms; } .site-head.menu-open .nav-list > li:nth-child(n+7) { animation-delay: 210ms; }
.site-head.menu-open .nav-foot { animation-delay: 240ms; }
@keyframes mo-navin { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }

/* ---------- micro-interactions ---------- */
.btn { transition: background .15s, color .15s, border-color .15s, transform .12s cubic-bezier(.3, .7, .3, 1); }
.btn:active { transform: scale(.98); }
.arrow::after { display: inline-block; transition: transform .22s cubic-bezier(.3, .7, .3, 1); }
.arrow:hover::after, .arrow:focus-visible::after { transform: translate3d(3px, 0, 0); }
.mo-sheen:not(.btn-ghost):hover { background-image: radial-gradient(circle 80px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 70%); }
.tpl-strip .tpl-thumb, .tpl-card .tpl-thumb { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .2s; }
.tpl-strip a:hover .tpl-thumb, .tpl-card .tpl-thumb-btn:hover .tpl-thumb { transform: translate3d(0, -4px, 0); box-shadow: 0 1px 0 var(--rule), 0 22px 36px -22px rgba(23, 21, 15, .5); }
.tpl-strip li.mo-hl .tpl-thumb { border-color: var(--ink-3); box-shadow: 0 1px 0 var(--rule), 0 0 0 3px rgba(194, 54, 27, .10), 0 16px 30px -22px rgba(23, 21, 15, .45); }
.tpl-strip-name b { transition: color .4s; }
.tpl-strip li.mo-hl .tpl-strip-name b { color: var(--red-ink); }

/* ---------- scroll reveals (class added by JS only to elements below the fold) ---------- */
.mo-r { opacity: 0; transform: translate3d(0, 16px, 0); }
.mo-r.mo-in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
.mo-n { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }

/* "How it works": a red line draws across (desktop) or down (mobile) the steps as you scroll */
.steps.mo-line { position: relative; }
.steps.mo-line::after { content: ''; position: absolute; pointer-events: none; background: var(--red); transform-origin: 0 0;
  left: -11px; top: 0; bottom: 0; width: 2px; transform: scaleY(var(--p, 0)); }
@media (min-width: 860px) { .steps.mo-line::after { left: 0; right: 0; bottom: auto; top: -.5px; width: auto; height: 2px; transform: scaleX(var(--p, 0)); } }

/* /features icons (drawn with stroke-dash when the card reveals) */
.feat { position: relative; }
.mo-ico { position: absolute; top: 22px; right: 2px; width: 34px; height: 34px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mo-ico .a { stroke: var(--red); }
.mo-ico path, .mo-ico circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mo-ico.on path, .mo-ico.on circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.4, .1, .2, 1) .15s; }
.mo-ico.on .a { transition-delay: .7s; transition-duration: .6s; }

/* /pricing: one gentle shine across "Credits never expire" */
.mo-shine { background: linear-gradient(100deg, var(--ink-3) 42%, var(--red) 50%, var(--ink-3) 58%) 100% 0 / 260% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; animation: mo-shine 1.8s ease .3s 1 both; }
@keyframes mo-shine { to { background-position: 0 0; } }

/* /free-tools: checklist items tick in, one after another */
.mo-tick { animation: mo-tick .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0ms); }
.mo-tick .hc-ico { animation: mo-pop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--d, 0ms) + 120ms); }
@keyframes mo-tick { from { opacity: 0; transform: translate3d(-8px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes mo-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- homepage hero demo (js/hero-demo.js). Markup holds the END state, so no-JS and reduced motion see it. ---------- */
.hero-side { display: grid; gap: 24px; min-width: 0; }
.hd-card { margin: 0; background: var(--sheet); border: 1px solid var(--ink); border-radius: var(--r-lg); padding: 20px 22px 18px; position: relative;
  box-shadow: 0 1px 0 var(--rule), 0 24px 48px -34px rgba(23, 21, 15, .5); will-change: transform; contain: layout paint; }
.hd-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.hd-kick { margin: 0; font: 500 .68rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.hd-live { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }
.hd-run .hd-live { animation: mo-live 2.4s ease-in-out infinite; }
@keyframes mo-live { 50% { opacity: .35; } }
.hd-ring { position: relative; width: 66px; height: 66px; flex: none; }
.hd-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hd-ring circle { fill: none; stroke-width: 5; }
.hd-track { stroke: var(--paper-2); }
.hd-arc { stroke: var(--red); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 13; }
.hd-num { position: absolute; inset: 0; display: grid; place-items: center; font: 400 1.7rem/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hd-k { margin: 12px 0 4px; font: 500 .64rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
.hd-old, .hd-new { margin: 0; font-size: .96rem; line-height: 1.5; }
.hd-strike { color: var(--ink-3); background: linear-gradient(var(--red), var(--red)) no-repeat 0 58% / 100% 1.5px; }
.hd-new mark { color: inherit; background: linear-gradient(var(--red-wash), var(--red-wash)) no-repeat 0 100% / 100% 100%; padding: 0 1px; border-radius: 1px; }
.hd-c { transition: none; }
.hd-c.hd-caret { box-shadow: 1.5px 0 0 var(--red); }
.hd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hd-chips .chip { border-color: var(--ink); }
.hd-chips .chip::before { content: '+ '; color: var(--red); }
.hd-note { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--rule-2); font-size: .8rem; color: var(--ink-3); }
.hd-m { display: none; }
@media (max-width: 979px) {
  .hero-side .hd-card { display: none; }
  .hd-m { display: block; margin: 18px 0 0; padding: 14px 16px 14px; }
  .hd-m .hd-ring { width: 52px; height: 52px; }
  .hd-m .hd-num { font-size: 1.35rem; }
  .hd-m .hd-k { margin: 8px 0 3px; }
  .hd-m .hd-old, .hd-m .hd-new { font-size: .9rem; line-height: 1.45; }
  .hd-m .hd-chips .chip { font-size: .74rem; padding: 6px 8px; }
  .hd-m .hd-note { display: none; }
}

/* ---------- homepage hero: "Coming soon" SubMac Agent teaser (2026-10-17, v2: same card style as the live example .hd-card). Static size; motion = pulse dot + one faint slow sheen. ---------- */
.ma-card { margin: 0; position: relative; overflow: hidden; background: var(--sheet); border: 1px solid var(--ink); border-radius: var(--r-lg); padding: 20px 22px 18px;
  box-shadow: 0 1px 0 var(--rule), 0 24px 48px -34px rgba(23, 21, 15, .5); contain: layout paint; }
.ma-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 40%, rgba(246, 223, 214, .35) 50%, transparent 60%); transform: translate3d(-110%, 0, 0);
  animation: ma-sheen 10s ease-in-out 2s infinite; }
@keyframes ma-sheen { 0% { transform: translate3d(-110%, 0, 0); } 25%, 100% { transform: translate3d(110%, 0, 0); } }
.ma-kick { margin: 0; display: inline-flex; align-items: center; gap: 8px; font: 500 .68rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em;
  color: var(--red-ink); background: var(--red-wash); padding: 6px 10px 6px 8px; border-radius: var(--r-pill); }
.ma-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }
.ma-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--red); animation: ma-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ma-ping { 0% { transform: scale(1); opacity: .6; } 75%, 100% { transform: scale(2.6); opacity: 0; } }
.ma-title { margin: 12px 0 6px; font: 400 1.7rem/1.1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.ma-copy { margin: 0; font-size: .96rem; line-height: 1.5; color: var(--ink-2); }
.ma-plat { margin: 14px 0 0; display: flex; align-items: center; gap: 10px; font: 500 .78rem/1.3 var(--mono); color: var(--ink-2); }
.ma-ico { width: 32px; height: 24px; flex: none; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ma-ico .a { stroke: var(--red); }
.ma-news { position: relative; z-index: 1; display: inline-block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); width: 100%;
  font-size: .9rem; color: var(--ink); text-decoration: none; }
.ma-news span { display: inline-block; transition: transform .2s cubic-bezier(.3, .7, .3, 1); }
.ma-news:hover { color: var(--red); } .ma-news:hover span, .ma-news:focus-visible span { transform: translate3d(3px, 0, 0); }
@media (max-width: 979px) { .ma-card { padding: 16px 18px 14px; } .ma-title { font-size: 1.5rem; } }
@media (prefers-reduced-motion: reduce) {
  .ma-card::after { animation: none !important; display: none; }
  .ma-dot::after { animation: none !important; opacity: 0; }
  .ma-news span, .ma-news:hover span, .ma-news:focus-visible span { transition: none; transform: none; }
}

/* ---------- page-to-page: cross-document View Transitions where supported (no-op elsewhere) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mo-vt-out .2s ease both; }
::view-transition-new(root) { animation: mo-vt-in .34s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes mo-vt-out { to { opacity: 0; } }
@keyframes mo-vt-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } }

@media print { .mo-r { opacity: 1 !important; transform: none !important; } .hero::before, .hero::after, .pg-hero::before, .pg-hero::after { display: none; } }

/* ---------- reduced motion: everything static, end states shown ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .hero::before, .hero::after, .pg-hero::before, .pg-hero::after, .wordmark .dot::after { animation: none !important; }
  .display .w > span, .mo-tick, .mo-tick .hc-ico, .mo-shine, .site-head.menu-open .nav-list > li, .site-head.menu-open .nav-foot, .site-head.menu-open .nav-kicker .dot { animation: none !important; opacity: 1; transform: none; }
  .mo-shine { color: inherit; background: none; }
  .mo-r { opacity: 1 !important; transform: none !important; }
  .mo-ico path, .mo-ico circle { stroke-dashoffset: 0; }
  .steps.mo-line::after { transform: none; }
  .hd-card { transform: none !important; will-change: auto; }
  .btn:active, .arrow:hover::after, .tpl-strip a:hover .tpl-thumb, .tpl-card .tpl-thumb-btn:hover .tpl-thumb { transform: none; }
}

/* ---------- polish 2026-10-16: hero entrance stagger, free-score ring + result reveal, tile entrance ---------- */
/* hero blocks rise in after the headline (CSS only, end state = normal layout; no layout shift) */
.hero .kicker, .hero .lede, .hero .entry-pick, .hero .hs-demo, .hero .hs-form, .hero .hs-alt, .hero .trust-row {
  animation: mo-rise .75s cubic-bezier(.2, .75, .15, 1) backwards; }
.hero-side > * { animation: mo-fade .8s ease backwards; }   /* opacity only: hero-demo.js moves the card itself */
@keyframes mo-fade { from { opacity: 0; } }
.hero .kicker { animation-delay: 0ms; } .hero .lede { animation-delay: 260ms; } .hero .entry-pick { animation-delay: 330ms; }
.hero .hs-demo { animation-delay: 390ms; } .hero .hs-form { animation-delay: 440ms; } .hero .hs-alt, .hero .trust-row { animation-delay: 500ms; }
.hero-side > :first-child { animation-delay: 300ms; } .hero-side > :nth-child(2) { animation-delay: 420ms; }
@keyframes mo-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
.hs-live { animation: mo-live 2.4s ease-in-out infinite; }
.trust-row li { transition: border-color .2s, transform .2s cubic-bezier(.3, .7, .3, 1); }
.trust-row li:hover { border-color: var(--rule-2); transform: translate3d(0, -1px, 0); }
/* score ring fills from empty each time a score is shown */
.sc-ring.sc-go .sc-arc { animation: mo-ring .95s cubic-bezier(.25, .8, .25, 1) both; }
@keyframes mo-ring { from { stroke-dashoffset: 100; } }
.sc-ring.sc-go { animation: mo-ringpop .5s cubic-bezier(.3, 1.4, .5, 1) backwards; }
@keyframes mo-ringpop { from { transform: scale(.88); } to { transform: none; } }
/* result container + keyword chips reveal (class set by shared/score-anim.js) */
.mo-show { animation: mo-rise .5s cubic-bezier(.2, .75, .15, 1) backwards; }
.mo-show .chip { animation: mo-chip .38s cubic-bezier(.2, .75, .15, 1) backwards; animation-delay: calc(var(--ci, 0) * 28ms + 260ms); }
@keyframes mo-chip { from { opacity: 0; transform: translate3d(0, 6px, 0) scale(.96); } to { opacity: 1; transform: none; } }
/* "How it works": step numbers pop as each step reveals */
.steps > li.mo-in .n { display: inline-block; animation: mo-pop .55s cubic-bezier(.3, 1.6, .5, 1) .15s both; }
@media (prefers-reduced-motion: reduce) {
  .hero .kicker, .hero .lede, .hero .entry-pick, .hero .hs-demo, .hero .hs-form, .hero .hs-alt, .hero .trust-row, .hero-side > *,
  .hs-live, .sc-ring.sc-go, .sc-ring.sc-go .sc-arc, .mo-show, .mo-show .chip, .steps > li.mo-in .n { animation: none !important; opacity: 1; transform: none; }
  .trust-row li:hover, .tool-tiles a:hover, .tool-tiles a:focus-visible, .proof-badges a:hover { transform: none; }
}