@charset "UTF-8";

/* ==========================================================================
   MetaCare India v2.0 — Motion & dimension

   The signature object is the coating stack: an exploded 3D cross-section
   of a real protective system (steel → primer → intermediate → topcoat).
   It is not decoration — it is a diagram of what the company sells, and it
   assembles itself as the visitor scrolls.

   Everything here animates transform and opacity only, so it stays on the
   compositor and holds 60fps on a mid-range Android. Everything here is
   also switched off wholesale under prefers-reduced-motion at the bottom
   of this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Scroll reveal
   Elements start displaced and settle when they enter the viewport.
   app.js adds .is-visible via IntersectionObserver.

   IMPORTANT: the *visible* state is the default. The hidden start state is
   scoped to `.js`, a class the inline head script sets before first paint.
   That way a failed, blocked or slow script leaves a fully readable page
   instead of a blank one — the animation is an enhancement, never a
   precondition for seeing the content.
   -------------------------------------------------------------------------- */

[data-reveal] {
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out),
    filter 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}

.js [data-reveal='up'] { transform: translate3d(0, 34px, 0); }
.js [data-reveal='down'] { transform: translate3d(0, -28px, 0); }
.js [data-reveal='left'] { transform: translate3d(-38px, 0, 0); }
.js [data-reveal='right'] { transform: translate3d(38px, 0, 0); }
.js [data-reveal='scale'] { transform: scale(.94); }
.js [data-reveal='blur'] { filter: blur(10px); transform: translate3d(0, 20px, 0); }

/* A card that rises and rotates in, as though being laid onto the page. */
.js [data-reveal='lay'] {
  transform: perspective(900px) rotateX(12deg) translate3d(0, 44px, 0);
  transform-origin: 50% 100%;
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  filter: none;
  will-change: auto;
}

/* Children stagger. The index is set inline as --i so the delay is data,
   not a pile of nth-child rules. */
[data-stagger] > * {
  --reveal-delay: calc(var(--i, 0) * 90ms);
}

/* --------------------------------------------------------------------------
   2. Headline reveal — words rise from behind a mask
   -------------------------------------------------------------------------- */

.reveal-text { display: block; }

.reveal-text__line {
  display: block;
  overflow: hidden;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}

.reveal-text__inner {
  display: block;
  transition: transform 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}

.js .reveal-text__inner { transform: translate3d(0, 105%, 0); }
.js .reveal-text.is-visible .reveal-text__inner { transform: translate3d(0, 0, 0); }

/* --------------------------------------------------------------------------
   3. The coating stack — the hero's 3D object
   -------------------------------------------------------------------------- */

.coating-scene {
  position: relative;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  display: grid;
  place-items: center;
  min-height: clamp(300px, 46vw, 480px);
  /* The scene is decorative; the layer labels carry the real information
     and are readable to a screen reader in the markup. */
}

.coating-stack {
  position: relative;
  width: min(78%, 380px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  /* Isometric resting attitude. app.js adds a small mouse-driven offset on
     top of this via --tilt-x / --tilt-y. */
  transform:
    rotateX(calc(58deg + var(--tilt-x, 0deg)))
    rotateZ(calc(-32deg + var(--tilt-y, 0deg)));
  transition: transform 500ms var(--ease-out);
}

.coating-layer {
  position: absolute;
  inset: 0;
  border-radius: 18px;
  transform-style: preserve-3d;
  /* Resting state is the assembled stack, so the diagram is correct with
     no JavaScript at all. */
  transform: translateZ(var(--z, 0px));
  opacity: 1;
  transition:
    transform 1100ms var(--ease-out),
    opacity 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 130ms);
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .75);
  border: 1px solid rgba(255, 255, 255, .18);
  display: grid;
  place-items: center;
}

/* With JS the layers start collapsed onto the substrate and separate as the
   hero enters view. */
.js .coating-layer {
  opacity: 0;
  transform: translateZ(0);
}

.js .coating-scene.is-visible .coating-layer {
  opacity: 1;
  transform: translateZ(var(--z, 0px));
}

/* Substrate: bare steel, the thing being protected. */
.coating-layer[data-layer='steel'] {
  --z: 0px;
  --i: 0;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 7px),
    linear-gradient(140deg, #46596B, #2B3947);
}

/* Primer: the oxide-toned coat that bonds to steel. */
.coating-layer[data-layer='primer'] {
  --z: 34px;
  --i: 1;
  background: linear-gradient(140deg, #B0512A, #7E3417);
}

/* Intermediate build coat. */
.coating-layer[data-layer='intermediate'] {
  --z: 68px;
  --i: 2;
  background: linear-gradient(140deg, var(--navy-500), var(--navy-700));
}

/* Topcoat: the finished surface, in brand steel blue. */
.coating-layer[data-layer='topcoat'] {
  --z: 102px;
  --i: 3;
  background: linear-gradient(140deg, #8AABCE, var(--steel-500));
}

/* Wet sheen travelling across the topcoat. */
.coating-layer[data-layer='topcoat']::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 62%);
  opacity: .8;
  animation: sheen-sweep 5.5s var(--ease-out) infinite;
}

@keyframes sheen-sweep {
  0%, 100% { transform: translate3d(-60%, -60%, 0); opacity: 0; }
  35% { opacity: .75; }
  70%, 100% { transform: translate3d(60%, 60%, 0); opacity: 0; }
}

/* Callout labels pinned to each layer, flattened out of the 3D rotation so
   the text stays upright and legible. */
