@import url("layout-fixes.css");

/* CAC interaction polish layer
   Lightweight CSS-only styling plus JS-driven variables from script.js. */

:root {
  --cursor-x: 50vw;
  --cursor-y: 50vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: .42;
  background: radial-gradient(420px circle at var(--cursor-x) var(--cursor-y), rgba(255,255,255,.22), rgba(255,255,255,.08) 18%, transparent 55%);
  mix-blend-mode: soft-light;
  transition: opacity 240ms ease;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: var(--scroll-progress, 0%);
  height: 4px;
  background: linear-gradient(90deg, #AF0404, #ffffff, #283080);
  box-shadow: 0 0 22px rgba(255,255,255,.52), 0 0 28px rgba(175,4,4,.36);
  transform-origin: left center;
}

.nav,
.glass-panel,
.hero-panel,
.delivery-card,
.service-card,
.project-card,
.contact-card,
.story-card,
.logo-cloud img,
.market-grid span,
.process-rail {
  isolation: isolate;
}

.reveal {
  opacity: 0;
  transform: translateY(34px) scale(.965);
  filter: blur(10px);
  transition:
    opacity 760ms cubic-bezier(.2,.8,.2,1),
    transform 760ms cubic-bezier(.2,.9,.18,1),
    filter 760ms cubic-bezier(.2,.8,.2,1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.service-card.reveal,
.project-card.reveal,
.delivery-card.reveal,
.logo-cloud.reveal,
.market-grid.reveal,
.contact-card.reveal,
.story-card.reveal {
  transform: translateY(42px) scale(.94);
}

.service-card.reveal.is-visible,
.project-card.reveal.is-visible,
.delivery-card.reveal.is-visible,
.logo-cloud.reveal.is-visible,
.market-grid.reveal.is-visible,
.contact-card.reveal.is-visible,
.story-card.reveal.is-visible {
  transform: translateY(0) scale(1);
}

.button,
.nav-cta,
.service-card,
.project-card,
.delivery-card,
.market-grid span,
.contact-tile,
.logo-cloud img,
.process-rail span {
  position: relative;
  overflow: hidden;
}

.button::after,
.nav-cta::after,
.service-card::after,
.project-card::after,
.delivery-card::after,
.market-grid span::after,
.contact-tile::after,
.process-rail span::after {
  content: "";
  position: absolute;
  inset: -2px -80%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 43%, rgba(255,255,255,.58) 50%, rgba(255,255,255,.18) 57%, transparent 70%);
  transform: translateX(-70%) skewX(-18deg);
  opacity: 0;
}

.button:hover::after,
.nav-cta:hover::after,
.service-card:hover::after,
.project-card:hover::after,
.delivery-card:hover::after,
.market-grid span:hover::after,
.contact-tile:hover::after,
.process-rail span:hover::after {
  opacity: 1;
  animation: cac-shine 820ms ease forwards;
}

@keyframes cac-shine {
  from { transform: translateX(-70%) skewX(-18deg); }
  to { transform: translateX(92%) skewX(-18deg); }
}

.interactive-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}

.interactive-tilt.is-tilting {
  transform: perspective(900px) rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)) translateY(-6px);
}

.interactive-tilt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(420px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255,255,255,.42), rgba(255,255,255,.12) 26%, transparent 62%);
  transition: opacity 200ms ease;
}

.interactive-tilt.is-tilting::before { opacity: 1; }
.interactive-tilt > * { position: relative; z-index: 1; }

.metallic-surface,
.delivery-card,
.service-card,
.project-card,
.contact-tile,
.market-grid span {
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.52)),
    linear-gradient(110deg, rgba(255,255,255,.7) 0%, rgba(170,174,190,.12) 22%, rgba(255,255,255,.38) 36%, rgba(94,100,114,.12) 56%, rgba(255,255,255,.72) 100%);
  background-blend-mode: screen, normal;
}

.project-card:nth-child(3n + 1),
.service-card:nth-child(3n + 2) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 24px 70px rgba(40,48,128,.12);
}

.project-card:nth-child(3n + 2),
.service-card:nth-child(3n + 1) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 24px 70px rgba(175,4,4,.12);
}

.blueprint-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,.12) 49%, transparent 52%),
    radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255,255,255,.22), transparent 35%);
  transform: translateY(-100%);
  animation: blueprint-scan 5.2s linear infinite;
  opacity: .75;
}

@keyframes blueprint-scan {
  0% { transform: translateY(-110%); }
  100% { transform: translateY(110%); }
}

.blueprint-lines {
  animation: grid-drift 16s linear infinite;
}

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

.process-rail span {
  transition: color 220ms ease, background 220ms ease, transform 220ms ease;
}

.process-rail span:hover {
  color: white;
  background: linear-gradient(135deg, #283080, #AF0404);
  transform: translateY(-2px);
}

.nav-links a:not(.nav-cta)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  background: linear-gradient(90deg, #AF0404, #283080);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

.nav-links a:not(.nav-cta) { position: relative; }
.nav-links a:not(.nav-cta):hover::before { transform: scaleX(1); }

.hero-panel,
.glass-panel {
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.hero-panel:hover,
.glass-panel:hover {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.68);
  box-shadow: 0 42px 120px rgba(7,10,32,.24);
}

.logo-cloud img {
  transform-origin: center;
}

.logo-cloud img:hover {
  transform: translateY(-6px) scale(1.035);
}

.market-grid span:hover {
  border-color: rgba(255,255,255,.74);
  box-shadow: 0 24px 80px rgba(255,255,255,.12), 0 20px 70px rgba(0,0,0,.18);
}

.service-card h3,
.project-card h3,
.delivery-card h3 {
  transition: letter-spacing 220ms ease, color 220ms ease;
}

.service-card:hover h3,
.project-card:hover h3,
.delivery-card:hover h3 {
  letter-spacing: .055em;
  color: #AF0404;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.contact-form input:hover,
.contact-form textarea:hover,
.contact-form select:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 35px rgba(40,48,128,.08);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  box-shadow: 0 0 0 4px rgba(40,48,128,.12), 0 16px 40px rgba(40,48,128,.10);
}

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

  body::before { display: none; }
}

@media (max-width: 760px) {
  body::before { display: none; }
  .interactive-tilt.is-tilting { transform: none; }
  .scroll-progress { height: 3px; }
}