/* WADO — intro di apertura (identica alla versione 1: taglio di katana, orbite, anello di carte, medaglione) */
#intro { --ink: #281335; --ivory: #faf7ef; --gold: #c6973e; --lilac: #d8c6e3; --line-d: rgba(250,247,239,.12); color: #faf7ef; }
.intro-lock { overflow: hidden; }
#intro { position: fixed; inset: 0; z-index: 200; pointer-events: auto; overflow: hidden; perspective: 1200px; }
#intro .half { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 50%, #3a1b4c 0%, var(--ink) 45%, #12071a 100%); will-change: transform; }
#intro .half.a { clip-path: polygon(0 0, 100% 0, 100% 38%, 0 62%); }
#intro .half.b { clip-path: polygon(0 62%, 100% 38%, 100% 100%, 0 100%); }
#intro .slash {
  position: absolute; left: 50%; top: 50%; width: 120vmax; height: 2px; margin-left: -60vmax; margin-top: -1px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, #fff3d6 50%, var(--gold) 80%, transparent);
  box-shadow: 0 0 24px 4px rgba(226, 189, 114, 0.6); transform: scaleX(0); z-index: 6;
}
#intro .flash { position: absolute; inset: 0; background: #fff6e2; opacity: 0; z-index: 7; pointer-events: none; mix-blend-mode: overlay; }
#intro .stage3d { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; z-index: 3; }
#intro .orbits { position: absolute; width: min(82vmin, 620px); aspect-ratio: 1; }
#intro .orbits circle { fill: none; stroke-linecap: round; }
#intro .ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
#intro .cb {
  position: absolute; left: -46px; top: -64px; width: 92px; height: 128px; border-radius: 7px;
  background: radial-gradient(circle at 50% 42%, #8d5ba6 0, #623476 36%, #2c1239 100%);
  box-shadow: inset 0 0 0 2px rgba(198, 151, 62, 0.85), inset 0 0 0 6px #2c1239, inset 0 0 0 7px rgba(198, 151, 62, 0.5), 0 10px 30px rgba(0, 0, 0, 0.6);
  display: grid; place-items: center; backface-visibility: visible;
}
#intro .cb::before { content: ""; position: absolute; width: 58px; height: 58px; border-radius: 50%; border: 1px solid rgba(198, 151, 62, 0.7); }
#intro .cb i { width: 44px; height: 44px; border-radius: 50%; background: var(--ivory) url("/assets/wado-logo-256.webp") center / 86% no-repeat; }
#intro .medal {
  position: relative; width: min(42vmin, 300px); aspect-ratio: 1; border-radius: 50%; background: var(--ivory);
  display: grid; place-items: center; overflow: hidden; z-index: 4;
  box-shadow: 0 0 0 2px var(--gold), 0 0 0 10px rgba(198, 151, 62, 0.12), 0 0 120px 20px rgba(141, 91, 166, 0.55);
}
#intro .medal img { width: 82%; height: 82%; object-fit: contain; }
#intro .medal::after {
  content: ""; position: absolute; inset: -40%; transform: translateX(-100%) rotate(20deg);
  background: linear-gradient(90deg, transparent 40%, rgba(255, 255, 255, 0.85) 50%, transparent 60%);
  animation: none;
}
#intro .medal.shine::after { animation: shine 1.2s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes shine { to { transform: translateX(100%) rotate(20deg); } }
#intro .tag { position: absolute; left: 0; right: 0; bottom: clamp(48px, 12vh, 120px); display: flex; justify-content: center; gap: 0.4em; z-index: 5;
  font: 700 clamp(28px, 6.4vw, 84px)/1 var(--f-display); letter-spacing: -0.03em; flex-wrap: wrap; padding: 0 16px; }
#intro .tag span { display: inline-block; overflow: hidden; }
#intro .tag span b { display: inline-block; transform: translateY(110%); font-weight: 700; }
#intro .skip { position: absolute; right: var(--gutter); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 9;
  background: none; border: 1px solid var(--line-d); color: var(--lilac); border-radius: 999px; padding: 10px 16px; font: 600 13px/1 var(--f-display); }
#intro .skip:hover { color: var(--ivory); border-color: var(--gold); }
#intro .count { position: absolute; left: var(--gutter); bottom: calc(26px + env(safe-area-inset-bottom, 0px)); z-index: 9; font: 600 12px/1 var(--f-display); letter-spacing: 0.2em; color: var(--lilac); }
#intro .tag .gold { color: #e2bd72; }
#intro { z-index: 450; }