/* ===== 드론 파트너스 인트로 ===== */
/* 첫 진입 시 약 4초, sessionStorage로 1회만 */

:root{
  --intro-navy:#0a1530;
  --intro-navy-2:#142447;
  --intro-sky:#5ec1ff;
  --intro-line:rgba(94,193,255,.55);
  --intro-soft:rgba(255,255,255,.55);
}

#dpIntro{
  position:fixed;inset:0;z-index:9999;
  background:radial-gradient(circle at 50% 55%, var(--intro-navy-2) 0%, var(--intro-navy) 70%);
  overflow:hidden;
  opacity:1;transition:opacity .8s ease;
  display:flex;align-items:center;justify-content:center;
}
#dpIntro.fading{opacity:0;pointer-events:none}
#dpIntro.hidden{display:none}
body.dp-intro-lock{overflow:hidden}

/* 별 노이즈 배경 */
.dpi-stars{
  position:absolute;inset:0;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 18%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.2px 1.2px at 38% 78%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(2px 2px at 88% 64%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 22% 90%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1.2px 1.2px at 60% 12%, rgba(255,255,255,.45), transparent 60%);
  opacity:.55;
}

/* 상하 sky 라인 (좌→우 그어짐) */
.dpi-bar{position:absolute;left:0;right:0;height:2px;background:var(--intro-sky);transform:scaleX(0);transform-origin:left;animation:dpiBar 1s cubic-bezier(.7,.1,.3,1) .2s forwards;box-shadow:0 0 12px var(--intro-sky)}
.dpi-bar.top{top:36px}
.dpi-bar.bottom{bottom:36px;transform-origin:right;animation-delay:.3s}
@keyframes dpiBar{to{transform:scaleX(1)}}

/* 동심원 레이더 (감시/신호파) */
.dpi-ring{
  position:absolute;top:50%;left:50%;
  border:1px solid var(--intro-line);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  animation:dpiRing 2.4s cubic-bezier(.2,.8,.3,1) forwards;
  pointer-events:none;
}
.dpi-ring.r1{width:220px;height:220px;animation-delay:.5s}
.dpi-ring.r2{width:380px;height:380px;animation-delay:.75s}
.dpi-ring.r3{width:560px;height:560px;animation-delay:1.0s;border-color:rgba(94,193,255,.35)}
.dpi-ring.r4{width:780px;height:780px;animation-delay:1.25s;border-color:rgba(94,193,255,.2)}
@keyframes dpiRing{
  0%{transform:translate(-50%,-50%) scale(0);opacity:0}
  25%{opacity:1}
  100%{transform:translate(-50%,-50%) scale(1);opacity:.18}
}

/* 십자 가이드 (드론 정착 지점) */
.dpi-cross{position:absolute;top:50%;left:50%;width:48px;height:48px;transform:translate(-50%,-50%);opacity:0;animation:dpiFade .6s .4s ease forwards}
.dpi-cross::before,.dpi-cross::after{content:'';position:absolute;background:var(--intro-sky);box-shadow:0 0 8px var(--intro-sky)}
.dpi-cross::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.dpi-cross::after{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
@keyframes dpiFade{to{opacity:.7}}

/* 드론 비행 — 우측 화면 밖 → 중앙 정착, 호버링 부유 */
.dpi-stage{position:relative;display:flex;flex-direction:column;align-items:center;z-index:3}
.dpi-drone{
  width:min(560px,72vw);
  filter:drop-shadow(0 12px 30px rgba(94,193,255,.35));
  transform:translate(120vw,-20vh) rotate(8deg) scale(.6);
  opacity:0;
  animation:dpiFlyIn 1.6s cubic-bezier(.2,.8,.25,1) .3s forwards, dpiHover 3.4s ease-in-out 1.9s infinite;
}
@keyframes dpiFlyIn{
  0%{transform:translate(120vw,-20vh) rotate(8deg) scale(.6);opacity:0}
  60%{opacity:1}
  85%{transform:translate(0,-6px) rotate(-1.2deg) scale(1.02)}
  100%{transform:translate(0,0) rotate(0) scale(1);opacity:1}
}
@keyframes dpiHover{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-10px) rotate(.6deg)}
}

