/* =========================================================
   Vine & Fire — premium motion layer
   transform + opacity only; two easing curves.
   ========================================================= */

:root{
  --vf-ease-in:  cubic-bezier(.2,.6,.2,1);
  --vf-ease-out: cubic-bezier(.4,0,.2,1);
}

/* ---------- Reveal system ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:
    opacity 1100ms var(--vf-ease-in),
    transform 1100ms var(--vf-ease-in);
  transition-delay: calc(var(--i, 0) * 110ms);
  will-change: opacity, transform;
}
[data-reveal].in-view{
  opacity:1;
  transform:none;
}

/* keep gradient-clipped headlines transparent until in-view (avoids fill flash) */
.vf-title-line[data-reveal]{ transform:translateY(20px); }

/* ---------- Hero atmosphere ---------- */
@media (prefers-reduced-motion: no-preference){
  .vf-hero-photo img{
    animation: vfHeroDriftSoft 22s ease-in-out infinite alternate;
  }
  @keyframes vfHeroDriftSoft{
    from{ transform:scale(1.05) translate3d(0, 0, 0); }
    to  { transform:scale(1.10) translate3d(0, -1.4%, 0); }
  }
  .vf-hero-veil{
    animation: vfVeilBreathe 22s ease-in-out infinite alternate;
  }
  @keyframes vfVeilBreathe{
    from{ opacity:.94; }
    to  { opacity:1;   }
  }

  /* fireflies — slower, softer */
  .vf-hero-fireflies span,
  .vf-news-fireflies span{
    animation-duration: 9s;
    animation-timing-function: ease-in-out;
    box-shadow: 0 0 18px 5px rgba(255,210,120,.32);
  }

  /* scroll cue: gentle bob */
  .vf-hero-scroll{
    animation: vfBob 2.6s ease-in-out infinite;
  }
  @keyframes vfBob{
    0%,100%{ transform: translateY(0);   opacity:.7; }
    50%    { transform: translateY(5px); opacity:1;  }
  }
}

/* ---------- Decorative gold rules — draw in ---------- */
.vf-hero-rule span,
.vf-arc-divider span{
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1300ms var(--vf-ease-in) 200ms;
  will-change: transform;
}
.in-view > .vf-hero-rule span,
.in-view .vf-arc-divider span,
.in-view.vf-arc-divider span,
.in-view.vf-hero-rule span{
  transform: scaleX(1);
}

/* simpler hook: any rule inside an in-view ancestor draws */
.in-view .vf-hero-rule span,
.in-view .vf-arc-divider span{ transform: scaleX(1); }

/* ---------- Buttons — refined hover ---------- */
.vf-btn{
  transition:
    color 500ms var(--vf-ease-in),
    background 500ms var(--vf-ease-in),
    border-color 500ms var(--vf-ease-in),
    transform 350ms var(--vf-ease-out),
    box-shadow 500ms var(--vf-ease-out) !important;
}
.vf-btn::before{
  transition: transform 650ms var(--vf-ease-in) !important;
}
@media (hover:hover){
  .vf-btn:hover{
    transform: translateY(-1px);
  }
}

/* link arrows */
.vf-link{
  transition: color 350ms var(--vf-ease-out);
}
.vf-link span{
  display:inline-block;
  transition: transform 350ms var(--vf-ease-out);
}
@media (hover:hover){
  .vf-link:hover span{ transform: translateX(4px); }
}

/* ---------- Cards — quiet lift ---------- */
.vf-partner,
.vf-promise-card{
  transition:
    transform 600ms var(--vf-ease-in),
    box-shadow 600ms var(--vf-ease-in);
  will-change: transform;
}
@media (hover:hover){
  .vf-partner:hover,
  .vf-promise-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 22px 60px -28px rgba(8,20,13,.45);
  }
}

/* ---------- Form focus ---------- */
.vf-field input{
  transition:
    border-color 400ms var(--vf-ease-in),
    box-shadow 400ms var(--vf-ease-in) !important;
}
.vf-field input:focus{
  box-shadow: 0 1px 0 0 var(--vf-gold);
}

/* ---------- Arc list — sequential acts ---------- */
.vf-arc-list[data-reveal-list] li{
  opacity:0;
  transform: translateY(10px);
  transition:
    opacity 900ms var(--vf-ease-in),
    transform 900ms var(--vf-ease-in);
  transition-delay: calc(var(--i, 0) * 150ms);
}
.vf-arc-list[data-reveal-list].in-view li{
  opacity:1;
  transform:none;
}
.vf-arc-list[data-reveal-list] .vf-arc-time{
  display:inline-block;
  transform: translateX(-8px);
  opacity:.0;
  transition:
    opacity 900ms var(--vf-ease-in),
    transform 900ms var(--vf-ease-in);
  transition-delay: calc(var(--i, 0) * 150ms + 120ms);
}
.vf-arc-list[data-reveal-list].in-view .vf-arc-time{
  transform: none;
  opacity:1;
}

/* ---------- Accordion (FAQ) ---------- */
.vf-faq details > div{
  overflow:hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 520ms var(--vf-ease-in),
    opacity 320ms var(--vf-ease-in) 80ms,
    padding 520ms var(--vf-ease-in);
}
.vf-faq details[open] > div{
  max-height: var(--vf-faq-h, 1000px);
  opacity: 1;
}
.vf-faq summary{
  list-style: none;
  position: relative;
}
.vf-faq summary::-webkit-details-marker{ display:none; }
.vf-faq summary::after{
  content:"";
  position:absolute;
  right:0; top:50%;
  width:10px; height:10px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 380ms var(--vf-ease-in);
  opacity:.55;
}
.vf-faq details[open] summary::after{
  transform: translateY(-30%) rotate(-135deg);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .vf-hero-rule span,
  .vf-arc-divider span{ transform: scaleX(1) !important; }
  .vf-arc-list[data-reveal-list] li,
  .vf-arc-list[data-reveal-list] .vf-arc-time{ opacity:1 !important; transform:none !important; }
}