/* The ambient layer: light travelling across foil, and the paper it rests on.
   Everything here is decoration. Remove this file and the site still reads. */
@keyframes foil-sweep {
  0%, 7% { transform: translateX(-180%) skewX(-18deg); }
  17%, 100% { transform: translateX(180%) skewX(-18deg); }
}

@keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes card-settle { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

.btn:not(.btn-ghost):not(:disabled), .nav-cta:not(:disabled) { position: relative; isolation: isolate; overflow: hidden; }
.btn:not(.btn-ghost):not(:disabled)::after, .nav-cta:not(:disabled)::after {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 68%;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%);
  transform: translateX(-180%) skewX(-18deg);
  animation: foil-sweep 16s linear both;
}

@media (hover: hover) {
  .card { transition: transform 180ms ease; }
  .card:hover { border-color: var(--gold); transform: translateY(-2px); }
  .links a:hover, .foot a:hover, main a:not(.btn):hover { text-decoration-color: var(--gold); }
}

@supports (animation-timeline: view()) {
  .case-section, .service-detail, .system-diagram { position: relative; border-top-color: transparent; }
  .system-diagram { border-bottom-color: transparent; }
  .case-section::before, .service-detail::before, .system-diagram::before, .system-diagram::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--champagne);
    transform-origin: left;
    animation: rule-draw 1ms linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 14%;
  }
  .case-section::before, .service-detail::before, .system-diagram::before { top: -1px; }
  .system-diagram::after { bottom: -1px; }
  .foot::before {
    border-top-color: transparent;
    transform-origin: left;
    animation: rule-draw 1ms linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 14%;
  }

  .proof .card, .services .card, .work .card, .approach .card, .studies-teaser-grid .card {
    animation: card-settle 1ms ease-out;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
  .proof .card:nth-child(2), .services .card:nth-child(2), .work .card:nth-child(2), .approach .card:nth-child(2), .studies-teaser-grid .card:nth-child(2) { animation-range: entry 5% cover 35%; }
  .proof .card:nth-child(3), .services .card:nth-child(3), .work .card:nth-child(3), .approach .card:nth-child(3), .studies-teaser-grid .card:nth-child(3) { animation-range: entry 10% cover 40%; }
  .proof .card:nth-child(4), .services .card:nth-child(4), .work .card:nth-child(4), .approach .card:nth-child(4), .studies-teaser-grid .card:nth-child(4) { animation-range: entry 15% cover 45%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:not(.btn-ghost):not(:disabled)::after, .nav-cta:not(:disabled)::after { animation: none; transform: translateX(180%) skewX(-18deg); }
  .card, .card:hover { transition: none; transform: none; }
  .case-section, .service-detail, .system-diagram { border-top-color: var(--champagne); }
  .system-diagram { border-bottom-color: var(--champagne); }
  .case-section::before, .service-detail::before, .system-diagram::before, .system-diagram::after { display: none; }
  .foot::before { border-top-color: var(--gold); transform: none; animation: none; }
}


/* --- Atmosphere -------------------------------------------------------
   Two washes, each used once and for a reason. The home page already has
   its gradient hero, so it takes neither.

   Interior pages open on a gold wash whose light gathers right, leaving
   the left two thirds - where the heading sits - as bare paper.
   The enquiry panel takes the teal one, mirrored so its light gathers
   left, away from the text. A change of temperature at the one point in
   the site where a visitor is being asked to act.

   Both sit under the content at low opacity and are inert: no motion, no
   interaction, and pointer-events none so nothing becomes unclickable. */
.page-intro { position: relative; isolation: isolate; }
.page-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/assets/wash-gold.jpg") right center / cover no-repeat;
  opacity: .38;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9) 0%, transparent 100%);
}
.contact-panel { position: relative; isolation: isolate; overflow: hidden; }
.contact-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/assets/wash-teal.jpg") left center / cover no-repeat;
  opacity: .3;
}