/* ==========================================================================
   textures.css — TorqueFusion
   ---------------------------------------------------------------------------
   Every page gets its own background texture, chosen from what that page is
   actually about, so the surface carries meaning instead of being decoration:

     tex-home      dot-and-line lattice from a kolam — the drawn threshold
                   pattern, redrawn on a drafting grid
     tex-actuator  concentric arcs and radial ticks — a rotational part seen
                   end-on, which is what the whole page is about
     tex-vision    a detection field: scanning rows and corner brackets, the
                   way a machine-vision system sees a scene
     tex-company   jaali — the pierced stone screen of Mughal architecture,
                   set out on an eight-fold geometric construction
     tex-contact   isometric drafting paper

   All of them sit at very low opacity behind everything, masked so they fade
   out toward the middle of the page and never fight the text.
   ========================================================================== */

.tex {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .74;
}
/* Only lift the page sections above the texture. A blanket rule here also
   overrides position:fixed on the nav and the mobile menu, which drops them
   into normal flow and pushes the whole page down. */
body > section,
body > footer,
body > main,
body > .wrap { position: relative; z-index: 1; }

.tex::before,
.tex::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* fade the pattern away behind the middle of the screen where copy sits */
.tex::before {
  -webkit-mask-image: radial-gradient(ellipse 74% 62% at 50% 45%, transparent 12%, #000 88%);
  mask-image: radial-gradient(ellipse 74% 62% at 50% 45%, transparent 12%, #000 88%);
}

/* --- home: kolam lattice on a drafting grid ----------------------------- */
.tex-home::before {
  background-image:
    radial-gradient(circle at 26px 26px, rgba(159,182,196,.30) 1.6px, transparent 1.7px),
    radial-gradient(circle at 26px 26px, rgba(124,107,240,.16) 7px, transparent 7.8px),
    linear-gradient(rgba(255,255,255,.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.030) 1px, transparent 1px);
  background-size: 52px 52px, 52px 52px, 52px 52px, 52px 52px;
}
.tex-home::after {
  background-image:
    repeating-linear-gradient(45deg, transparent 0 24px, rgba(156,194,172,.055) 24px 25px),
    repeating-linear-gradient(-45deg, transparent 0 24px, rgba(178,100,58,.05) 24px 25px);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, transparent 30%, #000 95%);
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, transparent 30%, #000 95%);
}

/* --- actuators: concentric arcs, a rotating part seen end-on ------------- */
.tex-actuator::before {
  background-image:
    repeating-radial-gradient(circle at 78% 30%, transparent 0 46px, rgba(159,182,196,.10) 46px 47px),
    repeating-radial-gradient(circle at 78% 30%, transparent 0 184px, rgba(178,100,58,.09) 184px 185.5px),
    repeating-radial-gradient(circle at 14% 82%, transparent 0 38px, rgba(156,194,172,.085) 38px 39px);
}
.tex-actuator::after {
  background-image:
    repeating-conic-gradient(from 0deg at 78% 30%, rgba(255,255,255,.05) 0deg 0.5deg, transparent 0.5deg 7.5deg);
  -webkit-mask-image: radial-gradient(circle 460px at 78% 30%, #000 20%, transparent 78%);
  mask-image: radial-gradient(circle 460px at 78% 30%, #000 20%, transparent 78%);
}

/* --- i-VISION: a detection field ---------------------------------------- */
.tex-vision::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(34,211,238,.035) 0 1px, transparent 1px 6px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: auto, 96px 96px, 96px 96px;
}
.tex-vision::after {
  /* corner brackets on a grid, like tracked bounding boxes */
  background-image:
    linear-gradient(90deg, rgba(34,211,238,.13) 12px, transparent 12px),
    linear-gradient(rgba(34,211,238,.13) 12px, transparent 12px);
  background-size: 232px 232px;
  background-position: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 70% 58% at 50% 46%, transparent 18%, #000 92%);
  mask-image: radial-gradient(ellipse 70% 58% at 50% 46%, transparent 18%, #000 92%);
}

/* --- company: jaali screen ---------------------------------------------- */
.tex-company::before {
  background-image:
    repeating-conic-gradient(from 22.5deg at 50% 50%,
      rgba(255,255,255,.05) 0deg 1deg, transparent 1deg 45deg),
    radial-gradient(circle at 50% 50%, transparent 26px, rgba(224,138,60,.10) 26px, transparent 27.5px),
    radial-gradient(circle at 50% 50%, transparent 44px, rgba(156,194,172,.09) 44px, transparent 45.5px),
    radial-gradient(circle at 0 0, transparent 26px, rgba(255,255,255,.045) 26px, transparent 27.5px);
  background-size: 132px 132px;
}

/* --- contact: isometric drafting paper ---------------------------------- */
.tex-contact::before {
  background-image:
    repeating-linear-gradient(60deg,  rgba(255,255,255,.035) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.035) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg,   rgba(124,107,240,.06)  0 1px, transparent 1px 46px);
}

@media (max-width: 900px) {
  .tex { opacity: .58; }
}
@media (prefers-reduced-motion: reduce) {
  .tex { opacity: .5; }
}

/* ==========================================================================
   ROBOT DECALS
   Ghosted general-arrangement views in the empty margins — the kind an
   engineer leaves on a drawing sheet. Set off-axis so they break the grid,
   but only by a few degrees: never jaunty.
   ========================================================================== */
.decal {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--page);
  opacity: .1;
  animation: decal-drift var(--drift, 9s) ease-in-out infinite alternate;
}
.decal svg { width: 100%; height: auto; display: block; overflow: visible; }
.decal svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* `translate` is its own property, so the drift never fights the inline rotate */
@keyframes decal-drift {
  from { translate: 0 0; }
  to   { translate: 0 -16px; }
}

/* ==========================================================================
   CURSOR SPOTLIGHT
   Sits behind every section, so it lifts the texture on open background and
   is masked out wherever a panel or card has its own fill.
   ========================================================================== */
.spotlight {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,.19), rgba(255,255,255,.085) 34%,
      rgba(255,255,255,.03) 58%, transparent 72%);
  mix-blend-mode: plus-lighter;
  transition: opacity .5s var(--ease);
}

