/* 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); }
}

/* Typography: no lonely last words. Headings balance their lines; body text avoids a single word on the last line. */
h1, h2, h3, h4, .hub-title, .pb-plan, .vx-title, .am-mcard-k { text-wrap: balance; }
p, li, dd, .hub-lede, .lede, .am-mi-s, .am-mcard-p, .vx-who, .sc-ft small { text-wrap: pretty; }

/* ===================== Colour and life ("a little more salt") =====================
   Hero skies drift, the header carries a living gradient edge, sections get soft tints,
   eyebrows and key numbers carry the brand gradient, cards light their edge on hover,
   primary buttons get a moving sheen. All decorative; reduced motion keeps colour and drops movement. */

/* 1. Hero skies: two slow colour clouds drift over every dark hero */
:is(.vz-hero, .page-hero, .hub-hero:has(.sc)) { isolation: isolate; position: relative; overflow: hidden; }
:is(.vz-hero, .page-hero, .hub-hero:has(.sc))::before {
  content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 18% 28%, rgba(43, 214, 210, 0.42), transparent 70%),
    radial-gradient(34% 40% at 82% 72%, rgba(150, 110, 255, 0.34), transparent 70%),
    radial-gradient(30% 36% at 62% 18%, rgba(110, 190, 255, 0.30), transparent 70%);
  filter: blur(18px);
}
:is(.vz-hero, .page-hero, .hub-hero:has(.sc)) > .container { position: relative; z-index: 1; }
/* a fine sheen line at the hero's foot */
:is(.vz-hero, .page-hero, .hub-hero:has(.sc))::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), rgba(140, 240, 236, 0.8), rgba(190, 170, 255, 0.7), transparent);
  background-size: 200% 100%;
}
/* the light home hero gets a soft tinted sky too */
.h2-hero::before { content: ""; position: absolute; inset: -10%; z-index: 0; pointer-events: none;
  background: radial-gradient(40% 50% at 85% 20%, rgba(43, 214, 210, 0.18), transparent 70%), radial-gradient(36% 44% at 10% 90%, rgba(120, 120, 255, 0.12), transparent 70%); }
.h2-hero > .container { position: relative; z-index: 1; }

/* 2. Header: glass with a living gradient edge; deeper once the page scrolls */
.am-header { transition: box-shadow 600ms var(--ease-soft), background-color 600ms var(--ease-soft); }
@media (min-width: 1101px) { /* glass only on wide screens: below that the header holds the full-screen menu drawer */
  .am-header { background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
}
.am-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, #0ABFBC, #2A8FE0, #6A5CE8, #0ABFBC); background-size: 300% 100%; opacity: 0.55; transition: opacity 600ms var(--ease-soft); }
html.is-scrolled .am-header { background: rgba(255, 255, 255, 0.94); box-shadow: 0 10px 30px -18px rgba(11, 40, 90, 0.35); }
html.is-scrolled .am-header::after { opacity: 0.9; }

/* 3. Section tints: alternating sections get a soft teal-to-sky wash with a glow */
.sec-alt { background: radial-gradient(60% 80% at 100% 0%, rgba(110, 160, 255, 0.10), transparent 70%), radial-gradient(50% 70% at 0% 100%, rgba(43, 214, 210, 0.12), transparent 70%), var(--grad-wash-a); }
.sec:not(.sec-alt):not(.sec-dark):not(.vi) + .sec:not(.sec-alt):not(.sec-dark) { background: linear-gradient(180deg, transparent, rgba(214, 242, 241, 0.25)); }

/* 4. Eyebrows and big numbers carry the brand gradient */
.sec-head .eyebrow, .vx-k, .pb-grp legend { background: linear-gradient(90deg, #0A8F8D, #2A6FD0 60%, #6A5CE8); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.sec-head .eyebrow::before { content: ""; display: inline-block; width: 22px; height: 2px; margin-right: 10px; vertical-align: middle; border-radius: 2px; background: linear-gradient(90deg, #0ABFBC, #6A5CE8); }
.sec-head h2 { background: linear-gradient(100deg, var(--ink) 55%, #0B5E96 85%, #4A56C8); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 5. Cards light a gradient edge on hover */
:is(.c-card, .cp-card, .sl-card, .co-p, .vb-card, .tm-card, .vo-step, .vx-card:not(.vx-cost), .co-fact-list li, .ac-card, .idx-link) { position: relative; }
:is(.c-card, .cp-card, .sl-card, .co-p, .vb-card, .tm-card, .vo-step, .vx-card:not(.vx-cost), .co-fact-list li, .ac-card, .idx-link)::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0;
  background: linear-gradient(135deg, #0ABFBC, #2A8FE0 50%, #8A6CF0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity 600ms var(--ease-soft); }
:is(.c-card, .cp-card, .sl-card, .co-p, .vb-card, .tm-card, .vo-step, .vx-card:not(.vx-cost), .co-fact-list li, .ac-card, .idx-link):hover::after { opacity: 1; }

/* 6. Primary buttons: gradient fill with a moving sheen */
.btn-primary { background: linear-gradient(120deg, #0ABFBC, #18B6C9 45%, #3A9BE0); color: #06222B; position: relative; overflow: hidden; isolation: isolate; }
.btn-primary:hover { background: linear-gradient(120deg, #19D2CF, #2AC4D6 45%, #4FA8EA); }
.btn-primary::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-18deg); }

@media (prefers-reduced-motion: no-preference) {
  :is(.vz-hero, .page-hero, .hub-hero:has(.sc))::before { animation: sky-drift 26s ease-in-out infinite alternate; }
  :is(.vz-hero, .page-hero, .hub-hero:has(.sc))::after { animation: sheen-run 9s linear infinite; }
  .h2-hero::before { animation: sky-drift 30s ease-in-out infinite alternate; }
  .am-header::after { animation: sheen-run 14s linear infinite; }
  .btn-primary:hover::before { animation: btn-sheen 900ms var(--ease-liquid); }
}
@keyframes sky-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(4%, -3%, 0) scale(1.06); } 100% { transform: translate3d(-3%, 3%, 0) scale(1.02); } }
@keyframes sheen-run { from { background-position: 200% 0; } to { background-position: -100% 0; } }
@keyframes btn-sheen { from { left: -60%; } to { left: 120%; } }