/**
 * AI-Tomation - motion and depth layer
 *
 * Loaded AFTER style.css and only overrides what it needs to. Kept as a separate file so
 * the whole treatment can be pulled in one line if it is ever not wanted.
 *
 * House rules being followed here, learned the hard way on other builds:
 *   - No backdrop-filter glass, no big radial-gradient washes, no oversized letter
 *     spacing. Those four together are what makes a page read as machine-generated, and
 *     this site's whole pitch is that we build software for a living.
 *   - Colour stays exactly as it was: #FC1617 on #1A1A1A. Nothing new is introduced.
 *   - Hover never changes an element's footprint, so nothing reflows under the cursor.
 *   - Every animation is transform or opacity only.
 */

/* ==========================================================================
   Icons
   ========================================================================== */

.ait-icon {
  display: block;
  overflow: visible;
}

/* ==========================================================================
   Depth stage
   --------------------------------------------------------------------------
   The stage owns the perspective, the inner element owns the rotation, and the
   children sit at different translateZ. That separation is what makes it read as
   depth rather than as a skewed picture.
   ========================================================================== */

.ait-depth {
  perspective: 1100px;
  perspective-origin: 50% 50%;
}

.ait-depth__inner {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

.ait-depth__inner img {
  position: relative;
  display: block;
  transform: translateZ(28px);
  border-radius: var(--ait-radius-lg);
}

/* The glow sits BEHIND the picture and moves less than it does, which is what your eye
   reads as distance. It is clipped to the image box so it never becomes a halo. */
.ait-depth__glow {
  position: absolute;
  inset: 6% 6% 0 6%;
  border-radius: 50%;
  background: rgba(252, 22, 23, 0.22);
  filter: blur(46px);
  transform: translateZ(-70px) scale(1.05);
  pointer-events: none;
}

/* A hairline frame in FRONT of the picture. Small detail, does most of the work: it
   gives the eye a near edge to compare the far edge against. */
.ait-depth__frame {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(252, 22, 23, 0.34);
  border-radius: var(--ait-radius-lg);
  transform: translateZ(52px);
  pointer-events: none;
}

/* Corner brackets, the same mechanical language as the background traces. */
.ait-depth__frame::before,
.ait-depth__frame::after {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ait-red);
  opacity: 0.85;
}

.ait-depth__frame::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
  border-radius: var(--ait-radius-lg) 0 0 0;
}

.ait-depth__frame::after {
  right: -1px;
  bottom: -1px;
  border-left: 0;
  border-top: 0;
  border-radius: 0 0 var(--ait-radius-lg) 0;
}

.hero__image .ait-depth__inner img,
.use-case__image .ait-depth__inner img {
  width: 100%;
  height: auto;
}

/* --- scroll-scrubbed sequences ---
   The poster is a real <img> so it lays the box out and is what non-JS visitors see. The
   canvas sits exactly on top and only becomes visible once frames have decoded, so there
   is never a moment of blank space where the picture should be. */

.ait-scrub .ait-depth__inner {
  position: relative;
}

.ait-scrub__poster {
  width: 100%;
  height: auto;
}

.ait-scrub__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(28px);
  border-radius: var(--ait-radius-lg);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.ait-scrub__canvas.is-ready {
  opacity: 1;
}

.hero__image .ait-scrub,
.hero__image .ait-scrub__poster {
  max-width: 550px;
  margin: 0 auto;
}

/* ==========================================================================
   Service cards
   --------------------------------------------------------------------------
   The old card was a grey rectangle with an emoji in it. What is added:
   a pointer-tracked light, a top edge that lights up, corner brackets that
   extend on hover, and an icon tile with a notched corner.
   ========================================================================== */

.service-card,
.step {
  --mx: 50%;
  --my: 0%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  cursor: default;
}

/* The light. Sized in px rather than % so it stays a light and never becomes a wash
   across the whole card. */
.service-card::before,
.step::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    260px circle at var(--mx) var(--my),
    rgba(252, 22, 23, 0.14),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.service-card:hover::before,
.step:hover::before {
  opacity: 1;
}

/* Top edge. Draws in from the left rather than fading, so it reads as a circuit
   energising rather than a generic hover state. */
.service-card::after,
.step::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ait-red), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.service-card:hover::after,
.step:hover::after {
  transform: scaleX(1);
}

.service-card:hover,
.step:hover {
  border-color: rgba(252, 22, 23, 0.55);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(252, 22, 23, 0.08);
}

/* --- the icon tile --- */

