/* Scroll reveal: sections and cards grow in as they enter the screen */
.reveal{opacity:0;transform:translateY(34px) scale(.94);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
/* Cards lift on hover */
.card{transition:transform .35s ease,box-shadow .35s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(200,22,29,.14)}
/* Hero: particle canvas behind content, parallax layer */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.hero-fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.hero-title{background:linear-gradient(90deg,var(--red),#e8582f,var(--red));background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 6s linear infinite}
@keyframes shimmer{to{background-position:200% center}}
.parallax-slow{will-change:transform}
/* Pulsing heart on the logo */
.site-logo img{transition:transform .4s ease}
.site-logo:hover img{transform:scale(1.06) rotate(-2deg)}
@keyframes heartbeat{0%,100%{transform:scale(1)}15%{transform:scale(1.07)}30%{transform:scale(1)}45%{transform:scale(1.05)}}
.hero .site-logo img,.site-logo.pulse img{animation:heartbeat 2.4s ease-in-out infinite}
/* Buttons: soft glow on hover */
.btn{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(200,22,29,.25)}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-title,.hero .site-logo img,.site-logo.pulse img{animation:none}
  .card:hover,.btn:hover{transform:none}
  .hero-fx{display:none}
}