/* Durable shell-only adaptation. Captured runtime bundles remain byte-identical. */

/* ---------------------------------------------------------------------------
   STEP-012 — AmirahCo brand palette
   ---------------------------------------------------------------------------
   The captured component CSS consistently reads --color-yellow for its primary
   accent. Repoint that existing contract instead of restyling 45 consumers one
   at a time. --color-green is aligned as well so adaptation-owned focus rings
   cannot drift into a second green. Electric blue is registered for future
   semantic secondary states, but is intentionally unused in this pass.
   --------------------------------------------------------------------------- */
:root {
  --amirahco-accent: #15c180;
  --amirahco-electric: #45b3ff;
  --color-yellow: #15c180;
  --color-yellow-2: #0e8558;
  --color-green: #15c180;
}

/* The hero node field is inline SVG rendered by the hash-protected bundle.
   Attribute values stay untouched for animation compatibility; only their
   computed paint moves to the AmirahCo accent. The red human checkpoint remains
   red because it communicates a different state. */
.home-hero svg [fill="#EBFC72"] {
  fill: var(--amirahco-accent);
}

.home-hero svg [stroke="#EBFC72"] {
  stroke: var(--amirahco-accent);
}

/* STEP-013A/B-R1 - deepen both animated Vail layers with one non-destructive
   emerald grade. The captured opacity, mask, scale(-1), and scroll timeline
   continue to own the transition; filter changes only the rendered colour. */
.home-hero .map > img.img {
  filter: grayscale(1) sepia(1) hue-rotate(95deg) saturate(2.1) contrast(1.15) brightness(0.58);
}
.header > .logo {
  align-items: center;
  display: inline-flex;
  font-size: 0;
  gap: 0.65rem;
  margin-block: -10px;
  min-height: 44px;
  padding-block: 10px;
}

.header > .logo::before {
  background: url("/__adaptation/assets/amirahco-logo.png") center / contain no-repeat;
  content: "";
  flex: 0 0 2.1rem;
  height: 2.1rem;
  width: 2.1rem;
}

.header > .logo::after {
  content: "AmirahCo";
  font-size: 1.6rem;
  line-height: 1;
}

@media (max-width: 600px) {
  .header > .logo {
    gap: 0.7rem;
  }

  .header > .logo::before {
    flex-basis: 2.3rem;
    height: 2.3rem;
    width: 2.3rem;
  }

  .header > .logo::after {
    font-size: 1.7rem;
  }
}

/* ---------------------------------------------------------------------------
   STEP-019A - footer wordmark pointer distortion
   ---------------------------------------------------------------------------
   The captured A-14 animation continues to transform svg.logo. On desktop the
   WebGL layer follows that live border box and renders both the emerald resting
   mark and white distorted mark on one surface. The SVG stays in the DOM as the
   accessible animation target and as the mobile/reduced-motion/WebGL fallback.
   --------------------------------------------------------------------------- */
.amirahco-wordmark-stage {
  position: relative;
}

.amirahco-wordmark-distortion {
  display: none;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .amirahco-wordmark-stage > svg.logo {
    pointer-events: bounding-box;
  }

  .amirahco-wordmark-distortion {
    display: block;
  }

  .amirahco-wordmark-stage.is-amirahco-wordmark-canvas-ready > svg.logo {
    opacity: 0 !important;
  }
}

.header > .menu-button {
  display: none !important;
}

/* MAP-014 / STEP-014A-C — video-first Values media.
   The original img stays in-flow and remains the A-08 GSAP target. The overlay mirrors that exact
   inline transform, so the compiled parallax timeline—not adaptation code—remains authoritative. */
.values .asset:has(> .amirahco-values-video) {
  position: relative;
}

.values .asset > .amirahco-values-video-proxy {
  opacity: 0;
}

.values .asset > .amirahco-values-video {
  /*
     STEP-016B. A-08 moves media from roughly -10% to +10% on the Y axis. A video that is exactly
     as tall as the asset exposes the asset's black fallback at either travel extreme. The 15%
     overscan on both sides preserves the captured transform while keeping moving pixels behind
     the full irregular mask for the entire scrub.
  */
  height: 130%;
  inset: -15% 0 auto;
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

/*
   STEP-016B. The second and third Projects diagrams contain information near the corners that the
   captured asymmetric masks intentionally remove. Keep the mask shapes, alternating layout, and
   A-08 parallax, but establish a content-safe inset inside the moving image. The black image and
   asset backgrounds match, so the inset reads as deliberate breathing room rather than a border.
*/
#projects .block:nth-child(2) .asset > img.img,
#projects .block:nth-child(3) .asset > img.img {
  background: var(--color-black);
  box-sizing: border-box;
  object-fit: contain;
}

#projects .block:nth-child(2) .asset > img.img {
  padding: 5% 12% 12% 7%;
}

#projects .block:nth-child(3) .asset > img.img {
  padding: 5% 7% 12% 12%;
}

/*
   STEP-016C. The five remaining code-native diagrams use the same full-canvas information layout
   as AFA and CJSON. Under `object-fit: cover`, A-08's vertical travel moves their headings and
   footer notes behind the captured asymmetric masks. Contain each diagram and reserve travel plus
   cutout space without changing the mask, DOM, source SVG, or GSAP transform.
*/
#how-we-work .block:nth-child(2) .asset > img.img,
#how-we-work .block:nth-child(3) .asset > img.img,
#safer-ai .block:nth-child(1) .asset > img.img,
#safer-ai .block:nth-child(2) .asset > img.img,
#safer-ai .block:nth-child(3) .asset > img.img {
  background: var(--color-black);
  box-sizing: border-box;
  object-fit: contain;
}

