/* ============================================================
   KONNECT STORY — animated narrative replacing the hero video

   Standalone module: HTML lives inside the #konnect section in
   index.html. This file owns ALL styles. The JS controller lives
   in js/konnect-story.js.

   Edit-points if you want to extend the story:
   - To add a NEW scene: append <div class="kstory-scene kstory-scene--N">
     in the HTML, and create matching .kstory-N__* + .kstory-scene--N
     animation rules below. Then JS auto-picks up the new scene
     because it queries .kstory-scene.
   - To change duration of each scene: SCENE_MS in konnect-story.js
   - To re-time inner animations: each scene's .is-active rules
     reference cubic-bezier curves and durations directly.
   ============================================================ */

.konnect-story{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 20% 0%,  rgba(41,151,255,.12), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(41,151,255,.10), transparent 50%);
}
/* Subtle drifting grid backdrop */
.konnect-story::before{
  content:""; position:absolute; inset:-40%;
  background-image:
    linear-gradient(rgba(41,151,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(41,151,255,.06) 1px, transparent 1px);
  background-size:60px 60px, 60px 60px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
  animation:kstoryGrid 30s linear infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes kstoryGrid{
  from{ transform:translate(0,0); }
  to  { transform:translate(60px,60px); }
}
.konnect-story__stage{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:1fr auto;
}

/* ============================================================
   SCENE BASE — .is-active picks which is visible (driven by JS)
   ============================================================ */
.kstory-scene{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:36px 32px 90px;
  opacity:0;
  pointer-events:none;
  z-index:1;
  transition:opacity .7s cubic-bezier(.16,1,.3,1);
}
.kstory-scene.is-active{
  opacity:1;
  pointer-events:auto;
}

/* Brief flash overlay during scene transitions */
.konnect-story__flash{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.6), rgba(120,180,255,.15) 40%, transparent 70%);
  opacity:0;
  pointer-events:none;
  z-index:6;
  mix-blend-mode:screen;
}
.konnect-story.is-flashing .konnect-story__flash{
  animation:kstoryFlash .55s ease-out;
}
@keyframes kstoryFlash{
  0%   { opacity:0; }
  20%  { opacity:.85; }
  100% { opacity:0; }
}

/* The shared subtitle/kicker block at the bottom of each scene */
.kstory-scene__copy{
  position:absolute;
  bottom:60px; left:0; right:0;
  text-align:center;
  padding:0 80px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s var(--spring) .2s, transform .55s var(--spring) .2s;
}
.kstory-scene.is-active .kstory-scene__copy{
  opacity:1;
  transform:translateY(0);
}
.kstory-scene__kicker{
  display:inline-block;
  font-size:10px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--brand-2);
  font-weight:700;
  padding:5px 12px;
  border-radius:999px;
  background:rgba(41,151,255,.14);
  border:1px solid rgba(41,151,255,.4);
  margin-bottom:12px;
}
.kstory-scene__copy h3{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(20px, 3vw, 32px);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--text);
  margin:0;
  line-height:1.2;
}
.kstory-scene__copy h3 em{
  font-style:normal;
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  font-weight:800;
}

/* ============================================================
   PROGRESS BAR + NAVIGATION (prev/next + dots)
   ============================================================ */
.konnect-story__progress{
  position:absolute;
  bottom:0; left:0; right:0;
  height:3px;
  background:rgba(255,255,255,.06);
  z-index:5;
}
.konnect-story__bar{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  transition:width .25s linear;
  box-shadow:0 0 12px rgba(41,151,255,.6);
}

