/* ============================================================
   Animations - keyframes and scroll-reveal helpers
   ============================================================ */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes zoomIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes ripple{to{transform:scale(4);opacity:0}}
@keyframes slowZoom{from{transform:scale(1)}to{transform:scale(1.12)}}
@keyframes scrollDot{0%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,12px)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes drift{from{transform:translateX(-20%)}to{transform:translateX(120%)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes blink{50%{border-color:transparent}}

.typed{animation:blink 1s step-end infinite}
.floaty{animation:floatY 6s ease-in-out infinite}
.animated-gradient{background-size:220% 220%;animation:gradientShift 12s ease infinite}

/* Scroll reveal - JS adds .in-view */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.8,.3,1),transform .8s cubic-bezier(.2,.8,.3,1);will-change:opacity,transform}
[data-reveal="left"]{transform:translateX(-36px)}
[data-reveal="right"]{transform:translateX(36px)}
[data-reveal="zoom"]{transform:scale(.93)}
[data-reveal].in-view{opacity:1;transform:none}

/* Clouds + fog decoration */
.clouds{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.cloud{position:absolute;background:rgba(255,255,255,.28);border-radius:50%;filter:blur(28px);animation:drift linear infinite}
.cloud:nth-child(1){width:320px;height:100px;top:18%;animation-duration:62s}
.cloud:nth-child(2){width:220px;height:70px;top:38%;animation-duration:88s;animation-delay:-20s;opacity:.6}
.cloud:nth-child(3){width:420px;height:120px;top:62%;animation-duration:110s;animation-delay:-50s;opacity:.4}
.fog{position:absolute;inset:auto 0 0;height:38%;pointer-events:none;z-index:-1;background:linear-gradient(transparent,rgba(255,255,255,.22));animation:floatY 9s ease-in-out infinite}
.bird{position:absolute;width:26px;height:26px;opacity:.7;animation:drift 42s linear infinite,floatY 5s ease-in-out infinite;z-index:-1}
.bird:nth-of-type(2){top:26%;animation-duration:56s,7s;animation-delay:-12s}

.hover-glow{transition:box-shadow .4s}
.hover-glow:hover{box-shadow:0 0 0 1px color-mix(in oklab,var(--gold) 45%,transparent),0 24px 60px -24px color-mix(in oklab,var(--gold) 60%,transparent)}

/* Image smooth reveal - JS adds .img-fx then .is-revealed */
img.img-fx{
  opacity:0;
  transform:scale(1.04);
  filter:blur(12px);
  clip-path:inset(0 0 12% 0);
  transition:opacity .9s cubic-bezier(.2,.8,.3,1),transform 1.1s cubic-bezier(.2,.8,.3,1),filter .9s cubic-bezier(.2,.8,.3,1),clip-path 1.1s cubic-bezier(.2,.8,.3,1);
  will-change:opacity,transform,filter,clip-path;
}
img.img-fx.is-revealed{opacity:1;transform:scale(1);filter:blur(0);clip-path:inset(0 0 0 0)}
.card:hover .card__media img.img-fx.is-revealed{transform:scale(1.09)}
.masonry figure:hover img.img-fx.is-revealed{transform:scale(1.08)}

@media (prefers-reduced-motion:reduce){
  img.img-fx{opacity:1;transform:none;filter:none;clip-path:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}