/* ==========================================================================
   BlueTicks for Gmail — scroll experience layer
   Additive: fx.js tags the page's own elements and puts .fx-on on <html> once it runs. Without
   JS, or under prefers-reduced-motion, none of this applies and the page is exactly the page at
   rest. Every colour comes from the site's tokens; the only new drawing is the reading line.

   Everything is scroll-linked, not one-shot: fx.js writes a few numbers per element every frame
   (--p entrance 0→1, --x exit 0→1, --i sibling index, --vel scroll velocity -1..1, --sp section
   progress) and CSS derives every movement from them, so scrolling back plays it all in reverse.
   ========================================================================== */
:root { --fx-ease: cubic-bezier(.22, 1, .36, 1); --vel: 0; }

/* ---------- Header: sticky and visible, shadow once scrolled, current section underlined ---------- */
.fx-on .site-header { transition: box-shadow .5s ease; }
.fx-on .site-header.is-scrolled { box-shadow: 0 14px 34px -26px rgba(11, 20, 26, .4); }
.fx-on .nav-links a { position: relative; transition: color .3s; }
.fx-on .nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px;
  background: var(--tick); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--fx-ease);
}
.fx-on .nav-links a.is-current { color: var(--ink); }
.fx-on .nav-links a.is-current::after { transform: scaleX(1); }

/* The line is the message travelling; the tick pair rides its head, the line ending on the left
   tick, and turns fully blue once the page has been read to the end, the way a sent email does. */
.fx-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.fx-progress-bar { display: block; height: 100%; background: var(--tick); transform: scaleX(var(--p, 0)); transform-origin: left; }
[dir="rtl"] .fx-progress-bar { transform-origin: right; }
.fx-progress-head {
  position: absolute; top: 50%; left: clamp(12px, calc(var(--p, 0) * 100%), calc(100% - 12px));
  transform: translate(-3px, -50%); display: block; line-height: 0;
  --t2: var(--tick-gray); --tick-fade: .45s;
}
[dir="rtl"] .fx-progress-head { left: auto; right: clamp(12px, calc(var(--p, 0) * 100%), calc(100% - 12px)); transform: translate(3px, -50%); }
.fx-progress-head::after { content: ""; position: absolute; inset: -7px -5px; border-radius: 999px; border: 2px solid var(--tick); opacity: 0; }
.fx-progress.is-read .fx-progress-head { --t2: var(--tick); }
.fx-progress.is-read .fx-progress-head::after { animation: ringPulse 1.4s ease-out 2; }

/* ---------- Hero: page-load sequence, then scroll and pointer parallax ---------- */
.fx-on .hero-grid > :first-child > * { animation: fxRise 1s var(--fx-ease) both; }
.fx-on .hero-badges { animation-delay: .05s; }
.fx-on .hero-grid h1 { animation-delay: .16s; }
.fx-on .hero-lead { animation-delay: .3s; }
.fx-on .cta-row { animation-delay: .42s; }
.fx-on .hero-fineprint { animation-delay: .52s; }
.fx-on .store-alt { animation-delay: .58s; }
.fx-on .tick-legend { animation-delay: .68s; }
.fx-on .hero-sent, .fx-on .hero-sent-backplate { animation: fxVisualIn 1.2s var(--fx-ease) .3s both; }
@keyframes fxRise { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fxVisualIn { from { opacity: 0; translate: 0 44px; } to { opacity: 1; translate: 0 0; } }

/* ---------- Scroll-linked layers: fx.js writes the variables, CSS owns the transform ---------- */
.fx-on .fx-layer { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0); opacity: var(--op, 1); will-change: transform; }
.fx-on .fx-3d {
  transform: perspective(1100px) translate3d(var(--tx, 0px), var(--ty, 0px), 0) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  transform-style: preserve-3d; will-change: transform;
}
.fx-on .fx-3d[data-fx] { --s: calc(.94 + .06 * var(--p, 1)); }

