/*
 * The Guide to Pittsburgh Golf — Animations layer
 * ------------------------------------------------
 * Sits on top of styles.css. Adds entrance reveals, scroll-triggered
 * fade-ups, hover polish, ken-burns photo strip, animated nav underline
 * with a rolling gold ball, and a few golf-flavoured micro-flourishes.
 *
 * All motion respects prefers-reduced-motion via the block at the bottom.
 */

/* ─── Core easings + tokens ────────────────────────────── */
:root {
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-y: 18px;
  --reveal-dur: 0.7s;
}

/* ─── Initial hidden states ────────────────────────────── */
.reveal,
.reveal-stagger > * {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y), 0);
  transition:
    opacity var(--reveal-dur) var(--ease-out-soft),
    transform var(--reveal-dur) var(--ease-out-soft);
  will-change: opacity, transform;
}

/* Active state */
.reveal.is-in,
.reveal-stagger.is-in > * {
  opacity: 1;
  transform: none;
}

/* Stagger children — uses CSS index custom prop set in JS */
.reveal-stagger.is-in > * {
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* ─── Header: gentle drop-in on load ───────────────────── */
@keyframes header-drop {
  0%   { transform: translate3d(0, -100%, 0); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.site-header {
  animation: header-drop 0.7s var(--ease-out-snap) both;
}

.site-logo__img { transition: width 0.3s var(--ease-out-soft); }

/* ─── Hero entrance: stagger eyebrow → h1 → p → btns ───── */
.home-hero .eyebrow,
.home-hero h1,
.home-hero p,
.home-hero .hero-btns,
.page-banner .eyebrow,
.page-banner h1,
.page-banner p {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  animation: hero-in 0.85s var(--ease-out-snap) forwards;
}
.home-hero .eyebrow    { animation-delay: 0.18s; }
.home-hero h1          { animation-delay: 0.30s; }
.home-hero p           { animation-delay: 0.46s; }
.home-hero .hero-btns  { animation-delay: 0.60s; }
.page-banner .eyebrow  { animation-delay: 0.15s; }
.page-banner h1        { animation-delay: 0.26s; }
.page-banner p         { animation-delay: 0.40s; }

@keyframes hero-in {
  to { opacity: 1; transform: none; }
}

/* ─── Mark highlight: draws in left-to-right ───────────── */
.home-hero h1 mark,
.page-banner h1 mark {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  /* Use clip-path to "wipe" the highlight in */
  --hl-wipe: 0%;
  background: linear-gradient(0deg,
    transparent 20%,
    rgba(255,192,0,1) 20%,
    rgba(255,192,0,1) 84%,
    transparent 84%
  );
  background-size: 0% 100%;
  background-repeat: no-repeat;
  animation: mark-wipe 0.9s var(--ease-out-snap) forwards;
  animation-delay: 0.75s;
}
.page-banner h1 mark { animation-delay: 0.55s; }

@keyframes mark-wipe {
  0%   { background-size: 0%   100%; }
  100% { background-size: 100% 100%; }
}

/* Hero CTA buttons – subtle gold gleam sweep on hover */
.btn-gold {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,0.55) 50%,
    transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.6s var(--ease-out-snap);
  pointer-events: none;
  z-index: 0;
}
.btn-gold:hover::after { transform: translateX(110%); }
.btn-gold > * { position: relative; z-index: 1; }

/* Outline hero btn → fill from left on hover */
.btn-hero-outline,
.btn-outline {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
}
.btn-hero-outline::before,
.btn-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-dark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out-snap);
  z-index: -1;
}
.btn-hero-outline:hover::before,
.btn-outline:hover::before { transform: scaleX(1); }
/* The text color is already handled by existing :hover rules */

/* ─── Nav links: animated underline + rolling gold ball ── */
.nav-links li { position: relative; }
.nav-links a:not(.active) {
  position: relative;
  padding-block: 4px;
}
.nav-links a:not(.active)::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out-snap);
}
.nav-links a:not(.active):hover {
  text-decoration: none; /* override base */
}
.nav-links a:not(.active):hover::after { transform: scaleX(1); }

/* Tiny rolling ball that travels with hover */
.nav-links li > a:not(.active)::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    #fff 0%, var(--color-primary) 55%, #c8a800 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateX(-4px) scale(0.4);
  transition:
    opacity 0.2s ease,
    transform 0.55s var(--ease-out-snap);
}
.nav-links li > a:not(.active):hover::before {
  opacity: 1;
  /* roll to the right edge of the link text */
  transform: translateX(calc(100% + 2px)) scale(1) rotate(720deg);
}

/* The active mark inside nav already has highlight; just polish */
.nav-links mark {
  transition: transform 0.2s var(--ease-out-snap);
}
.nav-links li:hover mark { transform: translateY(-1px); }

/* ─── Section heads: rule grows in ─────────────────────── */
.section-head {
  position: relative;
  border-block-end: 0; /* we'll draw our own animated rule */
}
.section-head::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--color-dark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s var(--ease-out-snap);
}
.section-head.is-in::after { transform: scaleX(1); }
.section-head h2 {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 0.7s var(--ease-out-soft),
    transform 0.7s var(--ease-out-soft);
}
.section-head.is-in h2 { opacity: 1; transform: none; }
.section-head a {
  opacity: 0;
  transition: opacity 0.5s ease 0.2s, color 0.2s;
}
.section-head.is-in a { opacity: 1; }

/* ─── Post cards: scroll reveal + hover lift ───────────── */
.post-card {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.65s var(--ease-out-soft),
    transform 0.65s var(--ease-out-soft),
    background 0.18s ease,
    box-shadow 0.25s ease;
  transition-delay: calc(var(--i, 0) * 80ms);
  box-shadow: 0 1px 0 transparent;
}
.post-card.is-in { opacity: 1; transform: none; }

.post-card:hover {
  transform: translate3d(0, -4px, 0) !important;
  box-shadow: 0 14px 32px -12px rgba(24,22,23,0.28),
              0 2px 6px rgba(24,22,23,0.06);
}

/* Image zoom on hover */
.post-card .card-thumb-img {
  transition:
    transform 0.7s var(--ease-out-soft),
    filter 0.4s ease;
}
.post-card:hover .card-thumb-img {
  transform: scale(1.06);
  filter: brightness(0.78) contrast(1.08) saturate(0.95);
}

/* Read-more arrow nudges */
.read-more {
  display: inline-flex;
  align-items: baseline;
  transition: color 0.18s, gap 0.2s;
}
.read-more::after {
  content: '';
  display: inline-block;
  width: 0;
  overflow: hidden;
  transition: width 0.25s var(--ease-out-snap);
}
.post-card:hover .read-more { color: var(--color-primary); }

/* Card type pill — slide+fade in */
.post-card.is-in .card-type {
  animation: chip-in 0.45s var(--ease-out-snap) 0.25s both;
}
.post-card.is-in .card-rating {
  animation: chip-in 0.45s var(--ease-out-snap) 0.4s both;
}
@keyframes chip-in {
  0%   { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 1; transform: none; }
}

/* ─── Photo strip: slow ken-burns + caption rise ───────── */
/* Animate the actual element so we don't need to re-declare the inline
   background-image. We animate background-size and background-position
   instead of transform — that way the caption inside the element doesn't
   scale with the photo. */
@keyframes ken-burns-a {
  0%   { background-size: 110% auto; background-position: center 50%; }
  50%  { background-size: 118% auto; background-position: 48% 50%; }
  100% { background-size: 110% auto; background-position: center 50%; }
}
@keyframes ken-burns-b {
  0%   { background-size: 118% auto; background-position: center 40%; }
  50%  { background-size: 132% auto; background-position: 58% 48%; }
  100% { background-size: 118% auto; background-position: center 40%; }
}
@keyframes ken-burns-c {
  0%   { background-size: 116% auto; background-position: center 50%; }
  50%  { background-size: 130% auto; background-position: 45% 42%; }
  100% { background-size: 116% auto; background-position: center 50%; }
}

.photo-strip-img {
  background-size: cover;
  transition: filter 0.45s ease;
}
/* Ken-burns only on devices that can hover (desktops) — avoids jitter on mobile */
@media (hover: hover) {
  .photo-strip-img {
    background-size: 110% auto;
    animation: ken-burns-a 24s ease-in-out infinite alternate;
  }
  .photo-strip-img:nth-child(2) { animation-name: ken-burns-b; animation-duration: 28s; }
  .photo-strip-img:nth-child(3) { animation-name: ken-burns-c; animation-duration: 26s; }
  .photo-strip-img:hover {
    filter: brightness(0.95) contrast(1.05) saturate(1);
    animation-play-state: paused;
  }
}

