/* 唯美 Site Immersive v6 — WebGL + Char Reveal + View Transitions 補強樣式 */

/* C1. WebGL Hero canvas 容器 */
.webgl-hero-bg {
  display: block;
  pointer-events: none;
}

/* C2. Cursor trail canvas（不擋點擊）*/
.cursor-trail-canvas {
  -webkit-user-select: none;
  user-select: none;
}

/* C3. Char Reveal 逐字動畫 */
.char-reveal {
  display: inline-block;
  overflow: hidden;
}
.char-reveal .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.8em) rotateZ(8deg);
  transition: opacity .55s cubic-bezier(.2,.7,.3,1), transform .55s cubic-bezier(.2,.7,.3,1);
  transition-delay: calc(var(--i) * 28ms);
  white-space: pre;
}
.char-reveal.chars-in .char {
  opacity: 1;
  transform: translateY(0) rotateZ(0deg);
}

/* C4. View Transitions（Chrome 原生）— 自訂淡入淡出 */
@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .35s;
  }
  ::view-transition-old(root) {
    animation-name: vt-fade-out;
  }
  ::view-transition-new(root) {
    animation-name: vt-fade-in;
  }
  @keyframes vt-fade-out {
    to { opacity: 0; transform: translateY(-8px); }
  }
  @keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(8px); }
  }
}

/* C5. Image Distortion wrapper */
.distort-wrap { line-height: 0; }
.distort-wrap canvas { display: block; width: 100% !important; height: auto !important; }

/* C6. Section header snap-in */
.snap-target {
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
  display: inline-block;
}
.snap-target.snap-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* C7. 增強 v5 既有元素：給 hero 區一個微微的呼吸光 */
@keyframes hero-breathe {
  0%, 100% { box-shadow: inset 0 0 100px 20px rgba(255,210,140,0.05); }
  50%      { box-shadow: inset 0 0 140px 40px rgba(255,180,120,0.10); }
}
.home .hero,
.home-hero,
.page-template-page-luminous-home main > section:first-child {
  position: relative;
  animation: hero-breathe 6s ease-in-out infinite;
}

/* C8. 強化既有 .magnetic 互動加 glow */
.magnetic {
  position: relative;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.2), filter .35s, box-shadow .35s;
}
.magnetic:hover {
  filter: brightness(1.05);
  box-shadow: 0 8px 30px -8px rgba(180, 80, 140, 0.4);
}

/* C9. mobile 退場（不跑 WebGL/trail）*/
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .webgl-hero-bg,
  .cursor-trail-canvas {
    display: none !important;
  }
}