/* ==========================================================================
   animations.css  -  GSAP motion layer for Alpha Net Real World Solutions
   --------------------------------------------------------------------------
   Everything here exists only to support animations.js.
   To disable all motion, remove the <link> to this file and the <script>
   tags for GSAP / ScrollTrigger / animations.js. The original design
   (styles.css, top-section.css, script.js) is untouched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero pre-hide with failsafe
   Hero elements start hidden so there is no flash before GSAP takes over.
   If animations.js never runs (CDN blocked, JS error), the animation below
   reveals them after 3 seconds so the page can never stay blank.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html:not(.anim-ready) :is(
    .site-header .header-left,
    .site-header .header-nav,
    .site-header .header-right,
    .hero-eyebrow,
    .hero-title,
    .hero-card,
    .hero-carousel-controls,
    .hero-tabs-wrapper
  ) {
    opacity: 0;
    animation: anim-failsafe 0.01s linear 3s forwards;
  }
}

@keyframes anim-failsafe {
  to { opacity: 1; }
}

/* GSAP drives smooth scrolling and pinning; native smooth scroll fights it.
   script.js already calls scrollIntoView({ behavior: 'smooth' }) for anchors. */
html.anim-ready {
  scroll-behavior: auto;
}

/* --------------------------------------------------------------------------
   2. Helpers
   -------------------------------------------------------------------------- */

/* Applied by JS while an element is being tweened so existing CSS
   transitions (transition: all ...) do not fight GSAP. */
.anim-busy {
  transition: none !important;
}

/* Word masks used for headline reveals (removed again after the reveal) */
.anim-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.08em 0.04em 0.16em;
  margin: -0.08em -0.04em -0.16em;
}

.anim-word-inner {
  display: inline-block;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   3. Top scroll progress bar
   -------------------------------------------------------------------------- */
.anim-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 1000;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand-primary, #7DF77A), var(--brand-secondary, #7DEE9A));
}

/* --------------------------------------------------------------------------
   4. Buttons: sheen sweep on hover (CSS only, GPU friendly)
   -------------------------------------------------------------------------- */
.btn,
.btn-green-pill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn::before,
.btn-green-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-130%);
  pointer-events: none;
}

.btn:hover::before,
.btn-green-pill:hover::before,
.btn:focus-visible::before,
.btn-green-pill:focus-visible::before {
  transform: translateX(130%);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Newsletter field focus glow */
.sub-field:focus-within {
  box-shadow: 0 0 0 3px rgba(125, 238, 154, 0.55);
  transition: box-shadow 0.3s ease;
}

/* --------------------------------------------------------------------------
   5. Reveal panels (impact cards + about tiles)
   Collapsed by default; GSAP animates height / opacity on hover or focus.
   -------------------------------------------------------------------------- */
.anim-reveal {
  height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

/* Impact cards: description + button under the heading, inside .glass */
.card .anim-reveal-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 12px;
}

.card .anim-reveal-inner p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card .anim-reveal-inner .btn {
  margin-top: 0;
}

.card.anim-extra:focus-visible,
.card[data-anim-hover]:focus-visible {
  outline: 3px solid var(--brand-secondary, #7DEE9A);
  outline-offset: 3px;
}

/* About tiles: description sits between the heading and the button */
.tile .anim-reveal {
  align-self: flex-start;
  max-width: 30em;
}

.tile .anim-reveal-inner {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: clamp(13px, 1.05vw, 18px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.94);
  padding-top: 2px;
}

/* --------------------------------------------------------------------------
   6. Horizontal scroll mode for "Real World Solutions. Real Impact."
   Class is added by JS on desktop only. Phones and tablets keep the native
   swipe-and-snap scrolling from styles.css.
   -------------------------------------------------------------------------- */
.impact.anim-hscroll {
  overflow-x: clip;
}

.impact.anim-hscroll .cards {
  overflow: visible;
  scroll-snap-type: none;
  will-change: transform;
}

.anim-hprogress {
  display: none;
}

.impact.anim-hscroll .anim-hprogress {
  display: block;
  height: 3px;
  margin-top: 8px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.anim-hprogress span {
  display: block;
  height: 100%;
  background: var(--ink, #000000);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* --------------------------------------------------------------------------
   7. Reduced motion: nothing here may animate
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .anim-scroll-progress { display: none; }
  .btn::before,
  .btn-green-pill::before { display: none; }
}