/*
  Hero text reveal — scroll-scrubbed scale + translate.
  Intentionally separate from css/master.css.

  Sequence:
    1. Big "Dr. Sathya Menon" heading (network video composited inside the
       letterforms) scales + translates down into its resting place while
       the portrait image fades/scales in on the right.
    2. Canvas fades out, real (solid-colour) heading takes over.
    3. Subtitle, then paragraph, fade up in sequence.
*/

/* ── Pre-hero loading screen — covers the whole page from first paint
   until the hero video has buffered enough to play smoothly and the
   cinematic script has finished its setup (see hero-loader.js). The SHOWN
   state is plain CSS (no JS needed to display it, so it still covers a
   slow page load even if scripts are themselves still downloading) — only
   hiding it is JS's job, by adding .is-hidden once everything's ready. */
.hero-loader{
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.hero-loader-anim{
  width: 180px;
  height: 180px;
}
.hero-loader.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  .hero-loader{
    transition: none;
  }
}

.hero{
  position: relative;
}
.sign-wrap {
      padding-top:60px;
}

/* master.css gives .hero a 114px top margin to clear the always-visible
   fixed header on other pages. Here the header starts hidden (see below),
   so that gap would otherwise show as a blank white bar and push the
   fullscreen video/canvas down before the first scroll. Zero it out only
   while the cinematic sequence owns the page; the reduced-motion/no-JS
   fallback below still needs the header cleared, so it's left untouched. */
.hero-cinematic-ready .hero{
  margin-top: 0;
}

/* ── Real heading — hidden while the canvas paints the animated version ─── */
.hero-cinematic-ready .logo-mask-container{
  opacity: 0;
}

/* ── Top nav — hidden until the big text settles into its resting place ─── */
.hero-cinematic-ready .site-header{
  opacity: 0;
  transform: translateY(-100%);
}

.site-header{
  top: 0;
  left: 0;
  will-change: opacity, transform;
}

.logo-mask-container{
  display: block;
  margin: 0;
}

/* ── Real logo image — sizes the "resting" box the animation zooms into.
   Adjust this width to match the reference video's final logo size. ────── */
.hc-logo-img{
  display: block;
  width: 320px;
  max-width: 100%;
  height: auto;
}

/* ── Static top-of-video logo — separate from the .hc-logo-img zoom/mask
   sequence above (untouched). Sits over the raw video from page load and
   fades out on its own as the user starts scrolling (see
   hero-top-logo.js). A direct child of .hero (not nested inside
   .hero-content/.make-adj — those have padding that varies across several
   breakpoints, and an earlier attempt at wrapping .logo-mask-container to
   share a positioning container measurably changed .hc-logo-img's own
   rendered size, which risks throwing off the zoom animation's whole
   calibration). top/left/width/height are set entirely from JS, copied
   directly from .logo-mask-container's live getBoundingClientRect() each
   time it's measured — exact pixel match at any breakpoint, zero risk to
   the existing element since nothing here touches its DOM position or CSS
   context at all. */
.hc-top-logo{
  position: absolute;
  display: block;
  z-index: 20;
  /* dr-menon-top.svg's artwork is baked as flat solid-white vector paths
     (no <mask>, no pattern/raster fill) — the original file used an alpha
     mask + a huge embedded base64-photo pattern to give the letterforms a
     video-textured fill for the main zoom animation's canvas compositing;
     none of that is needed for this static, independent overlay, and it's
     a known-risky combo to run through a CSS `filter` (the oversized
     pattern rect behind the mask can render unclipped as a large soft
     white shape if the mask fails to resolve under some browsers'
     filter-triggered compositing — plain solid paths have no mask left to
     fail). opacity(0.35) is the filter FUNCTION, not the `opacity`
     property — hero-top-logo.js already drives `.style.opacity` via inline
     style for the scroll-fade, and inline styles win over a CSS class
     rule, so a plain `opacity: 0.35;` here would just get overwritten back
     to 1 the instant the script's first update() runs (confirmed: it did
     nothing). The filter's opacity() is a separate mechanism that composes
     multiplicatively with whatever the script sets, so this stays a pure
     CSS-only translucency baseline — the fade-on-scroll behavior is
     untouched, it just fades from 0.35 (not 1) down to 0.
     No margin offset — hero-top-logo.js sets top/left/width/height from
     .hc-logo-img's own live getBoundingClientRect() every frame, so this
     already sits exactly on top of it with zero manual adjustment. */
  filter: opacity(0.35);
}

/* ── Scroll-down indicator: bottom-center, bobs continuously, visible from
   first paint (NOT gated behind hero-cinematic.js's boot — that can take
   ~10s on this page, see hero-top-logo.js's own comments on window.load
   timing, and this needs to be visible immediately, not after that delay).
   hero-top-logo.js fades it out via plain window.scrollY (not GSAP/
   ScrollTrigger) the instant real scrolling starts, and fades it back in if
   scrolled back to the very top — same independent-of-the-pin approach
   already used there for .hc-top-logo. The bob animation runs on its own
   CSS keyframe loop, independent of and unaffected by that opacity fade. */
