/* ==========================================================================
   Sangam Steels India — v3 motion layer
   Scroll-linked depth, heading reveals and page-to-page transitions.
   Loaded after v3.css; every effect degrades to a static page without JS.
   ========================================================================== */

:root {
  --dur-page: .55s;
  --dur-leave: .3s;
}

/* ---------- Page transitions: cross-document View Transitions ----------- */
@view-transition { navigation: auto; }

::view-transition-group(root) { animation-duration: .5s; }
::view-transition-old(root) {
  animation: vt-leave .3s var(--ease-soft) both;
}
::view-transition-new(root) {
  animation: vt-enter .5s var(--ease) both;
}
@keyframes vt-leave { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-enter { from { opacity: 0; transform: translateY(18px); } }

/* The fixed header persists across the navigation instead of cross-fading
   with the page body. Both documents declare the name, so it morphs — the
   footer deliberately does not, since its position differs page to page. */
.site-header { view-transition-name: site-header; }
::view-transition-old(site-header), ::view-transition-new(site-header) {
  animation-duration: .4s; animation-timing-function: var(--ease-soft);
}

/* ---------- Page transitions: fallback for browsers without cross-doc VT
   `html.no-vt` is set by a one-line head script. The enter animation is pure
   CSS, so the page is never left hidden if scripting fails. ---------------- */
html.no-vt main { animation: m-page-in var(--dur-page) var(--ease) both; }
html.no-vt .site-footer { animation: m-page-in var(--dur-page) var(--ease) both; animation-delay: .06s; }
@keyframes m-page-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

html.nav-leaving main,
html.nav-leaving .site-footer {
  opacity: 0; transform: translateY(-10px);
  transition: opacity var(--dur-leave) var(--ease-soft), transform var(--dur-leave) var(--ease-soft);
  animation: none;
}
html.nav-leaving { cursor: progress; }

/* Thin indeterminate bar while the next document is being fetched */
.nav-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300;
  background: var(--accent); transform-origin: left; transform: scaleX(0);
  opacity: 0; pointer-events: none;
}
html.nav-leaving .nav-bar { opacity: 1; animation: m-nav-bar 1.6s var(--ease) forwards; }
@keyframes m-nav-bar {
  0%   { transform: scaleX(0); }
  40%  { transform: scaleX(.6); }
  100% { transform: scaleX(.94); }
}

/* Anchor landings clear the fixed header (e.g. contact.html#rfq) */
[id] { scroll-margin-top: 108px; }

/* ---------- Interior page hero: staged entrance ------------------------- */
.page-hero .container > * { animation: m-rise 1s var(--ease) both; }
.page-hero .container > *:nth-child(1) { animation-delay: .06s }
.page-hero .container > *:nth-child(2) { animation-delay: .14s }
.page-hero .container > *:nth-child(3) { animation-delay: .22s }
.page-hero .container > *:nth-child(4) { animation-delay: .30s }
.page-hero .container > *:nth-child(5) { animation-delay: .38s }
.page-hero .media { animation: m-media-in 1.3s var(--ease) .3s both; }
@keyframes m-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes m-media-in { from { opacity: 0; transform: translateY(28px) scale(1.02); } to { opacity: 1; transform: none; } }

/* ---------- Heading reveal, word by word -------------------------------- */
/* JS wraps each word: <span class="sp-w"><span class="sp-i">word</span></span>.
   The outer span clips, the inner one rises out of the clip. */
.sp-w {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .14em; margin-bottom: -.14em;
}
.sp-i {
  display: inline-block; transform: translateY(105%); opacity: 0;
  transition: transform .9s var(--ease), opacity .6s var(--ease);
  transition-delay: var(--d, 0s);
}
.sp.in .sp-i { transform: none; opacity: 1; }

