/* ==========================================================================
   Your Charisma · Homepage motion rules (v2)
   Shared by Concept A (Refresh), B (Conversion Led) and C (Bold Editorial).
   Colours and fonts come from each concept's tokens.css; this file only
   handles motion and interaction states. Pairs with motion.js.

   Rules
   1. Animate transform and opacity only on scroll. Colour, border and
      background transitions are fine on hover/press.
   2. Nothing waits longer than 600ms to appear. Count-ups finish within 1.4s.
   3. Background loops (badges, rings, ripples) are slow and small, run only
      while their section is on screen, and never move text or buttons.
   4. Cursor reactions (parallax, spotlights) only on devices with a fine
      pointer that can hover. Touch devices get the idle version or nothing.
   5. Every interactive element has a visible keyboard focus state.
   6. prefers-reduced-motion: movement and loops off, content shown at once,
      counters show their final value.
   ========================================================================== */

:root {
  --dur-fast: 120ms;    /* hover colour, press feedback */
  --dur-base: 200ms;    /* lift, tab pill, toggle knob, icon turn, card hover */
  --dur-slow: 320ms;    /* accordion, tab panel swap, approve demo, menus */
  --dur-reveal: 560ms;  /* scroll reveal */
  --dur-load: 640ms;    /* hero load-in per item */
  --dur-count: 1200ms;  /* number count-up */
  --dur-bar: 900ms;     /* cost bar fill */

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  --lift: -2px;
  --reveal-y: 16px;
  --load-y: 12px;
  --panel-y: 8px;
  --stagger: 60ms;       /* scroll reveal groups, max 6 items */
  --load-stagger: 80ms;  /* hero load-in */
}

