/* Motion layer: page-to-page transitions, scroll reveals, and small delights.
   Each page's <main data-view="..."> picks its own entrance so every page feels like a new view.
   Everything here switches off for people who ask their device for reduced motion. */

/* ---------- page transitions (Chrome/Edge/Safari 18+; other browsers just load normally) ---------- */
@view-transition{navigation:auto}
.nav{view-transition-name:site-nav}
.staybar{view-transition-name:site-staybar}
::view-transition-old(root){animation:vt-out .32s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-rise .62s cubic-bezier(.16,1,.3,1) both}
:root:has(main[data-view="society"])::view-transition-new(root){animation-name:vt-zoom}
:root:has(main[data-view="bys"])::view-transition-new(root){animation-name:vt-right}
:root:has(main[data-view="simplyva"])::view-transition-new(root){animation-name:vt-left}
:root:has(main[data-view="about"])::view-transition-new(root){animation-name:vt-tilt}
:root:has(main[data-view="podcast"])::view-transition-new(root){animation-name:vt-drop}
:root:has(main[data-view="blog"])::view-transition-new(root){animation-name:vt-blur}
:root:has(main[data-view="contact"])::view-transition-new(root){animation-name:vt-zoom}
@keyframes vt-out{to{opacity:0;scale:.98}}
@keyframes vt-rise{from{opacity:0;translate:0 60px}}
@keyframes vt-zoom{from{opacity:0;scale:.92}}
@keyframes vt-right{from{opacity:0;translate:90px 0}}
@keyframes vt-left{from{opacity:0;translate:-90px 0}}
@keyframes vt-tilt{from{opacity:0;translate:0 50px;rotate:1.5deg}}
@keyframes vt-drop{from{opacity:0;translate:0 -50px}}
@keyframes vt-blur{from{opacity:0;filter:blur(14px)}}

/* slide-ins start off to the side, so never let them widen the page */
html,body{overflow-x:clip}

/* ---------- scroll progress ---------- */
.scroll-bar{position:fixed;top:0;left:0;right:0;height:5px;z-index:999;transform-origin:0 50%;scale:var(--p,0) 1;background:linear-gradient(90deg,var(--pink),var(--orange),var(--lilac));pointer-events:none}

/* ---------- scroll reveals (individual translate/scale/rotate so they stack with existing tilts) ---------- */
.js-motion .rv{opacity:0;transition:opacity .7s ease,translate .8s cubic-bezier(.16,1,.3,1),scale .8s cubic-bezier(.16,1,.3,1),rotate .8s cubic-bezier(.16,1,.3,1),filter .7s ease;transition-delay:var(--d,0ms)}
.js-motion .rv.in,.js-motion .rv.in[data-m]{opacity:1;translate:0 0;scale:1;rotate:0deg;filter:none}
.js-motion .rv[data-m="rise"]{translate:0 44px}
.js-motion .rv[data-m="pop"]{scale:.86}
.js-motion .rv[data-m="left"]{translate:-60px 0}
.js-motion .rv[data-m="right"]{translate:60px 0}
.js-motion .rv[data-m="swing"]{translate:0 30px;rotate:-4deg}
.js-motion .rv[data-m="blur"]{filter:blur(10px);translate:0 20px}
.js-motion .rv[data-m="fade"]{}

/* handwritten lines "write on" from left to right */
.js-motion .write{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.65,0,.35,1) var(--d,150ms)}
.js-motion .write.in{clip-path:inset(0 -10% 0 0)}

/* highlighted headline words get a marker swipe */
.js-motion h1 em{background-image:linear-gradient(transparent 62%,rgba(248,200,252,.9) 62% 92%,transparent 92%);background-repeat:no-repeat;background-size:0% 100%;transition:background-size 1s cubic-bezier(.65,0,.35,1) .55s}
.js-motion h1.in em{background-size:100% 100%}
.js-motion .hero h1 .hl::after{transform-origin:left;scale:0 1;transition:scale 1s cubic-bezier(.65,0,.35,1) .55s}
.js-motion .hero h1.in .hl::after{scale:1 1}

/* ---------- always-on delights ---------- */
.spark,.sparkle,.vh-spark,.pod-spark{animation:drift 6s ease-in-out infinite}
.spark:nth-of-type(2n),.sparkle:nth-of-type(2n),.vh-spark:nth-of-type(2n),.pod-spark:nth-of-type(2n){animation-duration:7.5s;animation-delay:-2s}
@keyframes drift{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -12px;rotate:12deg}}

.btn{position:relative}
.burst-dot{position:fixed;width:14px;height:14px;pointer-events:none;z-index:1000;background:url(../img/twinkle.svg) center/contain no-repeat;animation:burst .7s cubic-bezier(.16,1,.3,1) forwards}
@keyframes burst{to{translate:var(--x) var(--y);scale:.2;opacity:0;rotate:180deg}}

/* homepage ticker */
.ticker{overflow:hidden;background:var(--navy);color:#fff;border-block:2px solid var(--navy);padding-block:14px}
.ticker-track{display:flex;width:max-content;gap:0;animation:tick 32s linear infinite}
.ticker span{font-family:var(--display);font-size:clamp(20px,2.2vw,28px);white-space:nowrap;padding-inline:22px;display:flex;align-items:center;gap:22px}
.ticker span::after{content:"";width:20px;height:20px;background:url(../img/twinkle.svg) center/contain no-repeat}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{translate:-50% 0}}

/* About: the dashed timeline draws itself as you scroll */
.js-motion .chapters::before{transform-origin:top;scale:1 var(--draw,0);transition:scale .15s linear}

/* Podcast + homepage player bars bounce like audio */
.pod-player .wave i{animation:eq 1.1s ease-in-out infinite;transform-origin:center}
.pod-player .wave i:nth-child(2n){animation-delay:-.3s}.pod-player .wave i:nth-child(3n){animation-delay:-.6s}.pod-player .wave i:nth-child(5n){animation-delay:-.9s}
@keyframes eq{0%,100%{scale:1 .55}50%{scale:1 1.15}}
.ep:hover .ep-play,.pick:hover::before{animation:pulse-play .8s ease-in-out infinite}
@keyframes pulse-play{50%{scale:1.15}}

/* photo frames lean toward the cursor */
.tilt{transition:transform .25s ease;transform-style:preserve-3d}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .js-motion .rv,.js-motion .write{opacity:1;translate:none;scale:none;rotate:none;filter:none;clip-path:none;transition:none}
  .spark,.sparkle,.vh-spark,.pod-spark,.ticker-track,.pod-player .wave i{animation:none}
  .scroll-bar{display:none}
}