/* =========================================================
   TRIP'SWIPE – Animations & effets
   (à charger APRÈS style.css)
   ========================================================= */

:root {
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.7, 0, .2, 1);
  --ease-bounce: cubic-bezier(.3, 1.5, .5, 1);
}

/* ---------- Barre de progression du scroll ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 4px;
  background: linear-gradient(90deg, var(--green-500), var(--green-800));
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* ---------- En-tête collant façon « verre dépoli » ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  transition: padding .35s var(--ease-out), transform .5s var(--ease-out),
              background-color .35s, box-shadow .35s;
}
.site-header.is-scrolled {
  padding: 10px 0;
  background: rgba(243, 242, 248, .78);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 30px rgba(36, 88, 77, .08);
}
.site-header.is-hidden { transform: translateY(-110%); }

.logo-pin svg { transition: transform .5s var(--ease-bounce); }
.logo-pin:hover svg { transform: translateY(-4px) rotate(-10deg); }

/* Pastille verte qui glisse sous les liens du menu */
.main-nav { position: relative; }
.main-nav li { position: relative; z-index: 1; }
.main-nav a { transition: color .3s; }
.main-nav a.is-hovered { color: #fff; }
.main-nav a.is-hovered::after { transform: scaleX(0); }
.nav-indicator {
  position: absolute; left: 0; top: 50%;
  height: 40px; margin-top: -20px;
  background: var(--green-700);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: transform .5s var(--ease-bounce), width .5s var(--ease-bounce), opacity .25s;
}

/* ---------- Boutons : reflet + effet magnétique ---------- */
.btn, .icon-btn {
  position: relative;
  overflow: hidden;
  transition: background .2s, color .2s, transform .2s, translate .35s var(--ease-out), border-color .2s;
}
.btn::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -75%;
  width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn:hover::before { animation: shine .8s var(--ease-out); }
.btn--outline::before, .btn--white::before {
  background: linear-gradient(100deg, transparent, rgba(61, 143, 123, .25), transparent);
}
@keyframes shine { to { left: 130%; } }

/* ---------- Curseur personnalisé (souris uniquement) ---------- */
.cursor, .cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 300;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.cursor {
  width: 40px; height: 40px;
  border: 2px solid var(--green-700);
  transition: opacity .3s, width .3s var(--ease-out), height .3s var(--ease-out),
              background-color .3s, border-color .3s;
}
.cursor-dot { width: 6px; height: 6px; background: var(--green-700); }
.cursor.is-visible, .cursor-dot.is-visible { opacity: 1; }
.cursor.is-hover {
  width: 64px; height: 64px;
  background: rgba(61, 143, 123, .14);
  border-color: transparent;
}
.cursor.is-grab {
  width: 84px; height: 84px;
  background: rgba(61, 143, 123, .18);
  border: 2px dashed var(--green-700);
  animation: spin 6s linear infinite;
}
.cursor.is-down { width: 30px; height: 30px; }

/* ---------- Effet « projecteur » qui suit la souris sur les cartes ---------- */
.card, .support-links a, .tip {
  position: relative;
  isolation: isolate;
}
.card::before, .support-links a::before, .tip::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(61, 143, 123, .13), transparent 60%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.card:hover::before, .support-links a:hover::before, .tip:hover::after { opacity: 1; }

/* =========================================================
   INTRO & TRANSITIONS ENTRE LES PAGES
   ========================================================= */
html.ts-cover::after {
  content: "";
  position: fixed; inset: 0; z-index: 9998;
  background: var(--green-800);
}
.ts-curtain {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background: var(--green-800);
  transform: translateY(100%);
  pointer-events: none;
}
.ts-curtain::before {           /* deuxième couche plus claire, pour la profondeur */
  content: "";
  position: absolute; inset: 0;
  background: var(--green-500);
  transform: translateY(100%);
  transition: transform .7s var(--ease-in-out);
}
.ts-curtain.is-animating { transition: transform .75s var(--ease-in-out); }
.ts-curtain.is-cover { transform: none; pointer-events: auto; }
.ts-curtain.is-leaving { transform: translateY(-100%); }
.ts-curtain.is-leaving::before { transform: translateY(-40%); }

.ts-curtain__inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.ts-curtain__pin svg { width: 76px; height: 76px; display: block; }
.ts-curtain__logo { height: 54px; width: auto; }

.ts-curtain.is-intro .ts-curtain__pin { animation: pin-drop 1s var(--ease-bounce) both; }
.ts-curtain.is-intro .ts-curtain__logo { animation: fade-up .7s .45s var(--ease-out) both; }
.ts-curtain.is-intro .ts-curtain__inner::after {   /* ombre du pin qui rebondit */
  content: "";
  position: absolute; top: 80px;
  width: 40px; height: 8px; border-radius: 50%;
  background: rgba(0, 0, 0, .18);
  animation: shadow-drop 1s var(--ease-bounce) both;
}
@keyframes pin-drop {
  0% { transform: translateY(-120vh) rotate(-20deg); }
  100% { transform: none; }
}
@keyframes shadow-drop {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

/* =========================================================
   APPARITIONS AU SCROLL
   (actives seulement si le JavaScript tourne : classe .js-anim)
   ========================================================= */

/* Titres qui se dévoilent ligne par ligne */
.split .line {
  display: block;
  overflow: hidden;
  padding-bottom: .08em; margin-bottom: -.08em;
}
.split .line > span { display: inline-block; }
.js-anim .split .line > span {
  transform: translateY(110%) rotate(4deg);
  transform-origin: 0 100%;
  transition: transform 1s var(--ease-out);
}
.js-anim .split .line:nth-child(2) > span { transition-delay: .12s; }
.js-anim .split .line:nth-child(3) > span { transition-delay: .24s; }
.js-anim.is-loaded .split.is-inview .line > span { transform: none; }

/* Éléments qui montent en fondu (cascade avec --i) */
.js-anim .anim-up {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .7s ease, transform .9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms + 100ms);
}
.js-anim.is-loaded .anim-up.is-inview { opacity: 1; transform: none; }

/* Photos qui se découvrent comme un rideau + léger zoom */
.js-anim .photo-tab,
.js-anim .support__photo {
  clip-path: inset(0 0 100% 0 round 10px);
  transition: clip-path 1.3s var(--ease-in-out), opacity .7s, transform .7s;
}
.js-anim.is-loaded .photo-tab.is-inview,
.js-anim.is-loaded .support__photo.is-inview { clip-path: inset(0 0 0 0 round 10px); }

.photo-tab > img, .support__photo img {
  scale: 1.18;
  transition: scale 1.8s var(--ease-out);
  will-change: translate;
}
.js-anim .photo-tab > img, .js-anim .support__photo img { scale: 1.4; }
.js-anim.is-loaded .is-inview > img,
.js-anim.is-loaded .support__photo.is-inview img { scale: 1.18; }

.js-anim .logo-tab {
  transform: translateY(110%);
  transition: transform .8s .7s var(--ease-bounce);
}
.js-anim.is-loaded .is-inview .logo-tab { transform: none; }

/* =========================================================
   ACCUEIL
   ========================================================= */

/* Bulles « Prêt à partir ? » : chute + rebond, puis flottement */
.ready { position: relative; }
.tag, .tag-pin {
  transform: none;
  rotate: var(--r);
  translate: var(--dx, 0px) var(--dy, 0px);
  transition: scale .3s var(--ease-bounce), background .3s, box-shadow .3s;
}
.tag:hover { transform: none; scale: 1.08; background: var(--green-900); }
.tag-pin:hover { scale: 1.12; }
.tag.is-dragging, .tag-pin.is-dragging {
  z-index: 5;
  scale: 1.14;
  box-shadow: 0 20px 34px rgba(36, 88, 77, .35);
  cursor: grabbing;
}
.js-anim .tags .tag, .js-anim .tags .tag-pin { opacity: 0; }
.js-anim.is-loaded .tags.is-inview .tag,
.js-anim.is-loaded .tags.is-inview .tag-pin {
  animation:
    tag-drop 1s calc(var(--i, 0) * 75ms) var(--ease-bounce) both,
    tag-float calc(3s + var(--i, 0) * .25s) calc(1.2s + var(--i, 0) * 75ms) ease-in-out infinite alternate;
}
@keyframes tag-drop {
  0% { opacity: 0; transform: translateY(-320px); }
  40% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes tag-float {
  from { opacity: 1; transform: none; }
  to { opacity: 1; transform: translateY(-7px); }
}

.tags-hint {
  position: absolute; top: 52px; right: 40px;
  margin: 0;
  font-size: 14px; font-weight: 700;
  color: var(--green-700);
  display: flex; align-items: center; gap: 8px;
}
.tags-hint::before {
  content: "";
  width: 22px; height: 22px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11V6a2 2 0 0 0-4 0v1M14 10V4a2 2 0 0 0-4 0v6M10 10.5V6a2 2 0 0 0-4 0v8'/%3E%3Cpath d='M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-6-2.4l-3.6-3.6a2 2 0 0 1 2.8-2.8L7 15'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11V6a2 2 0 0 0-4 0v1M14 10V4a2 2 0 0 0-4 0v6M10 10.5V6a2 2 0 0 0-4 0v8'/%3E%3Cpath d='M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.9-6-2.4l-3.6-3.6a2 2 0 0 1 2.8-2.8L7 15'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: wiggle 2.4s ease-in-out infinite;
}
@keyframes wiggle {
  0%, 60%, 100% { transform: rotate(0); }
  70% { transform: rotate(-16deg); }
  80% { transform: rotate(12deg); }
  90% { transform: rotate(-6deg); }
}

/* Bandeau : piloté en JavaScript (vitesse + sens selon le scroll) */
.marquee.is-js .marquee__track { animation: none; will-change: transform; }

/* « Comment ça marche ? » : ligne qui se dessine + étapes en cascade */
.how__text ol { position: relative; }
.how__text ol::after {
  content: "";
  position: absolute; left: 11px; top: 12px; bottom: 12px;
  width: 2px;
  background: #cfe1dc;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.4s .2s var(--ease-in-out);
}
.how__text li { position: relative; transition: color .3s; }
.how__text li::before {
  position: relative; z-index: 1;
  transition: background .4s, color .4s, transform .3s var(--ease-bounce);
}
.how__text li:hover { color: var(--green-800); }
.how__text li:hover::before { transform: scale(1.2); }
.js-anim .how__text li {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity .6s, transform .7s var(--ease-out), color .3s;
  transition-delay: calc(var(--i, 0) * 160ms + 250ms);
}
.js-anim.is-loaded .how__text ol.is-inview::after { transform: scaleY(1); }
.js-anim.is-loaded .how__text ol.is-inview li { opacity: 1; transform: none; }
.js-anim.is-loaded .how__text ol.is-inview li::before {
  background: var(--green-700); color: #fff;
  transition-delay: calc(var(--i, 0) * 160ms + 450ms);
}
.how__text ol:not(.is-inview) li::before { transition-delay: 0s; }
html:not(.js-anim) .how__text ol::after { transform: scaleY(1); }

/* « Plus de 40000 utilisateurs » : cercle en pointillés qui tourne */
.users__count { position: relative; overflow: hidden; }
.users__count::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 300px; height: 300px;
  margin: -150px 0 0 -150px;
  border: 2px dashed var(--green-100);
  border-radius: 50%;
  animation: spin 40s linear infinite;
  z-index: -1;
}
@keyframes spin { to { rotate: 360deg; } }

/* Bloc « Rejoignez notre communauté » : pins qui flottent */
.cta { position: relative; overflow: hidden; isolation: isolate; }
.cta-pin {
  position: absolute; z-index: -1;
  width: var(--s, 60px); height: var(--s, 60px);
  left: var(--x); top: var(--y);
  opacity: .12;
  animation: cta-float var(--t, 8s) ease-in-out infinite alternate;
}
.cta-pin svg { width: 100%; height: 100%; }
@keyframes cta-float {
  from { transform: translateY(0) rotate(-8deg); }
  to { transform: translateY(-30px) rotate(10deg); }
}

/* =========================================================
   SÉCURITÉ : sommaire collant
   ========================================================= */
.article {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  column-gap: 40px;
}
.article > h1, .article > .intro { grid-column: 1 / -1; }
.article > section { grid-column: 2; }
.toc {
  grid-column: 1; grid-row: 3 / span 3;
  align-self: start;
  position: sticky; top: 100px;
  margin-top: 40px;
  background: #fff;
  border-radius: var(--radius);
  padding: 18px 14px;
}
.toc__title {
  margin: 0 0 10px 14px;
  font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted);
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a {
  display: block;
  padding: 9px 10px 9px 14px;
  border-left: 3px solid var(--green-100);
  color: var(--muted);
  font-size: 14px; font-weight: 600;
  text-decoration: none;
  transition: color .3s, border-color .3s, background .3s, padding .3s;
}
.toc a:hover { color: var(--green-700); padding-left: 18px; }
.toc a.is-active {
  color: var(--green-700);
  border-color: var(--green-700);
  background: var(--green-100);
  border-radius: 0 6px 6px 0;
}
.tip { transition: translate .35s var(--ease-out), box-shadow .35s; }
.tip:hover { translate: 6px 0; box-shadow: 0 10px 30px rgba(36, 88, 77, .08); }

/* =========================================================
   ASSISTANCE
   ========================================================= */
.live-badge {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  margin: 0 0 18px !important;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-800) !important;
  font-size: 13px !important; font-weight: 700;
}
.live-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #34b882;
  animation: live 1.8s ease-out infinite;
}
@keyframes live {
  0% { box-shadow: 0 0 0 0 rgba(52, 184, 130, .6); }
  80%, 100% { box-shadow: 0 0 0 12px rgba(52, 184, 130, 0); }
}
.support-links .arrow svg { transition: transform .4s var(--ease-bounce); }
.support-links a:hover .arrow svg { transform: rotate(45deg); }
.support-links a:hover .arrow { background: var(--green-900); }

