/**
 * Home 4 motion — scroll reveal and hover effects, every Home 4 page.
 *
 * Reveal classes are added by assets/js/home4-motion.js and removed once an
 * element has arrived. Hover effects are plain CSS and apply everywhere.
 * prefers-reduced-motion switches all of it off (see the foot of this file and
 * the global rule in home4.css).
 */

/* ---------- Scroll reveal ---------- */
.km-motion .km-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--km-delay,0ms),transform .8s cubic-bezier(.2,.7,.2,1) var(--km-delay,0ms)}
.km-motion .km-reveal.is-in{opacity:1;transform:none}

/* Hero headings get a slightly longer rise. */
.km-motion :is(.page-hero,.ev-page-intro,.kc-hero,.cm-hero,.ab-hero,.err-page) h1.km-reveal{transform:translateY(40px)}
.km-motion :is(.page-hero,.ev-page-intro,.kc-hero,.cm-hero,.ab-hero,.err-page) h1.km-reveal.is-in{transform:none}

/* Soft moving light on the plain page heroes. */
.page-hero,.ev-hero,.ab-hero,.err-page,.art-head{background-size:160% 160%;animation:km-drift 18s ease-in-out infinite alternate}
@keyframes km-drift{from{background-position:0% 0%}to{background-position:100% 100%}}

/* Photo heroes settle from a slow zoom. */
.kc-hero>img,.cm-hero>img{animation:km-settle 9s ease-out both}
@keyframes km-settle{from{transform:scale(1.12)}to{transform:scale(1)}}

/* ---------- Hover: cards ---------- */
:is(.post-card,.team-card,.word-tile,.ct-card,.way-card,.pillar-card,.km-mini,.km-acct-stat,.voice-grid figure,.ev-venue,.news-lead,.km-ticket){transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
:is(.team-card,.word-tile,.ct-card,.km-ticket,.ev-venue):hover{transform:translateY(-4px);border-color:#bcd0ea;box-shadow:0 18px 40px rgba(0,71,160,.12)}
.post-card:hover{transform:translateY(-4px)}
.post-card>a>div:first-child img,.news-lead-image img,.pillar-card img,.km-mini__img img,.art-body figure img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.post-card:hover>a>div:first-child img,.pillar-card:hover img,.km-mini:hover .km-mini__img img{transform:scale(1.06)}
.news-lead:hover{box-shadow:0 22px 50px rgba(0,71,160,.12)}
.voice-grid figure:hover{transform:translateY(-4px);background:rgba(255,255,255,.14)}

.team-card>:is(i,img){transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.team-card:hover>:is(i,img){transform:scale(1.08) rotate(-4deg)}
.word-tile b{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.2,1),color .2s}
.word-tile:hover b{transform:translateY(-3px);color:var(--red)}
.ct-card>i,.ct-card__icon{transition:background-color .2s,color .2s}
.ct-card:hover>i,.ct-card:hover .ct-card__icon{background:var(--blue);color:#fff}
.way-card i{transition:color .25s}
.way-card:hover i{color:var(--red)}

.kc-tile img,.culture-card img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.kc-tile b span,.culture-card b span,.inline-link span,.head-actions>a span{display:inline-block;transition:transform .25s ease}
.kc-tile:hover b span,.culture-card:hover b span,.inline-link:hover span,.head-actions>a:hover span{transform:translateX(4px)}

.ev-past-card>b,.km-mini__body b,.post-card h3{transition:color .2s}
.cm-wall img{transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .3s}
.cm-wall{overflow:hidden}
.cm-wall img:hover{transform:scale(1.04);filter:saturate(1.15)}

.meetup{transition:background-color .2s,padding .25s}
.meetup:hover{background:#fff;padding-left:14px;padding-right:14px}
.meetup .date{transition:transform .25s,border-color .25s}
.meetup:hover .date{transform:scale(1.05);border-color:var(--red)}

.partner-row>*{transition:border-color .2s,color .2s,transform .25s}
.partner-row>*:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-3px)}
.ab-timeline li b{display:inline-block;transition:transform .3s}
.ab-timeline li:hover b{transform:translateY(-3px)}
.ab-timeline li:before{transition:transform .3s}
.ab-timeline li:hover:before{transform:scale(1.3)}

.cm-stats>div,.stats>div,.ev-stats>div{transition:transform .25s}
.cm-stats>div:hover,.ev-stats>div:hover{transform:translateY(-3px)}

.ct-faq summary{transition:color .2s,padding-left .25s}
.ct-faq summary:hover{padding-left:6px}
.ct-faq summary:after{transition:transform .25s}
.ct-faq details[open] summary:after{transform:rotate(180deg)}

.woocommerce ul.products li.product{transition:transform .25s ease}
.woocommerce ul.products li.product:hover{transform:translateY(-5px)}
.woocommerce ul.products li.product img{transition:transform .6s cubic-bezier(.2,.7,.2,1);border-radius:10px}
.woocommerce ul.products li.product a:hover img{transform:scale(1.03)}

/* ---------- Hover: controls ---------- */
.chip,.km-chip,.badge,.art-tags a,.share-row a{transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.chip:hover,.art-tags a:hover{transform:translateY(-2px)}
.share-row a:hover{transform:translateY(-2px)}
.art-tags a:hover{background:var(--blue);color:#fff}
.button{transition:background-color .2s,color .2s,box-shadow .2s,transform .2s}
.button.outline:hover,.button.ghost:hover{transform:translateY(-2px)}
.crumbs a{transition:color .2s}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
	.km-motion .km-reveal{opacity:1;transform:none}
	.page-hero,.ev-hero,.ab-hero,.err-page,.art-head,.kc-hero>img,.cm-hero>img{animation:none}
	:is(.post-card,.team-card,.word-tile,.ct-card,.km-ticket,.ev-venue,.woocommerce ul.products li.product):hover{transform:none}
}