/* Golden Rock motion layer + Motion Studio page (golde-9c, 2026-10-12). Linked after site.css on every page.
   The animation rules only apply under html.mo, which motion.js sets when GSAP loaded and the visitor hasn't asked for
   reduced motion. Without it the site looks and behaves exactly as before. */

/* ---- split titles: lines rise out of a mask. Padding gives italic overhang and descenders room inside the mask. */
.mo-l-mask{padding:0 .16em .12em;margin:0 -.16em -.12em}
.mo-glint{background:linear-gradient(100deg,var(--gold) 0 36%,#fff4d2 46%,#f8e4ab 52%,var(--gold) 64% 100%) 100% 0/280% 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.12em;margin-right:-.12em}

/* ---- the first screen's ornament drifts slower than the page (translate/rotate compose with its own transform) */
.mo .orn-hero,.mo .orn-side{translate:0 var(--mo-py,0px);rotate:var(--mo-pr,0deg)}

/* ---- magnetic gold buttons (mouse and trackpad only; translate composes with the hover lift) */
.mo .mo-mag{translate:calc(var(--mx,0) * 1px) calc(var(--my,0) * 1px)}

/* ---- reading progress: a gold hairline under the header on long pages */
.mo-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold-grad);transform:scaleX(0);
  transform-origin:0 50%;pointer-events:none;z-index:3}

/* ---- page-to-page: a soft cross-fade (Chrome, Edge, Safari 18.2+; other browsers just navigate). Header stays put. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:mo-vt-out .2s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:mo-vt-in .42s cubic-bezier(.22,1,.36,1) both}
  .util{view-transition-name:mo-util}
  .hdr{view-transition-name:mo-hdr}
}
@keyframes mo-vt-out{to{opacity:0}}
@keyframes mo-vt-in{from{opacity:0;transform:translateY(8px)}}

/* ---- band linking to /motion/ (home, services, websites) */
.mo-band-sec{padding:72px 0;background:var(--paper)}
.mo-band{display:grid;grid-template-columns:1fr auto;gap:32px 48px;align-items:center;padding:40px 44px;border-radius:24px;
  border:1px solid rgba(232,121,181,.32);background:radial-gradient(circle at 92% 0%,rgba(232,121,181,.13),transparent 55%),var(--white)}
