/* Grey Markets motion. Everything animated is gated on html.gm-motion (absent under reduced motion). */

/* Hold the entrance while the age gate is open, so it plays when the visitor actually sees the page. */
html.stg-gate-open :is(.gm-wi,.stg-hero-copy > *,.gm-mark *){ animation-play-state:paused!important; }

/* ---- Logo mark (inline SVG replaces the background-image emblem) ---- */
#masthead .brand a.gm-has-mark::before,.drawer .brand a.gm-has-mark::before{ display:none!important; }
.gm-mark{ display:block; width:36px; height:36px; flex:0 0 36px; overflow:visible; }
.gm-mark .gm-mark-l,.gm-mark .gm-mark-r,.gm-mark .gm-mark-coin{ transform-box:fill-box; transform-origin:center; }
@media (max-width:767px){ .gm-mark{ width:30px; height:30px; flex-basis:30px; } }
html.gm-motion .gm-mark .gm-mark-l{ animation:gm-bl .9s var(--gm-ease) .15s both; }
html.gm-motion .gm-mark .gm-mark-r{ animation:gm-br .9s var(--gm-ease) .15s both; }
html.gm-motion .gm-mark .gm-mark-coin{ animation:gm-coin-in .7s cubic-bezier(.3,1.6,.5,1) .55s both; }
html.gm-motion #masthead .brand a:hover .gm-mark-coin{ animation:gm-coin-tap .6s var(--gm-ease); }
@keyframes gm-bl{ from{ transform:translateX(-7px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes gm-br{ from{ transform:translateX(7px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes gm-coin-in{ from{ transform:scale(0); } to{ transform:scale(1); } }
@keyframes gm-coin-tap{ 0%{ transform:scale(1); } 40%{ transform:scale(.7); } 100%{ transform:scale(1); } }

/* ---- Header gains depth once the page scrolls ---- */
#masthead{ transition:box-shadow .35s var(--gm-ease),background-color .35s var(--gm-ease); }
#masthead.gm-scrolled{ background:rgba(251,251,247,.94)!important; box-shadow:0 12px 30px -24px rgba(19,19,18,.45)!important; }

/* ---- Hero entrance: words rise from behind a mask, then the supporting copy ---- */
html.gm-motion:not(.gm-ready) .stg-hero h1{ visibility:hidden; animation:gm-show 0s 2.5s forwards; }
@keyframes gm-show{ to{ visibility:visible; } }
.gm-w{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .03em .16em; margin:0 -.03em -.16em; }
.gm-wi{ display:inline-block; }
.stg-hero h1 :is(.gm-w,.gm-wi):not(#gm-x){ color:inherit!important; font-family:inherit!important; font-weight:inherit!important; font-stretch:inherit!important; letter-spacing:inherit!important; }
html.gm-motion .gm-wi{ animation:gm-word 1.05s cubic-bezier(.2,.75,.15,1) both; animation-delay:calc(var(--i) * 45ms + 120ms); }
@keyframes gm-word{ from{ transform:translateY(112%); } to{ transform:none; } }
html.gm-motion .stg-hero-copy > :not(h1){ animation:gm-rise .9s var(--gm-ease) both; }
html.gm-motion .stg-hero-copy > .stg-eyebrow{ animation-delay:.05s; }
html.gm-motion .stg-hero-copy > .stg-hero-lead{ animation-delay:.6s; }
html.gm-motion .stg-hero-copy > .stg-hero-ctas{ animation-delay:.72s; }
html.gm-motion .stg-hero-copy > .stg-hero-proof{ animation-delay:.84s; }
@keyframes gm-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* ---- Ambient aura behind the receipt ---- */
.stg-hero-art{ position:relative; isolation:isolate; }
.gm-aura{
	position:absolute; inset:-12% -8% -10% -16%; z-index:-1; pointer-events:none;
	background:radial-gradient(42% 46% at 32% 38%,rgba(31,58,224,.18),transparent 70%),radial-gradient(38% 42% at 72% 70%,rgba(185,195,246,.6),transparent 70%);
	filter:blur(28px);
}
html.gm-motion .gm-aura{ animation:gm-aura 16s ease-in-out infinite alternate; }
@keyframes gm-aura{ 0%{ transform:translate(-3%,2%) scale(1); } 100%{ transform:translate(4%,-3%) scale(1.08); } }

/* ---- Escrow receipt sequence (runs once when .gm-play lands) ---- */
html.gm-motion .gm-slip:not(.gm-play) :is(.gm-slip-head,.gm-slip-item,.gm-slip-steps li,.gm-slip-foot){ opacity:0; }
html.gm-motion .gm-slip:not(.gm-play) .gm-slip-steps .is-now i::after{ animation:none; }
html.gm-motion .gm-play .gm-slip-head{ animation:gm-rise .6s var(--gm-ease) both; }
html.gm-motion .gm-play .gm-slip-item{ animation:gm-rise .7s var(--gm-ease) .15s both; }
html.gm-motion .gm-play .gm-slip-item::after{ transform-origin:left; animation:gm-draw-x .9s var(--gm-ease) .35s both; }
html.gm-motion .gm-play .gm-slip-steps li{ animation:gm-slide .6s var(--gm-ease) both; }
html.gm-motion .gm-play .gm-slip-steps li:nth-child(1){ animation-delay:.55s; }
html.gm-motion .gm-play .gm-slip-steps li:nth-child(2){ animation-delay:.67s; }
html.gm-motion .gm-play .gm-slip-steps li:nth-child(3){ animation-delay:.79s; }
html.gm-motion .gm-play .gm-slip-steps li:nth-child(4){ animation-delay:.91s; }
/* 1. paid: the first dot fills and ticks */
html.gm-motion .gm-play .gm-slip-steps .is-done i{ animation:gm-fill .5s var(--gm-ease) 1s both; }
/* 2. the connector grows and a coin travels down it */
html.gm-motion .gm-play .gm-slip-steps li.is-done::before{ transform-origin:top; animation:gm-grow-y .9s cubic-bezier(.6,0,.2,1) 1.25s both; }
.gm-coin{ position:absolute; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--gm-cobalt); box-shadow:0 0 0 4px rgba(31,58,224,.16),0 6px 14px -4px rgba(31,58,224,.65); opacity:0; z-index:2; pointer-events:none; }
html.gm-motion .gm-play .gm-coin{ animation:gm-coin-travel 1.05s cubic-bezier(.6,0,.2,1) 1.2s both; }
/* 3. held: the ring lights, the pulse starts, the chip pops */
html.gm-motion .gm-play .gm-slip-steps .is-now i{ animation:gm-hold .5s var(--gm-ease) 2.1s both; }
html.gm-motion .gm-play .gm-slip-steps .is-now i::after{ animation-delay:2.4s; }
html.gm-motion .gm-play .gm-slip-steps .is-now em{ animation:gm-pop .5s cubic-bezier(.3,1.5,.5,1) 2.25s both; }
html.gm-motion .gm-play .gm-slip-foot{ animation:gm-rise .6s var(--gm-ease) 2.5s both; }
@keyframes gm-draw-x{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes gm-grow-y{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes gm-slide{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }
@keyframes gm-fill{
	from{ background-color:var(--gm-surface); background-size:0 0; border-color:var(--gm-hair-2); }
	to{ background-color:var(--gm-cobalt); background-size:12px 12px; border-color:var(--gm-cobalt); }
}
@keyframes gm-coin-travel{
	0%{ opacity:0; transform:translateY(0) scale(.4); }
	14%{ opacity:1; transform:translateY(0) scale(1); }
	82%{ opacity:1; transform:translateY(var(--gm-coin-y,46px)) scale(1); }
	100%{ opacity:0; transform:translateY(var(--gm-coin-y,46px)) scale(.45); }
}
@keyframes gm-hold{
	from{ border-color:var(--gm-hair-2); box-shadow:inset 0 0 0 3px var(--gm-surface),inset 0 0 0 3px var(--gm-surface); }
	to{ border-color:var(--gm-cobalt); box-shadow:inset 0 0 0 3px var(--gm-surface),inset 0 0 0 9px var(--gm-cobalt); }
}
@keyframes gm-pop{ from{ opacity:0; transform:translateY(4px) scale(.9); } to{ opacity:1; transform:none; } }

/* ---- Micro-interactions ---- */
html.gm-motion :is(.button,a.button,button.button,.single_add_to_cart_button,.checkout-button,#place_order,.stg-btn,input[type="submit"],button[type="submit"]):not(.stg-btn-ghost){
	background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.26) 50%,transparent 62%)!important;
	background-size:260% 100%!important; background-repeat:no-repeat!important; background-position:130% 0!important;
	transition:transform .2s var(--gm-ease),box-shadow .2s var(--gm-ease),background-color .2s,background-position .9s var(--gm-ease)!important;
}
html.gm-motion :is(.button,a.button,button.button,.single_add_to_cart_button,.checkout-button,#place_order,.stg-btn,input[type="submit"],button[type="submit"]):not(.stg-btn-ghost):hover{ background-position:-30% 0!important; }
.gm-arr{ display:inline-block; margin-left:.25em; }
html.gm-motion .gm-arr{ transition:transform .3s var(--gm-ease); }
html.gm-motion a:hover > .gm-arr{ transform:translateX(4px); }
html.gm-motion .stg-kicker::before{ transition:transform .6s cubic-bezier(.3,1.6,.5,1) .3s; }
html.gm-motion .stg-rv:not(.is-in) .stg-kicker::before{ transform:scale(0); }