/* Captions: rise on hover */
.strip-caption {
  transition:
    transform 0.4s var(--ease-out-snap),
    opacity 0.3s ease;
  transform: translateY(4px);
  opacity: 0.85;
}
.photo-strip-img:hover .strip-caption {
  transform: translateY(-2px);
  opacity: 1;
}
.photo-strip-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 55%,
    rgba(0,0,0,0.55) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.photo-strip-img:hover::after { opacity: 1; }

/* ─── Slogan strip: very slow drift ────────────────────── */
@keyframes slogan-drift {
  0%   { background-position: center 55%; }
  50%  { background-position: center 65%; }
  100% { background-position: center 55%; }
}
.slogan-strip {
  animation: slogan-drift 28s ease-in-out infinite alternate;
}
.slogan-strip p {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.9s var(--ease-out-soft), transform 0.9s var(--ease-out-soft);
}
.slogan-strip.is-in p { opacity: 1; transform: none; }

/* ─── Filter bar: smoother active state + hover fill ───── */
.filter-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
}
.filter-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-dark);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s var(--ease-out-snap);
  z-index: -1;
}
.filter-btn:hover::before,
.filter-btn.active::before { transform: scaleX(1); }
.filter-btn:hover,
.filter-btn.active { background: transparent; }

/* ─── Course table: row reveal + hover slide ───────────── */
.course-table tbody tr {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition:
    opacity 0.45s var(--ease-out-soft),
    transform 0.45s var(--ease-out-soft),
    background 0.18s;
  transition-delay: calc(var(--i, 0) * 24ms);
}
.course-table tbody tr.is-in { opacity: 1; transform: none; }

.reviewed-link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  transition: gap 0.2s var(--ease-out-snap);
}
.course-table tbody tr:hover .reviewed-link { gap: 8px; }

/* ─── Newsletter button: shimmer + flag flutter on success ─ */

.newsletter-btn { will-change: transform, box-shadow; }
.newsletter-success {
  animation: bounce-in 0.55s var(--ease-out-snap) both;
}
@keyframes bounce-in {
  0%   { opacity: 0; transform: scale(0.92) translateY(6px); }
  60%  { opacity: 1; transform: scale(1.02) translateY(0); }
  100% { transform: scale(1); }
}

/* ─── Sponsors: gentle reveal + lift on hover ──────────── */
.sponsor-slot {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 0.6s var(--ease-out-soft),
    transform 0.6s var(--ease-out-soft),
    background 0.2s,
    border-color 0.2s,
    color 0.2s,
    box-shadow 0.25s;
  transition-delay: calc(var(--i, 0) * 70ms);
}
.sponsor-slot.is-in { opacity: 1; transform: none; }
.sponsor-slot:hover {
  transform: translate3d(0, -3px, 0) !important;
  box-shadow: 0 10px 24px -10px rgba(24,22,23,0.25);
}

/* ─── CoTW badge: gentle bob + trophy wiggle ───────────── */
@keyframes cotw-bob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-2px); }
}
.cotw-badge { animation: cotw-shine 2.4s linear infinite, cotw-bob 3.4s ease-in-out infinite; }

@keyframes trophy-wiggle {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}
.cotw-trophy {
  display: inline-block;
  transform-origin: 50% 80%;
  animation: trophy-wiggle 2.2s ease-in-out infinite;
}

/* ─── Post article: hero image + body fade-in ──────────── */
.post-article > * { opacity: 0; transform: translate3d(0, 12px, 0); }
.post-article.is-in > * {
  animation: hero-in 0.7s var(--ease-out-soft) forwards;
}
.post-article.is-in > *:nth-child(1) { animation-delay: 0.05s; }
.post-article.is-in > *:nth-child(2) { animation-delay: 0.15s; }
.post-article.is-in > *:nth-child(3) { animation-delay: 0.25s; }
.post-article.is-in > *:nth-child(4) { animation-delay: 0.35s; }
.post-article.is-in > *:nth-child(5) { animation-delay: 0.45s; }
.post-article.is-in > *:nth-child(n+6) { animation-delay: 0.55s; }

.post-hero-img img {
  transition: transform 12s linear;
}
.post-article.is-in .post-hero-img img {
  transform: scale(1.05);
}

/* Meter gauges — animated stroke draw */
.meter-svg-wrap svg circle:nth-child(2) {
  transition: stroke-dashoffset 1.2s var(--ease-out-snap) 0.2s;
}

