/* ============ ENTRANCE ANIMATIONS ============ */

@media all{

  /* Hero entrance */
  .site-header{
    animation: fadeDown .8s ease both;
  }
  .hero-copy > *{
    opacity: 0;
    animation: fadeUp .9s cubic-bezier(.2,.6,.2,1) forwards;
  }
  .hero-eyebrow{ animation-delay: .15s }
  .hero-title  { animation-delay: .3s  }
  .hero-sub    { animation-delay: .5s  }
  .hero-ctas   { animation-delay: .7s  }

  /* Hero background slow zoom */
  .hero-bg{
    animation: heroZoom 14s ease-out forwards;
  }

  /* Reveal-on-scroll: applied via JS by adding .is-in */
  .reveal{
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1);
    will-change: opacity, transform;
  }
  .reveal.is-in{
    opacity: 1;
    transform: none;
  }
  /* Stagger children */
  .reveal-stagger > *{
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1);
  }
  .reveal-stagger.is-in > *{
    opacity: 1;
    transform: none;
  }
  .reveal-stagger.is-in > *:nth-child(1){ transition-delay: .05s }
  .reveal-stagger.is-in > *:nth-child(2){ transition-delay: .15s }
  .reveal-stagger.is-in > *:nth-child(3){ transition-delay: .25s }
  .reveal-stagger.is-in > *:nth-child(4){ transition-delay: .35s }
  .reveal-stagger.is-in > *:nth-child(5){ transition-delay: .45s }
  .reveal-stagger.is-in > *:nth-child(6){ transition-delay: .55s }
  .reveal-stagger.is-in > *:nth-child(7){ transition-delay: .65s }
  .reveal-stagger.is-in > *:nth-child(8){ transition-delay: .75s }

  /* Hover polish — work cards */
  .work-card{
    transition: transform .35s cubic-bezier(.2,.6,.2,1);
  }
  .work-card .work-img{
    transition: transform .8s cubic-bezier(.2,.6,.2,1);
  }
  .work-card:hover{
    transform: translateY(-4px);
  }
  .work-card:hover .work-img{
    transform: scale(1.06);
  }

  /* Reason / voice cards lift */
  .reason-card, .voice-card{
    transition: transform .3s ease;
  }
  .reason-card:hover, .voice-card:hover{
    transform: translateY(-3px);
  }

  /* Buttons — slight pop */
  .btn, .btn-contact, .btn-submit, .link-btn{
    transition: transform .15s ease, background .15s ease, color .15s ease;
  }
  .btn:hover, .btn-contact:hover, .btn-submit:hover{
    transform: translateY(-2px);
  }

  /* Arrow micro-interaction */
  .arr{
    display: inline-block;
    transition: transform .25s ease;
  }
  a:hover .arr, button:hover .arr{
    transform: translateX(4px);
  }

  /* IG cards */
  .ig-cell{
    overflow: hidden;
    transition: transform .3s ease;
  }
  .ig-cell > *{
    transition: transform .8s cubic-bezier(.2,.6,.2,1);
  }
  .ig-cell:hover > *{
    transform: scale(1.07);
  }

  /* FAQ open animation */
  details.faq-q[open] > .faq-a{
    animation: fadeUp .35s ease both;
  }

  /* Hamburger / drawer items stagger when opening */
  .mobile-drawer.is-open .md-nav-item{
    animation: slideInRight .5s cubic-bezier(.2,.6,.2,1) both;
  }
  .mobile-drawer.is-open .md-nav-item:nth-child(1){ animation-delay: .08s }
  .mobile-drawer.is-open .md-nav-item:nth-child(2){ animation-delay: .14s }
  .mobile-drawer.is-open .md-nav-item:nth-child(3){ animation-delay: .20s }
  .mobile-drawer.is-open .md-nav-item:nth-child(4){ animation-delay: .26s }
  .mobile-drawer.is-open .md-nav-item:nth-child(5){ animation-delay: .32s }
  .mobile-drawer.is-open .md-nav-item:nth-child(6){ animation-delay: .38s }
  .mobile-drawer.is-open .md-nav-item:nth-child(7){ animation-delay: .44s }
  .mobile-drawer.is-open .md-cta{
    animation: fadeUp .6s ease .5s both;
  }

  /* Timeline pin pulse on current */
  .ch-timeline > li.is-current::before{
    animation: pulse 2.4s ease-in-out infinite;
  }

  /* Counter / number reveal */
  .count-up{
    display: inline-block;
    font-variant-numeric: tabular-nums;
  }

  /* Character-by-character title split */
  .split-char{
    display: inline-block;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
  }
  .split-char.is-in{ opacity: 1; transform: none }

  /* Image clip-reveal */
  .clip-reveal{
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.1s cubic-bezier(.7,0,.2,1);
    will-change: clip-path;
  }
  .clip-reveal.is-in{ clip-path: inset(0 0 0 0) }

  /* Underline draw on section eyebrow */
  .eyebrow{ position: relative; padding-bottom: 4px }
  .eyebrow::after{
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    height: 1px;
    width: 0;
    background: currentColor;
    opacity: .55;
    transition: width 1s cubic-bezier(.2,.7,.2,1) .15s;
  }
  .eyebrow.is-in::after{ width: 28px }

  /* News item slide on hover */
  .na-item, .news-item{
    transition: background .2s ease, padding .25s ease;
  }
  .na-item:hover{ background: rgba(143,91,56,.04); padding-left: 6px }

  /* Filter chip press */
  .chip, .filter-chip{
    transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  }
  .chip:active, .filter-chip:active{ transform: scale(.96) }

  /* Form field focus glow */
  .field input:focus, .field textarea:focus, .select-wrap select:focus{
    border-color: var(--accent, #8f5b38);
  }

  /* Radio/check pill press */
  .radio-pill span, .check-pill span{
    transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  }
  .radio-pill:active span, .check-pill:active span{ transform: scale(.97) }

  /* Hero CTA glow on idle (subtle pull-attention) */
  .hero-ctas .btn:first-child::after{
    content: '';
    position: absolute;
    inset: -2px;
    border: 1px solid currentColor;
    opacity: 0;
    pointer-events: none;
    animation: ctaRing 3.6s ease-in-out 2.5s infinite;
  }
  .hero-ctas .btn:first-child{ position: relative; overflow: visible }
  @keyframes ctaRing{
    0%,100%{ opacity: 0; transform: scale(1) }
    25%   { opacity: .35; transform: scale(1.02) }
    50%   { opacity: 0; transform: scale(1.05) }
  }

  /* Page transition fade-in */
  body{ animation: pageFade .5s ease both }
}

/* Smooth scroll for anchor links */
html{ scroll-behavior: smooth }

/* Scroll progress bar (top of page) */
.scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent, #8f5b38);
  z-index: 300;
  transition: width .1s linear;
  pointer-events: none;
}

/* Back-to-top button */
.to-top{
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent, #8f5b38);
  color: #fff;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, background .15s ease;
  z-index: 150;
}
.to-top.is-visible{ opacity: 1; transform: none }
.to-top:hover{ background: var(--accent-dk, #4a3520) }

/* Keyframes */
@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(22px) }
  to  { opacity: 1; transform: none }
}
@keyframes fadeDown{
  from{ opacity: 0; transform: translateY(-12px) }
  to  { opacity: 1; transform: none }
}
@keyframes heroZoom{
  from{ transform: scale(1.08) }
  to  { transform: scale(1) }
}
@keyframes slideInRight{
  from{ opacity: 0; transform: translateX(28px) }
  to  { opacity: 1; transform: none }
}
@keyframes pulse{
  0%,100%{ opacity: 1; transform: scale(1) }
  50%   { opacity: .5; transform: scale(1.4) }
}
@keyframes pageFade{
  from{ opacity: 0 }
  to  { opacity: 1 }
}