/*
 태쏘 홈 히어로 (2a) — 배경·장식: 배너/햇살/차트/낙엽/새떼/원산/사무라이 (구역 6-2)
 functions.php의 tasso_enqueue_home_css()가 홈 화면에서만 로드
*/

/* ==========================================================
   6-2. 홈 히어로 (기존 이미지 배너 숨기고 새 히어로로 교체)
   ========================================================== */
/* 기존 Elementor 이미지 배너 섹션 숨김 */
.home .elementor-element-1fb69b5 {
  display: none !important;
}

/* 새 히어로 — 수묵 배너 톤 (먹색 + 베이지 대각선 + 붓글씨) */
.tasso-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #161512 0%, #151412 100%);
  border-bottom: 1px solid var(--tasso-border);
  padding: 96px 24px 110px;
}

/* 오른쪽 베이지 대각선 패널 (원본 배너의 구도) */
.tasso-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: -12%;
  width: 54%;
  height: 120%;
  background: #c9ba85;
  transform: skewX(-11deg);
  transform-origin: top right;
  pointer-events: none;
}

/* 베이지 패널 위로 내려쬐는 햇살 줄기 (있는 듯 없는 듯) — 패널과 같은 기울기로 겹침 */
.tasso-hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: -12%;
  width: 54%;
  height: 120%;
  transform: skewX(-11deg);
  transform-origin: top right;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(103deg, transparent 3%, rgba(255, 252, 238, 0.38) 8%, transparent 14%),
    linear-gradient(103deg, transparent 15%, rgba(255, 252, 238, 0.22) 21%, transparent 28%),
    linear-gradient(103deg, transparent 30%, rgba(255, 252, 238, 0.34) 36%, transparent 42%),
    linear-gradient(103deg, transparent 44%, rgba(255, 252, 238, 0.20) 50%, transparent 58%),
    linear-gradient(103deg, transparent 60%, rgba(255, 252, 238, 0.32) 66%, transparent 72%),
    linear-gradient(103deg, transparent 74%, rgba(255, 252, 238, 0.18) 80%, transparent 87%),
    linear-gradient(103deg, transparent 88%, rgba(255, 252, 238, 0.28) 93%, transparent 98%);
  -webkit-mask-image:
    linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.75) 55%, rgba(0, 0, 0, 0.25) 100%),
    linear-gradient(90deg, transparent 0%, transparent 5%, #000000 17%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.75) 55%, rgba(0, 0, 0, 0.25) 100%),
    linear-gradient(90deg, transparent 0%, transparent 5%, #000000 17%);
  mask-composite: intersect;
  animation: tasso-rays 13s ease-in-out infinite;
}

@keyframes tasso-rays {
  0%, 100% {
    opacity: 0.6;
    transform: skewX(-11deg) translateX(0);
  }
  50% {
    opacity: 1;
    transform: skewX(-11deg) translateX(1.2vw);
  }
}

.tasso-hero-glow {
  position: absolute;
  left: 18%;
  bottom: -180px;
  width: 700px;
  height: 280px;
  background: radial-gradient(closest-side, rgba(201, 186, 133, 0.10), transparent);
  pointer-events: none !important;
  z-index: 0;
}

/* 버튼/링크는 항상 클릭 가능하게 최상위로 */
.tasso-hero-inner {
  z-index: 3;
}

.tasso-btn,
.tasso-link-card {
  cursor: pointer;
}

/* 베이지 패널은 58vw 지점부터 시작 → 차트를 62vw~86vw 사이에 고정해
   어떤 화면 폭에서도 검은 영역을 침범하지 않게 함 */
.tasso-hero-chart {
  position: absolute;
  right: 14vw;
  bottom: 46px;
  width: 24vw;
  height: auto;
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

/* ── 낙엽: 바람에 흩날리는 잎사귀 (베이지 영역) ── */
.tasso-leaves {
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.tasso-leaf {
  position: absolute;
  display: block;
  width: 12px;
  height: 12px;
  background: #26231d;
  border-radius: 0 65% 0 65%; /* 잎사귀 모양 */
  opacity: 0;
}

.tasso-leaf.red { background: #7c3a2d; }

.tasso-leaf.l1 { top: 4%;  right: 12%; width: 13px; height: 13px; animation: tasso-leaf-a 11s linear infinite 0s; }
.tasso-leaf.l2 { top: 0%;  right: 40%; width: 10px; height: 10px; animation: tasso-leaf-b 14s linear infinite 3s; }
.tasso-leaf.l3 { top: 16%; right: 6%;  width: 12px; height: 12px; animation: tasso-leaf-c 12s linear infinite 6s; }
.tasso-leaf.l4 { top: 8%;  right: 56%; width: 9px;  height: 9px;  animation: tasso-leaf-a 13s linear infinite 1.5s; }
.tasso-leaf.l5 { top: 28%; right: 22%; width: 11px; height: 11px; animation: tasso-leaf-b 10s linear infinite 8s; }
.tasso-leaf.l6 { top: 0%;  right: 68%; width: 10px; height: 10px; animation: tasso-leaf-c 15s linear infinite 4.5s; }
.tasso-leaf.l7 { top: 20%; right: 46%; width: 12px; height: 12px; animation: tasso-leaf-a 12s linear infinite 9.5s; }
.tasso-leaf.l8 { top: 34%; right: 8%;  width: 10px; height: 10px; animation: tasso-leaf-b 13s linear infinite 6.5s; }
.tasso-leaf.l9  { top: 2%;  right: 26%; width: 11px; height: 11px; animation: tasso-leaf-c 11s linear infinite 2s; }
.tasso-leaf.l10 { top: 14%; right: 34%; width: 10px; height: 10px; animation: tasso-leaf-a 14s linear infinite 5s; }
.tasso-leaf.l11 { top: 6%;  right: 62%; width: 12px; height: 12px; animation: tasso-leaf-b 12s linear infinite 7.5s; }
.tasso-leaf.l12 { top: 26%; right: 52%; width: 9px;  height: 9px;  animation: tasso-leaf-c 13s linear infinite 10.5s; }
.tasso-leaf.l13 { top: 40%; right: 30%; width: 11px; height: 11px; animation: tasso-leaf-a 10s linear infinite 4s; }

/* ── 새떼: 링크 카드(책 보러가기) 아래 베이지 하늘을 가로질러 날아감 (수묵 실루엣) ── */
.tasso-birds {
  position: absolute;
  top: 350px;
  right: 8vw;
  width: 12vw;
  height: auto;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  animation: tasso-flock 24s linear infinite;
}

/* 날갯짓: 위아래로 접었다 폈다 */
.tasso-birds .flap {
  transform-box: fill-box;
  transform-origin: center;
  animation: tasso-flap 0.85s ease-in-out infinite;
}

.tasso-birds .f2 { animation-delay: 0.12s; }
.tasso-birds .f3 { animation-delay: 0.28s; }
.tasso-birds .f4 { animation-delay: 0.4s; }
.tasso-birds .f5 { animation-delay: 0.2s; }
.tasso-birds .f6 { animation-delay: 0.34s; }

@keyframes tasso-flap {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.4); }
}

/* 무리 전체가 오른쪽에서 왼쪽으로, 살짝 떠오르며 이동 (카드 아래 높이 유지) */
@keyframes tasso-flock {
  0%   { transform: translate(4vw, 1vw); opacity: 0; }
  10%  { opacity: 0.75; }
  88%  { opacity: 0.75; }
  100% { transform: translate(-14vw, -2vw); opacity: 0; }
}

/* 배경 원산(遠山) — 은은한 수묵 능선 (화면 전체 폭으로 이어짐) */
.tasso-hero-mountains {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 38%;
  z-index: 0;
  pointer-events: none;
}

/* 낙엽 궤적: 사선 낙하 + 좌우 흔들림 + 회전 */
@keyframes tasso-leaf-a {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  6%   { opacity: 0.55; }
  30%  { transform: translate(-90px, 150px) rotate(150deg); }
  50%  { transform: translate(-30px, 280px) rotate(240deg); }
  75%  { transform: translate(-150px, 440px) rotate(370deg); opacity: 0.5; }
  100% { transform: translate(-210px, 600px) rotate(480deg); opacity: 0; }
}

@keyframes tasso-leaf-b {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  7%   { opacity: 0.45; }
  35%  { transform: translate(-140px, 120px) rotate(-160deg); }
  60%  { transform: translate(-80px, 260px) rotate(-280deg); }
  100% { transform: translate(-300px, 430px) rotate(-460deg); opacity: 0; }
}

@keyframes tasso-leaf-c {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.5; }
  40%  { transform: translate(-60px, 200px) rotate(130deg); }
  65%  { transform: translate(-120px, 360px) rotate(230deg); }
  100% { transform: translate(-90px, 560px) rotate(340deg); opacity: 0; }
}

/* 사무라이: 땅(바위 언덕)은 고정, 인물만 흔들림 */
.tasso-hero-samurai-wrap {
  position: absolute;
  right: 0;
  bottom: -4px;
  width: 22vw;
  z-index: 1;
  pointer-events: none;
}

.tasso-samurai-figure {
  position: relative;
  display: block;
  width: 47.5%;   /* 원본 비율 570/1201 */
  height: auto;
  left: 0;
  z-index: 1;
  transform-origin: bottom center;
  animation: tasso-samurai-sway 7s ease-in-out infinite;
}

.tasso-samurai-ground {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52.5%;   /* 원본 비율 631/1201 */
  height: auto;
  z-index: 2;
}

/* 잔잔한 흔들림 → 돌풍에 기울었다 반동 → 복귀 (발밑 축) */
@keyframes tasso-samurai-sway {
  0%   { transform: rotate(0deg); }
  16%  { transform: rotate(-1.3deg); }
  30%  { transform: rotate(0.8deg); }
  44%  { transform: rotate(-0.5deg); }
  56%  { transform: rotate(2.4deg) skewX(1deg); }
  64%  { transform: rotate(-2.8deg) skewX(-1.3deg); }
  72%  { transform: rotate(1.3deg); }
  82%  { transform: rotate(-0.6deg); }
  100% { transform: rotate(0deg); }
}

/* ── 차트 애니메이션: 캔들 순차 등장 → 조준점 포착 (9초 반복) ── */
.tasso-hero-chart .cndl {
  opacity: 0;
  animation: 9s ease-out infinite;
}

.tasso-hero-chart .c1  { animation-name: tasso-cndl-1; }
.tasso-hero-chart .c2  { animation-name: tasso-cndl-2; }
.tasso-hero-chart .c3  { animation-name: tasso-cndl-3; }
.tasso-hero-chart .c4  { animation-name: tasso-cndl-4; }
.tasso-hero-chart .c5  { animation-name: tasso-cndl-5; }
.tasso-hero-chart .c6  { animation-name: tasso-cndl-6; }
.tasso-hero-chart .c7  { animation-name: tasso-cndl-7; }
.tasso-hero-chart .c8  { animation-name: tasso-cndl-8; }
.tasso-hero-chart .c9  { animation-name: tasso-cndl-9; }
.tasso-hero-chart .c10 { animation-name: tasso-cndl-10; }
.tasso-hero-chart .c11 { animation-name: tasso-cndl-11; }
.tasso-hero-chart .c12 { animation-name: tasso-cndl-12; }

@keyframes tasso-cndl-1  { 0%, 3%    { opacity: 0; } 4.2%, 88%  { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes tasso-cndl-2  { 0%, 6.2%  { opacity: 0; } 7.4%, 88%  { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes tasso-cndl-3  { 0%, 9.4%  { opacity: 0; } 10.6%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes tasso-cndl-4  { 0%, 12.6% { opacity: 0; } 13.8%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes tasso-cndl-5  { 0%, 15.8% { opacity: 0; } 17%, 88%   { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes tasso-cndl-6  { 0%, 19%   { opacity: 0; } 20.2%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes tasso-cndl-7  { 0%, 22.2% { opacity: 0; } 23.4%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes tasso-cndl-8  { 0%, 25.4% { opacity: 0; } 26.6%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes tasso-cndl-9  { 0%, 28.6% { opacity: 0; } 29.8%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes tasso-cndl-10 { 0%, 31.8% { opacity: 0; } 33%, 88%   { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes tasso-cndl-11 { 0%, 35%   { opacity: 0; } 36.2%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes tasso-cndl-12 { 0%, 38.2% { opacity: 0; } 39.4%, 88% { opacity: 1; } 93%, 100% { opacity: 0; } }

/* 추세선: 캔들 완성 후 그려짐 */
.tasso-hero-chart .trend {
  opacity: 0;
  animation: tasso-trend 9s ease-out infinite;
}

@keyframes tasso-trend {
  0%, 40%  { opacity: 0; }
  46%, 88% { opacity: 0.85; }
  93%, 100% { opacity: 0; }
}

/* 조준점: '포착!' 팝 */
.tasso-hero-chart .aim-pop {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: tasso-aim 9s ease-out infinite;
}

@keyframes tasso-aim {
  0%, 42%   { opacity: 0; transform: scale(0.3); }
  46%       { opacity: 1; transform: scale(1.35); }
  49%, 88%  { opacity: 1; transform: scale(1); }
  93%, 100% { opacity: 0; transform: scale(0.3); }
}

/* 라벨: 조준점 다음에 등장 */
.tasso-hero-chart .aim-label {
  opacity: 0;
  animation: tasso-aim-label 9s ease-out infinite;
}

@keyframes tasso-aim-label {
  0%, 47%   { opacity: 0; }
  52%, 88%  { opacity: 1; }
  93%, 100% { opacity: 0; }
}