.kf-story{
  position:relative; min-height:640px; height:100vh; max-height:900px;
  overflow:hidden; background:#eaf5f4;
}
.kf-story-bg{ position:absolute; inset:0; z-index:0; }
.kf-story-bg video{
  width:100%; height:100%; object-fit:cover; mix-blend-mode:luminosity; opacity:.9;
  filter:saturate(1.1);
}

.kf-story-bg::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 45%, var(--secondary-light) 100%);
  mix-blend-mode:color; opacity:.9;
}
.kf-story-bg::after{
  content:''; position:absolute; inset:0; z-index:2;
  background:radial-gradient(circle at 50% 30%, rgba(234,245,244,0), rgba(234,245,244,.55) 72%);
}

.kf-story-container{ position:relative; z-index:1; height:100%; }
.kf-story-slide{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; z-index:1;
  transition:opacity .3s ease;
}
.kf-story-slide.active{ opacity:1; pointer-events:auto; z-index:2; }
.kf-story-slide.next{ opacity:1; z-index:1; }
.kf-story-slide.prev{ opacity:1; z-index:3; }

.kf-story-slide .kf-story-grid{
  max-width:1200px; margin:0 auto; padding:0 6%; width:100%;
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:40px;
  transform:translateZ(-550px) scale(.85);
  filter:blur(6px); opacity:0;
  transition:opacity .8s cubic-bezier(.19,1,.22,1),
             transform 1.05s cubic-bezier(.19,1,.22,1),
             filter .8s cubic-bezier(.19,1,.22,1);
}
.kf-story-slide{ perspective:1600px; perspective-origin:50% 50%; }
.kf-story-slide.active .kf-story-grid{ opacity:1; filter:blur(0); transform:translateZ(0) scale(1); }

.kf-story-slide.next .kf-story-grid{ opacity:.35; filter:blur(3px); transform:translateZ(-500px) scale(.82); }

.kf-story-slide.prev .kf-story-grid{ opacity:0; filter:blur(16px); transform:translateZ(650px) scale(1.5); }

.kf-story-grid .kf-story-art{ order:1; }
.kf-story-grid .kf-story-copy{ order:2; }
.kf-story-slide:nth-child(even) .kf-story-art{ order:2; }
.kf-story-slide:nth-child(even) .kf-story-copy{ order:1; }

.kf-story-copy{
  position:relative; z-index:1; background:rgba(4,28,31,.5); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12); border-radius:24px; padding:32px 36px;
}
.kf-story-copy h2{
  font-size:clamp(28px,4vw,44px); font-weight:800; color:#fff; margin:0 0 16px; line-height:1.3;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.kf-story-copy h2 span{ color:var(--secondary-light); }
.kf-story-copy p{ font-size:16px; line-height:1.9; color:rgba(255,255,255,.9); max-width:440px; margin:0 0 24px; font-weight:600; }
.kf-story-link{
  color:var(--secondary-light); font-weight:800; font-size:15px; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; transition:gap .25s ease;
}
.kf-story-link:hover{ gap:14px; }
.kf-story-art{ display:flex; align-items:center; justify-content:center; }
.kf-story-art img{ width:100%; max-width:380px; height:auto; }

.kf-story-art-frame{
  position:relative; width:340px; height:340px; max-width:88%; aspect-ratio:1/1;
  border-radius:50%;
  background:radial-gradient(circle at 32% 26%, #f2f9f8 0%, #d7edec 100%);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(11,94,101,.35), inset 0 0 0 1px rgba(255,255,255,.4);
}
.kf-story-art-frame::before{
  content:''; position:absolute; inset:16px; border-radius:50%;
  border:1px dashed rgba(11,94,101,.28); pointer-events:none;
}
.kf-story-art-frame::after{
  content:''; position:absolute; width:12px; height:12px; border-radius:50%;
  background:var(--secondary); top:16%; inset-inline-end:14%;
  box-shadow:0 0 0 7px rgba(212,175,55,.15); pointer-events:none;
  animation:kf-story-dot-pulse 3.4s ease-in-out infinite;
}
.kf-story-art-glow{
  position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:1;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(255,255,255,.5) 16deg, transparent 55deg,
    transparent 210deg, rgba(212,175,55,.32) 240deg, transparent 275deg,
    transparent 360deg);
  mix-blend-mode:overlay;
  animation:kf-story-glow-spin 10s linear infinite;
  will-change:transform;
}
.kf-story-art-dot2{
  position:absolute; width:9px; height:9px; border-radius:50%; z-index:2;
  background:var(--primary-light); bottom:14%; inset-inline-start:12%;
  box-shadow:0 0 0 6px rgba(18,122,131,.15); pointer-events:none;
  animation:kf-story-dot-pulse 3.4s ease-in-out infinite 1.1s;
}
@keyframes kf-story-glow-spin{ to{ transform:rotate(360deg); } }
@keyframes kf-story-dot-pulse{
  0%,100%{ transform:scale(1); opacity:.8; }
  50%{ transform:scale(1.4); opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .kf-story-art-glow{ animation:none; }
  .kf-story-art-frame::after, .kf-story-art-dot2{ animation:none; }
}
.kf-story-art-frame img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  filter:drop-shadow(0 14px 22px rgba(8,63,68,.25));
}
.kf-story-art-frame.is-cover{ overflow:hidden; }
.kf-story-art-frame.is-cover img{
  width:100%; height:100%; max-width:100%; max-height:100%;
  object-fit:cover; border-radius:50%; filter:none;
}
.kf-story-art-frame:not(.is-cover) img{ width:68%; height:68%; object-fit:contain; }

.kf-story-nav{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:4;
  display:flex; gap:8px;
}
.kf-story-dot{
  width:9px; height:9px; border-radius:50%; border:none; background:rgba(11,94,101,.25);
  cursor:pointer; padding:0; transition:.25s ease;
}
.kf-story-dot.active{ width:26px; border-radius:6px; background:var(--secondary); }

.kf-story-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(11,94,101,.15);
  background:rgba(255,255,255,.8); backdrop-filter:blur(6px); color:var(--primary); font-size:16px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.25s ease;
}
.kf-story-arrow:hover{ background:var(--secondary); color:var(--primary-dark); border-color:var(--secondary); }
.kf-story-prev{ right:24px; }
.kf-story-next{ left:24px; }

@media (max-width:900px){
  
  .kf-story{
    height:auto; min-height:unset; max-height:none;
    overflow:visible;
  }
  .kf-story-container{ height:auto; }
  .kf-story-slide{
    position:relative; inset:auto; display:flex !important; opacity:1 !important; pointer-events:auto;
    height:100vh; height:100dvh;
  }
  .kf-story-slide .kf-story-grid{
    opacity:1 !important; filter:none !important; transform:none !important;
    grid-template-columns:1fr; max-width:100%; padding:0 6%; text-align:center; gap:24px;
  }
  .kf-story-grid .kf-story-art, .kf-story-slide:nth-child(even) .kf-story-art{ order:1; }
  .kf-story-grid .kf-story-copy, .kf-story-slide:nth-child(even) .kf-story-copy{ order:2; }
  .kf-story-copy{ padding:22px 24px; }
  .kf-story-copy p{ margin-inline:auto; }

  
  .kf-story-art img{
    max-width:260px; margin:0 auto;
    opacity:0; transform:translateY(34px) scale(.92);
    transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  }
  .kf-story-slide.kf-mobile-in-view .kf-story-art img{ opacity:1; transform:translateY(0) scale(1); }

  .kf-story-arrow{ display:none; }
  .kf-story-nav{ bottom:12px; }
}