/* ════════════════════════════════════════════════════════════════════════
   KINGINSEN — Netflix-style intro splash.
   Copied from _ref/kinginsen-home-preview.html (#intro). Plays once per
   homepage load; tap/click/key skips; respects prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════════ */
#intro{
  position:fixed;inset:0;z-index:50;background:#03100A;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .75s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
#intro.leaving{opacity:0;transform:scale(1.04);pointer-events:none}
#intro.gone{display:none}
.intro-stage{display:flex;flex-direction:column;align-items:center;gap:16px;
  opacity:0;transform:scale(.94);animation:introIn .9s cubic-bezier(.22,.61,.36,1) .15s forwards}
@keyframes introIn{to{opacity:1;transform:scale(1)}}

.intro-mark{width:92px;height:92px;overflow:visible}
.intro-mark path{fill:none;stroke-dasharray:90;stroke-dashoffset:90;
  animation:threadDraw 1.5s cubic-bezier(.4,0,.2,1) forwards}
.intro-mark .t-gold{stroke:var(--gold-lt)}
.intro-mark .t-silver{stroke:var(--silver-lt);animation-delay:.18s}
.intro-mark .t-spine{stroke:#fff;opacity:.45;animation-delay:.32s}
.intro-mark circle{opacity:0;animation:dotPop .5s ease .95s forwards}
.intro-rotor{animation:introSpin 2.6s cubic-bezier(.45,.05,.2,1) .05s forwards}
@keyframes threadDraw{to{stroke-dashoffset:0}}
@keyframes dotPop{to{opacity:1}}
@keyframes introSpin{
  0%{transform:rotate(0deg) scale(.85)}
  55%{transform:rotate(540deg) scale(1.08)}
  100%{transform:rotate(720deg) scale(1)}
}
.intro-sheen{position:absolute;inset:-20%;
  background:linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%);
  mix-blend-mode:screen;opacity:0;
  animation:sheenSweep 1.1s ease 1.05s forwards;
}
@keyframes sheenSweep{
  0%{opacity:0;transform:translateX(-60%)}
  15%{opacity:.9}
  55%{opacity:.9}
  100%{opacity:0;transform:translateX(60%)}
}
.intro-type{display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;animation:typeIn .8s ease 1.35s forwards}
@keyframes typeIn{to{opacity:1}}
.intro-type .latin{
  font-family:"Cormorant",serif;font-weight:400;font-size:clamp(26px,7vw,38px);
  letter-spacing:.44em;padding-inline-start:.44em;line-height:1;
  color:transparent;background:linear-gradient(120deg,#B08C2E,#E7CC7E 46%,#F4E6B4 70%,#D4AF37);
  -webkit-background-clip:text;background-clip:text;
}
.intro-type .jp{font-family:"Shippori Mincho",serif;font-size:13px;letter-spacing:.38em;
  padding-inline-start:.38em;color:var(--silver-lt);opacity:.9}

@media (prefers-reduced-motion:reduce){
  #intro{transition:opacity .25s ease}
  .intro-stage,.intro-type,.intro-mark path,.intro-mark circle,.intro-rotor{animation:none!important;opacity:1!important;stroke-dashoffset:0!important;transform:none!important}
  .intro-sheen{display:none}
}