/* RAYYAF motion v2 (PREVIEW). Additive layer on top of motion.css v1. Slow, calm, no libraries; disabled under prefers-reduced-motion; every rule gated by html:not(.m2-off). */
@media (prefers-reduced-motion: no-preference) {
  :root { --m2-gold: 181, 154, 104; --m2-ease: cubic-bezier(.22,.68,.2,1); }
  @keyframes m2-rise   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes m2-fade   { from { opacity: 0; } to { opacity: 1; } }
  @keyframes m2-drift  { 0% { transform: translate3d(-6%, -4%, 0) scale(1); } 50% { transform: translate3d(5%, 4%, 0) scale(1.12); } 100% { transform: translate3d(-6%, -4%, 0) scale(1); } }
  @keyframes m2-float  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
  @keyframes m2-glow   { 0%,100% { filter: drop-shadow(0 0 0 rgba(var(--m2-gold), 0)); } 50% { filter: drop-shadow(0 0 14px rgba(var(--m2-gold), .28)); } }
  @keyframes m2-sheen  { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  @keyframes m2-line   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes m2-bar-in { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
  @keyframes m2-bar-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

  html:not(.m2-off) .hero { position: relative; isolation: isolate; overflow: hidden; }
  html:not(.m2-off) .hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 70vmax; height: 70vmax; right: -18vmax; top: -26vmax; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(var(--m2-gold), .16), rgba(var(--m2-gold), 0) 70%); animation: m2-drift 26s ease-in-out infinite; }

  html:not(.m2-off) .m2-bars { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none; overflow: hidden; opacity: .55;
    -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 100%); mask-image: linear-gradient(to top, #000 10%, transparent 100%); }
  html:not(.m2-off) .m2-bars i { position: absolute; height: 3px; border-radius: 3px; transform-origin: left center;
    background: linear-gradient(90deg, rgba(var(--m2-gold), 0), rgba(var(--m2-gold), .55) 30%, rgba(var(--m2-gold), .25));
    animation: m2-bar-in 1.6s var(--m2-ease) both, m2-bar-pulse 9s ease-in-out 2s infinite; }
  html:not(.m2-off) .m2-bars i.crit { height: 4px; background: linear-gradient(90deg, rgba(var(--m2-gold), 0), rgba(var(--m2-gold), .95) 25%, rgba(var(--m2-gold), .55)); }

  html:not(.m2-off) .hero .eyebrow { animation: m2-fade 1s var(--m2-ease) .1s both; position: relative; }
  html:not(.m2-off) .hero .eyebrow::after { content: ""; display: block; height: 1px; width: 56px; margin-top: 10px; background: rgba(var(--m2-gold), .7); transform-origin: left; animation: m2-line 1.2s var(--m2-ease) .5s both; }
  html:not(.m2-off) .hero h1 { animation: m2-rise 1.05s var(--m2-ease) .25s both; }
  html:not(.m2-off) .hero h1 em { display: inline-block; animation: m2-rise 1.05s var(--m2-ease) .55s both; }
  html:not(.m2-off) .hero .lead { animation: m2-rise 1s var(--m2-ease) .85s both; }
  html:not(.m2-off) .hero .row-btns { animation: m2-rise 1s var(--m2-ease) 1.1s both; }
  html:not(.m2-off) .hero .hero-art { animation: m2-fade 1.4s ease .4s both; }
  html:not(.m2-off) .hero .hero-art svg { animation: m2-float 10s ease-in-out 1.8s infinite, m2-glow 9s ease-in-out 1.8s infinite; will-change: transform; }

  html:not(.m2-off) .hero h1 em { background-image: linear-gradient(100deg, currentColor 35%, rgba(255,245,220,.95) 50%, currentColor 65%); background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: m2-rise 1.05s var(--m2-ease) .55s both, m2-sheen 12s linear 2.4s infinite; }

  html:not(.m2-off) .btn { position: relative; overflow: hidden; transition: transform .35s var(--m2-ease), box-shadow .35s var(--m2-ease); }
  html:not(.m2-off) .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(var(--m2-gold), .7); }
  html:not(.m2-off) .btn.gold::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%); transform: translateX(-120%); }
  html:not(.m2-off) .btn.gold:hover::after { transform: translateX(120%); transition: transform 1.1s var(--m2-ease); }

  html:not(.m2-off) .bento > .tile { position: relative; }
  html:not(.m2-off) .bento > .tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1px rgba(var(--m2-gold), .55), 0 18px 40px -18px rgba(0,0,0,.5); opacity: 0; transition: opacity .45s ease; }
  html:not(.m2-off) .bento > .tile:hover::after { opacity: 1; }
  html:not(.m2-off) .bento > .tile .ic { transition: transform .6s var(--m2-ease); }
  html:not(.m2-off) .bento > .tile:hover .ic { transform: translateY(-4px) rotate(-3deg); }
  html:not(.m2-off) .bento > .tile .tlink { display: inline-block; transition: transform .45s var(--m2-ease); }
  html:not(.m2-off) .bento > .tile:hover .tlink { transform: translateX(6px); }

  html:not(.m2-off) .m2-progress { position: fixed; z-index: 9999; left: 0; top: 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); pointer-events: none; background: linear-gradient(90deg, rgba(var(--m2-gold), .35), rgb(var(--m2-gold))); }
}
.m2-toggle { position: fixed; z-index: 10000; left: 14px; bottom: 14px; display: flex; gap: 10px; align-items: center; font: 500 13px/1.2 system-ui, -apple-system, Segoe UI, sans-serif; color: #eee; background: rgba(23,27,28,.92); border: 1px solid rgba(181,154,104,.55); border-radius: 999px; padding: 9px 14px; backdrop-filter: blur(6px); }
.m2-toggle b { color: #B59A68; font-weight: 600; letter-spacing: .06em; font-size: 11px; text-transform: uppercase; }
.m2-toggle button { all: unset; cursor: pointer; padding: 5px 12px; border-radius: 999px; background: #B59A68; color: #171B1C; font-weight: 600; }
.m2-toggle button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }