/* MattyG home page only (Orbfix3, Oct 7 2026).
 * Hero: one full-size orb (still of the film's last frame) that is alive from first paint,
 * page reveals on scroll, scroll light trail. Transform/opacity only; no scroll-jacking.
 * prefers-reduced-motion gets a calm static page. */

/* ---------- Hero layout (no pinned/scrubbed section) ---------- */
.mg-hero .scroll-scrub__story { margin-top: 0; }
.mg-hero .scroll-scrub__chapter { min-height: 0; }
.mg-hero .scroll-scrub__chapter-pin { position: relative; min-height: 100vh; min-height: 100svh; }
.mg-hero .scroll-scrub__copy { z-index: 2; }

/* ---------- The orb ---------- */
.mg-orb { position: relative; z-index: 1; pointer-events: none; }
.mg-orb__par, .mg-orb__tilt, .mg-orb__float { position: relative; width: 100%; }
.mg-orb__pic, .mg-orb__base { display: block; width: 100%; height: auto; }
.mg-orb__swirl, .mg-orb__glow, .mg-orb__sheen, .mg-orb__motes { position: absolute; inset: 0; width: 100%; height: 100%; }
.mg-orb__swirl, .mg-orb__glow, .mg-orb__sheen { opacity: 0; transition: opacity 1.2s ease; }
/* Inner swirl: copies of the same orb, masked to the core, turning slowly in opposite directions.
   The glass rim and reflections stay still, so the orb itself never moves in size. */