/* 프롭 회전 효과 — 드론 위에 SVG 4개 겹침 (블러 원) */
.dpi-rotors{position:absolute;inset:0;pointer-events:none}
.dpi-rotor{
  position:absolute;width:14%;height:0;padding-top:14%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(94,193,255,.25) 45%, transparent 70%);
  opacity:0;
  animation:dpiRotorFade .4s 1.6s ease forwards, dpiRotorSpin 1.6s linear 1.6s infinite;
  filter:blur(2px);
}
.dpi-rotor.r-tl{left:7%;top:16%}
.dpi-rotor.r-tr{right:7%;top:16%}
.dpi-rotor.r-bl{left:14%;top:46%}
.dpi-rotor.r-br{right:14%;top:46%}
@keyframes dpiRotorFade{to{opacity:.85}}
@keyframes dpiRotorSpin{
  0%{transform:scale(1)}
  50%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

/* DRONE PARTNERS 텍스트 — 글자별 fade-up */
.dpi-title{
  margin-top:18px;
  font-family:'Montserrat',sans-serif;
  font-weight:900;
  font-size:clamp(28px,6vw,68px);
  letter-spacing:.14em;
  color:#fff;
  display:flex;flex-direction:column;align-items:center;gap:.08em;
  line-height:1;
  text-shadow:0 2px 18px rgba(94,193,255,.45);
  white-space:nowrap;
}
.dpi-title .dpi-row{display:flex;justify-content:center;white-space:nowrap}
.dpi-title .dpi-row+.dpi-row{margin-top:.08em}
.dpi-title .dpi-row span{display:inline-block;opacity:0;transform:translateY(14px) scale(.92);animation:dpiLetter .6s cubic-bezier(.2,.8,.3,1) forwards}
.dpi-sub{
  margin-top:14px;
  font-family:'Montserrat',sans-serif;
  font-weight:700;font-size:clamp(11px,1.4vw,14px);
  letter-spacing:.42em;
  color:var(--intro-sky);
  opacity:0;
  animation:dpiFadeUp .8s 2.6s ease forwards;
}
.dpi-tagline{
  margin-top:6px;
  font-weight:500;font-size:clamp(13px,1.6vw,16px);
  color:rgba(255,255,255,.78);letter-spacing:.04em;
  opacity:0;
  animation:dpiFadeUp .8s 2.85s ease forwards;
}
@keyframes dpiLetter{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dpiFadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* 좌우 세로 메타 */
.dpi-vside{position:absolute;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:'Montserrat',sans-serif;font-weight:600;font-size:11px;letter-spacing:.36em;color:rgba(255,255,255,.55);opacity:0;animation:dpiFadeIn 1s 2.2s ease forwards}
.dpi-vside.left{left:clamp(14px,4vw,42px)}
.dpi-vside.right{right:clamp(14px,4vw,42px)}
@keyframes dpiFadeIn{to{opacity:.55}}

/* 하단 메타 */
.dpi-meta{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);font-family:'Montserrat',sans-serif;font-weight:700;font-size:10.5px;letter-spacing:.42em;color:var(--intro-sky);opacity:0;animation:dpiFadeIn .8s 3s ease forwards;white-space:nowrap;display:inline-flex;align-items:center;max-width:96vw}
.dpi-meta::before,.dpi-meta::after{content:'';display:inline-block;width:24px;height:1px;background:var(--intro-sky);vertical-align:middle;margin:0 12px}

/* SKIP 버튼 */
.dpi-skip{position:absolute;bottom:24px;right:24px;font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:.18em;color:rgba(255,255,255,.7);background:transparent;border:1px solid rgba(255,255,255,.35);padding:8px 14px;border-radius:4px;opacity:0;animation:dpiFadeIn .6s 1s ease forwards;cursor:pointer;transition:all .2s}
.dpi-skip:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.08)}

/* 모바일 */
@media (max-width:680px){
  .dpi-bar.top{top:20px}
  .dpi-bar.bottom{bottom:20px}
  .dpi-ring.r4{display:none}
  .dpi-vside{display:none}
  .dpi-meta{bottom:46px;font-size:8.5px;letter-spacing:.22em}
  .dpi-meta::before,.dpi-meta::after{width:10px;margin:0 6px}
  .dpi-rotor{filter:blur(1.5px)}
}

/* 모션 줄이기 옵션 */
@media (prefers-reduced-motion:reduce){
  .dpi-drone{animation:none;transform:none;opacity:1}
  .dpi-rotor{animation:none;opacity:.6}
  .dpi-title span{animation:none;opacity:1;transform:none}
}