/* Hover effects and animations, adopted from the Homepage project. Load after page CSS. */
:root{
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.2,.7,.3,1);
  --shadow-hover:0 20px 44px rgba(194,111,63,.28);
}

/* Buttons: lift, brightness and light sweep */
.btn{
  position:relative; overflow:hidden;
  transition:transform .3s var(--spring), box-shadow .3s var(--spring), filter .2s, background .2s, color .2s;
}
.btn:hover{transform:translateY(-2px) scale(1.03); box-shadow:var(--shadow-hover); filter:brightness(1.06);}
.btn:active{transform:translateY(0) scale(.99);}
.btn::after{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.btn:hover::after{left:130%;}

/* Logo with soft frame */
.nav a:has(> img){position:relative; display:inline-flex;}
.nav img{transition:transform .3s var(--spring);}
.nav img:hover{transform:translateY(-2px) scale(1.06);}
.nav a:has(> img)::before{
  content:""; position:absolute; inset:-8px -12px; border-radius:12px; border:1.5px solid var(--teal);
  opacity:0; transform:translateY(3px); pointer-events:none;
  transition:opacity .25s ease, transform .3s var(--spring);
}
.nav a:has(> img):hover::before{opacity:1; transform:translateY(0);}

/* Navigation and footer links: growing underline */
.nav-links a:not(.btn){position:relative; padding-bottom:3px; transition:color .2s;}
.nav-links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--orange); transition:right .3s var(--ease-out);
}
.nav-links a:not(.btn):hover::after{right:0;}
footer a{text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:color .2s, background-size .25s;}
footer a:hover{color:var(--orange-strong); background-size:100% 1px;}

/* Cards: lift and shadow */
.aud,.offer,.quote,.pillar,.box,.steps div,.gets div,.finder,.top-left-corner{
  transition:transform .3s var(--spring), box-shadow .3s var(--spring), border-color .3s;
}
.aud:hover,.offer:hover,.quote:hover,.steps div:hover,.gets div:hover{
  transform:translateY(-5px) scale(1.02); box-shadow:var(--shadow-hover);
}
.pillar:hover{transform:translateY(-4px); background:rgba(255,255,255,.1); border-color:var(--teal-pop);}
.box:hover{border-color:var(--c,var(--teal)); box-shadow:var(--shadow);}
.aud .more{display:inline-block; transition:transform .3s var(--spring);}
.aud:hover .more{transform:translateX(4px);}
.chip{transition:transform .2s var(--spring), background .2s, border-color .2s, color .2s;}
.chip:hover{transform:translateY(-2px); border-color:var(--teal);}
.tools span{transition:transform .25s var(--spring), border-color .2s;}
.tools span:hover{transform:translateY(-2px); border-color:var(--teal);}
summary{transition:color .2s;}
details{transition:box-shadow .3s, border-color .3s;}
details:hover,details[open]{border-color:var(--teal); box-shadow:var(--shadow);}
summary:hover{color:var(--teal);}

/* Photos: soft zoom */
.hero-photo img,.portrait img{transition:transform .5s var(--ease-out);}
.hero-photo img:hover,.portrait img:hover{transform:scale(1.03);}

/* Headline entrance and scroll reveal (classes are added by js/reveal.js) */
@keyframes slam-in{0%{transform:scale(2) translateY(-100px); opacity:0;} 100%{transform:scale(1) translateY(0); opacity:1;}}
.hero h1{animation:slam-in .8s cubic-bezier(.2,.8,.2,1) both;}
.reveal,.reveal-group>*{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);}
.reveal.is-visible,.reveal-group.is-visible>*{opacity:1; transform:translateY(0);}
.reveal-group.is-visible>*:nth-child(2){transition-delay:.08s;}
.reveal-group.is-visible>*:nth-child(3){transition-delay:.16s;}
.reveal-group.is-visible>*:nth-child(4){transition-delay:.24s;}
.reveal-group.is-visible>*:nth-child(5){transition-delay:.32s;}

@media (hover:none){
  .aud:hover,.offer:hover,.quote:hover,.steps div:hover,.gets div:hover,.pillar:hover{transform:none;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important;}
  .btn::after{display:none;}
}