/* A second wash carrying the page accent, offset and slower to follow, so the
   pointer leaves a faint colour trail rather than a plain grey blob. */
.spotlight--tint {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(680px circle at var(--tx, 50%) var(--ty, 50%),
      color-mix(in srgb, var(--page) 26%, transparent),
      color-mix(in srgb, var(--page) 8%, transparent) 42%, transparent 66%);
  mix-blend-mode: plus-lighter;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .spotlight { display: none; }
  .decal { animation: none; }
}
@media (max-width: 900px) {
  .decal { opacity: .07; }
}

/* ==========================================================================
   COLOUR IN MOTION
   The palette was sitting still. These give it something to do without
   turning the page into a light show.
   ========================================================================== */

/* scroll progress runs the whole palette */
.scrollbar {
  background: linear-gradient(90deg,
    var(--ice), var(--violet), var(--cyan), var(--amber),
    var(--rust-lt), var(--sage), var(--ice));
  background-size: 320% 100%;
  animation: hue-run 14s linear infinite;
}
@keyframes hue-run { to { background-position: -320% 0; } }

/* a lit segment travels along each section divider, in the page accent */
.rule-top:not(.grid-bg) { position: relative; }
.rule-top:not(.grid-bg)::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 1px;
  width: 24%;
  background: linear-gradient(90deg, transparent, var(--page), transparent);
  opacity: .8;
  animation: rule-run 11s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rule-run {
  0%   { transform: translateX(-40%); }
  50%  { transform: translateX(360%); }
  100% { transform: translateX(-40%); }
}

/* the eyebrow tick breathes in the page accent */
.eyebrow::before { animation: tick-pulse 4.5s ease-in-out infinite; }
@keyframes tick-pulse {
  0%, 100% { width: 30px; opacity: .55; }
  50%      { width: 44px; opacity: 1; }
}

/* cards pick up the page accent on hover instead of plain white */
.card:hover::before, .card:hover::after { border-color: var(--page); }
.card::before, .card::after { border-color: var(--page); }

/* cursor ring takes the page accent */
.cur-ring.is-lg { border-color: var(--page); }

/* nav underline in the page accent */
.nav__links a::after { background: var(--page); }

/* the outlined words in the hero drift slowly through the palette */
.hero__title .hl { animation: hl-hue 22s ease-in-out infinite; }
@keyframes hl-hue {
  0%,100% { -webkit-text-stroke-color: #FFFFFF; }
  20%     { -webkit-text-stroke-color: var(--ice); }
  40%     { -webkit-text-stroke-color: var(--violet); }
  60%     { -webkit-text-stroke-color: var(--cyan); }
  80%     { -webkit-text-stroke-color: var(--amber); }
}
@media (prefers-reduced-motion: reduce) {
  .scrollbar, .rule-top::before, .eyebrow::before, .hero__title .hl { animation: none; }
}