/* ═══════════════════════════════════════════════════════════════ */
/*  animations.css                                                 */
/*  所有動態效果：滾動進場、漸層、浮動光點、Hover 動畫            */
/* ═══════════════════════════════════════════════════════════════ */


  /* ═══════════════════════════════════════════════════ */
  /*                    ANIMATIONS                       */
  /* ═══════════════════════════════════════════════════ */

  /* ─── LEVEL 1: SCROLL REVEAL ─── */
  /* Elements with .reveal start invisible and slide up when scrolled into view */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
  }

  .reveal.in-view {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger children — used on .talents-grid and .about-items */
  .stagger-children > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  }

  .stagger-children.in-view > * {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger delays (cascade effect) */
  .stagger-children.in-view > *:nth-child(1)  { transition-delay: .05s; }
  .stagger-children.in-view > *:nth-child(2)  { transition-delay: .12s; }
  .stagger-children.in-view > *:nth-child(3)  { transition-delay: .19s; }
  .stagger-children.in-view > *:nth-child(4)  { transition-delay: .26s; }
  .stagger-children.in-view > *:nth-child(5)  { transition-delay: .33s; }
  .stagger-children.in-view > *:nth-child(6)  { transition-delay: .40s; }
  .stagger-children.in-view > *:nth-child(7)  { transition-delay: .47s; }
  .stagger-children.in-view > *:nth-child(8)  { transition-delay: .54s; }
  .stagger-children.in-view > *:nth-child(9)  { transition-delay: .61s; }
  .stagger-children.in-view > *:nth-child(10) { transition-delay: .68s; }

  /* ─── LEVEL 2: HOVER MICRO-INTERACTIONS ─── */

  /* Talent card — enhanced hover (overrides earlier basic hover) */
  .talent-card {
    position: relative;
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
  }

  .talent-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    padding: 2px;
    background: linear-gradient(135deg, #ff8aab, #c85a8a, #9b6bc8, #6b8fd4);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 2;
  }

  .talent-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(120,80,90,0.18);
  }

  .talent-card:hover::before { opacity: 1; }

  .talent-card .talent-photo {
    transition: transform .6s cubic-bezier(.22,1,.36,1);
  }

  .talent-card:hover .talent-photo {
    transform: scale(1.06);
  }

  /* Nav link underline expand from center */
  .nav-links a::after {
    transform-origin: center;
  }

  /* YouTube video card play button pulse on hover */
  .yt-video-card:hover .yt-play-btn {
    animation: pulsePlay 1.2s ease-in-out infinite;
  }

  @keyframes pulsePlay {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
  }

  /* Primary button — gradient slide on hover */
  .btn-primary {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: transform .25s ease, box-shadow .25s ease;
  }

  .btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #c85a8a, #9b6bc8, #6b8fd4);
    opacity: 0;
    transition: opacity .35s ease;
    z-index: -1;
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(155,107,200,0.3);
  }

  .btn-primary:hover::before { opacity: 1; }

  /* Logo subtle hover */
  .logo-img { transition: opacity .25s ease, transform .25s ease; }
  .nav-logo:hover .logo-img { opacity: 0.7; transform: scale(0.96); }

  /* Carousel button stronger hover */
  .carousel-btn:active { transform: scale(0.95); }

  /* ─── LEVEL 3: FLOATING DECORATION ─── */
  /* Floating dots in each section (subtle ambient sparkle) */
  .floating-dots {
    position: absolute;
    inset: 0;                /* fill entire section */
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: fadeInDots 1.2s ease 0.5s forwards;
    overflow: hidden;
  }

  @keyframes fadeInDots {
    to { opacity: 1; }
  }

  .floating-dot {
    position: absolute;
    border-radius: 50%;
    animation: floatBreathe 4s ease-in-out infinite;
    box-shadow: 0 0 12px currentColor;  /* soft glow halo */
  }

  .floating-dot.d1 {
    width: 10px; height: 10px;
    background: rgba(200,90,138,0.55);
    color: rgba(200,90,138,0.35);
    top: 18%; left: 6%;
    animation-delay: 0s;
  }
  .floating-dot.d2 {
    width: 7px; height: 7px;
    background: rgba(155,107,200,0.6);
    color: rgba(155,107,200,0.4);
    top: 60%; right: 8%;
    animation-delay: 1.2s;
  }
  .floating-dot.d3 {
    width: 6px; height: 6px;
    background: rgba(107,143,212,0.6);
    color: rgba(107,143,212,0.4);
    bottom: 22%; left: 12%;
    animation-delay: 2.4s;
  }
  .floating-dot.d4 {
    width: 5px; height: 5px;
    background: rgba(255,138,171,0.65);
    color: rgba(255,138,171,0.45);
    top: 35%; right: 18%;
    animation-delay: 0.8s;
  }

  @keyframes floatBreathe {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.55; }
    50%      { transform: translateY(-14px) scale(1.3); opacity: 1; }
  }

  /* Make sure other content stays above floating dots */
  /* Make sure other content stays above floating dots */
  /* Exclude #hero — it has its own absolute positioning */
  section:not(#hero) > :not(.floating-dots) { position: relative; z-index: 2; }
  #hero > :not(.floating-dots):not(.hero-text):not(.hero-deco) { position: relative; z-index: 2; }

  /* Make sure sections allow absolute positioning for floating dots */
  section { position: relative; }

  /* ─── LEVEL 3+: SECTION TITLE GRADIENT SWEEP ─── */
  /* When a section title comes into view, the gradient "sweeps" once */
  .section-title.in-view span,
  .hero-text h1.in-view span {
    animation: gradientSweep 1.4s cubic-bezier(.22,1,.36,1) 0.2s 1,
               titleGradient 8s ease 1.6s infinite;
  }

  @keyframes gradientSweep {
    0%   { background-position: 200% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* ─── ACCESSIBILITY: respect reduced motion preference ─── */
  @media (prefers-reduced-motion: reduce) {
    .reveal,
    .stagger-children > *,
    .floating-dot,
    .talent-card,
    .talent-photo,
    .btn-primary {
      transition: none !important;
      animation: none !important;
    }
    .reveal,
    .stagger-children > * {
      opacity: 1 !important;
      transform: none !important;
    }
  }