#how-we-work .block:nth-child(2) .asset > img.img,
#safer-ai .block:nth-child(2) .asset > img.img {
  padding: 10% 12% 12% 8%;
}

#how-we-work .block:nth-child(3) .asset > img.img,
#safer-ai .block:nth-child(3) .asset > img.img {
  padding: 10% 8% 12% 12%;
}

#safer-ai .block:nth-child(1) .asset > img.img {
  padding: 10% 8% 12% 12%;
}

/* ---------------------------------------------------------------------------
   STEP-016D - responsive diagram safe area
   ---------------------------------------------------------------------------
   A-08 moves each Values image by roughly 10% of its own height. The earlier
   5-10% top padding could therefore reach zero at a parallax extreme, letting
   the irregular frame cover diagram labels on compact viewports. Reserve more
   than the full travel distance on both block edges, and use clamp() so the
   inset grows with the frame without becoming excessive on desktop.

   These rules change only the image's internal content box. The captured asset
   mask, alternating layout, DOM, and GSAP-authored transform remain unchanged.
   The asymmetric inline padding follows the existing left/right frame pattern.
   --------------------------------------------------------------------------- */
#projects .block:nth-child(2) .asset > img.img,
#projects .block:nth-child(3) .asset > img.img,
#how-we-work .block:nth-child(2) .asset > img.img,
#how-we-work .block:nth-child(3) .asset > img.img,
#safer-ai .block:nth-child(1) .asset > img.img,
#safer-ai .block:nth-child(2) .asset > img.img,
#safer-ai .block:nth-child(3) .asset > img.img {
  padding-block: clamp(4rem, 16%, 8rem) clamp(5rem, 18%, 9rem);
}

#projects .block:nth-child(2) .asset > img.img,
#how-we-work .block:nth-child(2) .asset > img.img,
#safer-ai .block:nth-child(2) .asset > img.img {
  padding-inline: clamp(3.5rem, 12%, 7rem) clamp(4.5rem, 16%, 9rem);
}

#projects .block:nth-child(3) .asset > img.img,
#how-we-work .block:nth-child(3) .asset > img.img,
#safer-ai .block:nth-child(1) .asset > img.img,
#safer-ai .block:nth-child(3) .asset > img.img {
  padding-inline: clamp(4.5rem, 16%, 9rem) clamp(3.5rem, 12%, 7rem);
}

/* The captured detail panel is rectangular rather than masked. Contain the same two diagrams so
   every label remains visible at both desktop and mobile panel dimensions. */
.panel .base-image[src*="afa-architecture-v1.svg"],
.panel .base-image[src*="cjson-framework-v1.svg"] {
  background: var(--color-black);
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .values .asset > .amirahco-values-video {
    transform: none !important;
  }
}

/* Detail-panel trigger on Projects cards. It is a consistent secondary row beneath
   the card CTA, because the CTA widths differ enough that a side-by-side treatment
   wraps on the AFA card. The type system remains the captured CTA family. */
.amirahco-panel-trigger {
  background: none;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, currentcolor 30%, transparent);
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: var(--font-f-primary);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  margin-left: 0;
  margin-top: 1.2rem;
  padding: 0 0 0.6rem;
  text-transform: uppercase;
  transition: border-color 0.3s ease;
  transform: none;
  width: max-content;
}

/* The captured panel deliberately renders a framed placeholder when assetOne is absent.
   AFA is intentionally text-only until STEP-004G, so suppress only that fallback branch.
   Once assetOne exists, :has(.placeholder) stops matching and the captured image returns. */
.panel .asset:has(> .placeholder) {
  display: none;
}

@media (hover: hover) {
  .amirahco-panel-trigger:hover {
    border-bottom-color: currentcolor;
  }
}

.amirahco-panel-trigger:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 4px;
}

@media (max-width: 600px) {
  .amirahco-panel-trigger {
    font-size: 1.3rem;
  }
}

/* ---------------------------------------------------------------------------
   STEP-010J — BodyCams pop-out anchor
   ---------------------------------------------------------------------------
   Moves the first BodyCams pop-out from shoulder height down to hand height, so
   it reads as emerging from a laptop the figure is holding rather than from a
   device on its shoulder.

   WHY THIS IS SAFE
   .window[data-v-f03804b5]:first-child is positioned by a plain CSS transform in
   the captured stylesheet and JAVASCRIPT NEVER WRITES TO IT. The pointer parallax
   binds windowOneRef / windowTwoRef to the child .inner, not to .window, so this
   override cannot fight the animation. Verified 2026-09-05.

   WHAT THIS CANNOT DO
   The notched frame outline is .window-svg, an inline DrawSVG target inside the
   hash-asserted bundle. Its position moves with the window; its SHAPE cannot change.

   THE GEOMETRY
   Root font-size is 8px, so 1rem = 8px. The window's centre lands at exactly
   panel-centre + this transform. At a 1280x720 viewport the panel centre is
   (640, 360) and the slide-0 figure spans y 36 to 684:

       head        ~  36-140       shoulders  ~ 140-230
       chest       ~ 230-360       hands      ~ 360-460   <-- a held laptop

   Captured value was translate(-30rem, -19rem) = (-240px, -152px), putting the
   window centre at (400, 208): shoulder height, beside the head.

   The value below puts it at roughly (448, 400): hand height, still clear of the
   figure's left edge at x 531 so the two do not overlap.

   TUNING
   This is the one knob. The figure art it should point at does not exist yet -
   slide 0 still shows the captured figure with a shoulder device - so treat this
   as a sensible default and re-tune once the new 1.svg lands. Larger negative X
   moves it left; larger positive Y moves it down.
   --------------------------------------------------------------------------- */
.body-cams .window[data-v-f03804b5]:first-child,
.window[data-v-f03804b5]:first-child {
  transform: translate(-24rem, 5rem);
}