/* ---------- Entrance and exit, continuous ---------- */
.fx-on [data-fx] { --p: 0; --x: 0; opacity: calc(var(--p) * (1 - .55 * var(--x))); will-change: transform, opacity; }
.fx-on [data-fx="rise"] { transform: translate3d(0, calc((1 - var(--p)) * 44px - var(--x) * 18px), 0) skewY(var(--skew, 0deg)); }
.fx-on [data-fx="left"] { transform: translate3d(calc((1 - var(--p)) * -56px), calc((1 - var(--p)) * 12px - var(--x) * 18px), 0) skewY(var(--skew, 0deg)); }
.fx-on [data-fx="right"] { transform: translate3d(calc((1 - var(--p)) * 56px), calc((1 - var(--p)) * 12px - var(--x) * 18px), 0) skewY(var(--skew, 0deg)); }
.fx-on [data-fx="scale"] { transform: translate3d(0, calc((1 - var(--p)) * 24px - var(--x) * 18px), 0) scale(calc(.94 + .06 * var(--p))) skewY(var(--skew, 0deg)); }
/* Cards lean with the scroll velocity, a touch, in both directions. */
.fx-on .grid > [data-fx] { --skew: calc(var(--vel) * -1.1deg); }

/* ---------- Children ride their parent's --p (custom properties inherit) ---------- */
.fx-on .feature-icon, .fx-on .step-card-top > *, .fx-on .privacy-shield, .fx-on .upgrade-step .step-number {
  transform: translate3d(0, calc((1 - var(--p, 1)) * 16px), 0) scale(calc(.72 + .28 * var(--p, 1)));
  transform-origin: 0 50%;
}
.fx-on .step-card-top > svg { transform-origin: 100% 50%; }
.fx-on .plan-amount { display: inline-block; transform: translate3d(0, calc((1 - var(--p, 1)) * 12px), 0); }
.fx-on .plan-flag { transform: scale(calc(.6 + .4 * var(--p, 1))); transform-origin: 100% 0; }
.fx-on .quote-ticks { transform: scale(calc(.4 + .6 * var(--p, 1))); opacity: var(--p, 1); }
.fx-on .quote-author { transform: translate3d(0, calc((1 - var(--p, 1)) * 10px), 0); }
.fx-on .final-cta-icon { position: relative; transform: scale(calc(.5 + .5 * var(--p, 1))); }
.fx-on .final-cta-icon::after {
  content: ""; position: absolute; inset: 0; border-radius: 17px; border: 2px solid var(--tick);
  opacity: calc(var(--p, 1) * (1 - var(--p, 1)) * 3); transform: scale(calc(1 + var(--p, 1) * .9));
}
/* Lists inside a card come in line by line, --i being the row index. */
.fx-on [data-fx-row] {
  --pi: clamp(0, calc((var(--p, 1) - var(--i, 0) * .12) * 2.4), 1);
  opacity: var(--pi); transform: translate3d(calc((1 - var(--pi)) * -16px), 0, 0);
}
[dir="rtl"] .fx-on [data-fx-row] { transform: translate3d(calc((1 - var(--pi)) * 16px), 0, 0); }

/* ---------- Section drift: the testimonials pattern slides as the section is traversed ---------- */
.fx-on .testimonials { background-position: 0 calc(var(--sp, 0) * -80px); }

/* ---------- Pointer: spotlight on cards, magnetic primary buttons ---------- */
.fx-on [data-spot] { position: relative; isolation: isolate; overflow: hidden; }
.fx-on [data-spot]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  transition: opacity .5s ease;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(46, 116, 235, .11), transparent 62%);
}
.fx-on [data-spot]:hover::before { opacity: 1; }
.fx-on [data-magnetic] { transition: transform .55s var(--fx-ease), background-color .15s, color .15s, border-color .15s; will-change: transform; }

/* ---------- Belt and braces: fx.js already stays out when motion is reduced ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-on [data-fx], .fx-on [data-fx-row], .fx-on .hero-grid > :first-child > *, .fx-on .hero-sent, .fx-on .hero-sent-backplate { opacity: 1; transform: none; transition: none; animation: none; }
  .fx-on .fx-layer, .fx-on .fx-3d { transform: none; }
}