/* Traduction : petit fondu pendant le changement de langue */
body.is-translating main,
body.is-translating .main-nav,
body.is-translating .site-footer,
body.is-translating .cta { opacity: .15; filter: blur(3px); }
main, .main-nav, .site-footer, .cta { transition: opacity .2s, filter .2s; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .article { display: block; }
  .toc { display: none; }
}
@media (max-width: 820px) {
  .tag { rotate: calc(var(--r) / 4); translate: none; }
  .tag-pin { translate: none; }
  .tag:hover { transform: none; scale: 1.05; }
  .tags-hint, .nav-indicator { display: none; }
  .site-header.is-scrolled { padding: 10px 0; }
  .js-anim.is-loaded .tags.is-inview .tag,
  .js-anim.is-loaded .tags.is-inview .tag-pin {
    animation: tag-drop .9s calc(var(--i, 0) * 60ms) var(--ease-bounce) both;
  }
}
@media (min-width: 821px) and (pointer: fine) {
  .tag, .tag-pin { cursor: grab; touch-action: none; user-select: none; }
}
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-dot { display: none; }
}

/* =========================================================
   Mouvement réduit : on coupe tout ce qui bouge
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .cursor, .cursor-dot, .ts-curtain, .scroll-progress, .tags-hint { display: none !important; }
}

/* =========================================================
   SCÈNE « TÉLÉPHONES » (accueil, à côté de 40000 utilisateurs)
   ========================================================= */
