/* EXTRAS: animations and finishing touches.
   To turn all of this off, delete the two lines marked "EXTRAS" in index.html. */

/* Hero: slow cinematic zoom on the photo, headline rises in on load */
.hero__img { animation: heroZoom 18s ease-out both; transform-origin: center 30%; }
@keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero__text > * { animation: riseIn 1s cubic-bezier(.2,.7,.2,1) both; }
.hero__text > :nth-child(1) { animation-delay: .2s; }
.hero__text > :nth-child(2) { animation-delay: .45s; }
.hero__text > :nth-child(3) { animation-delay: .65s; }
.hero__text > :nth-child(4) { animation-delay: .85s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Scroll reveal: sections and photos ease in as you scroll */
.js-reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js-reveal.is-in { opacity: 1; transform: none; }

/* Livestream: softly glowing badge */
.live__badge { animation: badgeGlow 4s ease-in-out infinite, badgeFloat 6s ease-in-out infinite; }
@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(212,168,75,.15); }
  50% { box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 110px rgba(240,213,142,.4); }
}
@keyframes badgeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Portfolio: soft gold frame on hover */
.gallery figure { transition: box-shadow .4s, transform .4s; }
.gallery figure:hover { box-shadow: 0 0 0 3px #e4c592, 0 18px 40px rgba(43,36,29,.25); transform: translateY(-3px); }

/* Services: warm underline sweep on hover */
.service-list a { position: relative; }
.service-list a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 16px; height: 1px; background: #b8914a;
  transition: left .35s, right .35s;
}
.service-list a:hover::after { left: 22%; right: 22%; }

/* Anyone who prefers less motion gets a calm page */
@media (prefers-reduced-motion: reduce) {
  .hero__img, .hero__text > *, .live__badge { animation: none !important; }
  .js-reveal { opacity: 1; transform: none; transition: none; }
}