/* ============================================
   HERO (RANDOM DESC) - h1 from TOP, buttons from BOTTOM
   - Description comes randomly from LEFT or RIGHT
   - Then settles centered
   - Mobile: 2 buttons on ONE line
============================================ */

/* ---------- GLOBAL RESET ---------- */
.hero-reimagined,
.hero-reimagined *{
  box-sizing: border-box;
}
.hero-reimagined *{
  margin: 0;
  padding: 0;
}

/* ---------- MAIN CONTAINER ---------- */
.hero-reimagined{
  position: relative;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  min-height: 560px;
  height: 92vh;
  max-height: 900px;

  background: var(--ahda-teal, #0B4F66);
}

/* If your header overlaps */
.page-section.active{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ---------- BACKGROUND SLIDES ---------- */
.hero-slides-container{
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero-slide-bg{
  position: absolute;
  inset: 0;
  z-index: 1;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.2,.9,.2,1);

  transform: scale(1.03);
  will-change: transform, opacity;
  image-rendering: auto;
}

.hero-slide-bg.active{
  opacity: 1;
  animation: kenBurnsZoom 14s cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes kenBurnsZoom{
  0%{ transform: scale(1.03); }
  100%{ transform: scale(1.10); }
}

/* ---------- OVERLAY ---------- */
.hero-dynamic-overlay{
  position: absolute;
  inset: 0;
  z-index: 2;

  background:
    radial-gradient(circle at 70% 40%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.42) 60%, rgba(0,0,0,.55) 100%),
    linear-gradient(115deg,
      rgba(11,79,102,.72) 0%,
      rgba(11,79,102,.58) 40%,
      rgba(20,119,109,.40) 75%,
      rgba(245,123,44,.18) 100%
    );
}

/* Layout-specific variations */
[data-layout="balanced"] .hero-dynamic-overlay{
  background:
    radial-gradient(circle at 70% 40%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.42) 60%, rgba(0,0,0,.55) 100%),
    linear-gradient(125deg,
      rgba(11,79,102,.74) 0%,
      rgba(20,119,109,.48) 55%,
      rgba(11,79,102,.72) 100%
    );
}
[data-layout="left-focus"] .hero-dynamic-overlay{
  background:
    radial-gradient(circle at 30% 45%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.44) 60%, rgba(0,0,0,.58) 100%),
    linear-gradient(95deg,
      rgba(11,79,102,.78) 0%,
      rgba(11,79,102,.55) 55%,
      rgba(20,119,109,.34) 100%
    );
}
[data-layout="center-stage"] .hero-dynamic-overlay{
  background:
    radial-gradient(circle at 55% 45%,
      rgba(11,79,102,.35) 0%,
      rgba(0,0,0,.50) 55%,
      rgba(0,0,0,.62) 100%
    );
}
[data-layout="right-accent"] .hero-dynamic-overlay{
  background:
    radial-gradient(circle at 75% 45%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.44) 60%, rgba(0,0,0,.58) 100%),
    linear-gradient(85deg,
      rgba(11,79,102,.74) 0%,
      rgba(20,119,109,.42) 60%,
      rgba(11,79,102,.68) 100%
    );
}
[data-layout="full-impact"] .hero-dynamic-overlay{
  background:
    radial-gradient(circle at 70% 40%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.44) 60%, rgba(0,0,0,.60) 100%),
    linear-gradient(145deg,
      rgba(11,79,102,.70) 0%,
      rgba(20,119,109,.44) 55%,
      rgba(245,123,44,.18) 100%
    );
}

/* ---------- MAIN CONTENT AREA ---------- */
.hero-main-content{
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  padding-top: clamp(78px, 10vh, 130px);
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: clamp(18px, 3vh, 34px);
}

.hero-grid-container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-layout-col{
  width: 100%;
  text-align: center;
}
.hero-col-right{ display: none; }

/* ---------- TEXT BLOCK ---------- */
.hero-text-block{
  max-width: 980px;
  margin: 0 auto;
}

