/* === animation.css — site-13 options academy === */
.anim-up{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}
.anim-up.is-visible{opacity:1;transform:translateY(0)}
.anim-up--d1{transition-delay:.1s}
.anim-up--d2{transition-delay:.2s}
.anim-up--d3{transition-delay:.3s}
.anim-up--d4{transition-delay:.4s}
.anim-fade{opacity:0;transition:opacity .6s ease}
.anim-fade.is-visible{opacity:1}
.anim-scale{opacity:0;transform:scale(.95);transition:opacity .4s ease,transform .4s ease}
.anim-scale.is-visible{opacity:1;transform:scale(1)}
.anim-left{opacity:0;transform:translateX(-24px);transition:opacity .5s ease,transform .5s ease}
.anim-left.is-visible{opacity:1;transform:translateX(0)}
.anim-right{opacity:0;transform:translateX(24px);transition:opacity .5s ease,transform .5s ease}
.anim-right.is-visible{opacity:1;transform:translateX(0)}

/* Payoff curve draw */
.payoff-path{stroke-dasharray:800;stroke-dashoffset:800;animation:drawCurve 1.2s ease forwards .3s}
@keyframes drawCurve{to{stroke-dashoffset:0}}
.payoff-fill{opacity:0;animation:fadeFill .6s ease forwards 1s}
@keyframes fadeFill{to{opacity:1}}
.payoff-grid-line{opacity:0;animation:fadeIn .3s ease forwards}
@keyframes fadeIn{to{opacity:1}}

/* Greek meter animation */
.greek-card__meter-fill{width:0}
.is-visible .greek-card__meter-fill{animation:fillMeter .8s ease forwards}
@keyframes fillMeter{to{width:var(--fill)}}

/* Hero diagram pulse */
.hero-diagram{position:relative}
.hero-diagram::before{content:'';position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--primary-glow),rgba(197,165,90,.15));opacity:0;transition:opacity .3s}
.hero-diagram:hover::before{opacity:1}

/* Card hover glow */
.curriculum-card::after{content:'';position:absolute;inset:-1px;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--primary-glow),rgba(197,165,90,.1));opacity:0;transition:opacity .3s;z-index:-1}
.curriculum-card{position:relative}

/* Staggered children animation */
.stagger>*{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
.stagger.is-visible>*:nth-child(1){opacity:1;transform:translateY(0);transition-delay:.05s}
.stagger.is-visible>*:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.1s}
.stagger.is-visible>*:nth-child(3){opacity:1;transform:translateY(0);transition-delay:.15s}
.stagger.is-visible>*:nth-child(4){opacity:1;transform:translateY(0);transition-delay:.2s}
.stagger.is-visible>*:nth-child(5){opacity:1;transform:translateY(0);transition-delay:.25s}
.stagger.is-visible>*:nth-child(6){opacity:1;transform:translateY(0);transition-delay:.3s}

/* Smooth tab underline */
.diff-tab{position:relative;overflow:hidden}
.diff-tab::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--primary);transform:scaleX(0);transition:transform .25s ease}
.diff-tab:hover::after{transform:scaleX(1)}
.diff-tab.is-active::after{transform:scaleX(1)}

/* Tooltip entrance */
.payoff__tooltip{transition:opacity .15s,transform .15s}
.payoff__tooltip.is-visible{opacity:1;transform:translateY(-8px)}