/* ============================================================
   KYVOS — home page (the cinematic one)
   ============================================================ */

/* ---------- pinned hero narrative (escenas 1-4) ---------- */
.hero-scenes{
  position: relative;
  height: 480vh;
}
.hero-pin{
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
  display:flex; align-items:center; justify-content:center;
  background: radial-gradient(ellipse at 50% 38%, #0d1a1c 0%, #08090b 62%);
}
.hero-canvas-wrap{ position:absolute; inset:0; }
#hero-canvas{ width:100%; height:100%; display:block; }

.hero-textlayer{
  position:relative; z-index:5; width:100%; height:100%;
  pointer-events:none;
}
.scene-block{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; opacity:0; padding: 0 24px;
}
#scene1{ opacity:1; }
.scene-block h1, .scene-block h2, .scene-block p.lead{
  text-shadow: 0 4px 30px rgba(4,6,8,0.85), 0 1px 4px rgba(0,0,0,0.9);
}
.scene-block h1, .scene-block h2{ position:relative; z-index:2; }
.scene-kicker{
  font-family:'Space Grotesk', sans-serif; font-size: 14px; letter-spacing: .32em;
  color: var(--cyan); margin-bottom: 22px; text-transform: uppercase;
}
.scene-block h1{
  font-size: clamp(40px, 7vw, 88px);
  max-width: 920px;
}
.scene-block h1 + p{
  margin-top: 22px; color: var(--text-dim); font-size: 19px; max-width: 46ch;
}
#scene2 h2, #scene3 h2{ font-size: clamp(28px, 4.4vw, 50px); max-width: 780px; }
@media (max-width: 700px){
  #scene2 h2, #scene3 h2{ max-width: 260px; font-size: 26px; }
  .node-chip{ font-size: 11.5px; padding: 6px 11px; }
  .panel-chip{ font-size: 12px; padding: 8px 13px; }
}
#scene4 p.lead{ color: var(--text-dim); font-size: 17px; max-width: 44ch; margin: 0 auto 40px; }

.scroll-progress{
  position:absolute; left: 40px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 160px; background: var(--line); z-index: 6;
}
.scroll-progress i{
  position:absolute; top:0; left:-2px; width:6px; height:0%;
  background: var(--grad-core); border-radius: 3px;
}
@media (max-width: 860px){ .scroll-progress{ display:none; } }

/* panel chips - escena 2 (el problema) */
.panel-chip{
  position:absolute; opacity:0;
  font-size: 13.5px; font-weight: 600; color: var(--text-dim);
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  padding: 10px 16px; border-radius: var(--radius-pill);
  backdrop-filter: blur(10px);
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
@media (prefers-reduced-motion: reduce){ .panel-chip{ animation:none; } }

/* node chips - escena 3 (inteligencia) */
.node-pos{
  position:absolute; transform: translate(-50%,-50%);
}
.node-chip{
  display:inline-block; opacity:0; transform: scale(.8);
  font-size: 12.5px; font-weight: 600; color: var(--text);
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(20,26,30,0.7);
  padding: 8px 14px; border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* flow row - escena 4 (la automatizacion) */
.flow-row{
  display:flex; align-items:center; justify-content:center; gap: 14px; flex-wrap: wrap;
  max-width: 760px;
}
.flow-item{
  opacity:0; transform: translateY(14px);
  font-family:'Space Grotesk',sans-serif; font-size: 15px; color: var(--text);
  border: 1px solid var(--line-strong); padding: 11px 18px; border-radius: var(--radius-pill);
}
.flow-arrow{ opacity:0; color: var(--cyan); font-size: 16px; }

/* ---------- escena 5: desarrollo web (breather, not pinned) ---------- */
.scene-web{
  position: relative; padding: 160px 0 180px;
  background: linear-gradient(180deg, #08090b 0%, #0a0e12 100%);
}
.scene-web-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items:center;
}
@media (max-width: 900px){ .scene-web-grid{ grid-template-columns: 1fr; gap: 56px; } }

.scene-web h2{ font-size: clamp(34px, 5vw, 58px); max-width: 560px; }
.scene-web .lede{ color: var(--text-dim); font-size: 17px; margin-top: 20px; max-width: 44ch; }

.web-rotator{ position:relative; height: 30px; margin: 22px 0 6px; overflow:hidden; }
.web-rotator span{
  position:absolute; left:0; top:0;
  font-family:'Space Grotesk',sans-serif; font-size: 18px; font-weight:600; color: var(--cyan);
  opacity:0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.web-rotator span::before{ content:'\2192\00a0'; }
.web-rotator span.is-active{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .web-rotator span{ transition:none; } }

.scene-web-list{ margin-top: 22px; display:flex; flex-direction:column; gap: 14px; }
.scene-web-list li{ display:flex; gap: 12px; align-items:baseline; color: var(--text-dim); font-size: 15px; }
.scene-web-list li::before{ content:''; width:5px; height:5px; border-radius:50%; background: var(--grad-core); flex-shrink:0; transform: translateY(-2px); }

.panel-stack{ position:relative; height: 420px; perspective: 1200px; }
.glass-card{
  position:absolute; width: 78%; aspect-ratio: 4/3;
  border-radius: 14px; border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(155deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015));
  backdrop-filter: blur(8px);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
  padding: 22px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.glass-card:hover{ border-color: rgba(69,224,214,0.4); box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 40px rgba(69,224,214,0.12); }
.glass-card .grid-mark{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns: repeat(4,1fr); gap: 6px;
}
.glass-card .grid-mark i{ height: 5px; border-radius: 2px; background: rgba(255,255,255,0.14); }
.glass-card .grid-mark i:nth-child(3n){ background: linear-gradient(90deg, var(--cyan), var(--indigo)); opacity:.7; }
.glass-card .grid-mark::after{
  content:''; position:absolute; top:-4px; bottom:-4px; left:-50%; width:35%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.16), transparent);
  animation: shimmer-sweep 3.4s ease-in-out infinite;
}
@keyframes shimmer-sweep{ 0%{ left:-50%; } 100%{ left:120%; } }
@media (prefers-reduced-motion: reduce){ .glass-card .grid-mark::after{ animation:none; } }
.glass-card .card-tag{ font-family:'Space Grotesk',sans-serif; font-size: 13px; color: var(--text-faint); letter-spacing:.08em; }
.card-a{ top: 0; left: 0; z-index: 3; }
.card-b{ top: 60px; left: 20%; z-index: 2; opacity: .8; }
.card-c{ top: 120px; left: 40%; z-index: 1; opacity: .55; }

/* ---------- escena 6: resultado + cta ---------- */
.scene-result{
  position: relative; padding: 190px 0 170px; text-align:center;
  overflow:hidden;
}
.result-core-wrap{
  position:relative; width: 96px; height: 96px; margin: 0 auto 40px;
}
.result-core-wrap::before{
  content:''; position:absolute; inset:-30px; border-radius:50%;
  background: radial-gradient(circle, rgba(69,224,214,0.16), transparent 68%);
  animation: core-breathe 3.6s ease-in-out infinite;
}
@keyframes core-breathe{
  0%, 100%{ transform: scale(0.9); opacity: .7; }
  50%{ transform: scale(1.12); opacity: 1; }
}
.result-core{ position:relative; width: 96px; height: 96px; opacity: .95; }
.result-core .ring-spin{ transform-box: fill-box; transform-origin: center; animation: ring-spin 14s linear infinite; }
@keyframes ring-spin{ to{ transform: rotate(360deg); } }
.result-core .k-path{
  stroke-dasharray: 24; stroke-dashoffset: 24;
}
.result-core-wrap.is-in .k-path{ animation: k-draw 1s var(--ease) forwards; }
.result-core-wrap.is-in .k-path:nth-of-type(2){ animation-delay: .1s; }
.result-core-wrap.is-in .k-path:nth-of-type(3){ animation-delay: .2s; }
@keyframes k-draw{ to{ stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce){
  .result-core-wrap::before{ animation:none; }
  .result-core .ring-spin{ animation:none; }
  .result-core .k-path{ stroke-dashoffset:0; animation:none; }
}
.scene-result h2{
  font-size: clamp(38px, 6vw, 72px); max-width: 820px; margin: 0 auto;
}
.scene-result .lede{
  color: var(--text-dim); font-size: 18px; margin: 24px auto 46px; max-width: 46ch;
}
.result-glow{
  position:absolute; left:50%; top: 10%; width: 700px; height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(69,224,214,0.12), transparent 62%);
  pointer-events:none;
}
.result-particles{ position:absolute; inset:0; pointer-events:none; }
.result-particles i{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background: var(--cyan); opacity:.5;
  animation: result-drift 7s ease-in-out infinite;
}
.result-particles i:nth-child(1){ left:12%; top:20%; animation-delay:0s; background:var(--cyan); }
.result-particles i:nth-child(2){ left:85%; top:30%; animation-delay:1s; background:var(--indigo); }
.result-particles i:nth-child(3){ left:22%; top:70%; animation-delay:2s; background:var(--indigo); }
.result-particles i:nth-child(4){ left:78%; top:75%; animation-delay:3s; background:var(--cyan); }
.result-particles i:nth-child(5){ left:50%; top:15%; animation-delay:4s; background:var(--cyan); }
.result-particles i:nth-child(6){ left:60%; top:85%; animation-delay:5s; background:var(--indigo); }
@keyframes result-drift{
  0%, 100%{ transform: translateY(0) scale(1); opacity:.35; }
  50%{ transform: translateY(-26px) scale(1.4); opacity:.8; }
}
@media (prefers-reduced-motion: reduce){ .result-particles i{ animation:none; } }