/* ==========================================================================
   Digital Takeoff — motion layer
   Subtle, brand-led motion shared across marketing pages.
   Loaded after each page's inline <style>, so rules here refine page styles.
   Everything collapses to static under prefers-reduced-motion.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --brand-grad: linear-gradient(90deg, var(--yel), var(--org), var(--red));
}

/* ---- Cross-page fade (View Transitions, progressive) -------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.28s; animation-timing-function: var(--ease-soft); }
nav { view-transition-name: site-nav; }

/* ---- Scroll progress: brand gradient hairline under the nav ------------- */
.dt-progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--brand-grad);
  transform-origin: 0 50%; transform: scaleX(var(--dt-progress, 0));
  pointer-events: none; opacity: 0.85;
}

/* ---- Nav links: underline draws in from the left ------------------------ */
.nav-links a { position: relative; padding: 6px 0; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: right center;
  transition: transform 0.35s var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); transform-origin: left center; }

/* ---- Scroll reveal: softer easing + staggered children ------------------ */
.reveal { transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.dt-stagger > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms + 120ms);
}
.reveal.visible.dt-stagger > * { opacity: 1; transform: none; }

/* ---- Hero headline: lines rise out of a mask on load -------------------- */
.dt-line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.dt-line > span {
  display: inline-block; transform: translateY(105%);
  animation: dtLineUp 0.9s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 150ms);
}
@keyframes dtLineUp { to { transform: translateY(0); } }

/* Eyebrow dash draws in, supporting copy fades up after the headline */
.hero-eyebrow::before { transform-origin: left; animation: dtDraw 0.7s var(--ease-out) both; }
@keyframes dtDraw { from { transform: scaleX(0); } }
.dt-after-h1 { animation: dtFadeUp 0.8s var(--ease-out) both; animation-delay: var(--d, 0.55s); }
@keyframes dtFadeUp { from { opacity: 0; transform: translateY(12px); } }

/* Emphasis words get a slow brand shimmer, once */
.hero-h1 em, .page-h1 em {
  background: linear-gradient(90deg, var(--red) 0%, var(--red) 40%, var(--org) 50%, var(--red) 60%, var(--red) 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: dtShimmer 2.4s var(--ease-soft) 1.1s both;
}
@keyframes dtShimmer { to { background-position: 0 0; } }

/* ---- Hero right: cursor spotlight on the blueprint grid ----------------- */
.hero-right { --mx: 50%; --my: 50%; }
.hero-right::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--m900) 1px, transparent 1px), linear-gradient(90deg, var(--m900) 1px, transparent 1px);
  background-size: 40px 40px; opacity: 0; transition: opacity 0.5s var(--ease-soft);
  -webkit-mask-image: radial-gradient(180px circle at var(--mx) var(--my), rgba(0,0,0,0.14), transparent 70%);
          mask-image: radial-gradient(180px circle at var(--mx) var(--my), rgba(0,0,0,0.14), transparent 70%);
}
.hero-right.dt-lit::after { opacity: 1; }
.logo-wrap { transition: transform 0.9s var(--ease-out); transform: translate3d(var(--px, 0), var(--py, 0), 0); }

/* Dark page heroes: soft red glow that trails the cursor */
.page-hero, .contact-hero { --mx: 25%; --my: 50%; }
.page-hero::before, .contact-hero::before {
  background: radial-gradient(ellipse at var(--mx) var(--my), rgba(204,33,40,0.16) 0%, transparent 60%) !important;
}
.hero-year { animation: dtFadeIn 1.6s var(--ease-soft) 0.4s both; }
@keyframes dtFadeIn { from { opacity: 0; transform: translateX(16px); } }

/* ---- Buttons: sheen sweep + arrow nudge --------------------------------- */
.btn-primary, .btn-primary-hero, .nav-cta, .btn-white { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after, .btn-primary-hero::after, .nav-cta::after, .btn-white::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-20deg); transition: left 0.7s var(--ease-out); pointer-events: none;
}
.btn-white::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,0.6), transparent); }
.btn-primary:hover::after, .btn-primary-hero:hover::after, .nav-cta:hover::after, .btn-white:hover::after { left: 130%; }
.btn-primary-hero i, .btn-secondary-hero i { transition: transform 0.3s var(--ease-out); }
.btn-primary-hero:hover i, .btn-secondary-hero:hover i { transform: translateX(4px); }
.btn-primary:active, .btn-primary-hero:active, .btn-white:active, .btn-outline:active, .nav-cta:active { transform: translateY(1px); }

