/* index.html 전용 스타일 */
/* ============ HERO 배경 ============
* 상·하단 페이드 layer를 최상단에 두어 헤더와의 경계선을 가린다.
*/
.index-hero {
/* 음수 z-index 자식(-z-20 블롭, -z-10 파티클)의 stacking context 루트를 히어로로 고정.
없으면 루트 컨텍스트로 올라가 카드 래퍼의 불투명 bg-base-100 '뒤'에 페인트되어 아예 안 보인다. */
isolation: isolate;
background:
/* 가장자리 페이드 (헤더 경계 마스킹) */
linear-gradient(
to bottom,
var(--color-base-100) 0%,
transparent 10%,
transparent 78%,
var(--color-base-100) 100%
),
/* 엣지 비네트 */
radial-gradient(
ellipse 95% 85% at 50% 50%,
transparent 55%,
oklch(40% 0.10 320 / 0.10) 88%,
oklch(32% 0.12 300 / 0.18) 100%
),
/* 은하수 사선 밴드 */
linear-gradient(
115deg,
transparent 32%,
oklch(92% 0.08 280 / 0.18) 48%,
oklch(94% 0.06 220 / 0.14) 55%,
transparent 72%
),
/* 별가루: tile size/offset 모두 달라 grid 인지 방지 */
radial-gradient(circle at 15% 20%, oklch(98% 0.02 280 / 0.85) 0.6px, transparent 1.6px) 0 0 / 140px 140px,
radial-gradient(circle at 65% 45%, oklch(95% 0.04 320 / 0.75) 0.5px, transparent 1.4px) 60px 80px / 200px 200px,
radial-gradient(circle at 35% 80%, oklch(96% 0.03 220 / 0.80) 0.5px, transparent 1.5px) 30px 130px / 260px 260px,
/* 컬러 메쉬 */
radial-gradient(at 20% 30%, oklch(85% 0.15 350 / 0.45) 0px, transparent 50%),
radial-gradient(at 80% 25%, oklch(85% 0.12 50 / 0.35) 0px, transparent 50%),
radial-gradient(at 65% 55%, oklch(85% 0.13 200 / 0.22) 0px, transparent 45%);
}
/* 그레인 텍스처 */
.index-hero::after {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
background-size: 3px 3px;
pointer-events: none;
mix-blend-mode: multiply;
z-index: 0;
}
/* 다크: 비네트·은하수 강화, 별가루 opacity 보정 */
.dark .index-hero {
background:
linear-gradient(
to bottom,
var(--color-base-100) 0%,
transparent 10%,
transparent 78%,
var(--color-base-100) 100%
),
radial-gradient(
ellipse 95% 85% at 50% 50%,
transparent 50%,
oklch(15% 0.05 280 / 0.30) 88%,
oklch(8% 0.08 280 / 0.45) 100%
),
linear-gradient(
115deg,
transparent 32%,
oklch(75% 0.10 260 / 0.25) 48%,
oklch(78% 0.08 220 / 0.20) 55%,
transparent 72%
),
radial-gradient(circle at 15% 20%, oklch(98% 0.02 280 / 0.95) 0.6px, transparent 1.6px) 0 0 / 140px 140px,
radial-gradient(circle at 65% 45%, oklch(95% 0.04 320 / 0.85) 0.5px, transparent 1.4px) 60px 80px / 200px 200px,
radial-gradient(circle at 35% 80%, oklch(96% 0.03 220 / 0.90) 0.5px, transparent 1.5px) 30px 130px / 260px 260px,
radial-gradient(at 20% 30%, oklch(50% 0.18 350 / 0.30) 0px, transparent 50%),
radial-gradient(at 80% 25%, oklch(50% 0.14 50 / 0.20) 0px, transparent 50%),
radial-gradient(at 65% 55%, oklch(50% 0.15 200 / 0.14) 0px, transparent 45%);
}
.dark .index-hero::after {
mix-blend-mode: screen;
background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}
/* ============ Hero 로고 부유 궤도 ============
* fill-mode: backwards → delay 동안 0% 위치 유지(시작 jolt 제거).
* a/c/e CCW · b/d CW + Rx≠Ry로 5개 궤도 위상 분산.
*/
/* Instagram — CCW 가로 타원 */
@keyframes index-float-a {
0% { transform: translate(14px, 0) rotate(0deg); }
25% { transform: translate(0, -11px) rotate(2deg); }
50% { transform: translate(-14px, 0) rotate(0deg); }
75% { transform: translate(0, 11px) rotate(-2deg); }
100% { transform: translate(14px, 0) rotate(0deg); }
}
/* Threads — CW 세로 타원 */
@keyframes index-float-b {
0% { transform: translate(12px, 0) rotate(0deg); }
25% { transform: translate(0, 14px) rotate(-1.8deg); }
50% { transform: translate(-12px, 0) rotate(0deg); }
75% { transform: translate(0, -14px) rotate(1.8deg); }
100% { transform: translate(12px, 0) rotate(0deg); }
}
/* TikTok — CCW 원형 */
@keyframes index-float-c {
0% { transform: translate(13px, 0) rotate(0deg); }
25% { transform: translate(0, -13px) rotate(2.2deg); }
50% { transform: translate(-13px, 0) rotate(0deg); }
75% { transform: translate(0, 13px) rotate(-2.2deg); }
100% { transform: translate(13px, 0) rotate(0deg); }
}
/* X — CW 가로 와이드 타원 */
@keyframes index-float-d {
0% { transform: translate(15px, 0) rotate(0deg); }
25% { transform: translate(0, 10px) rotate(-1.5deg); }
50% { transform: translate(-15px, 0) rotate(0deg); }
75% { transform: translate(0, -10px) rotate(1.5deg); }
100% { transform: translate(15px, 0) rotate(0deg); }
}
/* Rocket — CCW 세로 타원 */
@keyframes index-float-e {
0% { transform: translate(11px, 0) rotate(0deg); }
25% { transform: translate(0, -15px) rotate(2deg); }
50% { transform: translate(-11px, 0) rotate(0deg); }
75% { transform: translate(0, 15px) rotate(-2deg); }
100% { transform: translate(11px, 0) rotate(0deg); }
}
.index-float-a { animation: index-float-a 6.5s ease-in-out infinite backwards; }
.index-float-b { animation: index-float-b 7.5s ease-in-out 0.6s infinite backwards; }
.index-float-c { animation: index-float-c 6.0s ease-in-out 1.2s infinite backwards; }
.index-float-d { animation: index-float-d 7.0s ease-in-out 1.8s infinite backwards; }
.index-float-e { animation: index-float-e 8.0s ease-in-out 2.4s infinite backwards; }
/* ============ Hero 로고 hover 툴팁 ============
* data-platform 으로 각 로고의 브랜드 컬러 그라디언트 + 채색 그림자.
* fade/slide 자체는 group-hover 의 Tailwind 유틸리티가 처리.
*
* 구성:
* - ::before : 위쪽 화살표(rotated square) — 로고와 시각적으로 연결.
* - inset shadow : 상단 흰색 1px 하이라이트 + 하단 1px 음영 → 글래스 표면감.
* per-platform box-shadow 의 첫 두 줄이 이 인셋, 뒤 두 줄이 외부 채색 그림자.
*/
.index-hero-logo-tooltip {
color: white;
border: 1px solid oklch(100% 0 0 / 0.22);
text-shadow: 0 1px 2px oklch(0% 0 0 / 0.25);
}
.index-hero-logo-tooltip::before {
content: '';
position: absolute;
top: -5px;
left: 50%;
width: 10px;
height: 10px;
transform: translateX(-50%) rotate(45deg);
border-top: 1px solid oklch(100% 0 0 / 0.22);
border-left: 1px solid oklch(100% 0 0 / 0.22);
pointer-events: none;
}
.index-hero-logo[data-platform="instagram"] .index-hero-logo-tooltip {
background: linear-gradient(135deg, oklch(68% 0.22 350), oklch(60% 0.23 320));
box-shadow:
inset 0 1px 0 0 oklch(100% 0 0 / 0.35),
inset 0 -1px 0 0 oklch( 0% 0 0 / 0.18),
0 12px 28px -10px oklch(70% 0.22 350 / 0.55),
0 4px 12px -4px oklch(70% 0.22 320 / 0.35);
}
.index-hero-logo[data-platform="instagram"] .index-hero-logo-tooltip::before { background: oklch(68% 0.22 350); }
.index-hero-logo[data-platform="threads"] .index-hero-logo-tooltip {
background: linear-gradient(135deg, oklch(65% 0.18 240), oklch(70% 0.16 220));
box-shadow:
inset 0 1px 0 0 oklch(100% 0 0 / 0.35),
inset 0 -1px 0 0 oklch( 0% 0 0 / 0.18),
0 12px 28px -10px oklch(60% 0.18 240 / 0.55),
0 4px 12px -4px oklch(70% 0.16 220 / 0.35);
}
.index-hero-logo[data-platform="threads"] .index-hero-logo-tooltip::before { background: oklch(65% 0.18 240); }
.index-hero-logo[data-platform="tiktok"] .index-hero-logo-tooltip {
background: linear-gradient(135deg, oklch(68% 0.22 5), oklch(70% 0.20 350));
box-shadow:
inset 0 1px 0 0 oklch(100% 0 0 / 0.35),
inset 0 -1px 0 0 oklch( 0% 0 0 / 0.18),
0 12px 28px -10px oklch(68% 0.22 5 / 0.55),
0 4px 12px -4px oklch(70% 0.20 350 / 0.35);
}
.index-hero-logo[data-platform="tiktok"] .index-hero-logo-tooltip::before { background: oklch(68% 0.22 5); }
.index-hero-logo[data-platform="rocket"] .index-hero-logo-tooltip {
background: linear-gradient(135deg, oklch(65% 0.18 160), oklch(68% 0.15 180));
box-shadow:
inset 0 1px 0 0 oklch(100% 0 0 / 0.35),
inset 0 -1px 0 0 oklch( 0% 0 0 / 0.18),
0 12px 28px -10px oklch(60% 0.18 160 / 0.55),
0 4px 12px -4px oklch(65% 0.15 180 / 0.35);
}
.index-hero-logo[data-platform="rocket"] .index-hero-logo-tooltip::before { background: oklch(65% 0.18 160); }
.index-hero-logo[data-platform="x"] .index-hero-logo-tooltip {
background: linear-gradient(135deg, oklch(58% 0.20 280), oklch(60% 0.22 295));
box-shadow:
inset 0 1px 0 0 oklch(100% 0 0 / 0.35),
inset 0 -1px 0 0 oklch( 0% 0 0 / 0.18),
0 12px 28px -10px oklch(55% 0.20 280 / 0.55),
0 4px 12px -4px oklch(58% 0.22 295 / 0.35);
}
.index-hero-logo[data-platform="x"] .index-hero-logo-tooltip::before { background: oklch(58% 0.20 280); }
/* ============ 별 트윙클 ============ */
@keyframes index-twinkle {
0%, 100% { opacity: 0.25; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.4); }
}
.index-twinkle {
/* 마크업은 text-* 로 별 색을 지정 — dot(background)과 glow(box-shadow)가 같은
currentColor 를 공유해 글로우가 별 색을 따라간다. (bg-* 시절엔 glow 가 상속된
base-content 색으로 져서 라이트 테마에서 흰 별 주위에 회색 halo 가 생겼다) */
background: currentColor;
animation: index-twinkle 3s ease-in-out infinite;
box-shadow: 0 0 6px currentColor;
}
/* ============ Nebula 드리프트 ============
* Tailwind -translate-x-1/2 와 충돌 회피 위해 keyframe 내부에 -50%, -50% 포함.
*/
@keyframes index-nebula-drift-1 {
0%, 100% { transform: translate(-50%, -50%); }
50% { transform: translate(calc(-50% + 24px), calc(-50% - 18px)); }
}
@keyframes index-nebula-drift-2 {
0%, 100% { transform: translate(-50%, -50%); }
50% { transform: translate(calc(-50% - 22px), calc(-50% + 16px)); }
}
@keyframes index-nebula-drift-3 {
0%, 100% { transform: translate(-50%, -50%); }
50% { transform: translate(calc(-50% + 18px), calc(-50% + 22px)); }
}
.index-nebula-1 { animation: index-nebula-drift-1 38s ease-in-out infinite; }
.index-nebula-2 { animation: index-nebula-drift-2 44s ease-in-out 4s infinite; }
.index-nebula-3 { animation: index-nebula-drift-3 50s ease-in-out 8s infinite; }
/* ============ 정점 halo (펄스) ============
* 로고는 부유하지만 halo는 정점에 고정 → 별자리 형태 유지.
*/
@keyframes index-vertex-pulse {
0%, 100% { opacity: 0.50; transform: translate(-50%, -50%) scale(0.92); }
50% { opacity: 1.00; transform: translate(-50%, -50%) scale(1.08); }
}
.index-vertex-pulse {
animation: index-vertex-pulse 5s ease-in-out infinite;
}
/* ============ 중심 코어 ============
* 외곽 halo / 중간 glow / 코어 dot 의 3-layer 펄스.
* Tailwind -translate-x-1/2 충돌 회피 위해 keyframe 내부에 -50%, -50% 포함.
*/
@keyframes index-core-glow-pulse {
0%, 100% { opacity: 0.50; transform: translate(-50%, -50%) scale(0.92); }
50% { opacity: 1.00; transform: translate(-50%, -50%) scale(1.10); }
}
@keyframes index-core-mid-glow-pulse {
0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.88); }
50% { opacity: 1.00; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes index-core-star-pulse {
0%, 100% { opacity: 0.88; transform: translate(-50%, -50%) scale(0.95); }
50% { opacity: 1.00; transform: translate(-50%, -50%) scale(1.10); }
}
.index-core-glow { animation: index-core-glow-pulse 5.2s ease-in-out infinite; }
.index-core-mid-glow { animation: index-core-mid-glow-pulse 3.8s ease-in-out 0.4s infinite; }
.index-core-star { animation: index-core-star-pulse 2.6s ease-in-out 0.6s infinite; }
/* ============ scatter 입자 폭발 ============
* 8개 입자가 코어(50%, 50% = cluster 정중앙)에서 사방으로 튀어나가며 fade.
* CSS variable: --angle 방향, --distance 최대 거리, --color 색.
* Tailwind -translate-x-1/2 충돌 회피 위해 keyframe 내부에 translate(-50%,-50%) 포함.
* stagger 0.55s × 8 = 4.4s 총 → duration 4.4s 로 항상 1~2개 입자가 살아있게.
*/
@keyframes index-scatter-explode {
0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1); }
15% { opacity: 1; }
70% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(calc(var(--distance) * 0.85)) scale(0.7); }
100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(0.3); }
}
.index-scatter {
background: var(--color);
box-shadow: 0 0 7px var(--color), 0 0 16px var(--color);
animation: index-scatter-explode 4.4s cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
}
/* ============ 코어 → 정점 energy flow ============
* track(inset-0 = 컨테이너 전체 크기 래퍼)의 transform % 이동으로 컴포지터에서만 돈다.
* left/top keyframe 은 매 프레임 메인스레드 레이아웃을 유발하므로 금지 —
* transform 의 % 는 자기 크기 기준이라, 컨테이너-% 이동은 컨테이너 크기 track 이 대신 움직여 표현.
* dot(.index-flow) 은 left/top 50% 고정 + translate(-50%,-50%) 중심 정렬, opacity/scale 만 애니메이션.
* track/dot 의 duration·delay·easing 은 반드시 동일해야 위상이 맞는다.
* 정점별 duration/delay 분산 → 항상 1~2개 입자는 흐르는 상태.
*/
@keyframes index-flow-track-instagram { to { transform: translate(-23%, -20%); } } /* 50,50 → 27,30 */
@keyframes index-flow-track-threads { to { transform: translate( 25%, -23%); } } /* 50,50 → 75,27 */
@keyframes index-flow-track-tiktok { to { transform: translate( 26%, 2%); } } /* 50,50 → 76,52 */
@keyframes index-flow-track-rocket { to { transform: translate( 17%, 24%); } } /* 50,50 → 67,74 */
@keyframes index-flow-track-x { to { transform: translate(-21%, 24%); } } /* 50,50 → 29,74 */
@keyframes index-flow-dot {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
10% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
85% { opacity: 1; transform: translate(-50%, -50%) scale(0.95); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
}
.index-flow-track-instagram { animation: index-flow-track-instagram 6.8s cubic-bezier(0.32, 0.0, 0.74, 0.0) infinite backwards; }
.index-flow-track-instagram .index-flow { animation: index-flow-dot 6.8s cubic-bezier(0.32, 0.0, 0.74, 0.0) infinite backwards; }
.index-flow-track-threads { animation: index-flow-track-threads 7.5s cubic-bezier(0.32, 0.0, 0.74, 0.0) 1.35s infinite backwards; }
.index-flow-track-threads .index-flow { animation: index-flow-dot 7.5s cubic-bezier(0.32, 0.0, 0.74, 0.0) 1.35s infinite backwards; }
.index-flow-track-tiktok { animation: index-flow-track-tiktok 7.2s cubic-bezier(0.32, 0.0, 0.74, 0.0) 2.7s infinite backwards; }
.index-flow-track-tiktok .index-flow { animation: index-flow-dot 7.2s cubic-bezier(0.32, 0.0, 0.74, 0.0) 2.7s infinite backwards; }
.index-flow-track-rocket { animation: index-flow-track-rocket 7.8s cubic-bezier(0.32, 0.0, 0.74, 0.0) 4.05s infinite backwards; }
.index-flow-track-rocket .index-flow { animation: index-flow-dot 7.8s cubic-bezier(0.32, 0.0, 0.74, 0.0) 4.05s infinite backwards; }
.index-flow-track-x { animation: index-flow-track-x 6.9s cubic-bezier(0.32, 0.0, 0.74, 0.0) 5.4s infinite backwards; }
.index-flow-track-x .index-flow { animation: index-flow-dot 6.9s cubic-bezier(0.32, 0.0, 0.74, 0.0) 5.4s infinite backwards; }
/* ============ 플래그십 카드 보더 ============
* 외곽 a (p-[3px]) 가 보더 컨테이너. 200% 사이즈 그라디언트를 shimmer 로 슬라이드.
*/
@keyframes index-flagship-shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.index-flagship-border {
background: linear-gradient(135deg,
oklch(72% 0.22 0) 0%,
oklch(70% 0.25 320) 25%,
oklch(60% 0.22 290) 50%,
oklch(70% 0.25 320) 75%,
oklch(72% 0.22 0) 100%);
background-size: 200% 200%;
animation: index-flagship-shimmer 10s ease-in-out infinite;
box-shadow:
0 20px 50px -18px oklch(70% 0.22 350 / 0.45),
0 8px 20px -8px oklch(70% 0.22 320 / 0.30);
transition: box-shadow 0.5s ease;
}
.index-flagship-border:hover {
box-shadow:
0 30px 70px -18px oklch(70% 0.22 350 / 0.65),
0 12px 30px -8px oklch(70% 0.22 320 / 0.45);
}
.dark .index-flagship-border {
box-shadow:
0 20px 60px -18px oklch(60% 0.22 350 / 0.55),
0 8px 20px -8px oklch(60% 0.22 320 / 0.40);
}
.dark .index-flagship-border:hover {
box-shadow:
0 30px 80px -18px oklch(60% 0.22 350 / 0.75),
0 12px 32px -8px oklch(60% 0.22 320 / 0.55);
}
/* ============ 슈팅스타 ============
* visible 구간을 ~5% 만 두어 사이클 당 한 번 지나가는 등장감 연출.
* 트레일 head(흰색)가 진행 방향이 되도록 rotate 와 translate 부호를 정렬.
*/
/* ============ 유성우 (shooting star) ============
* trail 170px, cyan tint linear gradient — head (오른쪽 끝) 로 갈수록 진해짐.
* 각도와 translate 진행 vector 일치 필수 (불일치 시 trail 이 반대로 끌려 어색).
* opacity 부드러운 fade in/out (3 → 4.5 → 6 → 7.5 → 8.5%) — 점프 없는 자연스러운 등장·소멸.
*/
.index-shooting-star {
position: absolute;
width: 170px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg,
oklch(98% 0.05 200 / 0) 0%,
oklch(95% 0.06 200 / 0.4) 60%,
oklch(98% 0.05 200 / 0.9) 90%,
white 100%);
box-shadow:
0 0 8px white,
0 0 14px oklch(85% 0.18 220 / 0.7);
opacity: 0;
will-change: transform, opacity;
}
@keyframes index-shooting-star-1 {
0% { transform: translate(0, 0) rotate(22deg); opacity: 0; }
3% { opacity: 0; }
4.5% { opacity: 0.95; }
6% { opacity: 1; }
7.5% { opacity: 0.7; }
8.5% { transform: translate(1350px, 540px) rotate(22deg); opacity: 0; }
100% { transform: translate(1350px, 540px) rotate(22deg); opacity: 0; }
}
@keyframes index-shooting-star-2 {
0% { transform: translate(0, 0) rotate(155deg); opacity: 0; }
3% { opacity: 0; }
4.5% { opacity: 0.95; }
6% { opacity: 1; }
7.5% { opacity: 0.7; }
8.5% { transform: translate(-1275px, 480px) rotate(155deg); opacity: 0; }
100% { transform: translate(-1275px, 480px) rotate(155deg); opacity: 0; }
}
@keyframes index-shooting-star-3 {
0% { transform: translate(0, 0) rotate(60deg); opacity: 0; }
3% { opacity: 0; }
4.5% { opacity: 0.95; }
6% { opacity: 1; }
7.5% { opacity: 0.7; }
8.5% { transform: translate(540px, 930px) rotate(60deg); opacity: 0; }
100% { transform: translate(540px, 930px) rotate(60deg); opacity: 0; }
}
.index-shooting-star-1 { animation: index-shooting-star-1 18s ease-out infinite; }
.index-shooting-star-2 { animation: index-shooting-star-2 22s ease-out 8s infinite; }
.index-shooting-star-3 { animation: index-shooting-star-3 20s ease-out 14s infinite; }
/* ============ Hero 부유 파티클 ============ */
@keyframes index-particle-drift {
from { transform: translateY(100vh); }
to { transform: translateY(-20vh); }
}
.index-particle {
animation-name: index-particle-drift;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* ============ Sticky 탭 바 / 활성 상태 ============ */
.index-tab-btn {
color: var(--color-base-content);
background: transparent;
transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
border: 1px solid transparent;
}
.index-tab-btn:not(.active):hover {
background: var(--color-base-200);
border-color: color-mix(in oklch, var(--color-base-content) 8%, transparent);
}
.index-tab-btn.active {
background: var(--color-primary);
color: var(--color-primary-content);
transform: scale(1.05);
box-shadow: 0 8px 24px -8px oklch(70% 0.22 350 / 0.5);
}
/* 플랫폼별 활성 그림자 액센트 */
.index-tab-btn[data-platform="threads"].active {
box-shadow: 0 8px 24px -8px oklch(40% 0.04 280 / 0.6);
}
.index-tab-btn[data-platform="tiktok"].active {
box-shadow: 0 8px 24px -8px oklch(60% 0.22 5 / 0.55);
}
.index-tab-btn[data-platform="rocket"].active {
box-shadow: 0 8px 24px -8px oklch(65% 0.15 160 / 0.55);
}
.index-tab-btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ============ 탭 패널 전환 ============ */
.index-panel { display: none; opacity: 0; }
.index-panel.active {
display: block;
opacity: 1;
animation: index-panel-in 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes index-panel-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============ Scroll reveal (IntersectionObserver) ============ */
.index-reveal {
opacity: 0;
transform: translateY(28px);
transition:
opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
will-change: opacity, transform;
}
.index-reveal.in {
opacity: 1;
transform: translateY(0);
}
/* ============ 미니 데모: 결과 row 페이드업 ============ */
@keyframes index-demo-fade-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.index-demo-row {
animation: index-demo-fade-up 0.6s ease-out backwards;
}
/* ============ 마우스 스포트라이트 ============
* --index-mx / --index-my 는 JS pointermove 핸들러에서 갱신.
*/
.index-spotlight {
position: relative;
overflow: hidden;
}
.index-spotlight::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
600px circle at var(--index-mx, 50%) var(--index-my, 50%),
oklch(80% 0.20 340 / 0.18),
transparent 40%
);
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
z-index: 0;
}
.index-spotlight:hover::before { opacity: 1; }
/* ============ 스크롤 진행바 ============
* JS(setupProgressBar)가 scaleX 를 갱신 — width 갱신은 매 프레임 레이아웃을 유발해 금지.
*/
.index-progress-bar {
transform: scaleX(0);
transform-origin: left;
will-change: transform;
box-shadow: 0 0 12px oklch(70% 0.22 340 / 0.5);
}
/* ============ 맨 위로 버튼 ============ */
.index-to-top.visible {
opacity: 1;
pointer-events: auto;
}
.index-to-top {
color: var(--color-base-content);
backdrop-filter: blur(8px);
}
/* ============ 화면 밖 애니메이션 일시정지 ============
* JS(setupHeroAnimationPause)가 히어로가 뷰포트를 벗어나면 부여.
* 히어로에만 무한 애니메이션 요소가 ~60개라, 스크롤로 지나간 뒤에도 도는 것을 막는다.
*/
.index-hero.index-anim-paused * {
animation-play-state: paused !important;
}
/* ============ prefers-reduced-motion ============ */
@media (prefers-reduced-motion: reduce) {
.index-reveal {
opacity: 1;
transform: none;
transition: none;
}
/* 모든 부유 로고는 .index-hero-logo 를 함께 가지므로 한 번에 정지 */
.index-hero-logo,
.index-particle,
.index-demo-row {
animation: none !important;
transition: none !important;
}
.index-spotlight::before { display: none; }
.index-twinkle { animation: none !important; opacity: 0.6; }
.index-vertex-pulse { animation: none !important; opacity: 0.7; transform: translate(-50%, -50%); }
.index-nebula,
.index-core-glow,
.index-core-mid-glow,
.index-core-star {
animation: none !important;
transform: translate(-50%, -50%) !important;
}
.index-core-glow { opacity: 0.7; }
.index-core-mid-glow { opacity: 0.65; }
.index-core-star { opacity: 1; }
/* scatter 입자는 정지된 mid-frame 위치(70%, scale 0.7)로 고정 — 폭발 흔적 잔상 */
.index-scatter {
animation: none !important;
transform: translate(-50%, -50%) rotate(var(--angle)) translateX(calc(var(--distance) * 0.85)) scale(0.7) !important;
opacity: 0.65;
}
/* motion 자체가 본질인 요소는 숨김 (dot 이 없으면 track 애니메이션도 무의미하니 정지) */
.index-flow,
.index-shooting-star { display: none; }
.index-flow-track { animation: none !important; }
.index-flagship-border {
animation: none !important;
transition: none !important;
}
/* Tailwind 기본 애니메이션은 자동 정지되지 않음 → 수동 차단 */
.animate-bounce,
.animate-ping,
.animate-pulse,
.animate-spin { animation: none !important; }
}