/*
 * Activate page motion and hover (essensys Platform family).
 * Mirrors essensys-platform.css: network-foundation tile hover, the JEFF flow
 * card pulse and the Signal feed highlight. Status green matches the
 * "Captured / Routed / Resolved" pills on /essensys-platform.
 * Loaded only by /essensys-platform/activate.
 */
.activate-page {
  --activate-ok: #15924c;
  --activate-ok-bg: #e4f4ea;
  /* Provisioning blue, as in the product's Wi-Fi access pill. */
  --activate-info: #1f6fc5;
  --activate-info-bg: #e6f0fb;
  --activate-ease: cubic-bezier(.16, 1, .3, 1);
  /* Lighter purple for use on the black migration panel. */
  --activate-purple-light: color-mix(in srgb, var(--ploy-accent-tertiary) 55%, white);
}

/* ---------- What's included grid hover ---------- */
.activate-page .activate-included__item {
  transition: transform .35s var(--activate-ease), border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
}
.activate-page .activate-included__icon {
  transition: border-color .35s ease, background-color .35s ease, color .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .activate-page .activate-included__item:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--ploy-accent-tertiary) 50%, var(--ploy-border-primary));
    background-color: color-mix(in srgb, var(--ploy-accent-tertiary) 3%, var(--ploy-background-primary));
    box-shadow: 0 8px 24px -18px color-mix(in srgb, var(--ploy-accent-tertiary) 30%, transparent);
  }
  .activate-page .activate-included__item:hover .activate-included__icon {
    border-color: color-mix(in srgb, var(--ploy-accent-tertiary) 45%, var(--ploy-border-primary));
    background-color: color-mix(in srgb, var(--ploy-accent-tertiary) 8%, var(--ploy-background-primary));
  }
}

/* ---------- Shared visual panel (dot grid, as on the JEFF flow panel) ---------- */
.activate-visual {
  background-color: var(--ploy-background-primary);
  background-image: radial-gradient(rgba(0, 0, 0, .13) 1px, transparent 1px);
  background-size: 16px 16px;
}

/* ---------- Seamless access: Add a user form, users list, then the member's phone (15s loop) ---------- */
.activate-access__modal { animation: activate-access-modal 15s var(--activate-ease) infinite; }
.activate-access__list { animation: activate-access-list 15s var(--activate-ease) infinite; }
.activate-access__phone { animation: activate-access-phone 15s var(--activate-ease) infinite; }
.activate-access__submit { animation: activate-access-submit 15s ease-in-out infinite; }
@keyframes activate-access-modal {
  0%, 28% { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }
  32%, 96% { opacity: 0; transform: translateY(-6px) scale(.98); visibility: hidden; }
  100% { opacity: 1; transform: translateY(0) scale(1); visibility: visible; }
}
@keyframes activate-access-list {
  0%, 29% { opacity: 0; transform: translateY(8px); visibility: hidden; }
  33%, 58% { opacity: 1; transform: translateY(0); visibility: visible; }
  62%, 100% { opacity: 0; transform: translateY(-6px); visibility: hidden; }
}
@keyframes activate-access-phone {
  0%, 59% { opacity: 0; transform: translateY(10px); visibility: hidden; }
  63%, 94% { opacity: 1; transform: translateY(0); visibility: visible; }
  98%, 100% { opacity: 0; transform: translateY(-6px); visibility: hidden; }
}
@keyframes activate-access-submit {
  0%, 22%, 27%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(106, 40, 190, 0); }
  24%, 25% { transform: scale(.94); box-shadow: 0 0 0 4px rgba(106, 40, 190, .18); }
}
.activate-access .activate-users__pill-from { animation: activate-access-pill-from 15s ease-in-out infinite; }
.activate-access .activate-users__pill-to { animation: activate-access-pill-to 15s ease-in-out infinite; }
@keyframes activate-access-pill-from { 0%, 45% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes activate-access-pill-to { 0%, 45% { opacity: 0; } 48%, 100% { opacity: 1; } }
/* Phone: email typed, password typed, Join pressed, then connected. */
.activate-access__phone-user { animation: activate-access-type-user 15s steps(1, end) infinite; }
.activate-access__phone-pass { animation: activate-access-type-pass 15s steps(1, end) infinite; }
.activate-access__phone-join { animation: activate-access-join 15s ease-in-out infinite; }
.activate-access__phone-form { animation: activate-access-phone-form 15s ease-in-out infinite; }
.activate-access__phone-done { animation: activate-access-phone-done 15s ease-in-out infinite; }
@keyframes activate-access-type-user { 0%, 67% { opacity: 0; } 68%, 100% { opacity: 1; } }
@keyframes activate-access-type-pass { 0%, 72% { opacity: 0; } 73%, 100% { opacity: 1; } }
@keyframes activate-access-join {
  0%, 77%, 81%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(106, 40, 190, 0); }
  78.5%, 79.5% { transform: scale(.94); box-shadow: 0 0 0 4px rgba(106, 40, 190, .2); }
}
@keyframes activate-access-phone-form { 0%, 81% { opacity: 1; visibility: visible; } 83%, 100% { opacity: 0; visibility: hidden; } }
@keyframes activate-access-phone-done { 0%, 82% { opacity: 0; visibility: hidden; } 84%, 100% { opacity: 1; visibility: visible; } }