.phones-stage {
  min-height: 540px;
  perspective: 1200px;
  isolation: isolate;
  --px: 0; --py: 0;           /* position de la souris (-1 … 1), réglée en JS */
}

/* Halo vert qui « respire » derrière les téléphones */
.stage-glow {
  position: absolute; z-index: -2;
  left: 50%; top: 50%;
  width: 62%; aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(circle at 35% 35%, #8fd3bd, var(--green-500) 45%, var(--green-800) 75%);
  filter: blur(46px);
  opacity: .55;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  animation: blob 12s ease-in-out infinite alternate, spin 40s linear infinite;
}
@keyframes blob {
  0%   { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; scale: 1; }
  50%  { border-radius: 63% 37% 41% 59% / 55% 62% 38% 45%; scale: 1.12; }
  100% { border-radius: 37% 63% 56% 44% / 49% 36% 64% 51%; scale: .94; }
}

/* Orbite en pointillés parcourue par un avion et des pins */
.stage-orbit {
  position: absolute; z-index: -1;
  left: 50%; top: 52%;
  width: 104%;
  translate: -50% -50%;
  overflow: visible;
}

/* Les 3 téléphones */
.phones {
  position: relative;
  width: min(80%, 500px);
  aspect-ratio: 689 / 579;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  translate: 0 var(--scrollY, 0px);
  transition: transform .7s var(--ease-out);
}
.phone-layer {
  position: absolute; inset: 0;
  translate: calc(var(--px) * var(--depth) * 1px) calc(var(--py) * var(--depth) * 1px);
  transition: translate .7s var(--ease-out), transform 1.3s var(--ease-bounce), opacity .8s;
}
.phone-layer--left, .phone-layer--right { z-index: 1; }
.phone-layer--center { z-index: 2; }
.phone-layer--left { transform-origin: 70% 100%; }
.phone-layer--right { transform-origin: 30% 100%; }
.phone-layer img {
  display: block; width: 100%; height: 100%;
  filter: drop-shadow(0 28px 26px rgba(20, 60, 50, .28));
  animation: phone-bob var(--t, 5s) ease-in-out var(--d, 0s) infinite alternate;
}
@keyframes phone-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-14px); }
}

