/* =========================================================
   HERO.CSS
   ========================================================= */


/* =========================================================
   EASY ADJUSTMENT VARIABLES
   ---------------------------------------------------------
   CHANGE THESE VALUES ONLY when tuning the PNG.
   ========================================================= */

:root {

  /* =======================================================
     DESKTOP PNG
     ======================================================= */

  /* Size of PNG */
  --diwali-desktop-width: 315px;

  /* Vertical position */
  --diwali-desktop-y: -65px;

  /* Horizontal position
     Negative = further outside the screen
     Positive = further inside
  */
  --diwali-desktop-left-x: -150px;
  --diwali-desktop-right-x: -150px;


  /* =======================================================
     MOBILE PNG
     ======================================================= */

  /* Size of PNG */
  --diwali-mobile-width: 125px;

  /* Vertical position */
  --diwali-mobile-y: -65px;

  /* Horizontal position */
  --diwali-mobile-left-x: -48px;
  --diwali-mobile-right-x: -48px;


  /* =======================================================
     SMALL MOBILE PNG
     ======================================================= */

  --diwali-small-width: 110px;

  --diwali-small-y: -20px;

  --diwali-small-left-x: -42px;
  --diwali-small-right-x: -42px;


  /* =======================================================
     TOP AMBIENT LIGHT (yellow glow fading down to white)
     ======================================================= */

  /* Height of the fade band */
  --hero-light-height: clamp(130px, 24vw, 280px);

  /* Yellow at the top → transparent white at the bottom */
  --hero-light-yellow: rgba(255, 205, 55, 0.55);
  --hero-light-white: rgba(255, 255, 255, 0);
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
  position: relative;

  overflow: hidden;

  isolation: isolate;

  padding:
    clamp(3rem, 6vw, 5.5rem)
    0
    clamp(1.75rem, 3.5vw, 3rem);
}


/* =========================================================
   DECORATIVE LAYER
   ========================================================= */

.hero-decoration-layer {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  pointer-events: none;

  user-select: none;

  z-index: 0;
}


/* =========================================================
   TOP AMBIENT LIGHT
   Yellow glow pinned to the top of the hero that fades down
   to white — a permanent "faded mask" with a soft animation.
   ========================================================= */

.hero-top-light {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: var(--hero-light-height);

  overflow: hidden;

  pointer-events: none;

  z-index: 0;

  /* Permanent yellow → white fade */
  background:
    linear-gradient(
      to bottom,
      var(--hero-light-yellow) 0%,
      rgba(255, 222, 110, 0.30) 30%,
      rgba(255, 240, 190, 0.12) 60%,
      var(--hero-light-white) 100%
    );

  /* Breathing glow */
  animation: hero-top-glow 5.5s ease-in-out infinite;

  will-change: opacity;
}


/* Slow drifting highlight layered on top of the fade */

.hero-top-light::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      60% 130% at 50% 0%,
      rgba(255, 214, 90, 0.55),
      rgba(255, 214, 90, 0) 70%
    );

  animation: hero-top-shimmer 7s ease-in-out infinite;

  will-change: transform, opacity;
}


/* Keyframes */

@keyframes hero-top-glow {
  0%,
  100% {
    opacity: 0.72;
  }

  50% {
    opacity: 1;
  }
}


@keyframes hero-top-shimmer {
  0%,
  100% {
    transform: translateX(-10%);
    opacity: 0.5;
  }

  50% {
    transform: translateX(10%);
    opacity: 0.95;
  }
}


/* Respect reduced-motion preference */

@media (prefers-reduced-motion: reduce) {

  .hero-top-light,
  .hero-top-light::before {
    animation: none;
  }

}


/* =========================================================
   PNG BASE
   ========================================================= */

.hero-lights {
  position: absolute;

  display: block;

  width: var(--diwali-desktop-width);

  height: auto;

  max-width: none;

  margin: 0;

  padding: 0;

  pointer-events: none;

  user-select: none;

  -webkit-user-drag: none;
}


/* =========================================================
   DESKTOP — LEFT
   ========================================================= */

.hero-lights-left {
  top: var(--diwali-desktop-y);

  left: var(--diwali-desktop-left-x);

  transform: none;
}


/* =========================================================
   DESKTOP — RIGHT
   ========================================================= */

