/* Motion layer for the epicure site. Additive only: no colours, sizes or layout change.
   Everything here is inert when JS is off or reduced motion is requested. */
:root{--ease:cubic-bezier(.16,1,.3,1);--ease-soft:cubic-bezier(.45,0,.25,1)}

/* Smooth scroll (Lenis) */
html.lenis,html.lenis body{height:auto}
html.lenis,.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* Hero silk: same layers, same path and timing; rendered GPU-only so it glides */
.orbital{contain:paint;isolation:isolate}
.silk{filter:none!important;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  animation-timing-function:cubic-bezier(.37,0,.63,1)!important}
.motion .hero-inner,.motion .stage .console,.motion .connection-lines{will-change:transform}
.motion .float{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* Heading line masks (JS wraps each line) */
.ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ln-i{display:inline-block;will-change:transform}
.motion .ln-i{transform:translateY(105%)}
.motion .ln.in .ln-i{transform:none;transition:transform 1.2s var(--ease) var(--ld,0ms)}

/* Scroll reveals */
.motion .reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease) var(--d,0ms),transform 1.1s var(--ease) var(--d,0ms)}
.motion .reveal.in{opacity:1;transform:none}

/* Header: same look, slides away on scroll down, back on scroll up */

/* Hover polish (movement only) */
.button,.btn{will-change:transform}
.button span,.btn .ic-arrow,.text-link span,.read-link,.dashboard-caption a>span{display:inline-block;transition:transform .45s var(--ease)}
.button:hover span,.btn:hover .ic-arrow,.text-link:hover span,.dashboard-caption a:hover>span{transform:translate(3px,-2px)}
.articles>a .article-art{transition:transform .9s var(--ease)}
.articles>a:hover .article-art{transform:scale(1.015)}
.articles>a .article-art>span{display:inline-block;transition:transform .9s var(--ease)}
.articles>a:hover .article-art>span{transform:translateY(-4px)}
.product-rail>a .mini-icon{display:inline-block;transition:transform .8s var(--ease)}
.product-rail>a:hover .mini-icon{transform:rotate(90deg)}

/* Product tabs: soft crossfade when switching */
.product-panel.swap .product-copy{animation:swap-in .8s var(--ease) both}
.product-panel.swap .visual:not([hidden]){animation:swap-art .9s var(--ease) both}
@keyframes swap-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes swap-art{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

/* Mockups float gently */
.motion .phone{animation:bob 9s ease-in-out infinite}
.motion .record-float{animation:bob2 11s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes bob2{0%,100%{translate:0 0}50%{translate:5px -7px}}

.dashboard-feature{perspective:1400px}

@media(hover:none){.card:hover,.num-card:hover,.post-card:hover,.person:hover,.principles article:hover{transform:none}}
@media(prefers-reduced-motion:reduce){
.motion .reveal,.motion .ln-i{opacity:1!important;transform:none!important}
.phone,.record-float{animation:none!important}
}

/* Line wrappers keep the heading's own colour (the muted accent stays on the original inner span) */
.section-top h2 .ln,.section-top h2 .ln-i{color:inherit}

/* Ring drift: slow, time-based (no scroll work), applied to every ring-style decoration */
@keyframes ring-drift{0%{rotate:-6deg;scale:.94}100%{rotate:6deg;scale:1.05}}
@keyframes ring-drift-b{0%{rotate:8deg;scale:1.04}100%{rotate:-5deg;scale:.95}}
.motion .connection-lines{animation:ring-drift 26s ease-in-out infinite alternate}
.motion .page-hero-shapes .sh{will-change:transform;animation:ring-drift 30s ease-in-out infinite alternate}
.motion .page-hero-shapes .sh:nth-child(even){animation-name:ring-drift-b;animation-duration:34s}
.motion .approach-intro:after,.motion .trust-grid>.section-head:after{will-change:transform;animation:ring-drift-b 24s ease-in-out infinite alternate}
/* Matching rings on the contact band and subpage call-to-action bands */
.contact,.content-page .cta-wrap{position:relative;overflow:hidden;isolation:isolate}
.contact:before,.content-page .cta-wrap:before{content:'';position:absolute;z-index:-1;pointer-events:none;width:1400px;height:460px;left:50%;top:55%;margin-left:-700px;border-radius:50%;border:1px solid #b274ff22;box-shadow:0 0 0 70px #9f6cff06,0 0 0 140px #9f6cff05,0 0 0 210px #9f6cff04;transform:rotate(-10deg);will-change:transform}
.content-page .cta-wrap:before{top:20%;width:1100px;margin-left:-550px}
.motion .contact:before,.motion .content-page .cta-wrap:before{animation:ring-drift-b 28s ease-in-out infinite alternate}

/* Scroll-linked fades run on the compositor (CSS scroll timelines): they track the scrollbar exactly and never lag */
@supports (animation-timeline: view()){
  .motion .hero-inner{animation:hero-out linear both;animation-timeline:scroll(root);animation-range:0px 90vh}
  .motion .content-page .page-hero>.container{animation:hero-out linear both;animation-timeline:scroll(root);animation-range:0px 60vh}
  @keyframes hero-out{to{opacity:.2;transform:translateY(-12%)}}
  .motion .recede{animation:recede linear both;animation-timeline:view();animation-range:exit 12% exit 88%}
  @keyframes recede{to{opacity:.72}}
  @media(max-width:760px){@keyframes recede{to{opacity:.82}}}
}