.service-card__icon {
  position: relative;
  width: 52px;
  height: 52px;
  color: var(--ait-red);
  background-color: rgba(252, 22, 23, 0.08);
  border: 1px solid rgba(252, 22, 23, 0.28);
  /* Notched corner. A square tile with one corner cut is a machined detail, and it is
     the cheapest way to stop this looking like every other rounded icon chip. */
  border-radius: var(--ait-radius) 0 var(--ait-radius) var(--ait-radius);
  clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.service-card:hover .service-card__icon {
  background-color: rgba(252, 22, 23, 0.16);
  border-color: rgba(252, 22, 23, 0.6);
  transform: translateY(-2px);
}

/* The strokes draw themselves in on hover. The dash length is deliberately larger than
   any path in the set, so every icon completes rather than repeating. */
.service-card .ait-icon [stroke],
.service-card .ait-icon path,
.service-card .ait-icon circle,
.service-card .ait-icon rect {
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
}

.service-card:hover .ait-icon path,
.service-card:hover .ait-icon circle,
.service-card:hover .ait-icon rect {
  animation: ait-draw 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes ait-draw {
  from { stroke-dashoffset: 200; }
  to   { stroke-dashoffset: 0; }
}

/* Solid dots must not be dashed, or the eyes vanish off the robot. */
.ait-icon [fill="currentColor"] {
  stroke-dasharray: none;
  animation: none !important;
}

/* --- corner bracket, drawn as background layers ---
   The card's ::before and ::after are already spent on the light and the top edge, so the
   bracket is two background gradients instead of a third element. It also means the whole
   thing animates by transitioning background-size, which is cheap. */

.service-card {
  --bkt: rgba(252, 22, 23, 0.3);
  background-image:
    linear-gradient(var(--bkt), var(--bkt)),
    linear-gradient(var(--bkt), var(--bkt));
  background-repeat: no-repeat;
  background-size: 18px 1px, 1px 18px;
  background-position: right 14px top 14px, right 14px top 14px;
  transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color var(--ait-transition),
              transform var(--ait-transition),
              box-shadow var(--ait-transition);
}

.service-card:hover {
  --bkt: rgba(252, 22, 23, 0.85);
  background-size: 34px 1px, 1px 34px;
}

/* --- the numbered steps use the same language --- */

.step__number {
  position: relative;
  z-index: 1;
}

/* --- stop the dead space ---
   In a three-column grid a stretched row is only as useful as its longest card, and the
   short ones were sitting in 40% empty grey. Letting each card hug its own content is
   what actually removes the "boring" rather than any amount of hover polish. */

.services-grid,
.services-overview {
  align-items: start;
}

/* --- cards arrive in sequence ---
   The grid already carries .fade-in and gets .is-visible from the existing observer, so
   this needs no new JavaScript.

   fill-mode is BACKWARDS, not BOTH. With `both` the animation's final transform keeps
   applying after it ends, and an animated transform outranks a normal declaration, so the
   hover lift silently stops working. */

.services-grid.is-visible .service-card,
.services-overview.is-visible .service-card,
.steps.is-visible .step {
  animation: ait-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes ait-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.services-grid.is-visible .service-card:nth-child(2),
.services-overview.is-visible .service-card:nth-child(2),
.steps.is-visible .step:nth-child(2) { animation-delay: 0.07s; }

.services-grid.is-visible .service-card:nth-child(3),
.services-overview.is-visible .service-card:nth-child(3),
.steps.is-visible .step:nth-child(3) { animation-delay: 0.14s; }

.services-grid.is-visible .service-card:nth-child(4),
.services-overview.is-visible .service-card:nth-child(4) { animation-delay: 0.21s; }

.services-grid.is-visible .service-card:nth-child(5) { animation-delay: 0.28s; }
.services-grid.is-visible .service-card:nth-child(6) { animation-delay: 0.35s; }
.services-grid.is-visible .service-card:nth-child(7) { animation-delay: 0.42s; }
.services-grid.is-visible .service-card:nth-child(8) { animation-delay: 0.49s; }
.services-grid.is-visible .service-card:nth-child(n + 9) { animation-delay: 0.56s; }

/* ==========================================================================
   Ada call to action
   --------------------------------------------------------------------------
   The section centres its icon with text-align, which worked while the icon was an
   emoji and stopped working the moment it became a block-level SVG. It needs auto
   margins, and at 28px it was a speck under a 2rem heading.
   ========================================================================== */

.ada-cta__icon .ait-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  color: var(--ait-red);
}

/* ==========================================================================
   Use cases
   --------------------------------------------------------------------------
   Left alone structurally. The images get the same depth treatment as the hero,
   which is enough to lift the page without rewriting content that works.
   ========================================================================== */

.use-case__image {
  overflow: visible;
}

/* ==========================================================================
   Accessibility and small screens
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ait-depth__inner {
    transform: none !important;
  }

  .service-card::after,
  .step::after {
    transition: none;
  }

  .service-card:hover .ait-icon path,
  .service-card:hover .ait-icon circle,
  .service-card:hover .ait-icon rect {
    animation: none;
  }

  .services-grid.is-visible .service-card,
  .services-overview.is-visible .service-card,
  .steps.is-visible .step {
    animation: none;
  }
}

/* Touch: no hover to trigger any of it, and a tilted image under a thumb is just a
   wobbly image. The frame and brackets stay, because those are static design. */
@media (pointer: coarse) {
  .ait-depth {
    perspective: none;
  }

  .ait-depth__inner {
    transform: none !important;
  }

  .ait-depth__inner img {
    transform: none;
  }

  .ait-depth__frame {
    transform: none;
  }

  .ait-depth__glow {
    transform: none;
    filter: blur(38px);
  }
}

@media (max-width: 768px) {
  .ait-depth__frame::before,
  .ait-depth__frame::after {
    width: 16px;
    height: 16px;
  }
}

/* ==========================================================================
   Deep links into a single demo
   --------------------------------------------------------------------------
   Each card carries an id so an email can link straight to one video. The site
   header is sticky, so without scroll-margin the browser parks the card exactly
   underneath it and the visitor lands on a video they cannot see.
   ========================================================================== */

.demo-card[id] {
  scroll-margin-top: 110px;
}