.mg-orb__swirl { display: block; max-width: none; transform-origin: 50% 50%; }
.mg-orb__swirl--a { -webkit-mask-image: radial-gradient(closest-side, #000 0%, #000 30%, transparent 56%); mask-image: radial-gradient(closest-side, #000 0%, #000 30%, transparent 56%); }
.mg-orb__swirl--b { -webkit-mask-image: radial-gradient(closest-side, transparent 18%, #000 36%, #000 50%, transparent 74%); mask-image: radial-gradient(closest-side, transparent 18%, #000 36%, #000 50%, transparent 74%); }
.mg-orb__glow { border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95) 0%, rgba(214, 232, 255, 0.75) 14%, rgba(120, 170, 255, 0.28) 32%, rgba(80, 130, 255, 0) 52%); }
.mg-orb__sheen { border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 230deg, rgba(255, 255, 255, 0.85) 292deg, rgba(236, 222, 182, 0.4) 312deg, rgba(255, 255, 255, 0) 340deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 76%, #000 84%, #000 88%, transparent 93%); mask-image: radial-gradient(closest-side, transparent 76%, #000 84%, #000 88%, transparent 93%); }
.mg-orb__motes { overflow: visible; }
.mg-orb__motes i { position: absolute; display: block; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #ffffff 0%, #8fb0ff 45%, rgba(47, 92, 255, 0) 72%); box-shadow: 0 0 10px rgba(47, 92, 255, 0.55); }
.mg-orb__motes i:nth-child(3n) { width: 5px; height: 5px; background: radial-gradient(circle, #fff8e6 0%, #d9b45a 50%, rgba(217, 180, 90, 0) 75%); box-shadow: 0 0 10px rgba(217, 180, 90, 0.55); }
.mg-orb__motes i:nth-child(1) { left: 8%;  top: 62%; }
.mg-orb__motes i:nth-child(2) { left: 92%; top: 40%; }
.mg-orb__motes i:nth-child(3) { left: 18%; top: 18%; }
.mg-orb__motes i:nth-child(4) { left: 84%; top: 80%; }
.mg-orb__motes i:nth-child(5) { left: 50%; top: 2%; }
.mg-orb__motes i:nth-child(6) { left: 2%;  top: 36%; }
.mg-orb__motes i:nth-child(7) { left: 74%; top: 10%; }
.mg-orb__motes i:nth-child(8) { left: 30%; top: 94%; }

/* ---------- Load-in: headline words, then the rest (no layout shift: opacity/transform only) ---------- */
@keyframes mg-word { from { opacity: 0; transform: translate3d(0, 0.45em, 0); } to { opacity: 1; transform: none; } }
@keyframes mg-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
.mg-w { display: inline-block; }

/* ---------- Scroll light trail ---------- */
.mg-trail { position: fixed; top: 67px; left: 0; z-index: 41; width: 100%; height: 2px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, rgba(47, 92, 255, 0) 0%, #2f5cff 30%, #8fb0ff 70%, #d9b45a 100%); box-shadow: 0 0 10px rgba(47, 92, 255, 0.45); }

@media (prefers-reduced-motion: no-preference) {
  .mg-orb__swirl--a { animation: mg-spin 22s linear infinite; }
  .mg-orb__swirl--b { animation: mg-spin 38s linear infinite reverse; }
  .mg-orb__glow { animation: mg-pulse 5.5s ease-in-out infinite; }
  .mg-orb__sheen { animation: mg-spin 9s linear infinite; }
  .mg-orb__float { animation: mg-orb-float 7s ease-in-out infinite; }
  .mg-orb.is-live .mg-orb__swirl--a { opacity: 0.9; }
  .mg-orb.is-live .mg-orb__swirl--b { opacity: 0.55; }
  .mg-orb.is-live .mg-orb__glow { opacity: 1; }
  .mg-orb.is-live .mg-orb__sheen { opacity: 1; }
  .mg-orb.is-live .mg-orb__motes i { animation: mg-mote 9s ease-in-out infinite; animation-delay: calc(var(--m) * -1.15s); }
  .mg-orb__motes i:nth-child(even) { animation-duration: 11.5s !important; }
  .mg-orb.is-off * { animation-play-state: paused !important; }
  .mg-w { animation: mg-word 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(0.08s + var(--i) * 0.09s); }
  .mg-in { animation: mg-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(0.1s + var(--d) * 0.1s); }
  .mg-hero .scroll-scrub__kicker.mg-in { animation-delay: 0s; }
}
@keyframes mg-spin { to { transform: rotate(360deg); } }
@keyframes mg-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes mg-orb-float { 0%, 100% { transform: translate3d(0, -6px, 0); } 50% { transform: translate3d(0, 6px, 0); } }
@keyframes mg-mote { 0% { opacity: 0; transform: translate3d(0, 10px, 0); } 25% { opacity: 0.95; } 70% { opacity: 0.6; } 100% { opacity: 0; transform: translate3d(6px, -34px, 0); } }

/* ---------- Reveal on scroll (only when home.js is running; see the inline flag in index.html) ---------- */
.mg-motion [data-rv] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--d, 0) * 90ms); }
.mg-motion .mg-row__visual[data-rv] { transform: translate3d(0, 28px, 0) scale(0.97); }
.mg-motion [data-rv].is-in { opacity: 1; transform: none; }
/* The little charts draw when their card is revealed, not off-screen on page load. */
.mg-motion .mg-row__visual[data-rv]:not(.is-in) *, .mg-motion .mg-metrics li[data-rv]:not(.is-in) * { animation-play-state: paused !important; }

/* ---------- Desktop: orb sits exactly where the old full-bleed film put it ---------- */
@media (min-width: 861px) {
  .mg-hero .scroll-scrub__chapter-pin { --hh: max(640px, 100vh); min-height: var(--hh); --u: max(calc(100vw / 1920), calc(var(--hh) / 1080)); }
  @supports (height: 1svh) { .mg-hero .scroll-scrub__chapter-pin { --hh: max(640px, 100svh); } }
  @supports (width: 1cqw) { .mg-hero .scroll-scrub__chapter-pin { container-type: inline-size; --u: max(calc(100cqw / 1920), calc(var(--hh) / 1080)); } }
  .mg-orb { position: absolute; left: calc(50% - 8 * var(--u)); top: calc(var(--hh) / 2 - 278 * var(--u)); width: calc(560 * var(--u)); }
}

/* ---------- Phones: plain flow. Orb, headline, buttons, then the rest ---------- */
@media (max-width: 860px) {
  .mg-hero .scroll-scrub__chapter-pin { display: block; min-height: 0; padding-top: 72px; padding-bottom: 40px; }
  .mg-hero .scroll-scrub__copy { display: flex; flex-direction: column; width: 100%; max-width: 36rem; margin: 0 auto; }
  .mg-hero .scroll-scrub__copy::before { display: none; }
  .mg-orb { --orb-d: min(84vw, 38vh); width: calc(var(--orb-d) * 1.1067); margin: 0 auto 4px; }
  @supports (height: 1svh) { .mg-orb { --orb-d: min(84vw, 38svh); } }
  .mg-hero .scroll-scrub__kicker { order: 1; margin: 0 0 8px; }
  .mg-hero .scroll-scrub__title { order: 2; }
  .mg-hero .scroll-scrub__actions { order: 3; margin-top: 20px; }
  .mg-hero .scroll-scrub__body { order: 4; margin-top: 24px; }
  .mg-hero .scroll-scrub__tags { order: 5; margin-top: 16px; }
  .mg-hero .scroll-scrub__actions .mg-cta-chat, .mg-hero .scroll-scrub__actions .mg-cta-see { min-height: 48px; }
  .mg-trail { top: 67px; }
}
@media (max-width: 860px) and (max-height: 600px) and (orientation: landscape) {
  .mg-orb { --orb-d: min(40vw, 44vh); }
  @supports (height: 1svh) { .mg-orb { --orb-d: min(40vw, 44svh); } }
}
/* Touch screens: no "stuck" hover colour on the hero buttons after a tap. */
@media (hover: none) {
  .mg-hero .mg-cta-chat:hover { transform: none; background: var(--mg-accent); box-shadow: none; }
  .mg-hero .mg-cta-chat:hover .mg-cta-chat__sheen { transform: translateX(-120%); }
  .mg-hero .mg-cta-see:hover { transform: none; background: rgba(255, 255, 255, 0.7); gap: 0.45rem; }
}
/* Reduced motion: calm, static, everything visible. */
@media (prefers-reduced-motion: reduce) {
  .mg-orb__swirl, .mg-orb__sheen, .mg-orb__motes, .mg-trail { display: none; }
  .mg-orb__glow { opacity: 0.6; }
}