/* ---------- Reveal variants (in addition to .r / .r-img / .stagger) ----- */
.r-l { opacity: 0; transform: translateX(-32px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.r-r { opacity: 0; transform: translateX(32px);  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.r-l.in, .r-r.in { opacity: 1; transform: none; }

.r-fade { opacity: 0; transition: opacity 1.1s var(--ease); }
.r-fade.in { opacity: 1; }

/* Wipe: uncovers an image from the bottom edge upward.

   The clip is applied to the CHILDREN, never to .r-clip itself. A clipped
   element reports an empty intersection rectangle, so IntersectionObserver
   never sees it enter the viewport, so .in never arrives and it stays
   clipped for good — the element blocks its own reveal. Keeping the clip one
   level down leaves the observed box unclipped and the deadlock impossible. */
.r-clip { opacity: .001; transition: opacity .5s var(--ease); }
.r-clip > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); }
.r-clip.in { opacity: 1; }
.r-clip.in > * { clip-path: inset(0 0 0 0); }

/* per-element delay hook used by the auto-reveal pass */
.r, .r-img, .r-l, .r-r, .r-fade, .r-clip { transition-delay: var(--rd, 0s); }

/* stagger past the ten children v3.css defines */
.stagger.in > *:nth-child(11) { transition-delay: .80s }
.stagger.in > *:nth-child(12) { transition-delay: .88s }
.stagger.in > *:nth-child(13) { transition-delay: .96s }
.stagger.in > *:nth-child(14) { transition-delay: 1.04s }
.stagger.in > *:nth-child(15) { transition-delay: 1.12s }
.stagger.in > *:nth-child(16) { transition-delay: 1.20s }

/* ---------- Scroll-linked depth ---------------------------------------- */
.hero-media { top: -7%; height: 114%; will-change: transform; }
.hero .container { will-change: transform, opacity; }
.split .img img, .page-hero .media img, [data-px] { will-change: transform; }

/* the ticker drifts a little further as the page scrolls */
.marquee-shift { will-change: transform; }

/* the timeline spine fills as the section is read */
.timeline::after {
  content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1px;
  background: var(--accent); transform-origin: top; transform: scaleY(var(--tl-p, 0));
}

/* ---------- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(root) { animation-duration: .01s !important; }
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none !important; }
  html.no-vt main, html.no-vt .site-footer,
  .page-hero .container > *, .page-hero .media { animation: none !important; opacity: 1 !important; transform: none !important; }
  html.nav-leaving main, html.nav-leaving .site-footer { opacity: 1 !important; transform: none !important; }
  .nav-bar { display: none !important; }
  .sp-i { transform: none !important; opacity: 1 !important; transition: none !important; }
  .sp-w { overflow: visible; }
  .r-l, .r-r, .r-fade, .r-clip { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .r-clip > * { clip-path: none !important; transition: none !important; }
  .hero-media { top: 0; height: 100%; }
  .timeline::after { transform: scaleY(1); }
}

/* ==========================================================================
   MOTION LAYER 2 — text
   Headings already reveal word by word (section 1). This extends the same
   idea outward: the supporting copy, the eyebrow labels, the accent phrases,
   the pull quotes and the big figures. Every effect is transform/opacity
   only, so nothing reflows, and every one is switched off at the foot of
   this file under prefers-reduced-motion.
   ========================================================================== */

/* ---- lede copy: same word rise as a heading, but faster and shallower ---- */
.sp-soft .sp-i {
  transform: translateY(70%);
  transition: transform .72s var(--ease), opacity .5s var(--ease);
  transition-delay: var(--d, 0s);
}
.sp-soft.in .sp-i { transform: none; opacity: 1; }

/* ---- eyebrow labels: the rule draws, the tracking settles --------------- */
.r .eyebrow, .r-l .eyebrow, .r-r .eyebrow, .r-fade .eyebrow {
  letter-spacing: .30em;
  transition: letter-spacing 1.1s var(--ease) .12s;
}
.r.in .eyebrow, .r-l.in .eyebrow, .r-r.in .eyebrow, .r-fade.in .eyebrow { letter-spacing: .16em; }

.r .eyebrow::before, .r .eyebrow::after,
.r-l .eyebrow::before, .r-r .eyebrow::before, .r-fade .eyebrow::before {
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease) .18s;
}
.r.in .eyebrow::before, .r.in .eyebrow::after,
.r-l.in .eyebrow::before, .r-r.in .eyebrow::before, .r-fade.in .eyebrow::before { transform: scaleX(1); }

