/* ================================================================
   GK Studio — Site-wide Animation System
   Hover zoom + scroll reveal (layered on top of SQS animations)
   ================================================================ */

/* ── Smooth global image transitions ─────────────────────────────
   Applied as a base; hover rules override transform             */
img {
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* ── Gallery grid: zoom image inside clipped wrapper ────────────*/
.gallery-grid-item { overflow: hidden; }
.gallery-grid-item:hover .gallery-grid-item-wrapper img {
  transform: scale(1.07) !important;
}

/* ── SQS image blocks ───────────────────────────────────────────*/
.sqs-block-image,
.image-block-outer-wrapper,
.intrinsic,
[data-animation-role="image"] > * {
  overflow: hidden;
}
.sqs-block-image:hover img,
.image-block-outer-wrapper:hover img { transform: scale(1.05) !important; }

/* ── Bento image cells (Checkit campaign) ───────────────────────*/
.gk-bento-img1,
.gk-bento-img2,
.gk-bento-img3,
.gk-bento-img4,
.gk-bento-img5,
.gk-bento-img6 { overflow: hidden; }

.gk-bento-img1:hover img,
.gk-bento-img2:hover img,
.gk-bento-img3:hover img,
.gk-bento-img4:hover img,
.gk-bento-img5:hover img,
.gk-bento-img6:hover img {
  transform: scale(1.07);
}

/* ── Bento stat card: subtle lift on hover ──────────────────────*/
.gk-bento-stat {
  transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.42s ease !important;
}
.gk-bento-stat:hover {
  transform: scale(1.025);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

/* ── Bento text/video cells: very subtle lift ───────────────────*/
.gk-bento-text,
.gk-bento-video {
  transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gk-bento-text:hover { transform: scale(1.008); }
.gk-bento-video:hover { transform: scale(1.015); }

/* ── Hawaiian Tropic bento cells (campaignwork page) ────────────*/
.gk-ht-cell { overflow: hidden; }
.gk-ht-cell:hover img { transform: scale(1.06) !important; }

/* ── Nav links: subtle underline slide ─────────────────────────*/
.header-nav-item a,
.header-nav-folder-title {
  position: relative;
}
.header-nav-item a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: currentColor;
  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.header-nav-item a:hover::after { width: 100%; }

/* ── SQS video block hover ──────────────────────────────────────*/
.sqs-block-video .intrinsic {
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}
.sqs-block-video:hover .intrinsic { transform: scale(1.02); }

/* ================================================================
   SCROLL REVEAL
   Elements tagged by gk-animations.js get these classes.
   SQS-animated elements (preFade, preScale) are skipped by JS.
   ================================================================ */

[data-gk-anim] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.72s ease,
              transform 0.72s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: 0s;
}

/* Scale variant: images and cards also scale in */
[data-gk-anim="scale"] {
  transform: translateY(22px) scale(0.96);
}

/* Revealed state */
[data-gk-anim].gk-anim-in {
  opacity: 1;
  transform: none;
}

/* Stagger delays */
[data-gk-anim][data-gk-d="1"] { transition-delay: 0.08s; }
[data-gk-anim][data-gk-d="2"] { transition-delay: 0.16s; }
[data-gk-anim][data-gk-d="3"] { transition-delay: 0.24s; }
[data-gk-anim][data-gk-d="4"] { transition-delay: 0.32s; }
[data-gk-anim][data-gk-d="5"] { transition-delay: 0.40s; }

/* ── Respect reduced motion ─────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  [data-gk-anim] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  img { transition: none !important; }
  .gk-bento-stat,
  .gk-bento-text,
  .gk-bento-video { transition: none !important; }
}