/* ---- Service cards: brand bar grows on top, icon lifts ------------------ */
.svc-card { overflow: hidden; }
.svc-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-grad); transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.svc-card:hover::before { transform: scaleX(1); }
.svc-icon { transition: background 0.25s, transform 0.4s var(--ease-out); }
.svc-card:hover .svc-icon { transform: translateY(-3px); }
.svc-link { display: inline-block; transition: color 0.25s, transform 0.3s var(--ease-out); }
.svc-card:hover .svc-link { transform: translateX(4px); }

/* ---- Case / project cards: colour bar thickens, slight lift ------------- */
.case-bar, .project-bar { transform-origin: top; transition: transform 0.4s var(--ease-out); }
.case-card:hover .case-bar { transform: scaleY(1.8); }
.case-name { transition: transform 0.4s var(--ease-out); }
.case-card:hover .case-name { transform: translateX(4px); }

/* ---- Lists: numbers warm up, rows indent on hover ----------------------- */
.diff-n, .value-icon, .expect-num { transition: color 0.3s, transform 0.4s var(--ease-out); }
.diff-item:hover .diff-n { color: var(--red); }
.diff-item > div:last-child, .tl-item > div:last-child { transition: transform 0.4s var(--ease-out); }
.diff-item:hover > div:last-child, .tl-item:hover > div:last-child { transform: translateX(4px); }
.tl-year { transition: transform 0.4s var(--ease-out); }
.tl-item:hover .tl-year { transform: scale(1.06); transform-origin: left; }

/* Timeline (About): progress rail fills as the section scrolls past */
.timeline { position: relative; }
.timeline::before, .timeline::after {
  content: ''; position: absolute; left: -24px; top: 0; bottom: 0; width: 2px;
}
.timeline::before { background: var(--g200); }
.timeline::after { background: linear-gradient(180deg, var(--yel), var(--org), var(--red)); transform-origin: top; transform: scaleY(var(--dt-tl, 0)); }
@media (max-width: 768px) { .timeline::before, .timeline::after { left: -10px; } }
@media (max-width: 480px) { .timeline::before, .timeline::after { display: none; } }

/* ---- Tool stream (Home): pause on hover, pills light up ----------------- */
.tools-stream:hover .tool-col { animation-play-state: paused; }
.tool-pill { transition: color 0.3s, border-color 0.3s, background 0.3s; }
.tool-pill:hover { color: rgba(255,255,255,0.8); border-color: rgba(204,33,40,0.5); background: rgba(204,33,40,0.08); }

/* ---- Socials: icon lifts ------------------------------------------------ */
.hero-social i, .ft-social a i { transition: color 0.2s, transform 0.3s var(--ease-out); }
.hero-social:hover i, .ft-social a:hover i { transform: translateY(-2px); }

/* ---- Contact: channel arrow-in, smooth FAQ ------------------------------ */
.channel-icon { transition: transform 0.35s var(--ease-out), background 0.25s; }
.channel:hover .channel-icon { transform: rotate(-6deg) scale(1.05); background: rgba(204,33,40,0.25); }
.faq-a { display: block !important; max-height: 0; overflow: hidden; opacity: 0; padding-bottom: 0 !important;
  transition: max-height 0.45s var(--ease-out), opacity 0.35s var(--ease-soft), padding-bottom 0.45s var(--ease-out); }
.faq-item.open .faq-a { max-height: 600px; opacity: 1; padding-bottom: 22px !important; }
.faq-q i { transition: transform 0.35s var(--ease-out); }

/* ---- Form fields: focus underline glow ---------------------------------- */
input:focus-visible, textarea:focus-visible, select:focus-visible { transition: border-color 0.2s, box-shadow 0.3s var(--ease-out); box-shadow: 0 2px 0 0 var(--red); }

/* ---- CTA sections: glow breathes very slowly ---------------------------- */
.cta::before { animation: dtBreathe 9s ease-in-out infinite; }
@keyframes dtBreathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

/* ---- Accessibility: honour reduced motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
  .reveal, .dt-stagger > * { opacity: 1 !important; transform: none !important; }
  .dt-line > span { transform: none; }
  .tool-col { animation: none !important; }
  .logo-wrap { transform: none !important; }
}
@media (hover: none) {
  .hero-right::after { display: none; }
}