/* endochie.com motion layer. Transforms + opacity only. Everything collapses under reduced motion. */
:root{--m-ease:cubic-bezier(.2,.7,.2,1)}

/* 1. Hero entrance (home) */
@keyframes m-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes m-wipe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes m-slap{0%{opacity:0;transform:rotate(-14deg) scale(1.28) translateY(-14px)}55%{opacity:1;transform:rotate(-3.5deg) scale(.96) translateY(0)}100%{opacity:1;transform:rotate(-6deg) scale(1)}}
.m-hero .h-eyebrow{animation:m-rise .7s var(--m-ease) 0s both}
.m-hero .h-name{animation:m-rise .8s var(--m-ease) .05s both}
.m-hero .h-name em{display:inline-block;animation:m-rise .8s var(--m-ease) .18s both}
.m-hero .h-line{animation:m-rise .7s var(--m-ease) .32s both}
.m-hero .h-cta{animation:m-rise .7s var(--m-ease) .44s both}
.m-hero .h-photo{animation:m-wipe .9s var(--m-ease) .2s both}
.m-hero .h-sticker{animation:m-slap .6s cubic-bezier(.3,1.4,.4,1) 1.05s both}
.m-hero .h-sticker.h-done{animation:none}

/* Living sticker flip */
@keyframes m-flip{0%{transform:rotate(-6deg) scaleY(1)}42%{transform:rotate(-6deg) scaleY(.04)}58%{transform:rotate(-6deg) scaleY(.04)}100%{transform:rotate(-6deg) scaleY(1)}}
.h-sticker{transform-origin:50% 50%}
.h-sticker.is-flip{animation:m-flip .62s var(--m-ease) both}
@media (max-width:720px){.h-sticker{font-size:15px !important;padding:9px 14px !important;left:-10px !important}}

/* 2. Marquee */
.m-marquee{background:#2E1D17;color:#F3E7D7;overflow:hidden}
.m-track{display:flex;width:max-content;animation:m-scroll 42s linear infinite}
.m-track p{margin:0;flex:0 0 auto;padding:18px 0 18px 32px;white-space:nowrap;font-family:'Fraunces',serif;font-variation-settings:'SOFT' 100,'WONK' 1;font-size:24px;line-height:1.1}
.m-track p em{color:#EBC3C3}
.m-track p span{color:#EBC3C3;opacity:.45;font-size:.5em;display:inline-block;vertical-align:middle;margin:0 .7em;transform:translateY(-.15em)}
.m-marquee:hover .m-track{animation-play-state:paused}
@keyframes m-scroll{to{transform:translateX(-50%)}}
@media (max-width:720px){.m-track p{font-size:19px;padding:14px 0 14px 24px}}

/* 3. Reveal system (only hides once JS has confirmed it is running) */
html.m-js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--m-ease),transform .7s var(--m-ease)}
html.m-js [data-reveal].is-in{opacity:1;transform:translateY(0)}

/* 4. Tactile cards, tiles, buttons */
.m-card{transition:transform .35s var(--m-ease),box-shadow .35s var(--m-ease),opacity .7s var(--m-ease)}
.m-card:hover,.m-card:focus-within{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 22px 44px -26px rgba(46,29,23,.55)}
.ig-tile .ig-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(46,29,23,.72),rgba(46,29,23,0) 55%);opacity:0;transition:opacity .35s var(--m-ease)}
.ig-tile .ig-media::before{content:"Watch on Instagram \2192";position:absolute;left:14px;right:14px;bottom:14px;z-index:1;color:#F3E7D7;font:500 13px/1.3 'Inter',system-ui,sans-serif;letter-spacing:.04em;opacity:0;transform:translateY(10px);transition:opacity .35s var(--m-ease),transform .35s var(--m-ease)}
.ig-tile:hover .ig-media::after,.ig-tile:focus-visible .ig-media::after{opacity:1}
.ig-tile:hover .ig-media::before,.ig-tile:focus-visible .ig-media::before{opacity:1;transform:translateY(0)}
.ig-tile:hover .ig-badge{transform:translateY(-2px)}
.ig-badge{transition:transform .35s var(--m-ease)}
a[style*="border-radius: 999px"],button[style*="border-radius: 999px"],.copybtn,#contact-btn,.unlock button{transition:transform .25s var(--m-ease),opacity .25s var(--m-ease),background-color .25s var(--m-ease)}
a[style*="border-radius: 999px"]:hover,button[style*="border-radius: 999px"]:hover,.copybtn:hover,#contact-btn:hover,.unlock button:hover{transform:translateY(-2px)}
a[style*="border-radius: 999px"]:active,#contact-btn:active,.unlock button:active{transform:translateY(0) scale(.98)}

/* 5. Timeline that draws itself (about) */
.m-timeline{position:relative}
.m-timeline li{position:relative;border-top-color:transparent !important}
.m-timeline li::before{content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:#6B5248;transition:width 1s var(--m-ease)}
.m-timeline li.is-in::before{width:100%}
.m-timeline::before,.m-timeline::after{content:"";position:absolute;left:-26px;top:0;bottom:0;width:2px;border-radius:2px}
.m-timeline::before{background:rgba(235,195,195,.16)}
.m-timeline::after{background:#EBC3C3;transform-origin:top center;transform:scaleY(0);transition:transform 1.6s var(--m-ease)}
.m-timeline.is-in::after{transform:scaleY(1)}
@supports (animation-timeline: view()){
  .m-timeline::after{transition:none;animation:m-grow linear both;animation-timeline:view();animation-range:entry 20% exit 80%}
  .m-timeline.is-in::after{transform:none}
}
@keyframes m-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes m-pulse{0%{box-shadow:0 0 0 0 rgba(142,48,72,.7)}100%{box-shadow:0 0 0 14px rgba(142,48,72,0)}}
.m-timeline li:last-child>p:first-child::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:#8E3048;margin:0 14px 6px 0;vertical-align:middle}
.m-timeline li:last-child.is-in>p:first-child::before{animation:m-pulse 1.1s .5s 2}
@media (max-width:720px){.m-timeline::before,.m-timeline::after{display:none}}

/* Insurance when the animation clock stalls */
html.m-static .m-hero .h-eyebrow,html.m-static .m-hero .h-name,html.m-static .m-hero .h-name em,html.m-static .m-hero .h-line,html.m-static .m-hero .h-cta,html.m-static .m-hero .h-photo,html.m-static .m-hero .h-sticker{animation:none !important;opacity:1 !important;clip-path:none !important}
html.m-static [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}

/* Reduced motion: everything becomes a plain fade or nothing */
@media (prefers-reduced-motion:reduce){
  .m-hero .h-eyebrow,.m-hero .h-name,.m-hero .h-name em,.m-hero .h-line,.m-hero .h-cta,.m-hero .h-photo,.m-hero .h-sticker,.h-sticker.is-flip{animation:none !important;opacity:1;clip-path:none}
  .m-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .m-track p{white-space:normal;text-align:center;padding:24px 32px}
  .m-track p+p{display:none}
  html.m-js [data-reveal]{transform:none;transition:opacity .4s}
  .m-card,.ig-badge,.ig-tile .ig-media::before,.ig-tile .ig-media::after,a[style*="border-radius: 999px"]{transition:none}
  .m-card:hover{transform:none}
  .m-timeline li::before{width:100%;transition:none}
  .m-timeline::after{transform:none;transition:none;animation:none}
  .m-timeline li:last-child.is-in>p:first-child::before{animation:none}
}