/* ============================================================
   GenCom Cinematic Layer — CSS
   Drop-in stylesheet. Does NOT change layout or colors.
   Adds motion-ready states + premium polish to existing design.
   Brand: orange #F25822 · blue #3F80C2 · deep #0066A9
   ============================================================ */

:root{
  --gc-orange:#FE5A0E;  /* corrected to live palette */
  --gc-blue:#3F80C2;
  --gc-deep:#0066A9;
  --gc-ease:cubic-bezier(.22,.8,.26,.99);
}

/* ---------- 1. Initial states (JS animates these in) ---------- */
[data-cine="reveal"],
[data-cine="stagger"] > *{
  opacity:0;
  transform:translateY(36px);
  will-change:opacity,transform;
}
[data-cine="word-reveal"] .gc-w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
}
[data-cine="word-reveal"] .gc-w > span{
  display:inline-block;transform:translateY(110%);
}

/* Graceful fallback: if JS fails or reduced motion, everything shows */
.no-cine [data-cine="reveal"],
.no-cine [data-cine="stagger"] > *{opacity:1;transform:none}
.no-cine [data-cine="word-reveal"] .gc-w > span{transform:none}

/* ---------- 2. Hero slider upgrades ---------- */
.gc-kenburns img, [data-cine="kenburns"] img{
  transform-origin:center;
  animation:gc-kenburns 9s ease-out forwards;
}
@keyframes gc-kenburns{
  from{transform:scale(1.12)}
  to{transform:scale(1)}
}

/* Cinematic shade so hero text pops like Nike */
.gc-hero-shade::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.05) 40%,rgba(0,0,0,.55));
}

/* ---------- 3. Scroll progress bar (brand gradient) ---------- */
.gc-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:9999;
  background:linear-gradient(90deg,var(--gc-blue),var(--gc-orange));
  transform-origin:left;transform:scaleX(0);
}

/* ---------- 4. Card & image polish ---------- */
[data-cine-hover] {
  transition:transform .45s var(--gc-ease), box-shadow .45s var(--gc-ease);
}
[data-cine-hover]:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 50px -18px rgba(14,17,22,.25);
}
[data-cine-hover] img{
  transition:transform .8s var(--gc-ease);
}
[data-cine-hover]:hover img{
  transform:scale(1.06);
}

/* Parallax containers need overflow control */
[data-cine="parallax"]{overflow:hidden}
[data-cine="parallax"] img{will-change:transform;transform:translateY(0)}

/* ---------- 5. Client logo marquee ---------- */
.gc-marquee{overflow:hidden;position:relative}
.gc-marquee-inner{display:flex;width:max-content;animation:gc-scroll 40s linear infinite}
.gc-marquee:hover .gc-marquee-inner{animation-play-state:paused}
.gc-marquee-track{display:flex;align-items:center;gap:clamp(2.5rem,6vw,5rem);padding-right:clamp(2.5rem,6vw,5rem)}
.gc-marquee-track img{
  height:48px;width:auto;object-fit:contain;
  filter:grayscale(1);opacity:.6;
  transition:filter .4s,opacity .4s;
}
.gc-marquee-track img:hover{filter:grayscale(0);opacity:1}
@keyframes gc-scroll{to{transform:translateX(-50%)}}

/* ---------- 6. Buttons: premium micro-interaction ---------- */
.gc-btn-lift{transition:transform .3s var(--gc-ease),box-shadow .3s var(--gc-ease)}
.gc-btn-lift:hover{transform:translateY(-3px);box-shadow:0 14px 30px -10px rgba(242,88,34,.45)}

/* ---------- 7. Section breathing room (cinematic pacing) ---------- */
.gc-pace{padding-top:clamp(4rem,9vh,7rem);padding-bottom:clamp(4rem,9vh,7rem)}

/* ---------- 8. Reduced motion: respect it fully ---------- */
@media (prefers-reduced-motion: reduce){
  [data-cine="reveal"],
  [data-cine="stagger"] > *{opacity:1 !important;transform:none !important}
  [data-cine="word-reveal"] .gc-w > span{transform:none !important}
  .gc-kenburns img,[data-cine="kenburns"] img{animation:none !important}
  .gc-marquee-inner{animation:none !important}
}