.konnect-story__nav{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:6;
}
.konnect-story__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px; height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.4);
  color:var(--text);
  cursor:pointer;
  display:grid; place-items:center;
  padding:0;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  pointer-events:auto;
  transition:transform .25s var(--spring), background .25s ease, border-color .25s ease, color .25s ease;
}
.konnect-story__btn--prev{ left:16px; }
.konnect-story__btn--next{ right:16px; }
.konnect-story__btn svg{ width:18px; height:18px; }
.konnect-story__btn:hover{
  transform:translateY(-50%) scale(1.1);
  background:rgba(41,151,255,.35);
  border-color:rgba(41,151,255,.65);
  color:var(--brand-2);
}
.konnect-story__dots{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  pointer-events:auto;
}
.konnect-story__dot{
  width:7px; height:7px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:transparent;
  cursor:pointer;
  padding:0;
  transition:transform .3s var(--spring), background .3s ease, border-color .3s ease;
}
.konnect-story__dot.is-active{
  background:var(--brand);
  border-color:var(--brand);
  transform:scale(1.3);
  box-shadow:0 0 10px rgba(41,151,255,.7);
}
.konnect-story__dot:hover{ border-color:rgba(41,151,255,.7); }

/* ============================================================
   SCENE 1 — "Identifica tu audiencia ideal" (audience sphere)
   ============================================================ */
.kstory-1__sphere{
  position:relative;
  width:300px; height:300px;
  display:grid; place-items:center;
}
.kstory-1__halo{
  position:absolute; inset:0;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(41,151,255,.5), rgba(41,151,255,.1) 60%, transparent 80%);
  filter:blur(20px);
  animation:kstory1Halo 4s ease-in-out infinite;
}
@keyframes kstory1Halo{
  0%,100%{ transform:scale(.95); opacity:.65; }
  50%    { transform:scale(1.1);  opacity:1; }
}
.kstory-1__core{
  position:relative;
  width:60px; height:60px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, var(--brand-2) 60%, var(--brand) 100%);
  box-shadow:0 0 30px rgba(41,151,255,.85);
  z-index:2;
  animation:kstory1Core 4s ease-in-out infinite;
}
@keyframes kstory1Core{
  0%,100%{ transform:scale(1);   filter:brightness(1); }
  50%    { transform:scale(1.06); filter:brightness(1.3); }
}
.kstory-1__dot{
  position:absolute;
  top:50%; left:50%;
  width:6px; height:6px;
  border-radius:50%;
  background:rgba(180,220,255,.85);
  box-shadow:0 0 6px rgba(120,180,255,.6);
  transform:translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(calc(-1 * var(--r, 100px) * 1.6)) rotate(calc(-1 * var(--a, 0deg))) scale(.4);
  opacity:0;
}
.kstory-1__dot--accent{
  width:9px; height:9px;
  background:var(--brand-2);
  box-shadow:0 0 12px var(--brand-2);
}
.kstory-scene--1.is-active .kstory-1__dot{
  animation:kstory1DotMove 5s cubic-bezier(.16,1,.3,1) forwards, kstory1DotOrbit 18s linear 5s infinite;
}
@keyframes kstory1DotMove{
  0%   { opacity:0; transform:translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r) * 1.6)) rotate(calc(-1 * var(--a))) scale(.4); }
  20%  { opacity:1; }
  100% { opacity:1; transform:translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))) scale(1); }
}
@keyframes kstory1DotOrbit{
  from{ transform:translate(-50%, -50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))) scale(1); }
  to  { transform:translate(-50%, -50%) rotate(calc(var(--a) + 360deg)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a) - 360deg)) scale(1); }
}

/* ============================================================
   SCENE 2 — "Llévala a todas tus campañas" (hub + platforms)
   ============================================================ */
