/* DSA Consultancy — animations and hover effects.
   Scroll reveals only run when site.js adds .motion to <html>, so content stays visible without JS
   and for visitors who prefer reduced motion. */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --lift-shadow: 0 22px 45px -24px rgb(10 25 45 / .35);
}

/* ---------- Scroll reveal ---------- */
.motion .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.motion .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Hero entrance ---------- */
@keyframes hero-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes slow-zoom {
  from { transform: scale(1.09); }
  to { transform: scale(1); }
}
.motion .hero-in { animation: hero-in 1s var(--ease-out) both; animation-delay: var(--d, 0ms); }
.motion main > section:first-child > img,
.motion .section-bg-img--hero { animation: slow-zoom 14s ease-out both; }

/* Background photos drift gently when the section is hovered */
.section-bg-img--cta, .section-bg-img--feature { transition: transform 1.6s var(--ease-out); }

/* Header gains depth once the page scrolls */
header.fixed { transition: box-shadow .3s ease, background-color .3s ease; }
header.fixed.is-scrolled { box-shadow: 0 10px 30px -12px rgb(0 0 0 / .45); }

/* Marquee pauses under the cursor */
.py-5:has(> .marquee-track):hover .marquee-track { animation-play-state: paused; }

/* ---------- Hover effects (pointer devices only) ---------- */
@media (hover: hover) and (pointer: fine) {
  /* Logo */
  .brand-chip { transition: transform .3s var(--ease-out), box-shadow .3s ease; }
  a:hover > .brand-chip { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgb(0 0 0 / .5); }

  /* Header navigation: gold underline grows in */
  header nav a {
    background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 0 1.5px;
    padding-bottom: 3px;
    transition: color .2s ease, background-size .35s var(--ease-out);
  }
  header nav a:hover { background-size: 100% 1.5px; }

  /* Buttons: lift, glow, arrow nudge */
  main a.inline-flex, header a.inline-flex, main button.inline-flex {
    transition: transform .25s var(--ease-out), box-shadow .25s ease, background-color .2s ease, color .2s ease;
  }
  main a.inline-flex:hover, header a.inline-flex:hover { transform: translateY(-2px); }
  a.bg-gold:hover { box-shadow: 0 12px 28px -10px color-mix(in oklab, var(--gold) 80%, transparent); }
  a.inline-flex svg { transition: transform .3s var(--ease-out); }
  a.inline-flex:hover svg.lucide-arrow-right { transform: translateX(4px); }
  a.inline-flex:hover svg.lucide-arrow-up-right { transform: translate(2px, -2px); }

  /* Standalone cards: lift with a gold edge */
  main article.border, main article.bg-card {
    transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s ease;
  }
  main article.border:hover, main article.bg-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--lift-shadow);
    border-color: var(--gold);
  }

  /* Tiles inside hairline grids: brighten with a gold accent bar */
  main .gap-px > * {
    position: relative;
    transition: background-color .35s ease, box-shadow .35s ease;
  }
  main .gap-px > *::after {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--gold);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .45s var(--ease-out);
  }
  main .gap-px > *:hover::after { transform: scaleY(1); }
  main .gap-px > .bg-background:hover { background: #fff; box-shadow: var(--lift-shadow); z-index: 1; }
  main .gap-px > .bg-primary:hover { background: color-mix(in oklab, var(--primary) 80%, white 6%); }
  .has-bg--cards .gap-px > article.bg-primary:hover { background: color-mix(in oklab, var(--primary) 30%, transparent); }
  main .gap-px > * h3 { transition: color .3s ease; }
  main .gap-px > .bg-background:hover h3 { color: var(--accent-foreground); }

  /* Numbered process rows */
  .md\:grid-cols-\[100px_1fr_1\.2fr\] { transition: padding-left .4s var(--ease-out), background-color .3s ease; }
  .md\:grid-cols-\[100px_1fr_1\.2fr\]:hover { padding-left: .75rem; background: color-mix(in oklab, var(--muted) 60%, transparent); }

  /* Checklist items: tick pops */
  main li.flex > span:first-child { transition: transform .3s var(--ease-out), background-color .3s ease; }
  main li.flex:hover > span:first-child { transform: scale(1.18); background: var(--gold); color: #fff; }

  /* FAQ questions */
  h3 > button[aria-expanded] { transition: color .2s ease, padding-left .3s var(--ease-out); }
  h3 > button[aria-expanded]:hover { color: var(--accent-foreground); padding-left: .35rem; }

  /* FAQ topic list */
  main .border-l-2, main a.border-l-2 { transition: padding-left .3s var(--ease-out), border-color .3s ease; }

  /* Free zone rows */
  tbody tr { transition: background-color .25s ease; }
  tbody tr:hover { background: color-mix(in oklab, var(--muted) 80%, transparent); }
  tbody tr td:first-child { transition: color .25s ease, transform .3s var(--ease-out); }
  tbody tr:hover td:first-child { color: var(--accent-foreground); transform: translateX(4px); }

  /* Contact rows */
  main a.pb-5 { transition: border-color .3s ease; }
  main a.pb-5 svg { transition: transform .35s var(--ease-out); }
  main a.pb-5:hover { border-color: var(--gold); }
  main a.pb-5:hover svg { transform: scale(1.2) rotate(-6deg); }

  /* Form fields */
  form input, form select, form textarea { transition: border-color .2s ease, box-shadow .2s ease; }
  form input:hover, form select:hover, form textarea:hover { border-color: var(--gold); }

  /* Footer links slide */
  footer .grid a { transition: color .2s ease, transform .3s var(--ease-out); }
  footer .grid a:hover { transform: translateX(4px); }

  /* Hero slider bars */
  button[aria-label^="Show "] { transition: background-color .3s ease, transform .3s ease; }
  button[aria-label^="Show "]:hover { transform: scaleY(2); }

  /* Photo sections drift on hover */
  .has-bg:hover .section-bg-img--cta,
  .has-bg:hover .section-bg-img--feature { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .motion .reveal, .motion .hero-in { opacity: 1 !important; transform: none !important; animation: none !important; }
  .section-bg-img, main > section:first-child > img { animation: none !important; }
}