/* ALLMC sitewide motion: spring scroll, reveals, hover/press.
   Transform/opacity only. Nav and pill-cta positioning are not changed. */
html.am-spring{scroll-behavior:auto !important}
html.am-js .am-reveal{
  opacity:0;
  transform:translate3d(0,22px,0) scale(.985);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),
              transform .9s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--am-i, 0) * 80ms);
}
html.am-js .am-reveal.am-reveal--hero{
  opacity:0;
  transform:translate3d(0,26px,0);
}
html.am-js .am-reveal.is-in,
html.am-js .am-reveal.am-reveal--hero.is-in{
  opacity:1;
  transform:none;
}

@media (hover:hover) and (pointer:fine){
  .btn, .btn-acc, .btn-ghost, .btn-white, .btn-play, .btn-line, a.btn{
    transition:transform .28s cubic-bezier(.16,1,.3,1),
                box-shadow .28s cubic-bezier(.16,1,.3,1),
                background-color .28s ease, color .28s ease, border-color .28s ease;
  }
  .btn:hover, .btn-acc:hover, .btn-ghost:hover, .btn-white:hover, .btn-play:hover, a.btn:hover{
    transform:translate3d(0,-2px,0);
  }
  .work-card, .work-thumb, .plan, .cat, .tool-card, .step4, .work-item, .faq details{
    transition:transform .35s cubic-bezier(.16,1,.3,1),
                box-shadow .35s cubic-bezier(.16,1,.3,1),
                border-color .35s cubic-bezier(.16,1,.3,1);
  }
  .work-card:hover, .work-thumb:hover, .plan:hover, .cat:hover, .tool-card:hover,
  .step4:hover, .work-item:hover{
    transform:translate3d(0,-4px,0);
  }
}

.btn:active, .btn-acc:active, .btn-ghost:active, .btn-white:active, .btn-play:active, a.btn:active,
.work-card:active, .work-thumb:active, .plan:active, .cat:active, .tool-card:active, .step4:active{
  transform:translate3d(0,1px,0) scale(.98);
  transition-duration:.12s;
}