.kstory-2__hub{
  position:relative;
  width:340px; height:340px;
  display:grid; place-items:center;
}
.kstory-2__center{
  position:absolute;
  width:50px; height:50px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, var(--brand-2) 60%, var(--brand) 100%);
  box-shadow:0 0 30px rgba(41,151,255,.85);
  z-index:3;
}
.kstory-2__line{
  position:absolute;
  top:50%; left:50%;
  width:140px; height:1.5px;
  transform-origin:left center;
  transform:rotate(var(--rot, 0deg)) scaleX(0);
  background:linear-gradient(90deg, rgba(41,151,255,.85), rgba(41,151,255,0));
  z-index:1;
  opacity:0;
}
.kstory-scene--2.is-active .kstory-2__line{
  animation:kstory2LineDraw .9s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(.4s + (var(--rot, 0deg) / 360deg) * .35s);
}
@keyframes kstory2LineDraw{
  0%   { opacity:0; transform:rotate(var(--rot)) scaleX(0); }
  20%  { opacity:1; }
  100% { opacity:1; transform:rotate(var(--rot)) scaleX(1); }
}
.kstory-2__node{
  position:absolute;
  top:50%; left:50%;
  width:42px; height:42px;
  margin:-21px 0 0 -21px;
  border-radius:50%;
  background:#fff;
  color:#0a0c10;
  display:grid; place-items:center;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:18px;
  box-shadow:0 6px 18px rgba(41,151,255,.4);
  transform:rotate(var(--rot, 0deg)) translateX(180px) rotate(calc(-1 * var(--rot, 0deg))) scale(.4);
  opacity:0;
  z-index:2;
}
.kstory-scene--2.is-active .kstory-2__node{
  animation:kstory2NodeIn .8s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:calc(1s + (var(--rot, 0deg) / 360deg) * .35s);
}
@keyframes kstory2NodeIn{
  0%   { opacity:0; transform:rotate(var(--rot)) translateX(180px) rotate(calc(-1 * var(--rot))) scale(.4); }
  60%  { opacity:1; transform:rotate(var(--rot)) translateX(132px) rotate(calc(-1 * var(--rot))) scale(1.08); }
  100% { opacity:1; transform:rotate(var(--rot)) translateX(140px) rotate(calc(-1 * var(--rot))) scale(1); }
}

/* ============================================================
   SCENE 3 — "Las reglas del juego cambian" (Konnect K reveal)
   ============================================================ */
