@charset "utf-8";
/* =========================================================
   MAIN2 SCROLL SLIDES - MOTION  (2026-07 신규)
   - 기존 CSS/HTML 미수정. 이 파일 + 관찰자 스크립트만 제거하면 원복.
   - main.css / media.css 이후 로드.
   - 배경은 .scroll-item 인라인 style 에 있으므로
     ::before 가 background-image:inherit 로 받아서 그것만 움직인다.
     (부모 배경은 그대로 두고 그 위를 덮으므로 깜빡임 없음)
   ========================================================= */

/* ---------- 움직이는 배경 레이어 ---------- */
.main2 .scroll-item{
  overflow: hidden;              /* 확대된 배경이 밖으로 새지 않도록 */
  isolation: isolate;            /* blend-mode 가 바깥으로 영향 주지 않도록 */
}

.main2 .scroll-item::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;                    /* .overlay(z=1) / .text-box(z=2) 아래 */
  background-image: inherit;     /* 부모 인라인 배경을 그대로 상속 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.04);        /* 항상 1 이상 → 부모 배경을 완전히 덮음 */
  will-change: transform, filter;
  backface-visibility: hidden;
}

/* =========================================================
   SLIDE 1 — 품격 이안에
   요청: 차량 진출입 → 정지 이미지로는 불가.
   대안: 단지로 천천히 밀고 들어가는 푸시인(진입·도착감)
   ========================================================= */
