/* ============================================================
   ZAMBOL CREATIVES — animations.css
   Preloader, Cursor, Scroll Animations, Transitions
   ============================================================ */

/* ── PRELOADER ───────────────────────────────────────────── */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--color-dark);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#preloader.dismissed {
  pointer-events: none;
}

.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.preloader__letters {
  display: flex;
  align-items: flex-end;
  gap: 0px;
  overflow: hidden;
}

.preloader__letter {
  height: clamp(60px, 10vw, 100px);
  width: auto;
  transform: translateY(120%);
  opacity: 0;
}

.preloader__tagline {
  margin-top: 20px;
  font-size: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.3);
  opacity: 0;
  transform: translateY(10px);
}

.preloader__bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: var(--color-accent);
  width: 0%;
  transition: none;
}

/* ── CUSTOM CURSOR ───────────────────────────────────────── */
.cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--color-white);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.25s ease, height 0.25s ease, background 0.25s ease, opacity 0.3s ease;
  mix-blend-mode: difference;
}

.cursor-dot.hovering {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.15);
}

.cursor-dot.dark {
  background: var(--color-dark);
  mix-blend-mode: normal;
}

.cursor-dot.dark.hovering {
  background: rgba(22,22,22,0.15);
}

.cursor-dot.clicking {
  transform: translate(-50%, -50%) scale(0.75);
}

/* Hide cursor on touch */
@media (pointer: coarse) {
  .cursor-dot { display: none; }
  body { cursor: auto; }
  a, button { cursor: pointer; }
}

/* ── GOOEY CURSOR ────────────────────────────────────────── */
.cursor-gooey {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.cursor-gooey-svg {
  position: absolute;
  width: 0; height: 0;
}

.cursor-inner {
  position: absolute;
  inset: 0;
  filter: url('#gooey-filter');
}

.cursor-box {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--color-accent);
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

@media (pointer: coarse) {
  .cursor-gooey { display: none; }
}

/* ── ENTRANCE ANIMATIONS (controlled by GSAP/preloader) ─── */
[data-entrance] {
  opacity: 0;
}

/* ── HERO LETTER ANIMATION ───────────────────────────────── */
.hero__letter-wrapper {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.hero__letter {
  display: inline-block;
  transform: translateY(105%);
  will-change: transform;
}

/* ── REVEAL TYPE ─────────────────────────────────────────── */
.reveal-type .char {
  opacity: 0.08;
  will-change: opacity;
}

/* ── SCROLL FADE IN (generic) ────────────────────────────── */
.gsap-fade-up {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
}

.gsap-fade-in {
  opacity: 0;
  will-change: opacity;
}

/* ── SECTION TRANSITIONS ─────────────────────────────────── */
.section {
  position: relative;
}

/* ── VIDEO SECTION ───────────────────────────────────────── */
.video-section {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.video-section__bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-section__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(22, 22, 22, 0.55);
}

.video-section__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--section-v) var(--container-pad);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 60px;
  min-height: 100vh;
}

/* ── FEATURED PROJECT (sticky scroll) ───────────────────── */
.featured-project {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 80vh;
}

.featured-project__media {
  position: sticky;
  top: 100px;
  height: 70vh;
  overflow: hidden;
}

.featured-project__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.featured-project__content {
  padding: 60px 60px 60px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── COUNTER ANIMATION (About stats) ─────────────────────── */
.counter-value {
  display: inline-block;
}

/* ── PAGE TRANSITIONS ────────────────────────────────────── */
.page-transition-out {
  animation: pageOut 0.4s ease forwards;
}

@keyframes pageOut {
  to { opacity: 0; transform: translateY(-10px); }
}

/* ── PARALLAX IMAGE ──────────────────────────────────────── */
.parallax-img-wrapper {
  overflow: hidden;
  position: relative;
}

.parallax-img-wrapper img {
  transform: scale(1.15);
  will-change: transform;
}

/* ── RESPONSIVE: MOBILE ──────────────────────────────────── */
@media (max-width: 992px) {
  .navbar__links { display: none; }
  .navbar__cta.desktop-only { display: none; }
  .navbar__burger { display: flex; }

  .footer__top { grid-template-columns: 1fr 1fr; }
  .grid-four { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: 1fr; }
  .video-section__content { grid-template-columns: 1fr; }
  .featured-project { grid-template-columns: 1fr; }
  .featured-project__media { position: relative; top: 0; height: 50vw; }
  .featured-project__content { padding: 40px var(--container-pad); }
  .grid-two { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .footer__top { grid-template-columns: 1fr; gap: 32px; }
  .filter-tabs { gap: 0; }
  .filter-tab { padding: 12px 14px; font-size: 11px; }
  .stat-block { border-right: none; border-bottom: 1px solid var(--color-divider); }
  .grid-four { grid-template-columns: 1fr 1fr; }
  .glass-card { padding: 24px; }
  .btn-hyperion { padding: 14px 24px; font-size: 11px; }
}