/* ─── Toast (already has transition, add tiny bounce) ──── */
.toast.show { animation: toast-in 0.4s var(--ease-out-snap) both; }
@keyframes toast-in {
  0%   { opacity: 0; transform: translateY(60px) scale(0.96); }
  70%  { opacity: 1; transform: translateY(-4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Modal: lift on open ──────────────────────────────── */
.modal-overlay.open .modal-box {
  animation: modal-pop 0.4s var(--ease-out-snap) both;
}
@keyframes modal-pop {
  0%   { opacity: 0; transform: translateY(20px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ─── Footer fade ──────────────────────────────────────── */
footer { opacity: 0.001; transition: opacity 0.6s var(--ease-out-soft); }
footer.is-in { opacity: 1; }

/* ─── Contact-page columns ─────────────────────────────── */
.contact-grid > * {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 0.7s var(--ease-out-soft),
    transform 0.7s var(--ease-out-soft);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.contact-grid.is-in > * { opacity: 1; transform: none; }

.info-row {
  transition: transform 0.2s var(--ease-out-snap);
}
.info-row:hover { transform: translateX(4px); }
.info-row:hover .info-icon { background: var(--color-primary); color: var(--color-dark); }
.info-icon { transition: background 0.2s, color 0.2s; }

/* ─── Type pills: scale on hover (table rows) ──────────── */
.type-pill {
  transition: transform 0.2s var(--ease-out-snap);
  display: inline-block;
}
.course-table tr:hover .type-pill { transform: scale(1.06); }

/* ─── Logo: subtle hover scale ─────────────────────────── */
.site-logo,
.footer-logo {
  transition: transform 0.3s var(--ease-out-snap);
  display: inline-block;
}
.site-logo:hover { transform: scale(1.02); }
.footer-logo:hover { transform: scale(1.02); }

/* ─── Buttons: shared press feedback ───────────────────── */
.btn { transition:
  background 0.18s ease,
  color 0.18s ease,
  border-color 0.18s ease,
  transform 0.18s var(--ease-out-snap),
  box-shadow 0.2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -6px rgba(0,0,0,0.25); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* ─── Page-banner: rule under h1 ──────────────────────── */
.page-banner {
  position: relative;
  overflow: hidden;
}
.page-banner::after {
  content: '';
  position: absolute;
  left: var(--gutter);
  bottom: -1px;
  height: 3px;
  width: 64px;
  background: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  animation: hero-rule 0.7s var(--ease-out-snap) 0.55s forwards;
}
@keyframes hero-rule {
  to { transform: scaleX(1); }
}

/* ─── Easter egg: golf ball rolling along the header gold border ─ */
.header-golf-ball {
  position: absolute;
  left: 0;
  bottom: 0;          /* sits ON the 3px gold border at the header's bottom edge */
  width: 11px; height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffffff 0%, #f4f3ef 55%, #b0afa9 100%);
  box-shadow:
    0 2px 3px rgba(0,0,0,0.45),
    inset -0.5px -0.5px 1px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  transform: translateX(-30px) rotate(0deg);
  will-change: transform, opacity;
}
.header-golf-ball.is-rolling {
  animation: header-ball-roll 6.5s cubic-bezier(0.55, 0.0, 0.5, 1) forwards;
}
@keyframes header-ball-roll {
  0%   { transform: translateX(-30px) rotate(0deg);         opacity: 0;    }
  8%   {                                                     opacity: 0.95; }
  92%  {                                                     opacity: 0.95; }
  100% { transform: translateX(calc(100vw + 30px)) rotate(2880deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .header-golf-ball { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal,
  .reveal-stagger > *,
  .home-hero .eyebrow,
  .home-hero h1,
  .home-hero p,
  .home-hero .hero-btns,
  .page-banner .eyebrow,
  .page-banner h1,
  .page-banner p,
  .post-card,
  .sponsor-slot,
  .course-table tbody tr,
  .section-head h2,
  .section-head a,
  .slogan-strip p,
  .contact-grid > *,
  .post-article > *,
  footer {
    opacity: 1 !important;
    transform: none !important;
  }
  .section-head::after,
  .page-banner::after { transform: scaleX(1) !important; }
  .home-hero h1 mark,
  .page-banner h1 mark { background-size: 100% 100% !important; }
}