/* Motion: one calm, liquid feel for every hover, menu and highlight on the site.
   Loaded after every other core stylesheet (CORE_CSS), so these timings win over the older 120-200 ms ones.
   Everything here is switched off for people who ask their system for reduced motion (bottom of the file). */

@property --fill { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --hr { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

:root {
  --ease-liquid: cubic-bezier(0.22, 1, 0.36, 1);   /* fast start, long soft landing */
  --ease-soft: cubic-bezier(0.45, 0, 0.2, 1);      /* even in and out, for colour */
  --m-quick: 280ms;
  --m-base: 460ms;
  --m-slow: 760ms;
  --m-pour: 1100ms;
  --ease-pour: cubic-bezier(0.33, 0.9, 0.4, 1);   /* steady pour that keeps moving to the end */
  /* the shared tokens older components already use */
  --d-fast: 260ms; --d-base: 420ms; --d-slow: 640ms; --ease: var(--ease-liquid);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Pages arrive softly instead of popping in */
  main { animation: m-arrive var(--m-slow) var(--ease-liquid) both; }
  @keyframes m-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  /* Links and buttons: colours glide, buttons lift a touch and press in */
  a { transition: color var(--m-quick) var(--ease-soft), text-decoration-color var(--m-quick) var(--ease-soft); }
  .btn {
    transition: background-color var(--m-base) var(--ease-soft), color var(--m-base) var(--ease-soft),
      border-color var(--m-base) var(--ease-soft), box-shadow var(--m-base) var(--ease-liquid), transform var(--m-base) var(--ease-liquid);
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(0.98); transition-duration: 120ms; }

  /* Cards everywhere: a slow lift with a shadow that blooms rather than snaps */
  .c-card, .vz-card, .cp-card, .sl-card, .px-door, .vz-node, .vz-tile, .cf-office, a.hub-card, .h2-plan, .idx-link, .c-lesson {
    transition: transform var(--m-slow) var(--ease-liquid), box-shadow var(--m-slow) var(--ease-liquid),
      border-color var(--m-base) var(--ease-soft), background-color var(--m-base) var(--ease-soft);
  }
  .c-card-cta .ic, .am-mcard-go svg { transition: transform var(--m-base) var(--ease-liquid); }

  /* ---- Header ---- */
  .am-tabwrap, .am-nav .am-list > .am-item > a { transition: background-color var(--m-base) var(--ease-soft), color var(--m-quick) var(--ease-soft); }
  .am-chev { transition: transform var(--m-base) var(--ease-liquid); }
  /* the gliding pill behind the menu item under the pointer (added by visuals.js on wide screens) */
  html.am-glide-on .am-tabwrap:hover, html.am-glide-on .am-has-menu:focus-within > .am-tabwrap,
  html.am-glide-on .am-nav .am-list > .am-item > a:hover { background: transparent; }
  .am-glide {
    position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 10px;
    background: var(--surface-2, #F1F6F9); box-shadow: inset 0 0 0 1px rgba(10, 143, 141, 0.08);
    opacity: 0; transform: translate3d(var(--gx, 0), var(--gy, 0), 0); width: var(--gw, 0); height: var(--gh, 0);
    transition: transform var(--m-base) var(--ease-liquid), width var(--m-base) var(--ease-liquid), height var(--m-base) var(--ease-liquid),
      opacity var(--m-base) var(--ease-soft);
  }
  .am-glide.is-on { opacity: 1; }
  .am-glide.is-jump { transition: opacity var(--m-base) var(--ease-soft); } /* first appearance: fade in place, do not fly in from the left */
  .am-list > .am-item { position: relative; z-index: 1; }
  .am-list > .am-item.am-has-mega { position: static; }
  .am-tabwrap, .am-list > .am-item > a { position: relative; z-index: 1; }

  /* menus open with a rise and a fade; closing is a little quicker */
  .am-panel {
    transition: opacity var(--m-quick) var(--ease-soft), transform var(--m-quick) var(--ease-soft), visibility 0s linear var(--m-quick);
  }
  .am-panel.is-open {
    transition: opacity var(--m-base) var(--ease-liquid), transform var(--m-base) var(--ease-liquid);
  }
  @media (min-width: 1101px) { /* the wide panels only; in the phone drawer they are part of the list */
    .am-panel.am-mega { transform: translate(-50%, -12px) scale(0.985); transform-origin: 50% 0; }
    .am-panel.am-mega.is-open { transform: translate(-50%, 0) scale(1); }
  }
  /* items ripple in one after another (visuals.js numbers them with --i) */
  .am-panel.is-open a.am-mi, .am-panel.is-open .am-mcard { animation: m-rise var(--m-slow) var(--ease-liquid) both; animation-delay: calc(var(--i, 0) * 28ms + 60ms); }
  @keyframes m-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .am-panel a.am-mi { transition: background-color var(--m-base) var(--ease-soft); }
  .am-mi-ic { transition: background-color var(--m-base) var(--ease-soft), transform var(--m-base) var(--ease-liquid); }
  .am-mi:hover .am-mi-ic { transform: scale(1.06); }
  .am-mi-go { transition: opacity var(--m-base) var(--ease-soft), transform var(--m-base) var(--ease-liquid); }
  .am-panel a.am-mcard { transition: transform var(--m-slow) var(--ease-liquid), box-shadow var(--m-slow) var(--ease-liquid); }
  .am-panel a.am-mcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(26, 35, 50, 0.12); }

  /* ---- Pricing tiles: the chosen plan's colour pours in from where the pointer entered, with a soft edge ---- */
  .vz-plans .price { isolation: isolate; overflow: hidden; }
  .vz-plans .price:not(.price-wide) { background: var(--surface); }
  .vz-plans .price {
    transition: transform var(--m-slow) var(--ease-liquid), box-shadow var(--m-slow) var(--ease-liquid), color var(--m-base) var(--ease-soft); }
  .vz-plans .price.is-main:not(.price-wide) { background: var(--surface); }
  .vz-plans .price:not(.price-wide)::after {
    content: ""; position: absolute; inset: -2px; z-index: -1; pointer-events: none; background: var(--grad-band);
    -webkit-mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), #000 calc(var(--fill) - 30%), transparent var(--fill));
    mask-image: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), #000 calc(var(--fill) - 30%), transparent var(--fill));
    --fill: 0%; transition: --fill var(--m-pour) var(--ease-pour);
  }
  .vz-plans .price.is-main:not(.price-wide)::after { --fill: 135%; } /* 100% reaches the far corner; the soft edge needs the rest */
  /* a soft light that follows the pointer across any tile */
  .vz-plans .price::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(10, 143, 141, 0.10), transparent 60%);
    transition: opacity var(--m-base) var(--ease-soft);
  }
  .vz-plans .price.is-main::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), transparent 60%); }
  .vz-plans .price:hover::before { opacity: 1; }
  .vz-plans .price h2, .vz-plans .price .amount, .vz-plans .price .amount small, .vz-plans .price .tagline, .vz-plans .price li {
    transition: color 520ms var(--ease-soft);
  }
}

