/* EK TELECOM motion pass v1 — design prototype (EK 사이트 디자인). CSS/SVG only, no libraries. */
:root{--fx-cyan:#5FE3FF;--fx-red:#FF3B47;--ease-out:cubic-bezier(.16,1,.3,1)}

/* 1. HERO — light pulses with comet tails racing along fibre lines */
.hero-fx .fx-line{stroke:rgba(0,180,216,.22)}
.hero-fx .fx-pulse{display:none} /* replaced by tail + head layers below */
.hero-fx .fx-tail{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:140 860;opacity:.55;animation:fx-tail var(--d,4s) linear infinite;animation-delay:var(--dl,0s)}
.hero-fx .fx-head{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:14 986;animation:fx-head var(--d,4s) linear infinite;animation-delay:var(--dl,0s)}
.hero-fx .fx-tail{stroke:var(--fc,#5FE3FF);opacity:.9}
.hero-fx .fx-line.fx-fibre{stroke-width:2.2;opacity:.38}
@keyframes fx-tail{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
@keyframes fx-head{from{stroke-dashoffset:874}to{stroke-dashoffset:-126}}
/* junction nodes: soft breathing glow */
.hero-fx .fx-node{fill:var(--fx-cyan);opacity:.0;animation:fx-node 3.2s ease-in-out infinite;animation-delay:var(--dl,0s);transform-box:fill-box;transform-origin:center}
@keyframes fx-node{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:.95;transform:scale(1.25)}}
/* light grid shimmer behind lines */
.hero--fx{background-image:radial-gradient(rgba(95,227,255,.10) 1px,transparent 1px);background-size:28px 28px;animation:fx-grid 20s linear infinite}
@keyframes fx-grid{to{background-position:280px 0}}

/* hero text entrance (staggered) */
.m-ready .hero .eyebrow,.m-ready .hero h1,.m-ready .hero .lead,.m-ready .hero .actions{opacity:0;transform:translateY(18px);animation:m-up .9s var(--ease-out) forwards}
.m-ready .hero h1{animation-delay:.12s}.m-ready .hero .lead{animation-delay:.26s}.m-ready .hero .actions{animation-delay:.4s}
@keyframes m-up{to{opacity:1;transform:none}}
/* headline: one light sweep across the text after it lands */
.hero h1 .m-sweep{background:linear-gradient(100deg,#fff 0 40%,var(--fx-cyan) 50%,#fff 60% 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:m-sweep 1.6s ease-in-out 1s 1 forwards}
@keyframes m-sweep{to{background-position:0 0}}

/* 2. BUTTONS — light glint on hover */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s var(--ease-out)}
.btn--primary:hover::after{left:120%}

/* 3. TRUST STRIP — a beam of light runs along the top edge, like signal in a cable */
.trust{position:relative;overflow:hidden}
.trust::before{content:"";position:absolute;top:0;left:0;height:2px;width:22%;background:linear-gradient(90deg,transparent,var(--fx-cyan),#fff,transparent);animation:m-beam 4.5s linear infinite;filter:drop-shadow(0 0 4px var(--fx-cyan))}
@keyframes m-beam{from{transform:translateX(-100%)}to{transform:translateX(560%)}}
.trust .ico{transition:box-shadow .4s,transform .4s var(--ease-out)}
.trust li:hover .ico{transform:translateY(-2px);box-shadow:0 0 0 6px rgba(227,20,27,.08)}

/* 4. SCROLL REVEAL — fade + rise, staggered per group */
.m-ready [data-m]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);transition-delay:var(--md,0s)}
.m-ready [data-m].m-in{opacity:1;transform:none}

/* 5. CARDS — lift + light sweep across the photo */
.card{transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out);position:relative;overflow:hidden}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(11,31,58,.16)}
.card .photo{transition:transform .8s var(--ease-out)}
.card:hover .photo{transform:scale(1.04)}
.card::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);pointer-events:none;transition:left .9s var(--ease-out)}
.card:hover::after{left:130%}
/* section title underline draws in like a cable being pulled */
.m-ready .section h2{position:relative}
.m-ready .section h2::after{content:"";display:block;height:3px;width:56px;margin-top:12px;border-radius:2px;background:linear-gradient(90deg,var(--red),var(--fx-cyan));transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out) .2s}
.m-ready .section h2.m-in::after{transform:scaleX(1)}

/* 6. CABLE-RUN DIVIDER between sections */
.m-cable{position:relative;height:2px;background:var(--line);overflow:hidden}
.m-cable::after{content:"";position:absolute;inset:0 auto 0 0;width:180px;background:linear-gradient(90deg,transparent,var(--red),var(--fx-cyan),transparent);animation:m-run 3.6s cubic-bezier(.6,0,.4,1) infinite}
@keyframes m-run{from{transform:translateX(-200px)}to{transform:translateX(100vw)}}

/* 7. CTA BAND — slow diagonal light streaks */
.cta-band{position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:-50% -10%;background:repeating-linear-gradient(115deg,transparent 0 120px,rgba(95,227,255,.10) 120px 122px,transparent 122px 260px);animation:m-streak 9s linear infinite;pointer-events:none}
.cta-band .container{position:relative}
@keyframes m-streak{to{transform:translateX(260px)}}

/* 1b. HERO v2 — fibre-colour ribbons (Blue, Orange, Green, Brown, Slate, White, Red, Black, Yellow, Violet, Rose, Aqua) */
.hero-fx.fx-v2 .fx-line{stroke:rgba(0,180,216,.10)}
.hero-fx .fx-strand{fill:none;stroke-width:2;opacity:.32}
.hero-fx .fx-ctail{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:180 820;opacity:.95;animation:fx-tail var(--d,2s) linear infinite;animation-delay:var(--dl,0s)}
.hero-fx .fx-chead{fill:none;stroke:#fff;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:12 988;animation:fx-chead var(--d,2s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes fx-chead{from{stroke-dashoffset:832}to{stroke-dashoffset:-168}}

/* Accessibility: everything still, content fully visible */
@media (prefers-reduced-motion:reduce){
  .hero--fx,.hero-fx *,.trust::before,.m-cable::after,.cta-band::before{animation:none!important}
  .hero-fx .fx-head,.hero-fx .fx-tail,.hero-fx .fx-ctail,.hero-fx .fx-chead{display:none}
  .hero-fx .fx-strand{opacity:.5}
  .m-ready [data-m],.m-ready .hero *{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .hero h1 .m-sweep{color:#fff;background:none}
  .m-ready .section h2::after{transform:none}
}