.coating-label {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: .35rem .7rem;
  border-radius: var(--r-pill);
  background: rgba(7, 23, 38, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 600ms var(--ease-out);
  transition-delay: calc(700ms + var(--i, 0) * 130ms);
  pointer-events: none;
}

.js .coating-label { opacity: 0; }
.js .coating-scene.is-visible .coating-label { opacity: 1; }

.coating-label__swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }

@media (max-width: 640px) {
  /* On a phone the labels would collide with the object; the legend below
     the scene carries the same information instead. */
  .coating-label { display: none; }
}

/* --------------------------------------------------------------------------
   4. Tilt — cards that respond to the pointer
   app.js writes --rx / --ry from the pointer position.
   -------------------------------------------------------------------------- */

[data-tilt] {
  transform-style: preserve-3d;
  transform:
    perspective(900px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg));
  transition: transform 400ms var(--ease-out);
}

[data-tilt].is-tilting { transition: transform 80ms linear; }

/* Content that lifts off the card face while it tilts. */
[data-tilt] [data-tilt-layer] {
  transform: translateZ(var(--depth, 30px));
  transition: transform 400ms var(--ease-out);
}

/* A specular highlight that follows the pointer. */
[data-tilt] .tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, .28),
    transparent 45%
  );
  transition: opacity 300ms var(--ease-out);
}

[data-tilt].is-tilting .tilt-glare { opacity: 1; }

/* Pointer-following glow used on dark cards. */
.spotlight {
  position: relative;
  overflow: hidden;
}

.spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--steel-500) 26%, transparent),
    transparent 60%
  );
  transition: opacity var(--d-mid) var(--ease-out);
}

.spotlight:hover::before { opacity: 1; }

/* --------------------------------------------------------------------------
   5. Marquee — an endless band of sectors / accreditations
   -------------------------------------------------------------------------- */

.marquee {
  position: relative;
  overflow: hidden;
  /* Fades the ends so items enter and leave rather than being chopped. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: var(--s-7);
  animation: marquee-scroll var(--marquee-duration, 38s) linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

/* The track holds two identical runs; translating by exactly -50% makes the
   loop seamless. */
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.marquee--reverse .marquee__track { animation-direction: reverse; }

.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.band-deep .marquee__item { color: var(--deep-ink-2); }
.marquee__item svg { width: 20px; height: 20px; color: var(--steel-500); flex: none; }

/* --------------------------------------------------------------------------
   6. Parallax & scroll-linked chrome
   -------------------------------------------------------------------------- */

[data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
}

/* Reading-progress bar at the very top of the viewport. */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 120;
  background: transparent;
  pointer-events: none;
}

.scroll-progress__bar {
  height: 100%;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, var(--navy-600), var(--steel-500), var(--oxide));
}

/* --------------------------------------------------------------------------
   7. Ambient background texture
   A faint drifting grid, like a survey overlay on a hull plate. Pure CSS,
   no image request.
   -------------------------------------------------------------------------- */

.grid-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000, transparent);
  animation: grid-drift 28s linear infinite;
}

@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 64px 64px, 64px 64px; }
}

/* Soft coloured orbs behind dark sections. */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: .4;
}

.glow--steel { background: var(--steel-500); }
.glow--navy { background: var(--navy-500); }
.glow--oxide { background: var(--oxide); opacity: .22; }

.glow--drift { animation: glow-drift 18s ease-in-out infinite alternate; }

@keyframes glow-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(40px, -30px, 0) scale(1.14); }
}

/* --------------------------------------------------------------------------
   8. Small effects
   -------------------------------------------------------------------------- */

/* Counter digits settle rather than snapping. */
.counter { font-variant-numeric: tabular-nums; }

/* Underline that grows out from the centre. */
.u-grow {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: 50% 100%;
  transition: background-size var(--d-mid) var(--ease-out);
}

.u-grow:hover { background-size: 100% 2px; }

/* A soft pulse for anything asking for attention. */
.pulse { animation: pulse-ring 2.4s var(--ease-out) infinite; }

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--verdigris) 45%, transparent); }
  70% { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: skeleton-shift 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
  color: transparent;
}

@keyframes skeleton-shift {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}

/* Spinner */
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  flex: none;
}

@keyframes spin { to { rotate: 360deg; } }

/* Scroll cue in the hero */
.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--deep-ink-2);
  text-decoration: none;
}

.scroll-cue__rail {
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--steel-500), transparent);
  position: relative;
  overflow: hidden;
}

.scroll-cue__rail::after {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 40%;
  background: #fff;
  animation: cue-fall 2.2s var(--ease-out) infinite;
}

@keyframes cue-fall {
  from { transform: translateY(-100%); opacity: 0; }
  30% { opacity: 1; }
  to { transform: translateY(250%); opacity: 0; }
}

/* Page transition veil */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--deep-bg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}

.page-veil.is-active { opacity: 1; }

/* --------------------------------------------------------------------------
   9. Reduced motion
   One switch that disables every effect above. Content still reveals — it
   simply arrives without travelling.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .reveal-text__inner { transform: none; }

  .coating-layer {
    opacity: 1;
    transform: translateZ(var(--z, 0px));
  }

  .coating-label { opacity: 1; }

  .marquee__track { animation: none; transform: none; }

  [data-tilt] { transform: none; }
  [data-tilt] [data-tilt-layer] { transform: none; }

  [data-parallax] { transform: none; }

  .glow--drift { animation: none; }
  .grid-field { animation: none; }
}