/* ==========================================================================
   ANIMATION LAYER
   Loaded AFTER style.css so it can extend it.

   Principles:
   - Motion carries meaning: things enter from the direction they belong.
   - Choreography over chaos: children stagger in sequence, not all at once.
   - Everything below is disabled under prefers-reduced-motion (bottom of file).
   ========================================================================== */

:root{
  --ease-out : cubic-bezier(.2,.7,.3,1);   /* decisive arrival        */
  --ease-soft: cubic-bezier(.4,0,.2,1);    /* calm, for hovers        */
  --dur      : .75s;
}

/* ==========================================================================
   1. SCROLL REVEALS — directional
   .reveal already exists in style.css (fade + rise).
   These add direction, so an element enters from where it "lives".
   ========================================================================== */
.reveal-left,
.reveal-right,
.reveal-zoom,
.reveal-blur{
  opacity:0;
  will-change:opacity, transform;
  transition:opacity var(--dur) var(--ease-soft),
             transform var(--dur) var(--ease-out),
             filter var(--dur) var(--ease-soft);
}
.reveal-left  {transform:translateX(-42px)}
.reveal-right {transform:translateX(42px)}
.reveal-zoom  {transform:scale(.92)}
.reveal-blur  {filter:blur(10px); transform:translateY(20px)}

.reveal-left.in,
.reveal-right.in,
.reveal-zoom.in,
.reveal-blur.in{
  opacity:1;
  transform:none;
  filter:none;
}

/* ==========================================================================
   2. STAGGER — children arrive one after another, not in a clump.
   JS sets --i on each child; the delay is derived from it.
   ========================================================================== */
.stagger > *{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .6s var(--ease-soft), transform .6s var(--ease-out);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.stagger.in > *{opacity:1;transform:none}

/* the section heading block: sub -> title -> divider, in order */
.sec-head.in .sub     {animation:riseIn .55s var(--ease-out) both}
.sec-head.in h2       {animation:riseIn .55s var(--ease-out) .1s both}
.sec-head.in .divider {animation:growIn .5s var(--ease-out) .25s both}

@keyframes riseIn{
  from{opacity:0;transform:translateY(16px)}
  to  {opacity:1;transform:none}
}
@keyframes growIn{
  from{opacity:0;transform:scaleX(0)}
  to  {opacity:1;transform:scaleX(1)}
}

/* ==========================================================================
   3. HERO
   ========================================================================== */
.slide.active .slide-caption h2{animation:riseIn .8s var(--ease-out) .25s both}
.slide.active .slide-caption p {animation:riseIn .8s var(--ease-out) .40s both}
.slide.active .slide-caption .btn{animation:riseIn .8s var(--ease-out) .55s both}

/* ==========================================================================
   4. HIGHLIGHTS BAND — tiles arrive left to right, numbers count up (JS)
   ========================================================================== */
.ghat-cell{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s var(--ease-soft), transform .6s var(--ease-out),
             background .3s, box-shadow .3s;
  transition-delay:calc(var(--i, 0) * 110ms);
}
.ghat.in .ghat-cell{opacity:1;transform:none}
/* hover must still lift, and must not be delayed */
.ghat.in .ghat-cell:hover{transform:translateY(-4px);transition-delay:0s}

/* the icon gives a small nudge when its tile lands */
.ghat.in .ghat-cell i{
  animation:pop .5s var(--ease-out) both;
  animation-delay:calc(var(--i, 0) * 110ms + .15s);
}
@keyframes pop{
  0%  {opacity:0;transform:scale(.5)}
  60% {opacity:1;transform:scale(1.14)}
  100%{opacity:1;transform:scale(1)}
}

/* ==========================================================================
   5. CARDS — lift + the image drifts, already partly in style.css.
   Add a marigold sweep along the top edge on hover.
   ========================================================================== */
.card-f{position:relative}
.card-f::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--secondary),var(--primary));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease-out);
  z-index:3;
}
.card-f:hover::before{transform:scaleX(1)}

.card-f .ico i{transition:transform .45s var(--ease-out)}
.card-f:hover .ico i{transform:scale(1.12) rotate(-6deg)}

/* ==========================================================================
   6. BUTTONS — a light sheen crosses on hover
   ========================================================================== */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.32) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s var(--ease-soft);
  z-index:-1;
}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0) scale(.98)}

