
/* Flip Phase micro-interactions — preserves original branding and layout */
:root{--orange:#FF5C00}
header{background:#1D1B19!important;border-bottom-color:#39332e!important}
/* Hero headline: each line appears in sequence */
.hero h1{animation:fp-headline-in 900ms cubic-bezier(.2,.8,.2,1) both}
.hero-left>.eyebrow{animation:fp-headline-in 650ms ease-out both}
.hero-left>p{animation:fp-headline-in 850ms 270ms ease-out both}
.hero-left>.cta{animation:fp-headline-in 850ms 410ms ease-out both}
@keyframes fp-headline-in{from{opacity:0;transform:translateY(23px)}to{opacity:1;transform:translateY(0)}}
/* Product hover: image lift + gentle shadow */
.product{transition:transform 340ms cubic-bezier(.2,.75,.2,1),box-shadow 340ms ease,border-color 340ms ease;will-change:auto}
.product:hover,.product:focus-within{transform:translateY(-9px);box-shadow:0 20px 45px rgba(29,27,25,.16);border-color:rgba(255,92,0,.55)}
.product img{transition:transform 450ms cubic-bezier(.2,.75,.2,1)}
.product:hover img,.product:focus-within img{transform:scale(1.035)}
/* Buttons and links: small arrow movement and smooth color transitions */
.cta,.navshop,.product a{transition:background-color 220ms ease,color 220ms ease,box-shadow 220ms ease,transform 220ms ease}
.cta:hover,.navshop:hover,.product a:hover{box-shadow:0 8px 20px rgba(255,92,0,.18)}
.cta span,.product a span{display:inline-block;transition:transform 220ms ease}
.cta:hover span,.product a:hover span{transform:translate(4px,-2px)}
a:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
/* Scroll reveals are opt-in only after JS has initialized */
.fp-motion-ready .fp-reveal{opacity:0;transform:translateY(24px);transition:opacity 750ms ease,transform 750ms cubic-bezier(.2,.75,.2,1)}
.fp-motion-ready .fp-reveal.fp-visible{opacity:1;transform:translateY(0)}
.fp-motion-ready .product.fp-reveal:nth-child(2){transition-delay:90ms}
.fp-motion-ready .product.fp-reveal:nth-child(3){transition-delay:180ms}
/* Orange divider draws in as philosophy enters the viewport */
.mission-heading::after{content:"";display:block;width:min(320px,70%);height:3px;background:var(--orange);margin-top:28px;transform-origin:left center;transform:scaleX(1)}
.fp-motion-ready .mission-heading::after{transform:scaleX(0);transition:transform 1100ms cubic-bezier(.2,.75,.2,1) 150ms}
.fp-motion-ready .mission-heading.fp-visible::after{transform:scaleX(1)}
/* The logo remains on its original 34-second counterclockwise timeline. */
/* Hover speed eases over 1.1 seconds without resetting its angle. */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 .hero h1,.hero-left>.eyebrow,.hero-left>p,.hero-left>.cta,.hero-art img{animation:none!important}
 .fp-motion-ready .fp-reveal{opacity:1!important;transform:none!important;transition:none!important}
 .fp-motion-ready .mission-heading::after{transform:scaleX(1)!important;transition:none!important}
 .product,.product img,.cta,.navshop,.product a,.cta span,.product a span{transition:none!important}
 .product:hover,.product:focus-within,.product:hover img,.product:focus-within img{transform:none!important}
}
/* Keep the top Etsy button legible on hover. */
header nav a.navshop:hover,header nav a.navshop:focus-visible{color:#000!important}