/* Do not fight the grail hero frames or the pinned pill. */
.gh-card, .gh-card:hover, .gh-card:active,
.pill-cta, .pill-cta:hover, .pill-cta:active,
.nav .logo, .nav .logo:hover, .nav .logo:active,
.menu-btn, .menu-btn:hover, .menu-btn:active{
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  html.am-js .am-reveal,
  html.am-js .am-reveal.am-reveal--hero,
  html.am-js .am-reveal.is-in{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .btn, .btn-acc, .btn-ghost, .btn-white, .btn-play, a.btn,
  .work-card, .work-thumb, .plan, .cat, .tool-card, .step4, .work-item,
  .btn:hover, .btn:active, .work-card:hover, .work-card:active, .plan:hover, .plan:active{
    transition:none !important;
    transform:none !important;
  }
}

/* Underline draw: accent words in headings get a stroke that draws in once they are on screen. */
.am-ul{position:relative;display:inline-block}
.am-ul::after{content:"";position:absolute;left:2%;right:2%;bottom:-.04em;height:.07em;min-height:3px;border-radius:3px;background:#FF3D14;transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.22,1,.36,1) .35s}
.am-ul.is-in::after{transform:scaleX(1)}
html.am-reduce .am-ul::after{transform:scaleX(1);transition:none}
/* Underline on hover for nav, footer and inline text links: grows from the left, leaves to the right. */
.nav-links a,.foot a,footer a,main p a:not(.btn),main li a:not(.btn):not([class]){position:relative;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-size:0% 1.5px;background-position:100% 100%;transition:background-size .45s cubic-bezier(.65,0,.35,1),color .25s}
.nav-links a:hover,.foot a:hover,footer a:hover,main p a:not(.btn):hover,main li a:not(.btn):not([class]):hover,.nav-links a[aria-current="page"]{background-size:100% 1.5px;background-position:0 100%}
main p a:not(.btn){color:#fff;background-size:100% 1px;background-position:0 100%;background-image:linear-gradient(rgba(255,61,20,.7),rgba(255,61,20,.7))}
main p a:not(.btn):hover{background-image:linear-gradient(#FF3D14,#FF3D14);background-size:100% 2px}
.chapter--paper main p a:not(.btn),.chapter--paper p a:not(.btn){color:#111}

/* Section blending: coloured sections fade into the dark page instead of meeting it at a hard line,
   and [data-expand] panels open from an inset rounded card to full bleed as they scroll in. */
.home-gh main>.chapter,.home-gh main>.cta-final{border-radius:0 !important;margin-top:0 !important;box-shadow:none !important}
.chapter--paper,.chapter--orange,.cta-final{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 140px,#000 calc(100% - 140px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 140px,#000 calc(100% - 140px),transparent 100%)}
.chapter--paper,.chapter--orange{padding-top:170px !important;padding-bottom:170px !important}
html.am-expand [data-expand]{clip-path:inset(0 calc(var(--ex,0) * 6%) round calc(var(--ex,0) * 44px));will-change:clip-path}
@media (max-width:700px){
  .chapter--paper,.chapter--orange,.cta-final{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%)}
  .chapter--paper,.chapter--orange{padding-top:110px !important;padding-bottom:110px !important}
  html.am-expand [data-expand]{clip-path:inset(0 calc(var(--ex,0) * 4%) round calc(var(--ex,0) * 28px))}
}
/* Gentle float for decorative mockups and chips (transform only). */
@media (prefers-reduced-motion:no-preference){
  .home-chip,.cut-stage .orb{animation:am-float 7s ease-in-out infinite}
  .home-chip.c2,.cut-stage .o2{animation-delay:-2.3s}
  .home-chip.c3,.cut-stage .o3{animation-delay:-4.6s}
  .cut-stage .o4{animation-delay:-1.2s}
}
@keyframes am-float{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* Buttons (gamefizz-measured feel, our colours): pressable highlight, hover lift + tilt + brightness, quick press. */
:root{--ease-out:cubic-bezier(.22,1,.36,1)}
.btn-acc,.btn.btn-acc,a.btn-acc{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(90,14,0,.35),0 10px 30px -12px rgba(255,61,20,.55)}
.btn-white{box-shadow:inset 0 1.5px 0 #fff,inset 0 -3px 0 rgba(0,0,0,.12),0 10px 30px -14px rgba(255,255,255,.35)}
@media (hover:hover) and (pointer:fine){
  .btn,.btn-acc,.btn-white,.btn-ghost,.btn-line,.btn-play,a.btn{transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),filter .25s ease,background-color .25s ease,color .2s ease,border-color .25s ease;transform:perspective(600px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg))}
  .btn:hover,.btn-acc:hover,.btn-white:hover,.btn-ghost:hover,.btn-line:hover,a.btn:hover{transform:perspective(600px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) scale(1.045);filter:brightness(1.1) saturate(1.1)}
  .pc,.pv-link,.cat,.step4,.tool-card,.work-item,.why3 li{transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),border-color .3s ease,background-color .3s ease}
  .why3 li:hover{transform:translateY(-4px);border-color:rgba(255,61,20,.4)}
}
.btn:active,.btn-acc:active,.btn-white:active,.btn-ghost:active,.btn-line:active,a.btn:active{transform:scale(.97) !important;filter:brightness(.95);transition-duration:.1s}
/* Page hand-off: incoming page fades up, outgoing page fades down. */
@media (prefers-reduced-motion:no-preference){
  html.am-enter body{animation:am-page-in .6s var(--ease-out) both}
  html.am-leave body{opacity:0;transform:translateY(-8px);transition:opacity .18s ease,transform .18s ease}
}
@keyframes am-page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}