/* Frederick City Church — shared motion system */

/* Give the hero background a little extra height so the JS scroll-parallax
   below never exposes an edge (the .hero itself clips via overflow:hidden). */
.hero-bg{top:-4%; bottom:auto; height:108%;}

@media (prefers-reduced-motion: no-preference) {

  /* ---- Scroll reveal ---- */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .8s cubic-bezier(.16,.7,.3,1), transform .8s cubic-bezier(.16,.7,.3,1);
    transition-delay:var(--reveal-delay, 0s);
    will-change:opacity, transform;
  }
  .reveal.is-visible{
    opacity:1;
    transform:translateY(0);
  }

  /* Stagger helper: children of .reveal-group get incremental delay via nth-child */
  .reveal-group > *{ transition-delay:calc(var(--reveal-i, 0) * 90ms); }

  /* ---- Hero entrance (index.html) ---- */
  .hero-onload{opacity:0; animation:heroRise .9s cubic-bezier(.16,.7,.3,1) forwards; animation-delay:var(--hero-delay, 0s);}
  @keyframes heroRise{
    from{opacity:0; transform:translateY(22px);}
    to{opacity:1; transform:translateY(0);}
  }

  /* Ken Burns slow zoom on hero photo */
  .kenburns{animation:kenburns 22s ease-out forwards;}
  @keyframes kenburns{
    from{transform:scale(1);}
    to{transform:scale(1.08);}
  }

  /* One-shot gold shimmer sweep across hero headline */
  .shimmer-once{position:relative; overflow:hidden;}
  .shimmer-once::after{
    content:"";
    position:absolute; top:0; left:-150%; width:60%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
    animation:shimmerSweep 1.6s ease-out 1;
    animation-delay:1.1s;
    pointer-events:none;
  }
  @keyframes shimmerSweep{
    to{left:150%;}
  }

  /* ---- Nav scroll state (index.html — transparent header over hero) ---- */
  header.site.scrolled{
    background:rgba(13,15,36,0.92);
    backdrop-filter:blur(10px);
    box-shadow:0 4px 24px rgba(0,0,0,0.25);
  }
  header.site{transition:background .35s ease, box-shadow .35s ease;}

  /* ---- Hover micro-interactions ---- */
  .watch-card, .ccard, .vcard, .find-card, .way, .min-card{
    transition:transform .35s cubic-bezier(.16,.7,.3,1), box-shadow .35s ease;
  }
  .watch-card:hover, .find-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 40px -18px rgba(0,0,0,0.55);
  }
  .ccard:hover, .vcard:hover{
    transform:translateY(-3px);
  }

  nav.links a{position:relative;}
  nav.links a::after{
    content:"";
    position:absolute; left:0; bottom:-4px; width:0; height:1.5px;
    background:var(--gold);
    transition:width .3s cubic-bezier(.16,.7,.3,1);
  }
  nav.links a:hover::after{width:100%;}

  .btn-gold, .btn-outline{
    transition:transform .25s cubic-bezier(.16,.7,.3,1), background .25s ease, box-shadow .25s ease;
  }
  .btn-gold:hover{transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(242,185,59,0.55);}
  .btn-outline:hover{transform:translateY(-2px);}

  /* Timeline / rank-list draw-in border */
  .t-item, .rank{
    border-left-width:0;
    position:relative;
  }
  .t-item::before, .rank::before{
    content:"";
    position:absolute; left:0; top:0; bottom:0; width:2px;
    background:var(--gold);
    transform:scaleY(0);
    transform-origin:top;
    transition:transform .6s cubic-bezier(.16,.7,.3,1);
    transition-delay:var(--reveal-delay, 0s);
  }
  .t-item{padding-left:18px;}
  .rank{padding-left:18px;}
  .t-item.is-visible::before, .rank.is-visible::before{transform:scaleY(1);}
}

/* Reduced motion: everything just visible, no animation, no shimmer artifact */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none;}
  .shimmer-once::after{display:none;}
}