/* register button: a slow, calm pulse so it draws the eye without shouting */
.btn-register{animation:calmPulse 3.2s ease-in-out infinite}
@keyframes calmPulse{
  0%,100%{box-shadow:0 4px 14px rgba(217,149,24,.35)}
  50%    {box-shadow:0 4px 22px rgba(217,149,24,.6)}
}
.btn-register:hover{animation-play-state:paused}

/* ==========================================================================
   7. GALLERY — items arrive in a stagger; caption slides up on hover
   ========================================================================== */
.gallery-grid.in .g-item{
  animation:riseIn .6s var(--ease-out) both;
  animation-delay:calc(var(--i, 0) * 70ms);
}
.g-item span{
  transform:translateY(100%);
  transition:transform .4s var(--ease-out);
}
.g-item:hover span{transform:none}
/* on touch there is no hover, so keep captions visible */
@media (hover:none){
  .g-item span{transform:none}
}

/* ==========================================================================
   8. CONTACT TABLE — rows cascade in
   ========================================================================== */
.contact-table tbody tr{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s var(--ease-soft), transform .5s var(--ease-out),
             background .25s;
  transition-delay:calc(var(--i, 0) * 70ms);
}
.contact-table-wrap.in tbody tr{opacity:1;transform:none}

/* ==========================================================================
   9. NAV + FOOTER micro-interactions
   ========================================================================== */
.socials a{transition:transform .3s var(--ease-out), background .3s, color .3s}
.socials a:hover{transform:translateY(-4px) rotate(-6deg)}

.logo img{transition:transform .5s var(--ease-out)}
.logo:hover img{transform:rotate(8deg) scale(1.06)}

/* mobile menu items slide in when the menu opens */
@media (max-width:980px){
  .main-nav.open ul li{animation:slideInLeft .35s var(--ease-out) both}
  .main-nav.open ul li:nth-child(1){animation-delay:.04s}
  .main-nav.open ul li:nth-child(2){animation-delay:.08s}
  .main-nav.open ul li:nth-child(3){animation-delay:.12s}
  .main-nav.open ul li:nth-child(4){animation-delay:.16s}
  .main-nav.open ul li:nth-child(5){animation-delay:.20s}
  .main-nav.open ul li:nth-child(6){animation-delay:.24s}
  .main-nav.open .btn-register{animation:slideInLeft .35s var(--ease-out) .28s both}
}
@keyframes slideInLeft{
  from{opacity:0;transform:translateX(-22px)}
  to  {opacity:1;transform:none}
}

/* ==========================================================================
   10. SCROLL PROGRESS BAR — a thin marigold rule across the very top
   ========================================================================== */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--secondary),var(--primary));
  z-index:1000;
  transition:width .1s linear;
  pointer-events:none;
}

/* ==========================================================================
   11. BACK TO TOP — fades and scales rather than snapping
   ========================================================================== */
.back-top{
  display:flex;                 /* always in flow; visibility handled below */
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.85);
  transition:opacity .35s var(--ease-soft),
             transform .35s var(--ease-out),
             visibility .35s,
             background .25s;
}
.back-top.show{
  opacity:1;
  visibility:visible;
  transform:none;
}
.back-top:hover{transform:translateY(-4px)}

/* ==========================================================================
   12. PAGE BANNER
   ========================================================================== */
.page-banner h1{animation:riseIn .7s var(--ease-out) .1s both}
.page-banner p {animation:riseIn .7s var(--ease-out) .25s both}

/* ==========================================================================
   13. FORM FIELDS — label-free inputs lift slightly on focus
   ========================================================================== */
.contact-form input,
.contact-form textarea{
  transition:border-color .25s, box-shadow .25s, transform .25s var(--ease-out);
}
.contact-form input:focus,
.contact-form textarea:focus{transform:translateY(-2px)}

/* ==========================================================================
   REDUCED MOTION — switch the whole layer off.
   Content must still be VISIBLE, so we force the end-state rather than
   simply cancelling the animation (which would leave opacity:0).
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .reveal-left,.reveal-right,.reveal-zoom,.reveal-blur,
  .stagger > *,
  .ghat-cell,
  .contact-table tbody tr{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
  .sec-head .sub,.sec-head h2,.sec-head .divider,
  .slide-caption h2,.slide-caption p,.slide-caption .btn,
  .page-banner h1,.page-banner p,
  .gallery-grid .g-item,
  .ghat-cell i,
  .btn-register,
  .main-nav.open ul li,
  .main-nav.open .btn-register{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
  }
  .g-item span{transform:none!important}
  .btn::after{display:none}
  .scroll-progress{display:none}
  .back-top{transition:none}
}