/* =========================================================================
   인트로 — ① 새벽 사무실 장면  ② 노트북 화면 속으로 진입  ③ 로고 렌즈 플레어  ④ 로고가 화면을 채우며 홈 등장
   배경은 한국 시각 기준 아침·낮·저녁·밤 4장 중 하나(data.js CN.bg). 노트북 속 로고 좌표(--lx --ly --ld)는 배경마다 달라 index.html 인라인 스크립트가 #intro 에 넣는다.
   노트북 화면 속 로고는 배경에도 구워져 있지만, 그 위에 원본 로고를 한 장 더 얹어 어떤 해상도·확대에서도 또렷하게 보이게 한다.
   ========================================================================= */
.no-intro .intro{display:none;}
.intro-active,.intro-active body{overflow:hidden;height:100%;}

.intro{
  --ih:100vh;--lx:49.81%;--ly:65.35%;--ld:4.892%;
  position:fixed;inset:0;z-index:1000;background:#000;overflow:hidden;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
@supports (height:100dvh){.intro{--ih:100dvh;}}
/* 세로 화면(휴대폰): 장면을 화면 높이의 --fit 배로 물려 구도를 멀리 잡고(노트북 + 음료가 함께 들어오게, 2026-09-24 .68→.50),
   --center(이미지 폭 기준 비율)가 화면 가로 중앙에 오도록 옆으로 밀어 왼쪽 음료까지 보이게 한다. 남는 위아래는 같은 사진을 흐리게 깔아 메운다.
   저녁은 맥주잔이 더 왼쪽이라 조금 더 멀리·더 왼쪽으로. 우측 하단 음악 컨트롤러는 장면(실사) 바로 아래에 붙인다 */
.intro__bgfill{display:none;position:absolute;inset:-6%;background:#000 center / cover no-repeat;   /* 이미지는 index.html 스크립트가 넣는다(변수 url은 css 폴더 기준으로 풀려 못 씀) */filter:blur(26px) brightness(.5) saturate(1.1);}
@media (max-aspect-ratio:4/5){
  :root{--fit:.50;--center:.44;--ih:100vh;}
  @supports (height:100dvh){:root{--ih:100dvh;}}
  :root[data-bg="evening"]{--fit:.46;--center:.42;}
  .intro__bgfill{display:block;}
  .intro .intro__scene{width:max(100vw, calc(var(--ih) * var(--fit) * 2.50063));height:max(calc(var(--ih) * var(--fit)), calc(100vw / 2.50063));transform:translate(calc(var(--center) * -100%), -50%);}
  .intro-active .music--fixed{bottom:auto;top:calc(50% + var(--ih) * var(--fit) / 2 + 12px);}
}

/* ① 장면: 이미지 비율을 유지한 채 화면을 가득 덮는 상자 (cover) */
.intro__scene{
  position:absolute;left:50%;top:50%;
  width:max(100vw, calc(var(--ih) * 2.50063));
  height:max(var(--ih), calc(100vw / 2.50063));
  transform:translate(-50%,-50%);
}
.intro__zoom{position:absolute;inset:0;transform-origin:var(--lx) var(--ly);}
.intro__zoom picture,.intro__zoom picture img{position:absolute;inset:0;width:100%;height:100%;display:block;}
.intro__zoom picture img{transform-origin:var(--lx) var(--ly);animation:introDrift 26s ease-in-out infinite alternate;will-change:transform;}
.intro.is-entering .intro__zoom picture img{animation-play-state:paused;}
@keyframes introDrift{from{transform:scale(1);}to{transform:scale(1.045);}}

/* 하늘을 천천히 지나가는 옅은 빛·안개 — 사진을 자르거나 비틀지 않고 구름이 흐르는 느낌만 준다 */
.intro__sky{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 26%, transparent 47%);
          mask-image:linear-gradient(to bottom, #000 0, #000 26%, transparent 47%);
  mix-blend-mode:screen;opacity:var(--haze,.34);
}
.haze{position:absolute;top:-10%;height:70%;border-radius:50%;filter:blur(38px);will-change:transform;}
.haze--1{left:-30%;width:55%;background:radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0));animation:hazeDrift 74s linear infinite;}
.haze--2{left:-40%;top:6%;width:42%;height:52%;background:radial-gradient(closest-side, rgba(255,255,255,.4), rgba(255,255,255,0));animation:hazeDrift 101s linear infinite -38s;}
.haze--3{left:-25%;top:-18%;width:70%;background:radial-gradient(closest-side, rgba(255,255,255,.3), rgba(255,255,255,0));animation:hazeDrift 128s linear infinite -70s;}
@keyframes hazeDrift{from{transform:translateX(0);}to{transform:translateX(260%);}}
[data-bg="day"] .intro__sky{--haze:.28;}
[data-bg="evening"] .intro__sky{--haze:.22;}
[data-bg="night"] .intro__sky{--haze:.14;}
.intro.is-entering .intro__sky{opacity:0;transition:opacity .4s;}

