/* ═══════════════════════════════════════════════════════════
   ge-scroll.css  v3  —  Golden Evergreen Productions
   - Scroll-snap + section reveal animation
   - Footer flip headings (correct, no bleed)
   - Footer social icon flip-in animation  
   - Footer nav link flip animation
   - Equal-height article cards
   ═══════════════════════════════════════════════════════════ */

/* ── 1. SCROLL-SNAP ─────────────────────────────────────────
   CSS scroll-snap. Lenis is disabled (removed from HTML)
   so there's no conflict.
   ─────────────────────────────────────────────────────────── */

html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

main > section,
.animsition-overlay > section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100dvh;
  box-sizing: border-box;
}

/* ── 2. SECTION REVEAL — scroll-driven fade-in ──────────────
   Uses animation-timeline: view() — no named timeline
   needed, works directly on each element's own scroll pos.
   ─────────────────────────────────────────────────────────── */

main > section .flex-min-height-inner,
main > section .container,
main > section .portfolio-content,
.animsition-overlay > section .flex-min-height-inner,
.animsition-overlay > section .container {
  animation: ge-reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;
}

@keyframes ge-reveal {
  from {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Hero + page banners — always fully visible, no animation */
.home-slider .flex-min-height-inner,
.home-slider .container,
.home-slider .swiper-wrapper,
.home-slider > *,
.page-head .flex-min-height-inner,
.page-head .container,
.page-head > * {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ── 3. EQUAL-HEIGHT ARTICLE CARDS ─────────────────────────
   Directors section (Manoj / Vipin) and all other
   flex-row card grids: stretch so cards share height.
   ─────────────────────────────────────────────────────────── */

/* Make flex rows stretch children to equal height */
.flex-container.response-999,
.flex-container {
  align-items: stretch;
}

/* Cards inside those rows fill height */
.six-columns > article,
.four-columns > article,
.six-columns .light-bg-2,
.four-columns .light-bg-2 {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Push the tag/date footer to the bottom inside the card */
.six-columns article .content-padding-bottom-20,
.four-columns article .content-padding-bottom-20 {
  margin-top: auto;
}

/* ── 4. FOOTER — fix flip heading double-text bleed ─────────
   The global .flip-btn:after starts at translateY(-170%)
   which can bleed through the short flip-btn-box height.
   We override only inside .ge-footer with correct clipping.
   ─────────────────────────────────────────────────────────── */

/* Isolate footer flip-btn-box so overflow is truly hidden */
.ge-footer .ge-section-title {
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #2a2a2a;
  display: block;
  width: 100%;
  position: relative;
  overflow: visible;        /* let the heading itself not clip */
}

/* Red underline slide on section-title hover */
.ge-footer .ge-section-title::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 0;
  background: #ef0d33;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.ge-footer .ge-section-title:hover::after {
  width: 60px;
}

/* Clip box — height matches style.css .ge-section-title .flip-btn (40px) */
.ge-footer .flip-btn-box {
  overflow: hidden;
  display: block;
  width: 100%;
  height: 40px;
}

/* Hover triggered on the parent <p> so the whole heading area is the hit target */
.ge-footer .ge-section-title:hover .flip-btn:before {
  -webkit-transform: translateY(52%);
      -ms-transform: translateY(52%);
          transform: translateY(52%);
}

.ge-footer .ge-section-title:hover .flip-btn:after {
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

/* ── 5. FOOTER SOCIAL ICONS — flip-in animation ─────────────
   Red fill slides up from below; SVG lifts slightly.
   ─────────────────────────────────────────────────────────── */

.ge-social-icon {
  position: relative;
  overflow: hidden;
  width: 38px;
  height: 38px;
  border: 1px solid #333;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #888;
  text-decoration: none;
  transition: border-color 0.35s ease, color 0.25s ease;
}

/* Red fill slides up from bottom */
.ge-social-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #d80303;
  transform: translateY(101%);
  transition: transform 0.38s cubic-bezier(.858, .01, .068, .99);
  z-index: 0;
}

.ge-social-icon:hover::before {
  transform: translateY(0);
}

.ge-social-icon:hover {
  border-color: #d80303;
  color: #ffffff;
}

.ge-social-icon svg {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.38s cubic-bezier(.858, .01, .068, .99),
              stroke   0.25s ease;
}

.ge-social-icon:hover svg {
  stroke: #ffffff;
  transform: translateY(-2px) scale(1.08);
}

/* ── 6. FOOTER NAV LINKS — flip text animation ──────────────
   ge-link-text spans were added in previous build.
   White text slides up; red copy slides in from below.
   ─────────────────────────────────────────────────────────── */

.ge-nav-list li {
  border-bottom: 1px solid #1e1e1e;
  overflow: hidden;
}

.ge-nav-list li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  text-decoration: none;
  color: #999;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.03em;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: color 0.3s ease;
}

/* Text container that performs the flip */
.ge-nav-list li a .ge-link-text {
  display: inline-block;
  position: relative;
  line-height: 1.4;
  overflow: hidden;
  transition: transform 0.42s cubic-bezier(.858, .01, .068, .99);
}

/* Red copy hidden below */
.ge-nav-list li a .ge-link-text::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  color: #ef0d33;
  white-space: nowrap;
  line-height: 1.4;
}

/* Hover: white slides up, red comes up from below */
.ge-nav-list li a:hover .ge-link-text {
  transform: translateY(-100%);
}

.ge-nav-list li a .ge-arrow {
  font-size: 12px;
  color: #444;
  transition: transform 0.3s ease, color 0.3s ease;
}

.ge-nav-list li a:hover .ge-arrow {
  transform: translateX(5px);
  color: #ef0d33;
}

/* ── 7. REDUCED MOTION ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  main > section .flex-min-height-inner,
  main > section .container,
  main > section .portfolio-content,
  .animsition-overlay > section .flex-min-height-inner,
  .animsition-overlay > section .container {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}