.hc-scroll-indicator{
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 20;
  opacity: 1;
  color: #fff;
  transform: translateX(-50%);
  animation: hc-scroll-bob 1.6s ease-in-out infinite;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

@keyframes hc-scroll-bob{
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(10px); }
}

@media (prefers-reduced-motion: reduce){
  .hc-scroll-indicator{ animation: none; }
}

/* ── Canvas overlay: paints the animated text + composited video ────────── */
.hc-text-canvas{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
  display: block;
}

html:not(.hero-cinematic-ready) .hc-text-canvas{
  display: none;
}

/* ── Video: raw full-screen at load, then crossfades under the text mask
   as soon as scroll starts (opacity driven entirely by JS/GSAP — see
   hero-cinematic.js). Kept at full size (not shrunk to 1x1) — browsers
   throttle/skip decoding near-zero-size video elements, which would
   starve the canvas of frames. */
.hc-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* ── Static hero content — starts hidden, revealed after the heading settles */
.hero-cinematic-ready .hero-text-content h2,
.hero-cinematic-ready .hero-text-content p,
.hero-cinematic-ready .hero .hero-image{
  opacity: 0;
}

.hero-text-content h2,
.hero-text-content p{
  will-change: opacity, transform;
}

/* ── Reduced-motion: skip straight to the resting state ──────────────────── */
@media (prefers-reduced-motion: reduce){
  .hc-text-canvas,
  .hc-video{
    display: none;
  }

  .hero-cinematic-ready .logo-mask-container,
  .hero-cinematic-ready .hero-text-content h2,
  .hero-cinematic-ready .hero-text-content p,
  .hero-cinematic-ready .hero .hero-image{
    opacity: 1;
  }

  .hero-cinematic-ready .site-header{
    opacity: 1;
    transform: none;
  }

  /* Header is visible immediately here (unlike the animated path), so hero
     still needs master.css's clearance — put it back. */
  .hero-cinematic-ready .hero{
    margin-top: 114px;
  }
}


/***Rest-CSS***/

/* ── Expertise section reveal — content fades in piece by piece, in scroll
   order, rather than as two big blocks. Left-side pieces (each heading/
   paragraph group under .expertise-left) slide in from the left; right-side
   list items (.expertise-item) slide in from the right, cascading one after
   another once the list scrolls into view. Trigger classes (.hc-reveal-in)
   are added by expertise-reveal.js via IntersectionObserver — this file only
   owns the visual transition. ─────────────────────────────────────────────── */
.expertise-sense,
.supplychain,
.expertise-left .empowering,
.expertise-left .globe-div,
.blueocean-link{
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}

.expertise-sense.hc-reveal-in,
.supplychain.hc-reveal-in,
.expertise-left .empowering.hc-reveal-in,
.expertise-left .globe-div.hc-reveal-in,
.blueocean-link.hc-reveal-in{
  opacity: 1;
  transform: translateX(0);
}

/* Right-side list: each .expertise-item is observed individually (so it
   mirrors in/out right as IT crosses the viewport edge, not only once the
   whole 9-item list's aggregate visibility crosses a threshold), while the
   nth-child transition-delay below still staggers them into a one-by-one
   cascade whenever several happen to cross at the same moment.
   Scoped to .expertise-items — .expertise-item is reused by the unrelated
   mobile section (.key-expert-mob .expertise-item) and must not be affected. */
.expertise-items .expertise-item{
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.expertise-items .expertise-item.hc-reveal-in{
  opacity: 1;
  transform: translateX(0);
}

.expertise-items .expertise-item:nth-child(1){ transition-delay: 0s;    }
.expertise-items .expertise-item:nth-child(2){ transition-delay: 0.1s;  }
.expertise-items .expertise-item:nth-child(3){ transition-delay: 0.2s;  }
.expertise-items .expertise-item:nth-child(4){ transition-delay: 0.3s;  }
.expertise-items .expertise-item:nth-child(5){ transition-delay: 0.4s;  }
.expertise-items .expertise-item:nth-child(6){ transition-delay: 0.5s;  }
.expertise-items .expertise-item:nth-child(7){ transition-delay: 0.6s;  }
.expertise-items .expertise-item:nth-child(8){ transition-delay: 0.7s;  }
.expertise-items .expertise-item:nth-child(9){ transition-delay: 0.8s;  }

@media (prefers-reduced-motion: reduce){
  .expertise-sense,
  .supplychain,
  .expertise-left .empowering,
  .expertise-left .globe-div,
  .blueocean-link,
  .expertise-items .expertise-item{
    opacity: 1;
    transform: none;
    transition: none;
  }
}