/* Reflet qui balaie l'écran du téléphone central */
.phone-shine {
  /* calé sur la silhouette du téléphone central (x 207→482 sur 689 px) */
  position: absolute; top: 0; bottom: 0; left: 30%; width: 40%;
  border-radius: 12% / 6%;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .5) 48%, rgba(255, 255, 255, .1) 54%, transparent 62%);
  background-size: 300% 100%;
  background-position: 150% 0;
  animation: phone-bob var(--t, 5s) ease-in-out var(--d, 0s) infinite alternate,
             phone-shine 7s 2.5s ease-in-out infinite;
}
@keyframes phone-shine {
  0%        { background-position: 150% 0; }
  28%, 100% { background-position: -50% 0; }
}

/* Entrée : les téléphones s'ouvrent en éventail depuis le centre */
.js-anim .phone-layer { opacity: 0; }
.js-anim .phone-layer--center { transform: translateY(16%) scale(.88); }
.js-anim .phone-layer--left  { transform: translateX(16%) rotate(6deg) scale(.9); }
.js-anim .phone-layer--right { transform: translateX(-16%) rotate(-6deg) scale(.9); }
.js-anim.is-loaded .phones-stage.is-inview .phone-layer { opacity: 1; transform: none; }
.js-anim.is-loaded .phones-stage.is-inview .phone-layer--left,
.js-anim.is-loaded .phones-stage.is-inview .phone-layer--right { transition-delay: 0s, .35s, .35s; }

