/* Homepage motion (config/homepage.php, assets/js/home-motion.js).
   Hidden starting states apply only under html.ez-motion, which the script sets when the
   browser supports it and the visitor has not asked for reduced motion; without the
   script everything stays visible. */

.ez-motion .ez-rv{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.ez-motion .ez-rv.ez-from-left{transform:translateX(-48px)}
.ez-motion .ez-rv.ez-from-right{transform:translateX(48px)}
.ez-motion .ez-rv.ez-pop{transform:scale(.6)}
.ez-motion .ez-rv.ez-in{opacity:1;transform:none}

/* The cards start off to the side: keep that from widening the page on phones. */
.ez-motion .eh-compare{overflow-x:hidden;overflow-x:clip}
@media (max-width:767px){
    .ez-motion .ez-rv.ez-from-left,.ez-motion .ez-rv.ez-from-right{transform:translateY(28px)}
}

/* Comparison: the ticks and crosses appear one by one after their card. */
.ez-motion .eh-compare-card li{opacity:0;transform:translateX(-10px);transition:opacity .4s ease,transform .4s ease}
.ez-motion .eh-compare-card.ez-in li{opacity:1;transform:none}

/* Sample report: bars grow and the chart line draws when the dashboard is in view. */
.ez-motion .eh-dash .eh-track i{transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.ez-motion .eh-dash.ez-in .eh-track i{transform:none}
.ez-motion .eh-dash .ez-line{transition:stroke-dashoffset 1.6s ease .3s}
.ez-motion .eh-dash svg circle{opacity:0;transition:opacity .3s ease}
.ez-motion .eh-dash.ez-in svg circle{opacity:1}

/* How it works: the dashed line draws across, then each step's icon pops in. */
.ez-motion .eh-steps:before{transform:scaleX(0);transform-origin:left;transition:transform 1.2s ease .2s}
.ez-motion .eh-steps.ez-in:before{transform:none}
.ez-motion .eh-steps .eh-step-icon{transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.ez-motion .eh-steps li.ez-in .eh-step-icon{transform:none}

/* Category cards lift a little under the pointer. */
.et-home .eh-board,.et-home .eh-subject{transition:transform .2s ease,box-shadow .2s ease}
.et-home .eh-board:hover,.et-home .eh-subject:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(15,42,61,.35)}

/* Phone bar: after the first screen, "Find a Tutor" stays one tap away. */
.ez-sticky{display:none}
@media (max-width:760px){
    .ez-sticky{position:fixed;left:0;right:0;bottom:0;z-index:9990;display:flex;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);box-shadow:0 -8px 24px -12px rgba(15,42,61,.35);transform:translateY(110%);transition:transform .3s ease}
    .ez-sticky.is-on{transform:none}
    .ez-sticky a{display:flex;align-items:center;justify-content:center;height:50px;border-radius:12px;font-weight:700;font-size:16px;text-decoration:none}
    .ez-sticky .ez-sticky-go{flex:1;gap:10px;background:#c2540a;color:#fff}
    .ez-sticky .ez-sticky-wa,.ez-sticky .ez-sticky-chat{width:54px;flex:none;border:1.5px solid #cfe3e1;color:#087c78;font-size:24px;background:#fff;padding:0;cursor:pointer;border-radius:12px;height:50px;display:flex;align-items:center;justify-content:center}
    .ez-sticky .ez-sticky-chat[hidden]{display:none}
    body.ez-has-sticky{padding-bottom:72px}
}

@media (prefers-reduced-motion:reduce){
    .ez-sticky{transition:none}
    .et-home .eh-board,.et-home .eh-subject{transition:none}
}