/* Headline: from TOP (unchanged) */
.hero-text-block h1{
  font-size: clamp(2.1rem, 5.3vw, 5.1rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-transform: uppercase;

  color: #fff;
  text-shadow: 0 10px 36px rgba(0,0,0,.42);

  opacity: 0;
  transform: translateY(-54px);
  animation: heroInDown 1.15s cubic-bezier(.16, 1, .3, 1) 0.20s forwards;
}

/* Underline */
.hero-text-block h1::after{
  content: "";
  display: block;
  width: 130px;
  height: 6px;
  margin: 0.35em auto 0.25em;

  border-radius: 999px;
  background: linear-gradient(90deg, var(--ahda-orange, #F57B2C), #FFB347);
  box-shadow: 0 10px 22px rgba(245,123,44,.30);

  transform: scaleX(0);
  transform-origin: center;
  animation: heroUnderline 1.05s cubic-bezier(.16, 1, .3, 1) 0.55s forwards;
}

/* Description: RANDOM left/right (NEW)
   JS will set: #heroSection[data-desc="left"] or [data-desc="right"]
   It always ends centered (transform -> 0) */
.hero-text-block .lead{
  font-size: clamp(1.02rem, 2.1vw, 1.55rem);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  color: rgba(255,255,255,.95);
  text-shadow: 0 6px 22px rgba(0,0,0,.35);

  max-width: 860px;
  margin: 0.75rem auto 0;

  opacity: 0;
  will-change: transform, opacity;
}

/* default fallback (if JS didn't set) */
#heroSection .hero-text-block .lead{
  transform: translateX(-56px);
  animation: heroDescFromLeft 1.20s cubic-bezier(.16, 1, .3, 1) 0.60s forwards;
}

/* random direction hooks */
#heroSection[data-desc="left"]  .hero-text-block .lead{
  transform: translateX(-56px);
  animation: heroDescFromLeft 1.20s cubic-bezier(.16, 1, .3, 1) 0.60s forwards;
}
#heroSection[data-desc="right"] .hero-text-block .lead{
  transform: translateX(56px);
  animation: heroDescFromRight 1.20s cubic-bezier(.16, 1, .3, 1) 0.60s forwards;
}

/* Buttons: from BOTTOM (unchanged) */
.hero-buttons-container{
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: center;
  align-items: center;

  margin-top: 1.8rem;

  opacity: 0;
  transform: translateY(26px);
  animation: heroInUp 1.05s cubic-bezier(.16, 1, .3, 1) 0.98s forwards;
}

/* Buttons */
.hero-btn{
  padding: 0.95rem 2.15rem;
  font-weight: 800;
  font-size: 1.04rem;
  border-radius: 999px;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 190px;
  border: none;
  cursor: pointer;

  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
  -webkit-tap-highlight-color: transparent;
}

.hero-btn:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(0,0,0,.30);
}
.hero-btn:active{ transform: translateY(-1px); }