/* Survol : les téléphones latéraux se redressent légèrement */
.phones-stage:hover .phone-layer--left,
.js-anim.is-loaded .phones-stage.is-inview:hover .phone-layer--left  { transform: translateX(1.5%) rotate(-1.5deg); transition-delay: 0s; }
.phones-stage:hover .phone-layer--right,
.js-anim.is-loaded .phones-stage.is-inview:hover .phone-layer--right { transform: translateX(-1.5%) rotate(1.5deg); transition-delay: 0s; }

/* Bulles d'interface qui flottent autour */
.chip {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 9px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 16px;
  box-shadow: 0 16px 36px rgba(20, 60, 50, .18);
  line-height: 1.25;
  white-space: nowrap;
  translate: calc(var(--px) * var(--depth) * 1px) calc(var(--py) * var(--depth) * 1px);
  transition: translate .7s var(--ease-out), opacity .6s, scale .8s var(--ease-bounce);
  animation: chip-float calc(4s + var(--i, 0) * .6s) ease-in-out calc(var(--i, 0) * -1.3s) infinite alternate;
}
.chip strong { display: block; font-size: 14px; font-weight: 800; }
.chip small { display: block; font-size: 12px; color: var(--muted); }
@keyframes chip-float {
  from { transform: translateY(0) rotate(-1deg); }
  to   { transform: translateY(-10px) rotate(1deg); }
}
.js-anim .chip { opacity: 0; scale: .5; }
.js-anim.is-loaded .phones-stage.is-inview .chip {
  opacity: 1; scale: 1;
  transition-delay: 0s, calc(.9s + var(--i) * .22s), calc(.9s + var(--i) * .22s);
}