/* ---- pull quotes: the mark scales in, the rule draws down --------------- */
.r .pull::before, .r-img .pull::before, .stagger .pull::before {
  opacity: 0; transform: scale(.7) translateY(10px);
  transition: opacity .8s var(--ease) .35s, transform 1s var(--ease) .35s;
}
.r.in .pull::before, .r-img.in .pull::before, .stagger.in .pull::before { opacity: 1; transform: none; }

.r .quote, .stagger .quote { border-left-color: transparent; }
.r .quote::after, .stagger .quote::after {
  content: ''; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform 1.1s var(--ease) .2s;
}
.r.in .quote::after, .stagger.in .quote::after { transform: scaleY(1); }

/* ---- big figures: the number arrives after its label ------------------- */
.stats.stagger > * .k { opacity: 0; transform: translateY(16px); }
.stats.stagger.in > * .k {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.stats.stagger.in > *:nth-child(1) .k { transition-delay: .16s }
.stats.stagger.in > *:nth-child(2) .k { transition-delay: .26s }
.stats.stagger.in > *:nth-child(3) .k { transition-delay: .36s }
.stats.stagger.in > *:nth-child(4) .k { transition-delay: .46s }

/* ---- numbered rules: the index pops ahead of its text ------------------ */
.list-rules.stagger > * .n { opacity: 0; transform: translateY(10px) scale(.92); }
.list-rules.stagger.in > * .n {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.list-rules.stagger.in > *:nth-child(1) .n { transition-delay: .14s }
.list-rules.stagger.in > *:nth-child(2) .n { transition-delay: .22s }
.list-rules.stagger.in > *:nth-child(3) .n { transition-delay: .30s }
.list-rules.stagger.in > *:nth-child(4) .n { transition-delay: .38s }
.list-rules.stagger.in > *:nth-child(5) .n { transition-delay: .46s }
.list-rules.stagger.in > *:nth-child(6) .n { transition-delay: .54s }
.list-rules.stagger.in > *:nth-child(7) .n { transition-delay: .62s }
.list-rules.stagger.in > *:nth-child(8) .n { transition-delay: .70s }
.list-rules.stagger.in > *:nth-child(9) .n { transition-delay: .78s }
.list-rules.stagger.in > *:nth-child(10) .n { transition-delay: .86s }

/* ---- tables: rows settle in sequence ----------------------------------- */
/* Scoped to .r, which the script adds: a table the script never reached
   stays fully visible instead of being left at opacity 0. */
.table-wrap.r tbody tr { opacity: 0; transform: translateY(10px); }
.table-wrap.r.in tbody tr {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease), transform .7s var(--ease);
}
.table-wrap.r.in tbody tr:nth-child(1) { transition-delay: .06s }
.table-wrap.r.in tbody tr:nth-child(2) { transition-delay: .12s }
.table-wrap.r.in tbody tr:nth-child(3) { transition-delay: .18s }
.table-wrap.r.in tbody tr:nth-child(4) { transition-delay: .24s }
.table-wrap.r.in tbody tr:nth-child(5) { transition-delay: .30s }
.table-wrap.r.in tbody tr:nth-child(6) { transition-delay: .36s }
.table-wrap.r.in tbody tr:nth-child(7) { transition-delay: .42s }
.table-wrap.r.in tbody tr:nth-child(n+8) { transition-delay: .48s }

/* ==========================================================================
   MOTION LAYER 3 — surfaces on hover
   A straight 2D lift, nothing more. An earlier version tilted these in 3D
   toward the pointer; perspective() plus a rotation forces the text onto a
   composited layer and resamples it, which reads as a blur on hover. A whole
   number of pixels on one axis keeps every glyph on the pixel grid.
   ========================================================================== */
/* ---- richer card entrance: rise, settle out of a slight scale ----------- */
.grid.stagger > .card,
.incl-grid.stagger > .incl {
  transform: translateY(26px) scale(.985);
}
.grid.stagger.in > .card,
.incl-grid.stagger.in > .incl {
  transform: none;
  transition: opacity var(--dur) var(--ease), transform 1.05s var(--ease);
}

/* ---- icons: a small turn as the card is entered ------------------------- */
.card .ico, .ind > .ico {
  transition: transform .55s var(--ease), background .45s var(--ease-soft), color .45s var(--ease-soft);
}
.card:hover .ico { transform: rotate(-6deg) scale(1.08); background: var(--accent); color: #fff; }
.card.navy:hover .ico { background: rgba(255,255,255,.16); color: #fff; }
.ind:hover > .ico { transform: translateY(-3px) scale(1.08); }

/* ---- process steps: the connector draws, then the dots land ------------- */
.steps.stagger::before { transform: scaleX(0); transform-origin: left; transition: transform 1.5s var(--ease); }
.steps.stagger.in::before { transform: scaleX(1); }
.steps.stagger > .step .dot { opacity: 0; transform: scale(.6); }
.steps.stagger.in > .step .dot {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .7s cubic-bezier(.2, 1.5, .4, 1);
}
.steps.stagger.in > .step:nth-child(1) .dot { transition-delay: .20s }
.steps.stagger.in > .step:nth-child(2) .dot { transition-delay: .34s }
.steps.stagger.in > .step:nth-child(3) .dot { transition-delay: .48s }
.steps.stagger.in > .step:nth-child(4) .dot { transition-delay: .62s }
.steps.stagger.in > .step:nth-child(5) .dot { transition-delay: .76s }
.step .dot { transition: transform .5s var(--ease), border-color .4s, color .4s; }
.step:hover .dot { transform: scale(1.12); border-color: var(--accent); }

/* ---- timeline: each marker snaps to the spine as it is read ------------- */
.timeline.stagger > .tl::before { transform: scale(0); transition: transform .6s cubic-bezier(.2, 1.5, .4, 1); }
.timeline.stagger.in > .tl::before { transform: scale(1); }
.timeline.stagger.in > .tl:nth-child(1)::before { transition-delay: .18s }
.timeline.stagger.in > .tl:nth-child(2)::before { transition-delay: .30s }
.timeline.stagger.in > .tl:nth-child(3)::before { transition-delay: .42s }
.timeline.stagger.in > .tl:nth-child(4)::before { transition-delay: .54s }
.timeline.stagger.in > .tl:nth-child(5)::before { transition-delay: .66s }
.timeline.stagger.in > .tl:nth-child(6)::before { transition-delay: .78s }
.tl { transition: transform .5s var(--ease); }
.tl:hover { transform: translateX(4px); }

/* ==========================================================================
   MOTION LAYER 4 — site-wide transitions
   ========================================================================== */

/* ---- nav: an underline sweeps out from the left on hover ---------------- */
.nav a::before {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.nav a:hover::before { transform: scaleX(1); }
.nav a[aria-current="page"]::before { display: none; }   /* it already has a rule */

/* ---- buttons: the arrow leads the way ---------------------------------- */
.btn svg { transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

/* ---- links: the rule wipes rather than switching on -------------------- */
.link { position: relative; border-bottom-color: transparent !important; }
.link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease);
}
.link:hover::after { transform: scaleX(1); }

/* ---- footer: the columns arrive in sequence ---------------------------- */
.site-footer .top.m-rise > * { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.site-footer .top.m-rise.in > * { opacity: 1; transform: none; }
.site-footer .top.m-rise.in > *:nth-child(1) { transition-delay: .04s }
.site-footer .top.m-rise.in > *:nth-child(2) { transition-delay: .14s }
.site-footer .top.m-rise.in > *:nth-child(3) { transition-delay: .24s }
.site-footer .top.m-rise.in > *:nth-child(4) { transition-delay: .34s }
.site-footer li a { transition: color .3s, transform .35s var(--ease); display: inline-block; }
.site-footer li a:hover { transform: translateX(3px); }

/* ---- images: settle out of a slight scale, then track the pointer ------- */
.split .img, .page-hero .media { overflow: hidden; }
.mat .img img, .ind-photo img, .strip .img img { will-change: transform; }

/* ---- drawer: the panel slides its links in ----------------------------- */
.drawer.open a.item { transition: opacity .5s var(--ease), transform .6s var(--ease); }

/* ==========================================================================
   Reduced motion — everything added in layers 2 to 4 is switched off here.
   The page keeps every final state; it simply arrives there instantly.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sp-soft .sp-i { transform: none !important; opacity: 1 !important; transition: none !important; }

  .r .eyebrow, .r-l .eyebrow, .r-r .eyebrow, .r-fade .eyebrow { letter-spacing: .16em !important; transition: none !important; }
  .r .eyebrow::before, .r .eyebrow::after,
  .r-l .eyebrow::before, .r-r .eyebrow::before, .r-fade .eyebrow::before { transform: none !important; transition: none !important; }

  .r .pull::before, .r-img .pull::before, .stagger .pull::before { opacity: 1 !important; transform: none !important; transition: none !important; }
  .r .quote, .stagger .quote { border-left-color: var(--accent); }
  .r .quote::after, .stagger .quote::after { transform: scaleY(1) !important; transition: none !important; }

  .stats.stagger > * .k,
  .list-rules.stagger > * .n,
  .table-wrap.r tbody tr { opacity: 1 !important; transform: none !important; transition: none !important; }

  .grid.stagger > .card, .incl-grid.stagger > .incl { transform: none !important; }
  .card .ico, .ind > .ico, .card:hover .ico, .ind:hover > .ico { transform: none !important; transition: none !important; }

  .steps.stagger::before { transform: scaleX(1) !important; transition: none !important; }
  .steps.stagger > .step .dot, .step:hover .dot { opacity: 1 !important; transform: none !important; transition: none !important; }
  .timeline.stagger > .tl::before { transform: scale(1) !important; transition: none !important; }
  .tl, .tl:hover { transform: none !important; transition: none !important; }

  .nav a::before { display: none !important; }
  .btn:hover svg { transform: none !important; }
  .link::after { display: none !important; }
  .link { border-bottom-color: transparent !important; }
  .link:hover { border-bottom-color: currentColor !important; }

  .site-footer .top.m-rise > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .site-footer li a:hover { transform: none !important; }
}

/* ==========================================================================
   Figures: a gauge bar fills under each number as it counts up.
   Carried over from the animation bundle, which has been removed.
   ========================================================================== */
.gauge {
  display: block; height: 2px; margin-top: 14px; border-radius: 2px;
  background: var(--line); overflow: hidden;
}
.gauge i {
  display: block; height: 100%; background: var(--em);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.6s var(--ease) .15s;
}
.gauge.in i { transform: scaleX(var(--g, .8)); }
.navy .gauge, .hero .gauge { background: var(--navy-line); }
.navy .gauge i, .hero .gauge i { background: #63ADEA; }

/* the reading progress rail picks up the heading accent */
.progress { background: var(--em); }

@media (prefers-reduced-motion: reduce) {
  .gauge i { transform: scaleX(var(--g, .8)); transition: none; }
}