.mo-band .label{color:#a63f78}
.mo-band h3{font:400 clamp(30px,3vw,40px)/1.1 var(--display);margin:14px 0 10px;text-wrap:balance}
.mo-band h3 em{font-style:italic;color:var(--gold-lo)}
.mo-band p{color:var(--muted);max-width:640px}
@media (max-width:860px){.mo-band{grid-template-columns:1fr;padding:32px 26px}.mo-band .btn{justify-self:start}}

/* =================================================================== /motion/ page: "studio" theme (orchid stage light) */
.pg-motion{--acc:#e879b5;--acc-hi:#f6b6d8;--acc-lo:#a63f78;--bg:#110a10;--tint:#f8eef4}
.pg-motion .phero.dark{background:radial-gradient(900px 520px at 80% 25%,color-mix(in srgb,var(--acc) 15%,transparent),transparent 60%),var(--bg)}
.pg-motion .phero .wrap{position:relative;z-index:1}
.pg-motion .phero.dark .label{color:var(--acc)}
.pg-motion .display em{color:var(--acc-hi)}
.pg-motion .orn .ln{stroke:var(--acc)}
.pg-motion .orn .ln.gem{stroke:var(--gold)}
.pg-motion .orn .pad{fill:var(--gold)}
.pg-motion .phero .ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.mo-art{opacity:.62}
@media (max-width:760px){.mo-art{opacity:.14}}
.mo-art .mo-playhead{transform-box:view-box}
.mo .mo-art.in .mo-playhead{animation:mo-scrub 7s cubic-bezier(.65,0,.35,1) 3s infinite alternate}
@keyframes mo-scrub{from{transform:translateX(-120px)}to{transform:translateX(150px)}}

/* reel */
.mo-reel{margin-top:44px;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px rgba(13,14,17,.18);background:#000}
.mo-reel video{display:block;width:100%;height:auto;aspect-ratio:16/9}

/* live demo */
.mo-demo-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.mo-points{list-style:none;margin:26px 0 0;border-top:1px solid var(--line)}
.mo-points li{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.mo-points .ico{width:17px;height:17px;margin-top:4px;color:var(--gold-lo);flex:none}
.mo-demo{border-radius:20px;background:var(--ink);border:1px solid rgba(255,255,255,.08);box-shadow:0 34px 90px rgba(13,14,17,.28);overflow:hidden}
.mo-demo-bar{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.mo-dots{display:flex;gap:6px}.mo-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.mo-url{flex:1;min-width:0;font:500 12px var(--sans);color:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mo-switch{display:flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.07)}
.mo-switch[hidden],[data-mo-hint][hidden]{display:none}
.mo-switch button{height:30px;padding:0 13px;border-radius:999px;font:600 12px var(--sans);color:rgba(255,255,255,.6);transition:background .25s,color .25s}
.mo-switch button[aria-pressed=true]{background:var(--gold-grad);color:var(--ink)}
.mo-stage{position:relative;display:grid;grid-template-columns:1.05fr .95fr;grid-template-rows:auto auto;gap:18px 22px;padding:30px 28px 26px;
  background:radial-gradient(600px 300px at 90% 0%,rgba(232,160,127,.13),transparent 60%),#15110f;color:#fff;overflow:hidden;min-height:330px}
.mo-d-copy{align-self:center}
.mo-d-label{display:inline-block;font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:#e8a07f}
.mo-d-h{font:400 clamp(30px,3.3vw,44px)/1 var(--display);margin:12px 0 10px}
.mo-d-h em{font-style:italic;color:#f2c1a8}
.mo-d-line{display:block;overflow:hidden;padding:0 .14em .1em;margin:0 -.14em -.1em}
.mo-d-line>span{display:inline-block}
.mo-d-p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.62);max-width:260px}
.mo-d-btn{display:inline-flex;align-items:center;height:38px;padding:0 18px;margin-top:16px;border-radius:999px;font:600 12.5px var(--sans);
  background:linear-gradient(135deg,#f2c1a8,#e8a07f 55%,#b0603f);color:#1a0f0a;box-shadow:0 8px 22px rgba(232,160,127,.28)}
.mo-d-img{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;align-self:center}
.mo-d-img img{width:100%;height:100%;object-fit:cover;display:block}
.mo-d-cards{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mo-d-cards span{padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);font:500 13px var(--sans);color:rgba(255,255,255,.82)}
.mo-d-cursor{position:absolute;left:0;top:0;width:22px;height:27px;opacity:0;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));z-index:3}
.mo-d-ring{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid #f2c1a8;opacity:0;pointer-events:none;z-index:2}
.mo-demo-foot{padding:10px 16px 12px;border-top:1px solid rgba(255,255,255,.08)}
.mo-demo-foot .fine{color:rgba(255,255,255,.45);font-size:12px}
.mo-demo-foot b{color:rgba(255,255,255,.75);font-weight:600}
@media (max-width:960px){.mo-demo-wrap{grid-template-columns:1fr;gap:36px}}
@media (max-width:560px){.mo-stage{grid-template-columns:1fr;padding:24px 18px 20px}.mo-d-img{aspect-ratio:16/9}.mo-url{display:none}}

/* what we make */
.mo-make{margin-top:44px}

/* explainer looks */
.mo-looks-wrap .khead{margin-bottom:34px}
.mo-looks{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:860px;margin:0 auto}
.mo-looks span{padding:12px 20px;border-radius:999px;border:1px solid var(--line);background:var(--white);font:400 21px/1 var(--display);font-style:italic}

/* pricing: four cards, the Launch Video highlighted */
.mo-offers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:40px}
.mo-offers .offer{padding:34px 28px}
.mo-offers .offer:first-child{border-color:var(--line-d);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015))}
.mo-offers .offer:nth-child(2){border-color:rgba(200,163,90,.45);background:radial-gradient(circle at 85% 0%,rgba(200,163,90,.16),transparent 55%),rgba(255,255,255,.02)}
.mo-offers .offer h3{font-size:clamp(28px,2.2vw,34px)}
.mo-offers .o-price b{font-size:clamp(38px,3.2vw,48px)}
.mo-offers .o-foot{flex-direction:column;align-items:flex-start}
@media (max-width:1180px){.mo-offers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.mo-offers{grid-template-columns:1fr}}

.mo-faq{max-width:820px;margin:0 auto}

@media (prefers-reduced-motion:reduce){.mo-art .mo-playhead{animation:none!important}}