/* ===== Curious Over 60 — motion & icons ===== */

/* scroll reveal — soft rise, like turning a page */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s ease}
.reveal.visible{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}

/* cards: gentle lift + icon comes alive */
a.card, .card.soon{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
a.card:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(60,50,30,.10);border-color:var(--sage)}
a.card:hover .icon{transform:scale(1.08) rotate(-2deg)}
.card .icon{transition:transform .4s ease}

/* guide icon style */
.icon{width:46px;height:46px;flex:0 0 46px}
.icon svg{width:100%;height:100%;display:block}
.card-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:6px}
.card-head .badge{align-self:center}

/* draw-on effect for line icons when card becomes visible */
.icon .draw{stroke-dasharray:300;stroke-dashoffset:300}
.visible .icon .draw, a.card:hover .icon .draw{animation:draw 1.6s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* hero: slow warm light drift behind the headline */
.hero{position:relative;overflow:hidden}
.hero:before{
  content:"";position:absolute;inset:-40%;pointer-events:none;
  background:radial-gradient(ellipse 45% 40% at 70% 30%,rgba(201,162,39,.10),transparent 70%),
             radial-gradient(ellipse 40% 45% at 20% 80%,rgba(93,122,99,.10),transparent 70%);
  animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:translateX(-3%) translateY(-2%)}
  to{transform:translateX(3%) translateY(2%)}
}
.hero .wrap{position:relative}

/* hero headline: gentle fade-in on load */
.hero h1, .hero p, .hero .btn{animation:heroIn 1.1s ease both}
.hero p{animation-delay:.25s}
.hero .btn{animation-delay:.5s}
.hero .btn.secondary{animation-delay:.65s}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* buttons breathe a little on hover */
.btn{transition:transform .3s ease,background .3s ease,color .3s ease}
.btn:hover{transform:translateY(-2px)}

/* Winston's portrait: soft shadow + barely-there float on hover */
.winston-portrait{transition:transform .5s ease,box-shadow .5s ease}
.winston-portrait:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(60,50,30,.16)}

/* teacup steam (Winston section) */
.teacup{width:74px;height:74px;margin:0 0 14px}
.steam{opacity:0;animation:steam 3.4s ease-in-out infinite}
.steam.s2{animation-delay:1.1s}
.steam.s3{animation-delay:2.2s}
@keyframes steam{
  0%{opacity:0;transform:translateY(4px)}
  30%{opacity:.75}
  100%{opacity:0;transform:translateY(-10px)}
}

/* Kristine's footsteps — a walk in progress */
.footsteps{width:96px;height:60px;margin:0 0 14px}
.foot{opacity:0;animation:footstep 3s ease-in-out infinite}
.foot.f2{animation-delay:1s}
.foot.f3{animation-delay:2s}
@keyframes footstep{
  0%{opacity:0;transform:translateY(3px)}
  25%{opacity:.9;transform:translateY(0)}
  70%{opacity:.9}
  100%{opacity:0}
}

/* promise checkmarks pop in */
ul.promise li{opacity:0;transform:translateX(-14px);transition:opacity .6s ease,transform .6s ease}
ul.promise.visible li{opacity:1;transform:none}
ul.promise.visible li:nth-child(1){transition-delay:.05s}
ul.promise.visible li:nth-child(2){transition-delay:.15s}
ul.promise.visible li:nth-child(3){transition-delay:.25s}
ul.promise.visible li:nth-child(4){transition-delay:.35s}
ul.promise.visible li:nth-child(5){transition-delay:.45s}
ul.promise.visible li:nth-child(6){transition-delay:.55s}

/* guide steps: number circles settle in */
.step .num{transition:transform .3s ease}
.step:hover .num{transform:scale(1.1)}

/* print / PDF: everything visible, no animation */
@media print{
  *, *:before, *:after{animation:none !important;transition:none !important}
  .reveal, ul.promise li{opacity:1 !important;transform:none !important}
  .icon .draw{stroke-dashoffset:0 !important}
  .hero:before{display:none}
}

/* reduced motion: everything calm, instantly */
@media (prefers-reduced-motion: reduce){
  *, *:before, *:after{animation:none !important;transition:none !important}
  .reveal, ul.promise li{opacity:1 !important;transform:none !important}
  .icon .draw{stroke-dashoffset:0 !important}
}