/* ---------- 1. Buttons and links ---------- */
.btn {
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.btn:hover { transform: translateY(var(--lift)); }
.btn-primary:hover { box-shadow: 0 8px 20px -10px rgba(20, 27, 33, .45); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: var(--dur-fast); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.icon-arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .icon-arrow, a:hover > .icon-arrow, .row-link:hover .icon-arrow { transform: translateX(3px); }

a.link { transition: color var(--dur-fast) var(--ease-out); }
a.link:hover { text-decoration: underline; text-underline-offset: 3px; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------- 2. Header, dropdown and mobile menu ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(20, 27, 33, .08), 0 8px 24px -16px rgba(20, 27, 33, .3); }
/* Concept B: header sits transparent on the hero photo, turns solid once scrolled */
.site-header[data-transparent] { background-color: transparent; }
.site-header[data-transparent].is-scrolled { background-color: var(--header-solid, #1C252D); }

.nav-dropdown { position: relative; }
.nav-dropdown .icon-chev { transition: transform var(--dur-base) var(--ease-out); }
.nav-dropdown [aria-expanded="true"] .icon-chev { transform: rotate(180deg); }
.nav-dropdown-panel {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 220px;
  opacity: 0; transform: translateY(-4px); visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.nav-dropdown.is-open .nav-dropdown-panel { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 60;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.mobile-menu > .mobile-menu-inner { transform: translateY(-8px); transition: transform var(--dur-slow) var(--ease-out); }
.mobile-menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-menu.is-open > .mobile-menu-inner { transform: none; }
html.menu-open { overflow: hidden; }

/* ---------- 3. Hero load-in (above the fold, on page load) ----------
   Add data-load to hero items in reading order (eyebrow, H1, body, CTAs,
   trust line, visual). The header never animates. */
.js [data-load] { opacity: 0; transform: translateY(var(--load-y)); }
.js.is-loaded [data-load] {
  opacity: 1; transform: none;
  transition: opacity var(--dur-load) var(--ease-out), transform var(--dur-load) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--load-stagger));
}

/* ---------- 4. Reveal on scroll (everything below the hero) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(var(--reveal-y)); }
.js [data-reveal].is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

/* ---------- 5. Numbers: count-up and cost bars ---------- */
[data-count], .num { font-variant-numeric: tabular-nums; }
.js [data-fade-word] { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-out) 300ms; }
.js [data-fade-word].is-visible { opacity: 1; }

/* Concept A cost bars: <div class="bar"><span class="bar-fill" data-bar style="--w:.24"></span></div> */
.bar-fill { display: block; height: 100%; transform-origin: left center; transform: scaleX(var(--w, 1)); }
.js .bar-fill[data-bar] { transform: scaleX(0); }
.js .bar-fill[data-bar].is-visible {
  transform: scaleX(var(--w, 1));
  transition: transform var(--dur-bar) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 150ms);
}

/* ---------- 6. Cards and rows ---------- */
.card-link {
  position: relative;
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.card-link:hover {
  transform: translateY(var(--lift));
  box-shadow: 0 12px 28px -18px rgba(20, 27, 33, .35);
}
.card-link:active { transform: scale(.98); transition-duration: var(--dur-fast); }

/* Concept A service cards: lift and warm up + cursor spotlight (Magic UI Magic Card, softer) */
.service-card .icon-tile { transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.service-card .price-arrow { opacity: 0; transform: translateX(-4px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.service-card:hover { border-color: var(--card-hover-border, #F1D9A6); }
.service-card:hover .icon-tile { background-color: var(--brand-yellow, #FFBE4C); color: var(--ink, #1F2A33); }
.service-card:hover .price-arrow { opacity: 1; transform: none; }
[data-spotlight] { --mx: 50%; --my: 50%; --spot: 0; isolation: isolate; }
[data-spotlight]::before {           /* soft fill glow */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(200px circle at var(--mx) var(--my), rgba(255, 190, 76, .14), transparent 70%);
  opacity: var(--spot); transition: opacity 300ms var(--ease-out);
}
[data-spotlight]::after {            /* border glow nearest the pointer */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px;
  background: radial-gradient(200px circle at var(--mx) var(--my), rgba(255, 190, 76, .75), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: var(--spot); transition: opacity 300ms var(--ease-out);
}

/* Concepts B and C service rows */
.row-link { transition: background-color var(--dur-base) var(--ease-out); }

/* ---------- 7. Tabs (Concept B audience tabs) ---------- */
[role="tab"] { transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
[role="tabpanel"][hidden] { display: none; }
[role="tabpanel"].is-entering { animation: panel-in var(--dur-slow) var(--ease-out) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(var(--panel-y)); } to { opacity: 1; transform: none; } }

/* ---------- 8. FAQ accordion (Concepts A and C) ----------
   .acc-item > button.acc-trigger[aria-expanded] + .acc-panel > .acc-inner */
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-in-out); }
.acc-panel > .acc-inner { overflow: hidden; opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-item.is-open .acc-panel > .acc-inner { opacity: 1; transition-delay: 80ms; }
.acc-icon { transition: transform var(--dur-base) var(--ease-out); }
.acc-item.is-open .acc-icon { transform: rotate(180deg); }

/* ---------- 9. Toggles (Concept C desk builder) ---------- */
.toggle-knob { transition: transform var(--dur-base) var(--ease-out); }
.toggle[aria-checked="true"] .toggle-knob { transform: translateX(20px); }
.toggle-track { transition: background-color var(--dur-base) var(--ease-out); }
.price-value.is-updating { animation: price-in var(--dur-base) var(--ease-out); }
@keyframes price-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- 10. Forms (Concept B hero form and final CTA) ---------- */
.field input { transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.field input:focus { box-shadow: 0 0 0 3px rgba(255, 190, 76, .35); border-color: var(--brand-yellow, #FFBE4C); outline: none; }
.field.has-error input { border-color: #C2410C; }
.field-error { font-size: 13px; color: #C2410C; margin-top: 6px; }
.chip { transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.chip .icon-check { width: 0; opacity: 0; transition: width var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.chip[aria-pressed="true"] .icon-check { width: 14px; opacity: 1; }

/* ---------- 11. Approve demos (A hero console, B step 3, C hero card) ---------- */
.approval-card { transition: background-color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); }
.approval-card.is-approved, .approval-card.is-rejected { animation: settle var(--dur-slow) var(--ease-out); }
@keyframes settle { 0% { transform: scale(.99); } 100% { transform: none; } }
.approval-status { opacity: 0; transform: translateY(4px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.approval-card.is-approved .approval-status, .approval-card.is-rejected .approval-status { opacity: 1; transform: none; }

/* ---------- 12. Background loops: only while the section is on screen ---------- */
[data-loop] { animation-play-state: paused !important; }
.is-playing [data-loop] { animation-play-state: running !important; }

/* Concept C hero badges: idle float (6–8px, 5–7s, offset per badge) */
[data-float] { animation: float var(--float-dur, 6s) ease-in-out var(--float-delay, 0s) infinite alternate; }
@keyframes float { from { translate: 0 0; } to { translate: 0 calc(var(--float-y, 7px) * -1); } }

/* Concept C hero rings: slow pulse (100–104%, 6–8s, inner ring leads by 0.6s) */
[data-pulse] { transform-origin: center; animation: pulse var(--pulse-dur, 7s) ease-in-out var(--pulse-delay, 0s) infinite; }
@keyframes pulse { 0%, 100% { scale: 1; opacity: var(--o, .6); } 50% { scale: 1.04; opacity: calc(var(--o, .6) * .7); } }

/* Concepts B and C final CTA: Magic UI Ripple style (rings breathe outward in sequence) */
[data-ripple] { transform-origin: center; animation: ripple var(--ripple-dur, 4.5s) ease-in-out var(--ripple-delay, 0s) infinite; }
@keyframes ripple { 0%, 100% { scale: 1; opacity: var(--o, .2); } 50% { scale: .94; opacity: calc(var(--o, .2) * 1.6); } }

/* Cursor parallax layers (C hero): JS writes --px/--py in px */
[data-parallax] { translate: var(--px, 0px) var(--py, 0px); transition: translate 600ms var(--ease-out); }
/* badges use translate for float, so parallax goes on a wrapper: .badge-wrap[data-parallax] > .badge[data-float] */

/* Concept A final CTA dot spotlight (Aceternity Hero Highlight, a third of the strength) */
.dot-field { position: absolute; top: 0; bottom: 0; width: 364px; pointer-events: none;
  background-image: radial-gradient(circle, var(--dot, #1F2A33) 1.5px, transparent 1.6px);
  background-size: 26px 26px; background-position: 11px 11px; }
.dot-field.left  { left: 0;  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.05)); mask-image: linear-gradient(90deg, rgba(0,0,0,.22), rgba(0,0,0,.05)); }
.dot-field.right { right: 0; -webkit-mask-image: linear-gradient(270deg, rgba(0,0,0,.22), rgba(0,0,0,.05)); mask-image: linear-gradient(270deg, rgba(0,0,0,.22), rgba(0,0,0,.05)); }
.dot-field.hot { opacity: var(--spot, 0); transition: opacity 300ms var(--ease-out);
  -webkit-mask-image: radial-gradient(160px circle at var(--mx, -999px) var(--my, -999px), rgba(0,0,0,.44), transparent 100%);
  mask-image: radial-gradient(160px circle at var(--mx, -999px) var(--my, -999px), rgba(0,0,0,.44), transparent 100%); }

/* ---------- 13. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-load], .js [data-reveal], .js [data-fade-word] { opacity: 1; transform: none; }
  .js .bar-fill[data-bar] { transform: scaleX(var(--w, 1)); }
  .btn:hover, .card-link:hover { transform: none; }
  [data-spotlight]::before, [data-spotlight]::after, .dot-field.hot { display: none; }
  [data-float], [data-pulse], [data-ripple] { animation: none !important; }
  [data-parallax] { translate: none; }
}