/* =========================================================
   TOFAHF — Motion & interaction layer
   Scroll reveals, hover zoom, Ken Burns, lightbox, parallax.
   Kept deliberately restrained: one effect per element, nothing stacked.
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-scale, .reveal-left, .reveal-right{ opacity:1 !important; transform:none !important; transition:none !important; }
  .kenburns img, .kenburns .kb-media{ animation:none !important; }
  .zoom-hover img{ transition:none !important; }
}

/* ---------- Scroll reveal ---------- */
/* Content is visible by default. These hidden/animated states only kick in
   once JS confirms it's actually running (html.has-js), so a slow script,
   a blocked script, or a JS error never leaves real content invisible. */
.has-js .reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

.has-js .reveal-scale{
  opacity: 0;
  transform: scale(.92);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.reveal-scale.is-visible{ opacity: 1; transform: scale(1); }

.has-js .reveal-left{ opacity:0; transform: translateX(-32px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal-left.is-visible{ opacity:1; transform: translateX(0); }

.has-js .reveal-right{ opacity:0; transform: translateX(32px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal-right.is-visible{ opacity:1; transform: translateX(0); }

/* stagger children of a revealed group */
.has-js .reveal-stagger > *{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.reveal-stagger.is-visible > *{ opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay: .04s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay: .12s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay: .20s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay: .28s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay: .36s; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay: .44s; }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay: .52s; }
.reveal-stagger.is-visible > *:nth-child(8){ transition-delay: .60s; }

/* ---------- Hover zoom (cards / photos) ---------- */
.zoom-hover{ overflow: hidden; border-radius: inherit; display:block; }
.zoom-hover img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .6s ease;
  transform: scale(1);
}
.zoom-hover:hover img{ transform: scale(1.09); }

/* card lift + zoom combo used on team & news cards */
.lift-zoom{ transition: transform .35s ease, box-shadow .35s ease; }
.lift-zoom:hover{ transform: translateY(-6px); box-shadow: 0 24px 50px -22px rgba(51,18,79,.4); }

/* ---------- Ken Burns (slow zoom + pan) ---------- */
.kenburns{ overflow:hidden; border-radius: inherit; position:relative; }
.kenburns img{
  display:block; width:100%; height:100%; object-fit:cover;
  animation: kenburns-move 18s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns-move{
  0%   { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.14) translate(-2%, -1.5%); }
}

/* ---------- Lightbox ---------- */
.lightbox-trigger{ cursor: zoom-in; }
.lightbox-overlay{
  position: fixed; inset:0; background: rgba(36,27,51,.92);
  display:flex; align-items:center; justify-content:center; padding: 5vh 4vw;
  opacity:0; visibility:hidden; transition: opacity .25s ease;
  z-index: 999; backdrop-filter: blur(4px);
}
.lightbox-overlay.open{ opacity:1; visibility:visible; }
.lightbox-overlay img{
  max-width: min(90vw, 900px); max-height: 86vh; border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.6);
  transform: scale(.92); transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.lightbox-overlay.open img{ transform: scale(1); }
.lightbox-caption{
  position:absolute; bottom: 4vh; left:0; right:0; text-align:center;
  color:#EFE6FB; font-family: var(--font-mono); font-size:.85rem; letter-spacing:.04em;
}
.lightbox-close{
  position:absolute; top: 22px; right: 28px; width:42px; height:42px; border-radius:50%;
  background: rgba(255,255,255,.12); border: none; color:#fff; font-size:1.4rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition: background .2s ease;
}
.lightbox-close:hover{ background: var(--gold); color: var(--plum); }

/* ---------- Parallax hero art ---------- */
.parallax-layer{ transition: transform .1s linear; will-change: transform; }

/* ---------- Sticky media (used to pin an image while text scrolls beside it) ---------- */
@media (min-width: 900px){
  .sticky-media{ position: sticky; top: 110px; align-self: start; }
}

/* ---------- Marquee (logos / focus-area strip) ---------- */
.marquee{ overflow:hidden; position:relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track{ display:flex; gap: 2.6rem; width:max-content; animation: marquee-scroll 26s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes marquee-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.marquee-item{ display:flex; align-items:center; gap:.6rem; color: var(--violet); font-family: var(--font-mono); font-size:.85rem; white-space:nowrap; opacity:.8; }
.marquee-item svg{ width:20px; height:20px; }

/* ---------- Profile modal (clickable team bios) ---------- */
.profile-trigger{ cursor: pointer; }
.profile-overlay{
  position: fixed; inset:0; background: rgba(36,27,51,.72);
  display:flex; align-items:center; justify-content:center; padding: 5vh 5vw;
  opacity:0; visibility:hidden; transition: opacity .25s ease;
  z-index: 999; backdrop-filter: blur(3px);
}
.profile-overlay.open{ opacity:1; visibility:visible; }
.profile-card{
  background:#fff; border-radius: var(--radius-lg); max-width: 620px; width:100%;
  padding: 2.2rem 2rem; text-align:center; position:relative;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.5);
  transform: scale(.92); transition: transform .3s cubic-bezier(.2,.7,.2,1);
  max-height: 86vh; overflow-y:auto;
}
.profile-overlay.open .profile-card{ transform: scale(1); }
.profile-card img{
  width:104px; height:104px; border-radius:50%; object-fit:cover; object-position:center center;
  margin: 0 auto 1rem; border:4px solid var(--lilac); box-shadow: var(--shadow-card);
}
.profile-card h3{ margin:0 0 .15rem; font-size:1.2rem; }
.profile-card .profile-role{ color: var(--violet); font-weight:700; font-size:.85rem; margin-bottom:1rem; display:block; line-height:1.5; }
.profile-card .profile-bio{ color: var(--ink-soft); font-size:.92rem; text-align:left; }
.profile-card .profile-bio p{ margin-bottom: .9rem; }
.profile-card .profile-bio p:last-child{ margin-bottom:0; }
.profile-close{
  position:absolute; top: 14px; right: 14px; width:36px; height:36px; border-radius:50%;
  background: var(--lilac); border: none; color: var(--plum); font-size:1.3rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition: background .2s ease;
}
.profile-close:hover{ background: var(--gold); }
.pop-in{ transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.pop-in:hover{ transform: scale(1.06) rotate(-1deg); }

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float{
  position: fixed; bottom: 22px; right: 22px; z-index: 300;
  width: 58px; height: 58px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,.45);
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover{ transform: scale(1.08); box-shadow: 0 16px 34px -8px rgba(0,0,0,.5); }
.whatsapp-float svg{ width:100%; height:100%; display:block; }
.whatsapp-float::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:#25D366; opacity:.55;
  animation: whatsapp-pulse 2.4s ease-out infinite;
  z-index:-1;
}
@keyframes whatsapp-pulse{
  0%{ transform: scale(1); opacity:.55; }
  70%{ transform: scale(1.6); opacity:0; }
  100%{ transform: scale(1.6); opacity:0; }
}
@media (max-width: 480px){
  .whatsapp-float{ width:52px; height:52px; bottom:16px; right:16px; }
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-float::before{ animation:none; }
}