/* 두드림AI 랜딩페이지 모션 — motion.js와 한 쌍. 움직임 줄이기 설정(prefers-reduced-motion)이면 전부 끈다. */

/* ── 1. 스크롤하면 등장 ───────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── 2. 마우스 반응: 카드 기울기 + 빛, 버튼 물결, 아이콘 흔들림 ── */
.tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.tilt.is-tilting {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-4px) scale(1.01);
  transition: transform 0.08s ease-out, box-shadow 0.3s ease;
}
.tilt::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.55), rgba(15, 116, 245, 0.08) 45%, transparent 70%);
  transition: opacity 0.3s ease;
  z-index: 1;
}
.dark .tilt::after {
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.16), rgba(7, 172, 173, 0.1) 45%, transparent 70%);
}
.tilt.is-tilting::after {
  opacity: 1;
}

.ripple-host {
  position: relative;
  overflow: hidden;
}
.ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255, 255, 255, 0.55);
  animation: ripple-out 0.6s ease-out forwards;
  z-index: 2;
}
.ripple.ripple-dark {
  background: rgba(15, 116, 245, 0.25);
}
@keyframes ripple-out {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
.is-bouncing {
  animation: press-bounce 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes press-bounce {
  0% { transform: scale(1); }
  35% { transform: scale(0.94); }
  100% { transform: scale(1); }
}

.tilt:hover .material-symbols-outlined,
.icon-wiggle:hover .material-symbols-outlined {
  animation: icon-wiggle 0.6s ease;
}
@keyframes icon-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-10deg) scale(1.15); }
  50% { transform: rotate(8deg) scale(1.15); }
  75% { transform: rotate(-4deg); }
}

/* ── 3. 첫 화면(히어로) 연출 ─────────────────────── */
.hero-motion {
  position: relative;
  overflow: hidden;
}
.hero-motion > * {
  position: relative;
  z-index: 1;
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
  animation: blob-float var(--blob-time, 14s) ease-in-out infinite alternate;
}
.dark .hero-blob { opacity: 0.22; }
@keyframes blob-float {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(var(--blob-dx, 40px), var(--blob-dy, -30px)) scale(1.12); }
  100% { transform: translate(calc(var(--blob-dx, 40px) * -0.6), var(--blob-dy2, 24px)) scale(0.95); }
}

.type-word {
  display: inline-block;
  white-space: nowrap;
}
.type-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotate(4deg);
  animation: type-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--char-delay, 0ms);
}
@keyframes type-in {
  to { opacity: 1; transform: none; }
}

.hero-image-box.is-breathing {
  animation: photo-glow 3.2s ease-in-out infinite;
}
@keyframes photo-glow {
  0%, 100% { box-shadow: 0 25px 50px -12px rgba(15, 116, 245, 0.25), 0 0 0 0 rgba(7, 172, 173, 0); }
  50% { box-shadow: 0 25px 50px -12px rgba(15, 116, 245, 0.45), 0 0 0 10px rgba(7, 172, 173, 0.12); }
}

/* ── 4. 마우스 커서 따라다니는 빛 ───────────────── */
/* 은은한 그라데이션 빛무리만 (링·점 없음) */
#cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  /* 사이트 브랜드색(파랑 #0F74F5 · 청록 #07ACAD)을 아주 옅게 섞은 빛무리: 가운데 하늘빛 → 청록 → 투명 */
  background: radial-gradient(circle, rgba(15, 116, 245, 0.14) 0%, rgba(58, 160, 255, 0.11) 30%, rgba(7, 172, 173, 0.07) 55%, rgba(7, 172, 173, 0) 72%);
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
  opacity: 0;
}
.dark #cursor-glow {
  background: radial-gradient(circle, rgba(108, 188, 227, 0.22) 0%, rgba(15, 116, 245, 0.16) 30%, rgba(7, 172, 173, 0.08) 55%, rgba(7, 172, 173, 0) 72%);
}
#cursor-glow.is-active { opacity: 1; }
#cursor-glow.is-hovering { transform: translate(-50%, -50%) scale(1.35); }
#cursor-glow.is-pressed { transform: translate(-50%, -50%) scale(0.9); }

/* 터치 기기·움직임 줄이기 설정에서는 모션을 끈다 */
@media (pointer: coarse) {
  #cursor-glow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .tilt.is-tilting { transform: none; }
  .tilt::after, .hero-blob, #cursor-glow { display: none; }
  .type-char { opacity: 1; transform: none; animation: none; }
  .hero-image-box.is-breathing, .is-bouncing, .ripple { animation: none; }
}