/* OCTI Experience 5.0 — motion system (transform/opacity only) */

/* —— L1: typographic highlights —— */
.hl{position:relative;display:inline;background-image:linear-gradient(90deg,rgba(0,209,255,.28),rgba(46,46,132,.22));background-repeat:no-repeat;background-size:0% 42%;background-position:0 88%;transition:background-size var(--dur-hl) var(--ease-soft);transition-delay:var(--hl-d,0s);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hl.is-on,.no-js .hl{background-size:100% 42%}
.hl--on-dark{background-image:linear-gradient(90deg,rgba(0,209,255,.35),rgba(126,228,255,.18))}
.hl-line{position:relative}
.hl-line::after{content:"";position:absolute;left:0;bottom:-.08em;width:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--secondary),var(--primary-light));transition:width var(--dur-hl) var(--ease-soft);transition-delay:var(--hl-d,0s)}
.hl-line.is-on::after,.no-js .hl-line::after{width:100%}

/* —— L2: tiles / icons —— */
.tile__icon--draw svg,.ico-draw{overflow:visible}
.tile.is-in .tile__icon--draw,.tile:hover .tile__icon{transform:scale(1.04);background:rgba(0,209,255,.1);color:var(--primary)}
.tile__icon{transition:transform var(--dur-med) var(--ease-out),background var(--dur-med) var(--ease),color var(--dur-med) var(--ease)}
.link-arrow{display:inline-flex;align-items:center;gap:8px}
.link-arrow svg{transition:transform var(--dur-med) var(--ease-out)}
.tile:hover .link-arrow svg{transform:translateX(4px)}

/* —— L2: challenge explore cue —— */
.challenge{position:relative}
.challenge__body{padding-bottom:46px}
.challenge__go{position:absolute;left:20px;bottom:16px;display:inline-flex;align-items:center;gap:6px;font:600 .82rem/1 var(--font-body);color:var(--primary);opacity:0;transform:translateX(-6px);transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out)}
.challenge__go::after{content:"→";font-weight:700}
.challenge:hover .challenge__go,.challenge:focus-visible .challenge__go{opacity:1;transform:none}
.challenge:focus-visible{outline:2px solid var(--secondary);outline-offset:2px}
.challenge__body::after{content:"Explorar →";position:absolute;left:20px;bottom:16px;font:600 .82rem/1 var(--font-body);color:var(--primary);opacity:0;transform:translateX(-6px);transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out)}
.challenge:hover .challenge__body::after,.challenge:focus-visible .challenge__body::after{opacity:1;transform:none}

/* —— L2: vision icons —— */
.vision__points li{transition:transform var(--dur-med) var(--ease-out)}
.vision__points li:hover{transform:translateX(4px)}
.vision__ico{transition:transform var(--dur-med) var(--ease-out),background var(--dur-med) var(--ease),color var(--dur-med) var(--ease)}
.vision__points li:hover .vision__ico{transform:scale(1.06);background:rgba(0,209,255,.12);color:var(--primary-dark)}

/* —— L2: form —— */
.form label{transition:color var(--dur-fast) var(--ease)}
.form input,.form select,.form textarea{transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease-out)}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(46,46,132,.18);outline:none}
.form button[type=submit]{position:relative;overflow:hidden}
.form button[type=submit]::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-120%);pointer-events:none}
.form button[type=submit]:hover::after{animation:btnSheen .9s var(--ease-out)}
@keyframes btnSheen{to{transform:translateX(120%)}}

/* —— L3: process pulse —— */
@keyframes procPulse{
  0%{opacity:.35;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.15)}
  100%{opacity:.35;transform:scale(.9)}
}
.steps.is-in .process-line__pulse{animation:procPulse var(--dur-pulse) var(--ease-in-out) infinite}

/* —— L3: security SVG flow —— */
.frame{position:relative}
.svg-flow{position:absolute;right:16px;bottom:16px;width:min(42%,220px);height:auto;color:rgba(0,209,255,.85);pointer-events:none;filter:drop-shadow(0 8px 18px rgba(15,14,31,.35))}
.svg-flow__path{stroke-dasharray:220;stroke-dashoffset:220}
.svg-flow__check{stroke-dasharray:60;stroke-dashoffset:60}
.svg-flow__pulse{stroke-dasharray:8 120;stroke-dashoffset:140;opacity:.7}
.frame.is-in .svg-flow__path{animation:drawPath 1.1s var(--ease-out) forwards}
.frame.is-in .svg-flow__check{animation:drawPath .7s var(--ease-out) .55s forwards}
.frame.is-in .svg-flow__pulse{animation:dashFlow 2.8s linear .8s infinite}
.frame.is-in .svg-flow__node{animation:nodeBlink 2.2s var(--ease-in-out) infinite}
@keyframes drawPath{to{stroke-dashoffset:0}}
@keyframes dashFlow{to{stroke-dashoffset:-140}}
@keyframes nodeBlink{0%,100%{opacity:.45}50%{opacity:1}}

/* —— L3: timeline active emphasis —— */
.tl-step.is-active h3{color:var(--secondary)}
.tl-step.is-active .tl-ico{transform:scale(1.06);box-shadow:0 0 0 4px rgba(0,209,255,.15)}
.tl-ico{transition:transform var(--dur-med) var(--ease-out),box-shadow var(--dur-med) var(--ease)}

/* —— reduced motion —— */
@media (prefers-reduced-motion:reduce){
  .hl,.hl-line::after{transition:none;background-size:100% 42%;width:100%}
  .svg-flow__path,.svg-flow__check{stroke-dashoffset:0;animation:none!important}
  .svg-flow__pulse,.svg-flow__node,.steps.is-in .process-line__pulse,.form button[type=submit]::after{animation:none!important}
  .challenge__body::after{opacity:.85;transform:none}
  .hero-video{display:none}
  .hero [data-slide="0"]{background:center/cover no-repeat url("../assets/images/hero-video-poster.jpg")}
}