/* ==========================================================================
   OHO — 材質、金屬字、稀有度光效、動畫
   ========================================================================== */

/* 雜訊疊層：加在任何 position:relative 的區塊 */
.texture-noise { position: relative; isolation: isolate; }
.texture-noise::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--noise);
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: overlay;
}
.texture-noise > * { position: relative; z-index: 1; }

/* 裂紋疊層 */
.cracked { position: relative; }
.cracked::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--cracks);
  background-size: 400px 400px;
  opacity: 0.6;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* 金屬漸層文字（模仿 logo 黃銅斜邊） */
.metal-text {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--brass-2);
  background: var(--grad-metal);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255, 236, 190, 0.35))
    drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.9))
    drop-shadow(0 6px 10px rgba(0, 0, 0, 0.8));
}
.metal-text--zh { font-family: var(--font-zh-head); }

/* 鐵板面板 */
.iron-panel {
  position: relative;
  background: var(--grad-iron);
  border: 1px solid rgba(217, 168, 90, 0.35);
  box-shadow:
    var(--shadow-inset),
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 0 3px rgba(184, 134, 59, 0.18),
    var(--shadow-card);
}
.iron-panel::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--noise);
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* 黃銅細框 */
.brass-frame {
  border: 1px solid rgba(217, 168, 90, 0.45);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.8), inset 0 0 0 2px rgba(240, 207, 134, 0.12);
}

/* 分隔線（帶菱形） */
.divider {
  display: flex; align-items: center; gap: 14px;
  color: var(--brass-1);
  margin: 0 auto;
  max-width: 420px;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-1), transparent);
}
.divider span { width: 8px; height: 8px; transform: rotate(45deg); background: var(--brass-2); box-shadow: 0 0 10px var(--ember); }

/* 餘燼光暈 */
.ember-glow {
  position: absolute; inset: auto 0 0 0; height: 60%;
  background:
    radial-gradient(60% 55% at 50% 100%, rgba(255, 106, 26, 0.32) 0%, rgba(255, 106, 26, 0.10) 40%, transparent 70%),
    radial-gradient(35% 30% at 50% 100%, rgba(255, 155, 61, 0.35), transparent 70%);
  pointer-events: none;
  animation: ember-pulse 6s ease-in-out infinite;
}

/* 稀有度 */
.card[data-rarity="common"]     { --glow: var(--rarity-common); --glow-a: 0; }
.card[data-rarity="rare"]       { --glow: var(--rarity-rare); --glow-a: 0.55; }
.card[data-rarity="legendary"]  { --glow: var(--rarity-legendary); --glow-a: 0.7; }

.card.is-flipped .card__face--front {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 0 26px color-mix(in srgb, var(--glow) calc(var(--glow-a) * 100%), transparent),
    var(--shadow-card);
}
.card[data-rarity="legendary"] .card__face--front::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    transparent 25%,
    rgba(255, 255, 255, 0.10) 40%,
    rgba(240, 207, 134, 0.35) 50%,
    rgba(255, 255, 255, 0.10) 60%,
    transparent 75%);
  background-size: 250% 250%;
  background-position: 120% 120%;
  mix-blend-mode: screen;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s;
}
.card[data-rarity="legendary"].is-flipped:hover .card__face--front::after,
.card[data-rarity="legendary"].is-flipped:focus-within .card__face--front::after {
  opacity: 1;
  animation: holo-sweep 1.8s var(--ease) infinite;
}
.card[data-rarity="rare"] .card__face--front::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(79, 176, 214, 0.18) 50%, transparent 70%);
  background-size: 250% 250%;
  background-position: 120% 120%;
  mix-blend-mode: screen;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.4s;
}
.card[data-rarity="rare"].is-flipped:hover .card__face--front::after { opacity: 1; animation: holo-sweep 2.4s var(--ease) infinite; }

/* Keyframes */
@keyframes holo-sweep {
  0%   { background-position: 120% 120%; }
  100% { background-position: -20% -20%; }
}
@keyframes ember-pulse {
  0%, 100% { opacity: 0.85; transform: scaleY(1); }
  50%      { opacity: 1; transform: scaleY(1.06); }
}
@keyframes flip-in {
  from { opacity: 0; transform: translateY(24px) rotateX(8deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(40px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.anim-fade-up { animation: fade-up 0.9s var(--ease) both; }
.anim-rise    { animation: rise-in 1.1s var(--ease) both; }
.anim-float   { animation: float-slow 7s ease-in-out infinite; }
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.6s; }

/* 捲動進場 */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* 減少動態 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .card__inner { transition: none !important; }
  .card__face { transition: opacity 0.001ms !important; }
}