/* (주)디엔아이코퍼레이션 첫 화면 — 실제 풍력단지 영상(초원·하늘·돌아가는 발전기) 2편이 페이드로 번갈아 깔리고, 그 위에 로고와 들어가는 문 두 개.
   낮 하늘이라 밝은 유리 카드(IMS 로그인 카드와 같은 결)에 남색 글자. 움직임 = 영상 + 처음 등장 한 번 + 마우스 반응(Moxen vidrio). */
:root {
  --navy: #014099; --navy-deep: #0b2a5c; --ink: #141b26; --ink-2: #3c4654; --muted: #5b6575;
  --glass: rgba(255, 255, 255, .62); --glass-edge: rgba(255, 255, 255, .75); --glass-light: rgba(255, 255, 255, .55); --glass-rim: rgba(255, 255, 255, 1); --glass-sheen: rgba(255, 255, 255, .35);
  --spring: cubic-bezier(.22, 1, .36, 1);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: clip; }
body { background: #0b1a33; color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* ── 배경 영상 2편 ── */
.scene { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.bg { position: absolute; inset: 0; z-index: -1; background: #0b1a33 url("video/poster2.jpg") center / cover no-repeat; animation: bg 2.4s ease-out both; }
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; opacity: 0; transition: opacity 3s ease-in-out; }
.bg-video.on { opacity: 1; }
/* 글자가 읽히도록 왼쪽 위를 살짝 어둡게, 아래는 조금 더 */
.bg::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(6, 16, 36, .42), rgba(6, 16, 36, .12) 55%, rgba(6, 16, 36, 0)), linear-gradient(to top, rgba(6, 16, 36, .55), transparent 35%); }

/* ── 앞: 왼쪽 기둥 (PC) ── */
.door { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 44px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 64px 7vw 40px; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.logo { width: 300px; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 6px 22px rgba(0, 10, 30, .45)); animation: focus 1.3s var(--spring) .35s both; }
.brand h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: .26em; color: #fff; text-shadow: 0 1px 2px rgba(0, 10, 30, .7), 0 4px 18px rgba(0, 10, 30, .6); animation: gather 1.4s var(--spring) .9s both; }

/* ── 유리 문 두 개 ── */
.doors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 100%; max-width: 680px; margin: 0; padding: 0; list-style: none; }
.doors li { animation: card 1.1s var(--spring) both; }
.doors li:nth-child(1) { animation-delay: 1.15s; }
.doors li:nth-child(2) { animation-delay: 1.3s; }
.card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; min-height: 176px; padding: 24px 26px 20px;
  border-radius: 22px; color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; will-change: transform;
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5)), var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 #fff, 0 24px 60px -24px rgba(0, 10, 40, .55); }
.card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--navy), 0 24px 60px -24px rgba(0, 10, 40, .55); }
.card strong { display: block; font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--navy); }
.card-pms strong { color: #4a7a0f; }
.card span { display: block; margin-top: 8px; font-size: 17px; font-weight: 600; color: var(--ink-2); }
.card small { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* 유리 안의 빛 (glass.js 가 넣음) */
.gl-grain, .gl-light, .gl-edge, .gl-sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; }
.gl-grain { z-index: -1; opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.gl-light { z-index: -1; opacity: 0; }
.gl-light i, .gl-edge i { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.gl-light i { width: 480px; height: 480px; margin: -240px 0 0 -240px; background: radial-gradient(closest-side, var(--glass-light), transparent); }
.gl-edge { inset: -1px; padding: 1.5px; opacity: 0; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.gl-edge i { width: 460px; height: 460px; margin: -230px 0 0 -230px; background: radial-gradient(closest-side, var(--glass-rim), transparent); }
.gl-sheen i { position: absolute; top: -60%; bottom: -60%; left: -40%; right: -40%; will-change: transform;
  background: linear-gradient(112deg, transparent 42%, var(--glass-sheen) 49%, var(--glass-sheen) 51%, transparent 58%); }

/* ── 아래 ── */
.contact { position: relative; z-index: 1; text-align: center; padding: 16px 24px 22px; font-size: 14px; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 2px rgba(0, 10, 30, .7); animation: card 1s var(--spring) 1.7s both; }
.contact p { margin: 0; }
.contact a { color: inherit; text-decoration: none; }
.contact a:hover { color: #fff; }
.credit { margin-top: 10px !important; font-size: 11px; color: rgba(255, 255, 255, .42); }
.credit a { text-decoration: underline; text-underline-offset: 2px; }

@keyframes bg { from { opacity: 0; } to { opacity: 1; } }
@keyframes focus { from { opacity: 0; filter: blur(14px); transform: scale(.94); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes gather { from { opacity: 0; letter-spacing: .8em; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }
@keyframes card { from { opacity: 0; transform: translateY(28px) scale(.97); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }

@media (max-width: 760px) {
  .door { align-items: center; gap: 36px; padding: 56px 16px 24px; }
  .brand { align-items: center; }
  .logo { width: 220px; }
  .brand h1 { font-size: 15px; letter-spacing: .2em; text-indent: .2em; }
  .doors { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .card { min-height: 140px; padding: 20px 22px 18px; border-radius: 20px; gap: 20px; }
  .card strong { font-size: 34px; }
  .bg-video { object-position: 58% 40%; }
  .bg::after { background: linear-gradient(to top, rgba(6, 16, 36, .6), rgba(6, 16, 36, .18) 45%, rgba(6, 16, 36, .35)); }
}
@media (prefers-reduced-motion: reduce) {
  .bg, .logo, .brand h1, .doors li, .contact { animation: none !important; }
  .bg-video { transition: none; }
}