.kstory-3__brand{
  position:relative;
  display:flex; align-items:center;
  font-family:'Montserrat',sans-serif;
}
.kstory-3__pulse{
  position:absolute;
  top:50%; left:50%;
  width:140px; height:140px;
  margin:-70px 0 0 -70px;
  border-radius:50%;
  border:2px solid rgba(41,151,255,.7);
  opacity:0;
  pointer-events:none;
}
.kstory-scene--3.is-active .kstory-3__pulse{
  animation:kstory3Pulse 2.6s cubic-bezier(.16,1,.3,1) infinite;
}
.kstory-scene--3.is-active .kstory-3__pulse:nth-of-type(2){ animation-delay:.85s; }
.kstory-scene--3.is-active .kstory-3__pulse:nth-of-type(3){ animation-delay:1.7s; }
@keyframes kstory3Pulse{
  0%   { opacity:.85; transform:scale(.5); }
  100% { opacity:0;   transform:scale(2.6); }
}
.kstory-3__k{
  display:block;
  height:clamp(120px, 16vw, 200px);
  width:auto;
  filter:drop-shadow(0 0 30px rgba(41,151,255,.6));
  z-index:2;
  opacity:0;
  transform:scale(.4) rotate(-8deg);
}
.kstory-scene--3.is-active .kstory-3__k{
  animation:kstory3K 1.2s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes kstory3K{
  0%   { opacity:0; transform:scale(.4) rotate(-8deg); filter:brightness(2.4) drop-shadow(0 0 0 rgba(41,151,255,0)); }
  60%  { opacity:1; transform:scale(1.12) rotate(3deg); filter:brightness(1.5) drop-shadow(0 0 50px rgba(41,151,255,1)); }
  100% { opacity:1; transform:scale(1)   rotate(0deg); filter:brightness(1) drop-shadow(0 0 30px rgba(41,151,255,.6)); }
}
/* Lens-flare rays burst behind the K */
.kstory-3__brand::before{
  content:""; position:absolute;
  top:50%; left:50%;
  width:300px; height:300px;
  margin:-150px 0 0 -150px;
  background:
    conic-gradient(from 0deg,
      rgba(255,255,255,.5) 0deg, transparent 6deg 30deg,
      rgba(120,180,255,.4) 60deg, transparent 66deg 90deg,
      rgba(255,255,255,.5) 120deg, transparent 126deg 150deg,
      rgba(120,180,255,.4) 180deg, transparent 186deg 210deg,
      rgba(255,255,255,.5) 240deg, transparent 246deg 270deg,
      rgba(120,180,255,.4) 300deg, transparent 306deg 360deg);
  -webkit-mask:radial-gradient(closest-side, transparent 22%, #000 30%, transparent 70%);
          mask:radial-gradient(closest-side, transparent 22%, #000 30%, transparent 70%);
  filter:blur(2px);
  opacity:0;
  pointer-events:none;
  z-index:1;
}
.kstory-scene--3.is-active .kstory-3__brand::before{
  animation:kstory3Flare 2s ease-out forwards;
}
@keyframes kstory3Flare{
  0%   { opacity:0; transform:scale(.4) rotate(0deg); }
  30%  { opacity:.95; transform:scale(1) rotate(20deg); }
  100% { opacity:.5; transform:scale(1.2) rotate(45deg); }
}
.kstory-3__brace{
  font-size:160px;
  font-weight:900;
  letter-spacing:-.05em;
  color:var(--brand);
  z-index:2;
  margin-left:-12px;
  filter:drop-shadow(0 0 22px rgba(41,151,255,.7));
  opacity:0;
  transform:translateX(40px);
}
.kstory-scene--3.is-active .kstory-3__brace{
  animation:kstory3Brace .8s cubic-bezier(.34,1.56,.64,1) .5s forwards;
}
@keyframes kstory3Brace{
  0%   { opacity:0; transform:translateX(40px); }
  100% { opacity:1; transform:translateX(0); }
}

/* ============================================================
   SCENE 4 — "Tu data, activable" (Konnect connecting platforms)
   ============================================================ */
.kstory-4__net{
  position:relative;
  width:380px; height:380px;
  display:grid; place-items:center;
}
.kstory-4__center{
  position:absolute;
  width:80px; height:80px;
  border-radius:50%;
  background:#ffffff;
  display:grid; place-items:center;
  box-shadow:0 0 40px rgba(41,151,255,.85), 0 0 0 1px rgba(255,255,255,.5);
  z-index:3;
  opacity:0;
  transform:scale(.4);
}
.kstory-4__center img{
  display:block;
  width:54%;
  height:auto;
  object-fit:contain;
}
.kstory-scene--4.is-active .kstory-4__center{
  animation:kstory4Center .8s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes kstory4Center{
  0%   { opacity:0; transform:scale(.4); }
  100% { opacity:1; transform:scale(1); }
}
.kstory-4__beam{
  position:absolute;
  top:50%; left:50%;
  width:160px; height:2px;
  transform-origin:left center;
  transform:rotate(var(--rot, 0deg)) scaleX(0);
  background:linear-gradient(90deg, rgba(41,151,255,.6), rgba(41,151,255,0));
  z-index:1;
  opacity:0;
}
.kstory-scene--4.is-active .kstory-4__beam{
  animation:kstory4Beam .7s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:calc(.4s + (var(--rot, 0deg) / 360deg) * .3s);
}
@keyframes kstory4Beam{
  0%   { opacity:0; transform:rotate(var(--rot)) scaleX(0); }
  100% { opacity:1; transform:rotate(var(--rot)) scaleX(1); }
}
.kstory-4__beam i{
  position:absolute;
  left:0;
  top:50%;
  width:8px; height:8px;
  margin-top:-4px;
  border-radius:50%;
  background:var(--brand-2);
  box-shadow:0 0 14px var(--brand-2);
  opacity:0;
}
/* Particles flow continuously while scene 4 is active (2s loop, 6s window = 3 cycles) */
.kstory-scene--4.is-active .kstory-4__beam i{
  animation:kstory4Particle 2s linear infinite;
}
.kstory-scene--4.is-active .kstory-4__beam:nth-of-type(2) i{ animation-delay:.18s; }
.kstory-scene--4.is-active .kstory-4__beam:nth-of-type(3) i{ animation-delay:.36s; }
.kstory-scene--4.is-active .kstory-4__beam:nth-of-type(4) i{ animation-delay:.54s; }
.kstory-scene--4.is-active .kstory-4__beam:nth-of-type(5) i{ animation-delay:.72s; }
.kstory-scene--4.is-active .kstory-4__beam:nth-of-type(6) i{ animation-delay:.9s; }
@keyframes kstory4Particle{
  0%   { opacity:0; left:0; }
  10%  { opacity:1; left:0; }
  85%  { opacity:1; left:140px; }
  100% { opacity:0; left:160px; }
}
.kstory-4__node{
  position:absolute;
  top:50%; left:50%;
  width:68px; height:68px;
  margin:-34px 0 0 -34px;
  border-radius:50%;
  background:#fff;
  color:#0a0c10;
  display:grid; place-items:center;
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:20px;
  box-shadow:0 8px 20px rgba(41,151,255,.45);
  z-index:2;
  opacity:0;
  transform:rotate(var(--rot, 0deg)) translateX(200px) rotate(calc(-1 * var(--rot, 0deg))) scale(.4);
}
.kstory-4__node img{
  max-width:78%; max-height:78%;
  width:auto; height:auto;
  object-fit:contain;
  display:block;
}
.kstory-scene--4.is-active .kstory-4__node{
  animation:kstory4Node .8s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:calc(.7s + (var(--rot, 0deg) / 360deg) * .3s);
}
@keyframes kstory4Node{
  0%   { opacity:0; transform:rotate(var(--rot)) translateX(200px) rotate(calc(-1 * var(--rot))) scale(.4); }
  100% { opacity:1; transform:rotate(var(--rot)) translateX(160px) rotate(calc(-1 * var(--rot))) scale(1); }
}

/* ============================================================
   SCENE 5 — "Prepárate para cambiar el juego" (results chips)
   ============================================================ */
.kstory-5__stats{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
}
.kstory-5__chip{
  padding:24px 32px;
  border-radius:18px;
  background:linear-gradient(160deg, rgba(41,151,255,.16), rgba(41,151,255,.05));
  border:1px solid rgba(41,151,255,.4);
  text-align:center;
  min-width:160px;
  opacity:0;
  transform:translateY(20px) scale(.94);
}
.kstory-scene--5.is-active .kstory-5__chip{
  animation:kstory5Chip .8s cubic-bezier(.34,1.56,.64,1) forwards;
}
.kstory-scene--5.is-active .kstory-5__chip:nth-of-type(2){ animation-delay:.18s; }
.kstory-scene--5.is-active .kstory-5__chip:nth-of-type(3){ animation-delay:.36s; }
.kstory-5__chip--free{
  background:linear-gradient(135deg, rgba(41,151,255,.3), rgba(41,151,255,.1));
  border-color:rgba(41,151,255,.65);
  box-shadow:0 14px 36px -10px rgba(41,151,255,.6);
}
.kstory-5__chip--value{
  background:linear-gradient(135deg, rgba(120,180,255,.28), rgba(150,90,255,.14));
  border-color:rgba(180,140,255,.6);
  box-shadow:0 14px 36px -10px rgba(150,90,255,.55);
}
.kstory-5__chip--value strong{
  background:linear-gradient(135deg, #fff 0%, #b3d6ff 50%, #c7adff 100%);
  -webkit-background-clip:text; background-clip:text;
}
.kstory-scene--5.is-active .kstory-5__chip:nth-of-type(4){ animation-delay:.54s; }
.kstory-5__chip strong{
  display:block;
  font-family:'Montserrat',sans-serif;
  font-size:36px;
  font-weight:800;
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  line-height:1;
  margin-bottom:6px;
}
.kstory-5__chip small{
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-2);
}
@keyframes kstory5Chip{
  0%   { opacity:0; transform:translateY(20px) scale(.94); }
  60%  { opacity:1; transform:translateY(-4px) scale(1.04); }
  100% { opacity:1; transform:translateY(0) scale(1); }
}

/* ============================================================
   SCENE 6 — Brand close ("hero shot" with real Konnect logo)
   ============================================================ */
.kstory-6__brand{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.kstory-6__halo{
  position:absolute;
  top:50%; left:50%;
  width:520px; height:520px;
  margin:-260px 0 0 -260px;
  border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(41,151,255,.32), rgba(41,151,255,.08) 50%, transparent 80%);
  filter:blur(40px);
  pointer-events:none;
  z-index:0;
  opacity:0;
  transform:scale(.6);
}
.kstory-scene--6.is-active .kstory-6__halo{
  animation:kstory6Halo 1.4s cubic-bezier(.16,1,.3,1) forwards, kstory6HaloBreath 4s ease-in-out 1.4s infinite;
}
@keyframes kstory6Halo{
  0%   { opacity:0; transform:scale(.6); }
  100% { opacity:1; transform:scale(1); }
}
@keyframes kstory6HaloBreath{
  0%,100%{ opacity:.85; transform:scale(1); }
  50%    { opacity:1;   transform:scale(1.08); }
}
/* White pill that frames the brand mark, same family as the rest of the brand-logo pills */
.kstory-6__pill{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:24px 44px;
  background:#ffffff;
  border-radius:999px;
  box-shadow:
    0 24px 60px -10px rgba(41,151,255,.6),
    0 0 0 1px rgba(41,151,255,.25);
  opacity:0;
  transform:translateY(20px) scale(.85);
  filter:brightness(1);
}
.kstory-6__logo{
  display:block;
  height:clamp(64px, 8vw, 110px);
  width:auto;
  max-width:100%;
}
.kstory-scene--6.is-active .kstory-6__pill{
  animation:kstory6Pill 1.1s cubic-bezier(.34,1.56,.64,1) .35s forwards;
}
@keyframes kstory6Pill{
  0%   { opacity:0; transform:translateY(20px) scale(.85); filter:brightness(1.6); }
  60%  { opacity:1; transform:translateY(-4px) scale(1.04); filter:brightness(1.2); }
  100% { opacity:1; transform:translateY(0)   scale(1);    filter:brightness(1); }
}
/* A second sweeping shimmer ring around the pill, just for polish */
.kstory-6__pill::after{
  content:""; position:absolute;
  inset:-6px;
  border-radius:999px;
  border:1.5px solid rgba(41,151,255,.55);
  opacity:0;
  pointer-events:none;
}
.kstory-scene--6.is-active .kstory-6__pill::after{
  animation:kstory6PillRing 2.4s ease-out 1s infinite;
}
@keyframes kstory6PillRing{
  0%   { opacity:.85; transform:scale(1);    }
  100% { opacity:0;   transform:scale(1.18); }
}

/* ============================================================
   ACCESSIBILITY + RESPONSIVE
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .konnect-story *{ animation:none !important; }
  .kstory-scene{ opacity:1; }
  .kstory-scene__copy{ opacity:1; transform:none; }
  /* Show only scene 1 statically */
  .kstory-scene--2,
  .kstory-scene--3,
  .kstory-scene--4,
  .kstory-scene--5,
  .kstory-scene--6{ display:none; }
}

@media (max-width:780px){
  .kstory-1__sphere,
  .kstory-2__hub,
  .kstory-4__net{ transform:scale(.7); }
  .kstory-3__k,
  .kstory-3__brace{ font-size:110px; }
  .kstory-5__chip{ padding:16px 22px; min-width:110px; }
  .kstory-5__chip strong{ font-size:24px; }
  .kstory-6__halo{ width:380px; height:380px; margin:-190px 0 0 -190px; }
}