/* ============================================================
   Animations — scroll reveals, keyframes, decorative motion
   ============================================================ */

/* Scroll reveal (paired with assets/js/reveal.js) */
.reveal {
  opacity: 0;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: opacity 800ms ease, -webkit-transform 800ms ease;
  transition: opacity 800ms ease, -webkit-transform 800ms ease;
  transition: opacity 800ms ease, transform 800ms ease;
  transition: opacity 800ms ease, transform 800ms ease, -webkit-transform 800ms ease;
}

.reveal.in {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}

/* Slow zoom on hero imagery */
.ken-burns {
  -webkit-animation: ken-burns 18s ease-in-out infinite alternate;
          animation: ken-burns 18s ease-in-out infinite alternate;
}

@-webkit-keyframes ken-burns {
  from { -webkit-transform: scale(1); transform: scale(1); }
  to   { -webkit-transform: scale(1.12); transform: scale(1.12); }
}

@keyframes ken-burns {
  from { -webkit-transform: scale(1); transform: scale(1); }
  to   { -webkit-transform: scale(1.12); transform: scale(1.12); }
}

/* Hero decorative animations */
.float-slow { -webkit-animation: float-slow 9s ease-in-out infinite; animation: float-slow 9s ease-in-out infinite; }

@-webkit-keyframes float-slow {
  0%, 100% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
  50%      { -webkit-transform: translateY(-14px) rotate(2deg); transform: translateY(-14px) rotate(2deg); }
}

@keyframes float-slow {
  0%, 100% { -webkit-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); }
  50%      { -webkit-transform: translateY(-14px) rotate(2deg); transform: translateY(-14px) rotate(2deg); }
}

.spin-slow { -webkit-animation: spin-slow 60s linear infinite; animation: spin-slow 60s linear infinite; -webkit-transform-origin: center; transform-origin: center; }

@-webkit-keyframes spin-slow {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes spin-slow {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* Self-drawing hero rule */
.draw-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  -webkit-animation: draw 2.4s ease-out 0.4s forwards;
          animation: draw 2.4s ease-out 0.4s forwards;
}

@-webkit-keyframes draw {
  to { stroke-dashoffset: 0; }
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* Scroll hint line at the bottom of the home hero */
.scroll-cue {
  width: 1px;
  height: 56px;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(oklch(1 0 0 / 0.6)), to(transparent));
  background: linear-gradient(to bottom, transparent, oklch(1 0 0 / 0.6), transparent);
  background-size: 100% 200%;
  -webkit-animation: scroll-cue 2.4s ease-in-out infinite;
          animation: scroll-cue 2.4s ease-in-out infinite;
}

@-webkit-keyframes scroll-cue {
  0%   { background-position: 0 -100%; }
  100% { background-position: 0 100%; }
}

@keyframes scroll-cue {
  0%   { background-position: 0 -100%; }
  100% { background-position: 0 100%; }
}

/* Slow drift for floating decorative SVGs */
.drift-x { -webkit-animation: drift-x 14s ease-in-out infinite; animation: drift-x 14s ease-in-out infinite; }

@-webkit-keyframes drift-x {
  0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); }
  50%      { -webkit-transform: translateX(20px); transform: translateX(20px); }
}

@keyframes drift-x {
  0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); }
  50%      { -webkit-transform: translateX(20px); transform: translateX(20px); }
}

/* Marquee ticker */
.marquee {
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  -webkit-animation: marquee 40s linear infinite;
          animation: marquee 40s linear infinite;
}

@-webkit-keyframes marquee {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

@keyframes marquee {
  from { -webkit-transform: translateX(0); transform: translateX(0); }
  to   { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}

/* Pulse ring (contact hero crosshair) */
.pulse-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--color-amber-timber);
  -webkit-animation: pulse-ring 2.4s var(--ease-gth) infinite;
          animation: pulse-ring 2.4s var(--ease-gth) infinite;
}

@-webkit-keyframes pulse-ring {
  0%   { -webkit-transform: scale(1); transform: scale(1); opacity: 0.7; }
  100% { -webkit-transform: scale(1.6); transform: scale(1.6); opacity: 0; }
}

@keyframes pulse-ring {
  0%   { -webkit-transform: scale(1); transform: scale(1); opacity: 0.7; }
  100% { -webkit-transform: scale(1.6); transform: scale(1.6); opacity: 0; }
}

/* Tree skyline grow-in (opacity only — SVG transform attr handles position/scale) */
.tree-grow {
  opacity: 0;
  -webkit-animation: tree-grow 1.6s var(--ease-gth) forwards;
          animation: tree-grow 1.6s var(--ease-gth) forwards;
}

@-webkit-keyframes tree-grow {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes tree-grow {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}