/* 책상 위 음료의 미세한 움직임 — 배경(picture img)과 같은 느린 확대를 따라가도록 같은 애니메이션을 준다 */
.intro__fx{position:absolute;inset:0;pointer-events:none;transform-origin:var(--lx) var(--ly);animation:introDrift 26s ease-in-out infinite alternate;will-change:transform;}
.intro.is-entering .intro__fx{animation-play-state:paused;opacity:0;transition:opacity .3s;}

/* 기포: 잔 속 액체 영역(상자 위치·크기는 data.js CN.bg.drink → intro.js 가 인라인으로 넣음) 안에서
   1~3개씩 작은 방울이 제각각 크기·타이밍으로 빠르게 올라와 표면에서 잠시 머물다 터진다 — 개별 방울은 intro.js 가 Web Animations 로 생성 */
.bubbles{position:absolute;overflow:hidden;border-radius:8% / 2.5%;contain:strict;}
.bubbles i{
  position:absolute;left:0;top:0;border-radius:50%;opacity:0;will-change:transform,opacity;
  background:radial-gradient(circle at 36% 34%, rgba(255,255,255,.95), rgba(255,255,255,.5) 40%, rgba(255,255,255,.1) 62%, rgba(255,255,255,0) 72%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.55), 0 0 2px rgba(255,255,255,.45);
}
@media (prefers-reduced-motion:reduce){.bubbles{display:none;}.intro__fx{animation:none;}}