.hero-lights-right {
  top: var(--diwali-desktop-y);

  right: var(--diwali-desktop-right-x);

  transform: scaleX(-1);
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero > .container {
  position: relative;

  z-index: 2;
}


/* =========================================================
   HERO GRID
   ========================================================= */

.hero-grid {
  display: grid;

  grid-template-columns:
    1.05fr
    0.95fr;

  gap:
    clamp(2rem, 4vw, 3.5rem);

  align-items: center;
}


/* =========================================================
   COPY
   ========================================================= */

.hero-copy {
  position: relative;

  z-index: 2;
}


.hero-eyebrow {
  font-size: 0.57rem;

  font-weight: 700;

  font-style: normal;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: var(--green-dark);

  margin-bottom: 0.15rem;
}


.hero-title {
  font-size:
    clamp(
      1.72rem,
      4.26vw,
      2.95rem
    );

  font-weight: 800;

  letter-spacing: -0.035em;

  line-height: 1.08;

  color: var(--navy);

  margin-bottom: 1.1rem;
}


/* Keeps "Go 10X." together — without this the browser can break
   between "Go" and the number at some viewport widths. */
.hero-title .nowrap {
  white-space: nowrap;
}


/* "10X" counter in the hero title.
   The static "10X" in the markup is the real text (so it still
   reads correctly with JS off / for crawlers); JS only animates
   over it. */
.hero-title .counter {
  display: inline-block;

  /* Keeps the glyph width from jittering as digits tick. */
  font-variant-numeric: tabular-nums;

  /* Prevent a line break between "reach" and the number. */
  white-space: nowrap;
}


/* Slight pop as the number lands on its final value. */
@keyframes hero-counter-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

.hero-title .counter.is-done {
  animation: hero-counter-pop 420ms var(--ease, ease-out);
}


.hero-sub {
  max-width: 480px;

  color: var(--text-soft);

  font-weight: 500;

  font-size: 0.86rem;

  margin-bottom: 1.6rem;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.hero-actions {
  display: flex;

  gap: 0.9rem;

  flex-wrap: wrap;

  margin-bottom: 2.2rem;
}


.btn-lg {
  padding:
    0.95rem
    1.7rem;

  font-size: 0.82rem;
}


.btn-cta.btn-lg {
  box-shadow:
    4px 4px 0 var(--navy);
}


.btn-cta.btn-lg:hover {
  transform:
    translate(-3px, -3px);

  box-shadow:
    7px 7px 0 var(--navy);
}


/* =========================================================
   STATS
   ========================================================= */

.hero-stats {
  display: flex;

  gap: 2.2rem;

  list-style: none;

  padding: 0;

  margin: 0;
}


.hero-stats li {
  display: flex;

  flex-direction: column;
}


.hero-stats strong {
  font-size: 1.31rem;

  font-weight: 800;

  color: var(--navy);

  line-height: 1.1;
}


.hero-stats span {
  font-size: 0.64rem;

  font-weight: 600;

  color: var(--text-soft);

  letter-spacing: 0.02em;
}


/* =========================================================
   VIDEO
   ========================================================= */

.hero-media {
  position: relative;

  z-index: 3;

  display: flex;

  flex-direction: column;

  align-items: center;
}


.video-frame {
  position: relative;

  width: 100%;

  max-width: 680px;

  aspect-ratio: 16 / 9;

  background:
    linear-gradient(
      135deg,
      rgba(25, 40, 60, 0.98),
      rgba(15, 26, 41, 0.98)
    );

  border: var(--border-1);

  border-radius: var(--radius);

  overflow: hidden;

  box-shadow:
    8px 8px 0 rgba(105, 159, 71, 0.55);

  isolation: isolate;
}


.video-frame iframe,
.video-frame video {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  display: block;

  object-fit: cover;
}


.video-frame iframe {
  border: 0;
}


/* =========================================================
   VIDEO CAPTION
   ========================================================= */

.hero-cap {
  margin-top: 1.2rem;

  font-size: 0.95rem;

  font-weight: 600;

  font-style: italic;

  color: var(--green-dark);

  text-align: center;
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

  .hero-lights {
    width: var(--diwali-desktop-width);
  }

  .hero-lights-left {
    top: var(--diwali-desktop-y);

    left: var(--diwali-desktop-left-x);
  }

  .hero-lights-right {
    top: var(--diwali-desktop-y);

    right: var(--diwali-desktop-right-x);

    transform: scaleX(-1);
  }

}


/* =========================================================
   MEDIUM DESKTOP
   ========================================================= */

@media (max-width: 1200px) {

  /*
   * Slightly reduce PNG at smaller desktop widths.
   */

  .hero-lights {
    width: 260px;
  }


  .hero-lights-left {
    left: -80px;

    top: -25px;
  }


  .hero-lights-right {
    right: -80px;

    top: -25px;

    transform: scaleX(-1);
  }

}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 900px) {

  /* -------------------------------------------------------
     HERO
     ------------------------------------------------------- */

  .hero {

    /*
     * Decorative band above video.
     */
    padding-top: 4rem;
  }


  /* -------------------------------------------------------
     GRID
     ------------------------------------------------------- */

  .hero-grid {
    grid-template-columns: 1fr;

    gap: 2rem;
  }


  /* Video first */

  .hero-media {
    order: -1;
  }


  /* -------------------------------------------------------
     COPY
     ------------------------------------------------------- */

  .hero-copy {
    text-align: center;
  }


  .hero-sub {
    display: none;
  }


  .hero-actions {
    justify-content: center;
  }


  .hero-stats {
    justify-content: center;
  }


  /* -------------------------------------------------------
     MOBILE PNG
     ------------------------------------------------------- */

  .hero-lights {
    width: var(--diwali-mobile-width);
  }


  .hero-lights-left {
    top: var(--diwali-mobile-y);

    left: var(--diwali-mobile-left-x);

    transform: none;
  }


  .hero-lights-right {
    top: var(--diwali-mobile-y);

    right: var(--diwali-mobile-right-x);

    transform: scaleX(-1);
  }


  /* -------------------------------------------------------
     VIDEO
     ------------------------------------------------------- */

  .video-frame {
    width: calc(100% - 0.5rem);

    box-shadow:
      6px 6px 0 rgba(105, 159, 71, 0.55);
  }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .hero {

    /*
     * Smaller decorative band.
     */
    padding-top: 3.7rem;
  }


  .hero-lights {
    width: var(--diwali-small-width);
  }


  .hero-lights-left {
    top: var(--diwali-small-y);

    left: var(--diwali-small-left-x);
  }


  .hero-lights-right {
    top: var(--diwali-small-y);

    right: var(--diwali-small-right-x);

    transform: scaleX(-1);
  }


  /* Stats */

  .hero-stats {
    gap: 1.35rem;
  }


  .hero-stats strong {
    font-size: 1.15rem;
  }


  .hero-stats span {
    font-size: 0.6rem;
  }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 400px) {

  .hero-lights {
    width: 100px;
  }


  .hero-lights-left {
    left: -38px;
  }


  .hero-lights-right {
    right: -38px;
  }


  .hero-stats {
    gap: 1rem;
  }

}