.main2 .scroll-item:nth-of-type(1).in-view::before{
  animation: sm-push-in 11s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes sm-push-in{
  from{ transform: scale(1.04); }
  to  { transform: scale(1.16); }
}

/* =========================================================
   SLIDE 2 — 든든 이안에
   요청: 한바퀴 회전 → 2D 이미지로는 불가(360 렌더 필요).
   대안: 좌우 궤도 드리프트 + 미세 확대로 카메라가 도는 느낌
   ========================================================= */
.main2 .scroll-item:nth-of-type(2)::before{
  transform: scale(1.16) translate3d(-3.2%, 0, 0);
}
/* 든든: 궤도감이 읽히도록 속도·이동폭 모두 올림 (26s → 12s, ±2.4% → ±3.2%) */
.main2 .scroll-item:nth-of-type(2).in-view::before{
  animation: sm-orbit 12s ease-in-out infinite alternate;
}
@keyframes sm-orbit{
  from{ transform: scale(1.16) translate3d(-3.2%, 0, 0); }
  to  { transform: scale(1.16) translate3d( 3.2%, 0, 0); }
}

/* =========================================================
   SLIDE 3 — 미래 이안에
   요청: 이안 라포르 건물이 환하게 비춰지는 모습  ← 요청 그대로 구현
   구성 3겹:
     (a) ::before  전체 밝기/채도가 서서히 살아남
     (b) ::after   건물 위치에 빛 번짐(스크린 블렌드)
     (c) .overlay  기존 어두운 막을 살짝 걷어냄
   좌표 57% / 31% = slider_3.jpg 안에서 타워동이 서 있는 지점
   ========================================================= */
/* ::before 는 스케일을 고정한다.
   ::after 발광층이 같은 사진을 같은 배율로 겹쳐야 건물 위치가 어긋나지 않기 때문. */
.main2 .scroll-item:nth-of-type(3)::before{
  filter: brightness(.94) saturate(.97);
}
.main2 .scroll-item:nth-of-type(3).in-view::before{
  animation: sm-dawn 4.2s ease-out .2s forwards;
}
/* 전체 밝기 변화는 눈치채기 어려울 정도로만.
   '밝아진다'는 인상은 건물 테두리 발광이 만들게 한다. */
@keyframes sm-dawn{
  from{ filter: brightness(.94) saturate(.97); }
  to  { filter: brightness(1.0)  saturate(1.0); }
}

/* (b) 건물 네온 — 사진 자체의 밝은 픽셀만 통과시켜 발광시킨다.
   손으로 윤곽을 그리지 않으므로 유리창·외벽 모서리가 그대로 네온이 된다.
   ::before 와 동일한 background-size/position/scale 이라 정확히 겹친다.
   마스크 중심 58.5% / 35% = slider_3.jpg 안 타워군 위치 */
.main2 .scroll-item:nth-of-type(3)::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.04);            /* ::before 와 동일 배율 */
  /* contrast 를 크게 올리면 중간톤이 검게 눌리고 가장 밝은 픽셀만 남는다.
     건물에서 가장 밝은 곳 = 외벽 모서리와 창 → 결과적으로 '테두리'만 빛난다.
     brightness 는 낮게 유지해야 면 전체가 뿌옇게 뜨지 않는다. */
  filter: brightness(1.35) contrast(3.4) saturate(1.15);
  mix-blend-mode: screen;
  opacity: 0;
  /* 코어는 유지하되 바깥으로 퍼지는 범위를 넓힘 */
  -webkit-mask-image: radial-gradient(17% 23% at 58.5% 35%,
      #000 0%, rgba(0,0,0,.88) 46%, rgba(0,0,0,.38) 72%, transparent 94%);
          mask-image: radial-gradient(17% 23% at 58.5% 35%,
      #000 0%, rgba(0,0,0,.88) 46%, rgba(0,0,0,.38) 72%, transparent 94%);
}
.main2 .scroll-item:nth-of-type(3).in-view::after{
  animation: sm-neon-on 2.6s ease-out .5s forwards,
             sm-neon-breathe 7s ease-in-out 3.4s infinite;
}
/* 깜빡임 없이 조용히 켜진다 (초기 버전의 3연속 점멸은 과했음) */
@keyframes sm-neon-on{
  from{ opacity: 0;   }
  to  { opacity: .64; }
}
@keyframes sm-neon-breathe{
  0%,100%{ opacity: .64; }
  50%    { opacity: .50; }
}

/* (c) 기존 어두운 오버레이를 슬라이드3에서만 살짝 걷어냄 */
.main2 .scroll-item:nth-of-type(3) .overlay{
  transition: background-color 3.4s ease-out;
}
/* 데스크톱 기존값은 main.css @media(min-width:769px) 에서 이미 0.08(옅음).
   "환하게"가 목적이므로 그보다 더 옅게 걷어내야 함(0.12 는 오히려 어두워짐).
   그 원본 규칙에 !important 가 붙어 있어 명시도만으로는 이길 수 없음 →
   동일하게 !important 를 주고 명시도로 승부(내 선택자가 더 구체적).
   여기에 건물 주변 헤일로를 함께 얹는다.
   (.overlay 는 실제 DOM 요소 → ::after 네온 코어보다 아래에 깔림 = 올바른 발광 층서) */
/* 주변광(헤일로) — 건물에서 바깥으로 번지는 빛.
   요청대로 범위를 넓히고 세기를 올림. 2겹으로 나눠 자연스러운 감쇠를 만든다. */
.main2 .scroll-item:nth-of-type(3).in-view .overlay{
  background:
    radial-gradient(28% 32% at 58.5% 35%,
      rgba(168, 234, 255, .20) 0%,
      rgba(140, 214, 246, .10) 54%,
      rgba(140, 214, 246, 0)   84%),
    radial-gradient(64% 68% at 58.5% 37%,
      rgba(130, 200, 240, .11) 0%,
      rgba(120, 190, 235, .05) 46%,
      rgba(120, 190, 235, 0)   88%),
    rgba(0, 35, 43, 0.045) !important;   /* 기본 0.08 → 살짝 더 걷어냄 */
}

/* ---------- 태블릿 ---------- */
@media (max-width: 1200px){
  @keyframes sm-push-in{
    from{ transform: scale(1.04); }
    to  { transform: scale(1.11); }
  }
}

/* ---------- 모바일: 강도 축소 (배터리/가독성) ---------- */
@media (max-width: 768px){
  .main2 .scroll-item:nth-of-type(2).in-view::before{
    animation-duration: 16s;
  }
  @keyframes sm-orbit{
    from{ transform: scale(1.12) translate3d(-2.2%, 0, 0); }
    to  { transform: scale(1.12) translate3d( 2.2%, 0, 0); }
  }
  /* 발광은 유지하되 범위를 좁혀 텍스트 가독성 확보 */
  .main2 .scroll-item:nth-of-type(3)::after{
    background:
      radial-gradient(30% 20% at 57% 28%,
        rgba(255,246,214,.72) 0%,
        rgba(255,228,166,.34) 42%,
        rgba(255,214,130,0)  100%);
  }
  .main2 .scroll-item:nth-of-type(3).in-view .overlay{
    /* 모바일 기존값은 media.css 의 어두운 그라데이션(0.35~0.45).
       발광을 살리되 글자 가독성은 지켜야 하므로 중간값으로 */
    background: rgba(0, 35, 43, 0.22) !important;
  }
}

/* ---------- 접근성: 모션 최소화 선호 ----------
   이 설정의 취지는 '이동/확대처럼 어지럼증을 유발하는 움직임'을 없애는 것.
   밝기·투명도만 변하는 발광은 유발 요인이 아니므로 살려 둔다.
   → 슬라이드 1·2 의 이동·확대: 정지
   → 슬라이드 3 의 네온: 유지(단, 깜빡임은 빼고 부드러운 호흡만) */
@media (prefers-reduced-motion: reduce){

  /* 슬라이드 1·2 는 배경이 아주 느리게(11~12초) 움직이는 연출이라
     어지럼 유발 수준이 아니고, 사이트 정체성상 필수 요소이므로
     모션 최소화 설정에서도 그대로 재생한다.
     (급격한 이동·회전·깜빡임 계열만 억제하는 것이 이 설정의 취지) */

  /* 슬라이드 3: 밝아지는 연출은 그대로 두되 깜빡임 제거 */
  html:not(.force-motion) .main2 .scroll-item:nth-of-type(3).in-view::after{
    animation: sm-neon-fade 2.4s ease-out .4s forwards,
               sm-neon-breathe 7s ease-in-out 3s infinite !important;
  }
  @keyframes sm-neon-fade{
    from{ opacity: 0;   }
    to  { opacity: .64; }
  }
}