/* Primary */
.hero-btn-primary{
  background: linear-gradient(135deg, var(--ahda-orange, #F57B2C), #E56A1E);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.hero-btn-primary::before{
  content: "";
  position: absolute;
  inset: 0;
  left: -110%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transition: left .75s ease;
}
.hero-btn-primary:hover::before{ left: 110%; }

/* Outline */
.hero-btn-outline{
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 2px solid rgba(255,255,255,.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-btn-outline:hover{
  background: rgba(245,123,44,.18);
  border-color: var(--ahda-orange, #F57B2C);
}

/* ---------- CONTROLS (ARROWS) ---------- */
.hero-controls-bottom{
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(14px, 2.6vh, 28px);

  z-index: 30;
  display: flex;
  justify-content: center;

  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.hero-controls-bottom.visible{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hero-nav-bottom{
  display: flex;
  gap: 16px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-nav-btn{
  width: 48px;
  height: 48px;
  border-radius: 999px;

  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
}
.hero-nav-btn:hover{
  background: var(--ahda-orange, #F57B2C);
  border-color: var(--ahda-orange, #F57B2C);
  transform: scale(1.06);
  box-shadow: 0 14px 24px rgba(245,123,44,.28);
}
.hero-nav-btn svg{ width: 22px; height: 22px; }

/* ---------- TIMER ---------- */
.hero-timer-indicator{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  z-index: 25;
  background: rgba(255,255,255,.10);
}
.hero-timer-progress{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--ahda-orange, #F57B2C), #FFB347);
  transition: width 7s linear;
  box-shadow: 0 0 18px rgba(245,123,44,.55);
}

/* ---------- KEYFRAMES ---------- */
@keyframes heroInDown{
  from{ opacity: 0; transform: translateY(-54px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes heroInUp{
  from{ opacity: 0; transform: translateY(26px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes heroUnderline{
  from{ transform: scaleX(0); opacity: .6; }
  to{ transform: scaleX(1); opacity: 1; }
}

/* NEW: Description random left/right then centered */
@keyframes heroDescFromLeft{
  0%   { opacity: 0; transform: translateX(-56px); filter: blur(1px); }
  70%  { opacity: 1; transform: translateX(10px);  filter: blur(0); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes heroDescFromRight{
  0%   { opacity: 0; transform: translateX(56px); filter: blur(1px); }
  70%  { opacity: 1; transform: translateX(-10px); filter: blur(0); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ---------- RESPONSIVE ---------- */
@media (min-width: 1024px){
  .hero-reimagined{
    min-height: 680px;
    height: 88vh;
  }
  .hero-btn{
    padding: 1.05rem 2.45rem;
    min-width: 210px;
    font-size: 1.08rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px){
  .hero-reimagined{
    min-height: 620px;
    height: 84vh;
    max-height: 860px;
  }
  .hero-btn{
    min-width: 185px;
    padding: .95rem 2.1rem;
  }
}

/* Mobile */
@media (max-width: 767px){
  .hero-reimagined{
    min-height: 520px;
    height: 84vh;
    max-height: 740px;
  }

  .hero-main-content{
    padding-left: 18px;
    padding-right: 18px;
    padding-top: clamp(74px, 10vh, 110px);
    padding-bottom: 18px;
  }

  .hero-text-block h1{
    font-size: clamp(1.85rem, 7.6vw, 2.6rem);
    line-height: 1.14;
  }
  .hero-text-block h1::after{
    width: 105px;
    height: 5px;
  }
  .hero-text-block .lead{
    font-size: .98rem;
    line-height: 1.55;
    letter-spacing: 0.035em;
    max-width: 95%;
    margin-top: .7rem;
  }

  /* 2 buttons in ONE LINE */
  .hero-buttons-container{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 420px;
    margin: 1.15rem auto 0;
  }
  .hero-btn{
    width: 100%;
    min-width: 0;
    padding: 0.72rem 0.85rem;
    font-size: 0.92rem;
    min-height: 44px;
    box-shadow: 0 10px 18px rgba(0,0,0,.22);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .hero-controls-bottom{ bottom: 12px; }
  .hero-nav-btn{ width: 42px; height: 42px; }
  .hero-nav-btn svg{ width: 20px; height: 20px; }
}

@media (max-width: 480px){
  .hero-reimagined{
    min-height: 490px;
    height: 80vh;
  }
  .hero-text-block h1{ font-size: 1.75rem; }
  .hero-text-block .lead{ font-size: .93rem; }

  .hero-buttons-container{
    max-width: 360px;
    gap: 8px;
  }
  .hero-btn{
    padding: 0.68rem 0.75rem;
    font-size: 0.88rem;
    min-height: 42px;
  }
}

@media (max-width: 360px){
  .hero-btn{
    white-space: normal;
    line-height: 1.05;
    padding: 0.62rem 0.7rem;
    font-size: 0.86rem;
  }
}

@media (max-width: 900px) and (orientation: landscape){
  .hero-reimagined{
    min-height: 360px;
    height: 100vh;
  }
  .hero-main-content{
    padding-top: 68px;
    padding-bottom: 12px;
  }
  .hero-text-block h1{
    font-size: clamp(1.55rem, 4.7vw, 2.4rem);
  }
  .hero-text-block .lead{
    font-size: .9rem;
    margin-top: .45rem;
  }
  .hero-buttons-container{
    display: flex;
    flex-direction: row;
    max-width: 100%;
    gap: 10px;
    margin-top: .9rem;
  }
  .hero-btn{
    width: auto;
    min-width: 160px;
    min-height: 42px;
    padding: .65rem 1.1rem;
    font-size: .95rem;
    white-space: nowrap;
  }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .hero-slide-bg.active{ animation: none !important; transform: none !important; }
  .hero-text-block h1,
  .hero-text-block .lead,
  .hero-buttons-container,
  .hero-text-block h1::after{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hero-btn,
  .hero-nav-btn{
    transition: none !important;
  }
}

/* Focus states */
.hero-btn:focus-visible,
.hero-nav-btn:focus-visible{
  outline: 3px solid var(--ahda-orange, #F57B2C);
  outline-offset: 3px;
}

/* Remove fake gap from next section */
.mission-section{
  margin-top: 0 !important;
  padding-top: 0 !important;
}