/* ---------- Secure authentication: JEFF-flow grammar ---------- */
.activate-security__connector {
  background-image: linear-gradient(to bottom, var(--ploy-accent-tertiary) 50%, transparent 50%);
  background-size: 2px 12px;
  animation: activate-connector 1.2s linear infinite;
}
.activate-security__connector--muted {
  background-image: linear-gradient(to bottom, var(--ploy-neutral-primary-s5) 50%, transparent 50%);
  animation: none;
}
.activate-security__card {
  animation: activate-card 6s var(--activate-ease) infinite;
}
.activate-security__card--2 { animation-delay: 1.2s; }
.activate-security__card--3 { animation-delay: 2.4s; }
@keyframes activate-card {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(90, 45, 156, 0); }
  8%, 18% { transform: translateY(-3px); box-shadow: 0 10px 26px -15px rgba(90, 45, 156, .7), 0 0 0 3px rgba(90, 45, 156, .09); }
  28%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(90, 45, 156, 0); }
}
@keyframes activate-connector { to { background-position: 0 12px; } }
@keyframes activate-dash { to { stroke-dashoffset: -24; } }

/* ---------- Hero: new user's Wi-Fi access goes live, bars grow once on load ---------- */
.activate-hero-visual .activate-users__banner { animation: activate-hero-banner 9s ease-in-out infinite; }
.activate-hero-visual .activate-users__row--new { animation: activate-hero-row 9s ease-in-out infinite; }
.activate-hero-visual .activate-users__pill-from { animation: activate-hero-pill-from 9s ease-in-out infinite; }
.activate-hero-visual .activate-users__pill-to { animation: activate-hero-pill-to 9s ease-in-out infinite; }
@keyframes activate-hero-banner { 0%, 4% { opacity: .35; } 10%, 90% { opacity: 1; } 96%, 100% { opacity: .35; } }
@keyframes activate-hero-row {
  0%, 4% { background: transparent; }
  10%, 40% { background: color-mix(in srgb, var(--ploy-accent-tertiary) 6%, transparent); }
  52%, 100% { background: transparent; }
}
@keyframes activate-hero-pill-from { 0%, 42% { opacity: 1; } 46%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes activate-hero-pill-to { 0%, 42% { opacity: 0; } 46%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
.activate-module__bar { transform-origin: bottom; }
.activate-hero-visual .activate-module__bar {
  animation: activate-bar-grow .9s var(--activate-ease) both;
  animation-delay: calc(.35s + var(--bar-index) * .04s);
}
@keyframes activate-bar-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.activate-gauge__needle { transform: rotate(var(--needle)); }
.activate-hero-visual .activate-gauge__needle { animation: activate-needle 1.3s var(--activate-ease) .45s both; }
@keyframes activate-needle { from { transform: rotate(-90deg); } to { transform: rotate(var(--needle)); } }

/* ---------- Utilisation: bars grow as the chart scrolls into view (where supported) ---------- */
@supports (animation-timeline: view()) {
  .activate-utilisation-visual .activate-module__bar {
    animation: activate-bar-grow linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}

/* ---------- Utilisation: "now" column steps across the busy-hours grid ---------- */
.activate-utilisation-visual__now { animation: activate-now 12s steps(10) infinite; }
@keyframes activate-now { from { transform: translateX(0); } to { transform: translateX(1000%); } }

/* ---------- Migration: dashed handover path, progress fills, "Moving" breathes ---------- */
.activate-migration-visual__path { stroke-dasharray: 6 6; animation: activate-dash 1.4s linear infinite; }
.activate-migration-visual__progress { animation: activate-progress 7s var(--activate-ease) infinite; }
@keyframes activate-progress {
  0% { width: 12%; }
  70%, 92% { width: 100%; }
  100% { width: 12%; }
}
.activate-migration-visual__moving { animation: activate-breathe 2.4s ease-in-out infinite; }
@keyframes activate-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
  .activate-page .activate-included__item,
  .activate-page .activate-included__icon { transition: none; }
  .activate-page .activate-included__item:hover { transform: none; }
  .activate-access__submit,
  .activate-security__connector,
  .activate-security__card,
  .activate-module__bar,
  .activate-gauge__needle,
  .activate-users__banner,
  .activate-users__row--new,
  .activate-utilisation-visual__now,
  .activate-migration-visual__path,
  .activate-migration-visual__progress,
  .activate-migration-visual__moving { animation: none !important; }
  /* Access: show the form only. */
  .activate-access__modal { animation: none; }
  .activate-access__list,
  .activate-access__phone { animation: none; visibility: hidden; }
  /* Users module: settle on the finished state. */
  .activate-users__pill-from { animation: none !important; opacity: 0; }
  .activate-users__pill-to { animation: none !important; opacity: 1; }
}

/* Onboarding walkthrough: each screen fades in when the step changes. */
.activate-journey__screen { animation: activate-journey-in .35s var(--activate-ease) both; }
@keyframes activate-journey-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .activate-journey__screen { animation: none; }
}