/* 마우스 아이콘 (하단 안내 + 노트북 화면 안내 공용) */
.mouse-ico{flex:0 0 auto;display:inline-block;width:.95em;height:1.5em;border:1.5px solid rgba(255,255,255,.8);border-radius:.55em;position:relative;vertical-align:middle;}
.mouse-ico::after{content:"";position:absolute;left:50%;top:.28em;width:.16em;height:.34em;margin-left:-.08em;border-radius:.1em;background:#fff;animation:hintDrop 1.7s cubic-bezier(.6,0,.3,1) infinite;}
@keyframes hintDrop{0%{transform:translateY(0);opacity:1;}70%{transform:translateY(.55em);opacity:0;}100%{transform:translateY(0);opacity:0;}}

/* 로고 핫스팟 + LED 링 */
.intro__hotspot{
  position:absolute;left:var(--lx);top:var(--ly);width:var(--ld);aspect-ratio:1;
  transform:translate(-50%,-50%);animation:hotspotDrift 26s ease-in-out infinite alternate;
  border:0;padding:0;background:none;border-radius:50%;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.intro__hotspot::before{            /* 넉넉한 터치 영역 */
  content:"";position:absolute;inset:-45%;border-radius:50%;
}
/* 배경과 같은 속도로 다가오도록 핫스팟에도 같은 확대를 준다 */
@keyframes hotspotDrift{from{transform:translate(-50%,-50%) scale(1);}to{transform:translate(-50%,-50%) scale(1.045);}}
.intro.is-entering .intro__hotspot{animation-play-state:paused;}
.intro__screenlogo{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;display:block;filter:brightness(.96);will-change:transform;}
.led{position:absolute;inset:-5%;border-radius:50%;pointer-events:none;}
.led--glow{
  box-shadow:
    0 0 0 1.5px rgba(210,235,255,.95),
    0 0 10px 2px rgba(150,210,255,.95),
    0 0 34px 8px rgba(10,156,255,.65),
    0 0 80px 22px rgba(10,156,255,.35),
    0 0 130px 40px rgba(255,15,123,.18);
  opacity:.22;
  animation:ledBreath 2.8s ease-in-out infinite;
  transition:opacity .35s ease;
}
.led--ring{
  inset:-9%;
  background:conic-gradient(from 0deg, rgba(10,156,255,0) 0deg, #8fd4ff 70deg, #fff 100deg, rgba(255,15,123,.9) 150deg, rgba(10,156,255,0) 220deg, rgba(10,156,255,0) 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  opacity:0;transition:opacity .35s ease;
  animation:ledSpin 2.4s linear infinite;
  filter:drop-shadow(0 0 4px rgba(160,215,255,.9));
}
.intro__hotspot:hover .led--glow,.intro__hotspot:focus-visible .led--glow{opacity:1;animation-play-state:paused;}
.intro__hotspot:hover .led--ring,.intro__hotspot:focus-visible .led--ring{opacity:1;}
.intro__hotspot:focus-visible{outline:none;}
@keyframes ledBreath{0%,100%{opacity:.3;}50%{opacity:.85;}}
@keyframes ledSpin{to{transform:rotate(360deg);}}

.intro__enter{
  position:absolute;left:50%;top:124%;transform:translate(-50%,4px);
  display:flex;align-items:center;gap:.55em;
  font-size:clamp(10px,.78vw,15px);font-weight:500;letter-spacing:.01em;
  color:rgba(255,255,255,.92);white-space:nowrap;opacity:0;transition:opacity .3s, transform .3s;text-shadow:0 1px 10px rgba(0,0,0,.9);
  pointer-events:none;
}
.intro__hotspot:hover .intro__enter,.intro__hotspot:focus-visible .intro__enter{opacity:1;transform:translate(-50%,0);}
.only-touch,.tap-ico{display:none;}
/* 터치 기기: 커서가 없으니 안내를 항상 보이고 LED 링도 켜 둔다 */
@media (hover:none){
  .intro__enter{opacity:1;transform:translate(-50%,0);font-size:clamp(11px,3vw,14px);top:120%;}
  .mouse-ico,.only-hover{display:none;}
  .only-touch{display:inline;}
  .tap-ico{display:inline-block;width:.9em;height:.9em;border-radius:50%;border:1.5px solid rgba(255,255,255,.9);position:relative;}
  .tap-ico::after{content:"";position:absolute;inset:-.45em;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);animation:tapPulse 1.6s ease-out infinite;}
  .led--glow{opacity:.55;animation:ledBreath 2.2s ease-in-out infinite;}
  .led--ring{opacity:.85;}
}
@keyframes tapPulse{0%{transform:scale(.55);opacity:1;}100%{transform:scale(1.35);opacity:0;}}
.intro.is-entering .led,.intro.is-entering .intro__enter{opacity:0 !important;transition:opacity .15s;animation:none;}

/* 노트북 모니터 위에 떠 있는 음악 컨트롤러 — 배경(picture img)·핫스팟과 같은 느린 확대(introDrift)를 따라간다.
   모니터가 거의 정면이라 아주 약한 원근 기울기(rotateX 3°)만 준다. 진입 애니메이션이 시작되면 안내문처럼 사라진다 */
.intro__screenui{position:absolute;inset:0;pointer-events:none;transform-origin:var(--lx) var(--ly);animation:introDrift 26s ease-in-out infinite alternate;}
.intro.is-entering .intro__screenui{animation-play-state:paused;opacity:0;transition:opacity .25s;}
/* 무대(플레어·확대·섬광) 단계에선 장면 속 보조 레이어를 아예 떼어 낸다 — 20배로 확대된 장면 안의 blur 컨트롤러·기포 레이어가 GPU 를 잡아먹지 않게 */
.intro.is-stage .intro__screenui,.intro.is-stage .intro__fx{display:none;}
@media (prefers-reduced-motion:reduce){.intro__screenui{animation:none;}}

.intro__skip{
  position:absolute;top:clamp(14px,2.4vh,26px);right:clamp(14px,2.4vw,30px);z-index:5;
  padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.35);
  background:rgba(8,12,30,.35);color:#fff;font-size:14.5px;font-weight:600;cursor:pointer;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s, opacity .25s;
}
.intro__skip:hover{background:rgba(8,12,30,.7);}

/* ② 진입: 가장자리에서 조여 오는 어둠 (반지름은 JS가 --r 로 갱신) */
.intro__iris{
  --r:300vmax;
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, transparent 0, transparent calc(var(--r) * .5), #000 var(--r));
}

/* ③ 로고 무대 */
/* 줌인용 고해상 로고 덮개 — 무대 로고 지름(--D)으로 배치해 그 크기로 래스터되게 한 뒤(will-change 레이어는 만들어질 때 크기로 고정 래스터),
   intro.js 가 transform 으로 노트북 속 로고 자리에 맞춰 줄였다가 줌에 따라 키운다. 무대가 완전히 뜬 뒤(.3s) 숨긴다 */
.intro__zoomlogo{position:absolute;left:0;top:0;width:var(--D,300px);height:var(--D,300px);border-radius:50%;display:block;opacity:0;pointer-events:none;will-change:transform;transform-origin:0 0;transition:visibility 0s linear .3s;}
.intro.is-entering .intro__zoomlogo{opacity:1;}
.intro.is-stage .intro__zoomlogo{visibility:hidden;}
.intro__stage{position:absolute;inset:0;background:#000;opacity:0;visibility:hidden;transition:opacity .2s linear;display:grid;place-items:center;}
.intro.is-stage .intro__stage{opacity:1;visibility:visible;}
/* 무대가 완전히 뜬 뒤에 장면을 끈다 (바로 끄면 로고가 한순간 어두워진다) */
.intro__scene,.intro__iris{transition:visibility 0s linear .3s;}
.intro.is-stage .intro__scene,.intro.is-stage .intro__iris{visibility:hidden;}

.intro__logo{
  position:relative;z-index:3;width:var(--D,300px);height:var(--D,300px);border-radius:50%;overflow:hidden;
  will-change:transform;transform-origin:50% 47%;
}
.intro__logo img{width:100%;height:100%;display:block;}
.intro__logo::after{                 /* 로고 위를 훑는 빛 */
  content:"";position:absolute;inset:-10%;
  background:linear-gradient(112deg, transparent 38%, rgba(255,255,255,.0) 42%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 58%, transparent 62%);
  transform:translateX(-130%);
}
.fx{position:absolute;left:50%;top:50%;pointer-events:none;mix-blend-mode:screen;opacity:0;}
.fx-bloom{
  z-index:1;width:calc(var(--D,300px) * 3.4);height:calc(var(--D,300px) * 3.4);margin:calc(var(--D,300px) * -1.7) 0 0 calc(var(--D,300px) * -1.7);border-radius:50%;
  background:radial-gradient(closest-side, rgba(150,205,255,.75) 0, rgba(70,130,240,.42) 30%, rgba(47,95,208,.16) 55%, rgba(47,95,208,.04) 72%, transparent 84%);
}
.fx-streak{
  z-index:4;width:180vw;height:10px;margin:-5px 0 0 -90vw;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, #fff 0, rgba(215,235,255,.98) 10%, rgba(110,175,255,.9) 28%, rgba(60,130,255,.45) 52%, transparent 78%);
  filter:blur(.8px);
}
.fx-streak--soft{z-index:2;height:120px;margin-top:-60px;filter:blur(22px);
  background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(210,232,255,.95) 0, rgba(70,135,255,.7) 26%, rgba(47,95,208,.3) 52%, transparent 76%);}
.fx-glint{
  z-index:5;width:calc(var(--D,300px) * .9);height:calc(var(--D,300px) * .9);margin:calc(var(--D,300px) * -.45) 0 0 calc(var(--D,300px) * -.45);
  background:
    radial-gradient(closest-side, #fff 0, rgba(200,230,255,.9) 9%, rgba(120,180,255,.35) 26%, transparent 60%),
    linear-gradient(0deg, transparent 49.2%, rgba(255,255,255,.95) 50%, transparent 50.8%),
    linear-gradient(90deg, transparent 49.2%, rgba(255,255,255,.95) 50%, transparent 50.8%);
  -webkit-mask:radial-gradient(closest-side, #000 30%, transparent 100%);mask:radial-gradient(closest-side, #000 30%, transparent 100%);
}
.fx-ghost{z-index:5;border-radius:50%;}
.fx-ghost.g1{width:70px;height:70px;margin:-35px;background:radial-gradient(closest-side, rgba(255,15,123,.0) 55%, rgba(255,15,123,.55) 78%, transparent 100%);}
.fx-ghost.g2{width:34px;height:34px;margin:-17px;background:radial-gradient(closest-side, rgba(120,220,255,.75), transparent 80%);}
.fx-ghost.g3{width:120px;height:120px;margin:-60px;background:radial-gradient(closest-side, rgba(80,130,255,.0) 62%, rgba(80,130,255,.4) 82%, transparent 100%);}

/* 점화(빛) → 확대 — 2026-09-23 길이 ×0.9 (intro.js 의 ZOOM/IGNITE/EXPAND/LEAVE 와 함께 10% 단축, 2026-09-23 20%→10% 로 완화) */
.intro.is-ignite .intro__logo{animation:logoPush 1.53s cubic-bezier(.3,0,.4,1) forwards;}
.intro.is-ignite .intro__logo::after{animation:sheen .945s cubic-bezier(.5,0,.3,1) .315s forwards;}
.intro.is-ignite .fx-bloom{animation:bloom 1.53s ease-out forwards;}
.intro.is-ignite .fx-streak{animation:streak 1.53s cubic-bezier(.2,.7,.2,1) forwards;}
.intro.is-ignite .fx-streak--soft{animation:streakSoft 1.53s cubic-bezier(.2,.7,.2,1) forwards;}
.intro.is-ignite .fx-glint{animation:glint 1.35s cubic-bezier(.45,0,.3,1) .09s forwards;}
.intro.is-ignite .fx-ghost.g1{animation:ghost1 1.35s cubic-bezier(.45,0,.3,1) .09s forwards;}
.intro.is-ignite .fx-ghost.g2{animation:ghost2 1.35s cubic-bezier(.45,0,.3,1) .09s forwards;}
.intro.is-ignite .fx-ghost.g3{animation:ghost3 1.35s cubic-bezier(.45,0,.3,1) .09s forwards;}
@keyframes logoPush{from{transform:scale(1);}to{transform:scale(1.07);}}
@keyframes sheen{to{transform:translateX(130%);}}
@keyframes bloom{0%{opacity:0;transform:scale(.55);}45%{opacity:1;transform:scale(1.08);}100%{opacity:.8;transform:scale(1);}}
@keyframes streak{0%{opacity:0;transform:scaleX(.02);}30%{opacity:1;transform:scaleX(1);}70%{opacity:.85;transform:scaleX(.8);}100%{opacity:.7;transform:scaleX(.62);}}
@keyframes streakSoft{0%{opacity:0;transform:scaleX(.05);}32%{opacity:.95;transform:scaleX(1);}100%{opacity:.5;transform:scaleX(.7);}}
/* 빛 알갱이는 로고 왼쪽 위에서 오른쪽 위(로고 속 별 표시 자리)로 지나간다 */
@keyframes glint{
  0%{opacity:0;transform:translate(calc(var(--D) * -.62), calc(var(--D) * -.30)) scale(.4) rotate(0deg);}
  35%{opacity:1;}
  60%{opacity:1;transform:translate(calc(var(--D) * .30), calc(var(--D) * -.22)) scale(1.15) rotate(40deg);}
  100%{opacity:0;transform:translate(calc(var(--D) * .68), calc(var(--D) * -.05)) scale(.5) rotate(70deg);}
}
@keyframes ghost1{0%{opacity:0;transform:translate(calc(var(--D) * .9), calc(var(--D) * .42));}50%{opacity:.9;}100%{opacity:0;transform:translate(calc(var(--D) * -.75), calc(var(--D) * .2));}}
@keyframes ghost2{0%{opacity:0;transform:translate(calc(var(--D) * 1.5), calc(var(--D) * .7));}50%{opacity:.9;}100%{opacity:0;transform:translate(calc(var(--D) * -1.3), calc(var(--D) * .36));}}
@keyframes ghost3{0%{opacity:0;transform:translate(calc(var(--D) * 2.2), calc(var(--D) * 1.0));}50%{opacity:.7;}100%{opacity:0;transform:translate(calc(var(--D) * -2.0), calc(var(--D) * .55));}}

/* 확대 단계에선 로고의 원형 클립(overflow:hidden + border-radius)과 빛 훑기(::after)를 떼어 낸다 — 17배까지 커지는 요소에 둥근 클립이 걸려 있으면
   크기가 바뀔 때마다 마스크를 다시 래스터해 로고가 화면을 덮는 순간 0.3초쯤 멈칫한다(2026-09-23 차트남 보고). 로고 png 자체가 투명 모서리 원형이라 클립 없이도 같은 모양 */
.intro.is-expand .intro__logo{animation:logoExpand .765s cubic-bezier(.62,0,.9,.35) forwards;overflow:visible;border-radius:0;}
.intro.is-expand .intro__logo::after{display:none;}
.intro.is-expand .fx-bloom{animation:bloomOut .765s ease-in forwards;}
.intro.is-expand .fx-streak,.intro.is-expand .fx-streak--soft{animation:streakOut .765s ease-in forwards;}
@keyframes logoExpand{from{transform:scale(1.07);}to{transform:scale(var(--expand,24));}}
@keyframes bloomOut{from{opacity:.8;transform:scale(1);}to{opacity:1;transform:scale(5);}}
@keyframes streakOut{0%{opacity:.7;transform:scaleX(.62) scaleY(1);}60%{opacity:1;transform:scaleX(1.2) scaleY(6);}100%{opacity:0;transform:scaleX(1.4) scaleY(14);}}

/* ④ 종이색 섬광 → 홈 */
.intro__flash{position:absolute;inset:0;z-index:10;background:#F4F5FB;opacity:0;pointer-events:none;}
.intro.is-expand .intro__flash{animation:flashIn .765s cubic-bezier(.6,0,.9,.4) forwards;}
@keyframes flashIn{0%,38%{opacity:0;}100%{opacity:1;}}
.intro.is-leaving{background:transparent;pointer-events:none;}
.intro.is-leaving .intro__stage,.intro.is-leaving .intro__scene,.intro.is-leaving .intro__iris,.intro.is-leaving .intro__skip{display:none;}
.intro.is-leaving .intro__flash{animation:flashOut .675s ease-out forwards;}
@keyframes flashOut{from{opacity:1;}to{opacity:0;}}

/* 모션 최소화: 장면만 부드럽게 걷힌다 */
.intro.is-fading{transition:opacity .45s ease;opacity:0;pointer-events:none;}
@media (prefers-reduced-motion:reduce){
  .intro__zoom picture img,.intro__hotspot,.haze,.mouse-ico::after,.led--glow,.led--ring,.intro__hint i::after{animation:none;}
  .led--glow{opacity:.45;}
}