/* ---- Every tab, chip and segment: the chosen one fills with colour from where it was pressed ----
   One rule set for the whole site, so selection always feels the same. The selected background stays the normal one;
   the colour comes from the liquid layer (::after), which pours in from --lx/--ly (set by visuals.js on press). */
@media (prefers-reduced-motion: no-preference) {
  html :is(.h2-tab, .cp-chip, .ct-tabs button, .lx-l, .lc-ev button, .vz-tabs-wrap .c-tab, .vx-tab, .seg button, .bx-chip, .sim-seg button) {
    position: relative; isolation: isolate; overflow: hidden;
    transition: color 460ms var(--ease-soft) 60ms, border-color 460ms var(--ease-soft), box-shadow var(--m-slow) var(--ease-liquid),
      transform var(--m-base) var(--ease-liquid), background-color var(--m-base) var(--ease-soft);
  }
  html :is(.h2-tab, .cp-chip, .ct-tabs button, .lx-l, .lc-ev button, .vz-tabs-wrap .c-tab, .vx-tab, .seg button, .bx-chip, .sim-seg button)::after {
    content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none; border-radius: inherit;
    background: var(--liq, var(--grad-band));
    -webkit-mask-image: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), #000 calc(var(--fill) - 35%), transparent var(--fill));
    mask-image: radial-gradient(circle at var(--lx, 50%) var(--ly, 50%), #000 calc(var(--fill) - 35%), transparent var(--fill));
    --fill: 0%; transition: --fill 780ms var(--ease-pour);
  }
  html :is(.h2-tab, .cp-chip, .ct-tabs button, .lx-l, .lc-ev button, .vz-tabs-wrap .c-tab, .vx-tab):hover { transform: translateY(-2px); }
  /* light pills: keep their own background when chosen; text turns white as the colour arrives */
  html :is(.h2-tab[aria-selected="true"], .cp-chip[aria-pressed="true"], .ct-tabs button[aria-selected="true"], .lx-l.is-on, .lx-l[aria-pressed="true"],
           .lc-ev button[aria-pressed="true"], .vz-tabs-wrap .c-tab[aria-selected="true"], .vx-tab.is-on) {
    background: var(--surface); border-color: transparent; color: #fff; box-shadow: 0 12px 26px -16px rgba(11, 94, 150, 0.65);
  }
  html .seg button[aria-pressed="true"] { background: none; color: #fff; }
  /* the technical view keeps its terminal green */
  html :is(.bx-chip, .sim-seg button) { --liq: var(--t-green, #39FF9B); }
  html :is(.bx-chip[aria-pressed="true"], .sim-seg button[aria-pressed="true"]) { background: transparent; color: #04130b; border-color: var(--t-green, #39FF9B); }
  html :is(.h2-tab[aria-selected="true"], .cp-chip[aria-pressed="true"], .ct-tabs button[aria-selected="true"], .lx-l.is-on, .lx-l[aria-pressed="true"],
           .lc-ev button[aria-pressed="true"], .vz-tabs-wrap .c-tab[aria-selected="true"], .vx-tab.is-on, .seg button[aria-pressed="true"],
           .bx-chip[aria-pressed="true"], .sim-seg button[aria-pressed="true"])::after { --fill: 160%; }
}

/* ---- The rest of the interactive pieces, so nothing on the site snaps ---- */
@media (prefers-reduced-motion: no-preference) {
  /* underline tabs: the line grows out from the centre instead of appearing */
  html .c-tab { position: relative; border-bottom-color: transparent !important; transition: color var(--m-base) var(--ease-soft); }
  html .c-tab::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0; height: 2px; border-radius: 2px; background: var(--grad-line);
    transform: scaleX(0); transition: transform var(--m-slow) var(--ease-liquid); }
  html .c-tab[aria-selected="true"]::before { transform: scaleX(1); }
  html .vz-tabs-wrap .c-tab::before { display: none; }
  /* explorer side list: the chosen item's bar and lift glide in */
  html .xp-item { transition: background-color var(--m-base) var(--ease-soft), color var(--m-base) var(--ease-soft), box-shadow var(--m-slow) var(--ease-liquid), transform var(--m-base) var(--ease-liquid); } /* keeps its own hover zoom */
  html .xp-node { transition: background-color var(--m-base) var(--ease-soft), color var(--m-base) var(--ease-soft), border-color var(--m-base) var(--ease-soft); }
  /* simulator events: green pours in like every other choice */
  html .sim-ev { position: relative; isolation: isolate; overflow: hidden; --liq: rgba(57, 255, 155, 0.16);
    transition: border-color var(--m-base) var(--ease-soft), box-shadow var(--m-slow) var(--ease-liquid), transform var(--m-base) var(--ease-liquid); }
  html .sim-ev::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--liq);
    -webkit-mask-image: radial-gradient(circle at var(--lx, 0%) var(--ly, 50%), #000 calc(var(--fill) - 35%), transparent var(--fill));
    mask-image: radial-gradient(circle at var(--lx, 0%) var(--ly, 50%), #000 calc(var(--fill) - 35%), transparent var(--fill));
    --fill: 0%; transition: --fill 780ms var(--ease-pour); }
  html .sim-ev[aria-pressed="true"] { background: transparent; }
  html .sim-ev[aria-pressed="true"]::after { --fill: 170%; }
  html .sim-ev:hover { transform: translateX(3px); }
  html .sim-key { transition: background-color var(--m-base) var(--ease-soft), color var(--m-base) var(--ease-soft), border-color var(--m-base) var(--ease-soft); }
  /* accordions and "read more": open and close with height, where the browser can animate it */
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    details::details-content { height: 0; overflow: clip; transition: height var(--m-slow) var(--ease-liquid), content-visibility var(--m-slow) allow-discrete; }
    details[open]::details-content { height: auto; }
  }
  .c-acc > summary::after { transition: transform var(--m-base) var(--ease-liquid); }
  .c-acc > summary { transition: color var(--m-quick) var(--ease-soft); }
  /* fields and focus: a soft glow that settles in */
  input, select, textarea { transition: border-color var(--m-quick) var(--ease-soft), box-shadow var(--m-base) var(--ease-liquid), background-color var(--m-quick) var(--ease-soft); }
  input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 4px rgba(10, 143, 141, 0.16); }
  :focus-visible { transition: outline-offset var(--m-quick) var(--ease-liquid); }
}

/* ---- Liquid hover on everything clickable: a soft tint flows out from the pointer (js/visuals.js adds the .am-hv layer) ---- */
.am-hv-on { position: relative; isolation: isolate; }
.am-hv { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0;
  background: radial-gradient(circle at var(--hx, 50%) var(--hy, 50%), var(--lq-a, rgba(10, 143, 141, 0.16)) 0%, var(--lq-b, rgba(46, 77, 176, 0.07)) var(--hr), transparent calc(var(--hr) + 30%));
  --hr: 0%; transition: --hr 750ms var(--ease-pour), opacity 380ms var(--ease-soft); }
.am-hv-on:hover > .am-hv, .am-hv-on:focus-visible > .am-hv { --hr: 110%; opacity: 1; }
/* on dark or coloured surfaces the tint is light */
.sec-dark .am-hv-on, .vz-hero .am-hv-on, .page-hero .am-hv-on, .price.is-main .am-hv-on, .price-wide .am-hv-on, .bx-row, .h2-india .am-hv-on { --lq-a: rgba(255, 255, 255, 0.18); --lq-b: rgba(255, 255, 255, 0.06); }
/* no thin gradient stripe on top of rounded cards anywhere: on curved corners it never sits evenly */
html :is(.c-card, .vz-card, .cp-card, .sl-card, .cf-card, .cf-office, .lg-card, .px-door, .ac-card)::before { content: none !important; display: none !important; }
/* mega-menu and hub items: icon centred on the text, whatever the number of lines */
.am-panel a.am-mi, .hub-list a.am-mi { align-items: center; }
.am-panel a.am-mi .am-mi-go { top: 50%; transform: translate(-4px, -50%); }
.am-panel a.am-mi:hover .am-mi-go, .am-panel a.am-mi:focus-visible .am-mi-go { transform: translate(0, -50%); }

/* Reduced motion: no movement, no pouring; colour changes still happen, at once */
@media (prefers-reduced-motion: reduce) {
  .am-hv { transition: none; }
  .am-glide { display: none; }
  .vz-plans .price:not(.price-wide)::after { display: none; }
  .vz-plans .price.is-main:not(.price-wide) { background: var(--grad-band); }
}