/* ========================================================== 
   Exodus Seasonal Theme: Fall 2025 — OPTION A (정리본)
   - Falling leaves: 작은 6장만 낙엽
   - 고정 3-잎 헤더 데코 유지 + 부드러운 등장
   - Thanksgiving message: 흰 배경 위에 텍스트만 반짝 (레이아웃 미변경)
   ========================================================== */

/* 기본 컨테이너 */
#container, .fall-scope { 
  position: relative; 
  z-index: 0; 
}

/* ==========================================================
   가까운 잎 (Front Layer) — 작은 6개만 낙엽
   ========================================================== */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.48;
  background-repeat: no-repeat;

  background-size:
    58px auto,
    64px auto,
    52px auto,
    68px auto,
    54px auto,
    60px auto;

  background-image:
    url("/images/background/1762456969_leaf_2.svg"),
    url("/images/background/1762457055_leaf_5.svg"),
    url("/images/background/1762457129_leaf_6.svg"),
    url("/images/background/1762457192_leaf_9.svg"),
    url("/images/background/1762456969_leaf_2.svg"),
    url("/images/background/1762457129_leaf_6.svg");

  background-position:
    6%  -22vh,
    26% -24vh,
    50% -20vh,
    74% -23vh,
    92% -21vh,
    38% -19vh;

  animation: fallMain 85s linear infinite;
  animation-delay: 0s;
  will-change: background-position;
}

/* ==========================================================
   먼 잎 (Back Layer) — 기존 그대로
   ========================================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.32;
  background-repeat: no-repeat;

  background-size:
    26px auto, 30px auto, 28px auto, 26px auto, 32px auto;

  background-image:
    url("/images/background/1762456994_leaf_3.svg"),
    url("/images/background/1762457175_leaf_8.svg"),
    url("/images/background/1762457296_leaf_13.svg"),
    url("/images/background/1762456994_leaf_3.svg"),
    url("/images/background/1762457175_leaf_8.svg");

  background-position:
    12% -20vh, 34% -22vh, 52% -19vh, 70% -21vh, 88% -18vh;

  animation: fallFar 115s linear infinite;
  animation-delay: 0s;
  will-change: background-position;
}

/* ==========================================================
   Animations — FRONT (6 leaves)
   ========================================================== */
@keyframes fallMain {
  0% {
    background-position:
      6%  -22vh,
      26% -24vh,
      50% -20vh,
      74% -23vh,
      92% -21vh,
      38% -19vh;
  }
  45% {
    background-position:
      8% 40vh,
      28% 52vh,
      52% 60vh,
      76% 66vh,
      94% 58vh,
      36% 72vh;
  }
  100% {
    background-position:
      10% 155vh,
      30% 168vh,
      54% 172vh,
      78% 165vh,
      96% 170vh,
      34% 176vh;
  }
}

/* ==========================================================
   Animations — BACK (기존)
   ========================================================== */
@keyframes fallFar {
  0% {
    background-position:
      12% -20vh, 34% -22vh, 52% -19vh, 70% -21vh, 88% -18vh;
  }
  50% {
    background-position:
      14% 46vh, 36% 54vh, 54% 62vh, 72% 58vh, 90% 66vh;
  }
  100% {
    background-position:
      16% 162vh, 38% 170vh, 56% 176vh, 74% 168vh, 92% 174vh;
  }
}

/* ==========================================================
   콘텐츠는 잎 위에
   ========================================================== */
#header, #gnb, #container,
.main-visual, .hero, .visual,
.content, .product-list, .footer {
  position: relative;
  z-index: 5;
}

#header, #gnb { 
  z-index: 20; 
}

/* ==========================================================
   Sub-pages hide leaves
   ========================================================== */
body.sub::before,
body.sub::after {
  content: none !important;
  animation: none !important;
}

/* ==========================================================
   AMP20167 product clipping fix
   ========================================================== */
.item .image,
.item .thumb {
  overflow: visible !important;
  transform: none !important;
  filter: none !important;
}

.featured-products .item:nth-child(4) {
  position: relative;
  z-index: 5;
}

/* ==========================================================
   Header left big 3-leaf deco (고정) + 부드러운 등장
   ========================================================== */
body.main #header::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 80px;
  width: 190px;
  height: 190px;
  background-image: url("/images/background/1762456029_leaf_1.svg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  animation: headerLeavesIn 0.7s ease-out 0.15s forwards;
}

@keyframes headerLeavesIn {
  0%   { opacity: 0;   transform: translateY(-6px) scale(0.96); }
  100% { opacity: 0.95; transform: translateY(0)    scale(1);    }
}

/* 서브 페이지에서는 숨김 */
body.sub #header::before {
  content: none;
  animation: none;
}

/* ==========================================================
   Happy Thanksgiving 텍스트 (Trebuchet MS)
   - 흰 배경 위
   - 반짝 효과
   - 레이아웃 안 밀림
   ========================================================== */

body.main #container {
  position: relative; /* 기준점 */
}

body.main #container::before {
  content: "🦃 Happy Thanksgiving! 🍁";
  position: absolute;
  left: 50%;
  top: 0;                          
  transform: translate(-50%, -140%);  
  /* -130% ~ -150% 사이에서 미세조정 가능 */

  font-family: "Trebuchet MS", Verdana, sans-serif;  /* ← 여기! */
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.2px;
  color: #c35400;

  white-space: nowrap;
  pointer-events: none;
  z-index: 30;

  animation: tgSparkle 2.6s ease-in-out infinite;
}

@keyframes tgSparkle {
  0%, 100% {
    opacity: 0.45;
    text-shadow: 0 0 4px rgba(255, 200, 120, 0.7);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(255, 220, 150, 1);
  }
}

/* 서브 페이지 숨김 */
body.sub #container::before {
  content: none;
  animation: none;
}