.chip--match  { top: 7%;    right: 3%; }
.chip--trip   { top: 32%;   left: 1%; }
.chip--crew   { bottom: 6%; left: 4%; }
.chip--typing { bottom: 22%; right: 3%; }

.chip__icon {
  position: relative;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 11px;
  background: var(--green-700); color: #fff;
  display: grid; place-items: center;
}
.chip__icon svg { width: 19px; height: 19px; }
.chip__icon--light { background: var(--green-100); color: var(--green-700); }
.chip--match .chip__icon svg { animation: heartbeat 1.6s ease-in-out infinite; }
.chip--match .chip__icon::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 2px solid var(--green-500);
  animation: ring 2s ease-out infinite;
}
@keyframes heartbeat {
  0%, 40%, 100% { transform: scale(1); }
  15% { transform: scale(1.25); }
  28% { transform: scale(.95); }
}
@keyframes ring {
  from { transform: scale(1); opacity: .9; }
  to   { transform: scale(1.7); opacity: 0; }
}

.avatars { display: flex; padding-left: 8px; }
.avatars span, .chip .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 800;
  border: 2px solid #fff;
  margin-left: -9px;
}
.avatars span:nth-child(1) { background: var(--green-700); }
.avatars span:nth-child(2) { background: #e0a458; }
.avatars span:nth-child(3) { background: var(--green-500); }
.chip .avatar { margin-left: 0; width: 36px; height: 36px; background: #e0a458; font-size: 14px; }

.typing { display: flex; gap: 4px; padding-top: 5px; }
.typing i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-500);
  animation: typing 1.2s ease-in-out infinite;
}
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30% { transform: translateY(-5px); opacity: 1; }
}

@media (max-width: 1000px) {
  .chip { padding: 7px 12px 7px 7px; }
  .chip strong { font-size: 13px; }
  .chip small { font-size: 11px; }
  .chip__icon, .chip .avatar { width: 30px; height: 30px; }
}
@media (max-width: 820px) {
  .phones-stage { min-height: 380px; margin-top: 10px; }
  .phones { width: 86%; }
  .chip--crew, .chip--typing { display: none; }
  .chip--match { top: -2%; right: 0; }
  .chip--trip { top: auto; bottom: 4%; left: 0; }
  .stage-orbit { width: 120%; }
}