/* ============================================================
   intro.css - the opening curtain call: pick sound or silence
               before the stage is revealed.
   ============================================================ */

.intro{
  position:fixed;
  inset:0;
  z-index:var(--z-intro);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6vh 5vw;
  text-align:center;
  /* dark enough to read against, sheer enough that the set still glows
     faintly behind the wordmark */
  background:
    radial-gradient(ellipse at 50% 42%,
      rgba(58,32,104,0.42) 0%, rgba(6,3,14,0.88) 70%),
    rgba(6,3,14,0.55);
  backdrop-filter:blur(9px) saturate(1.05);
  -webkit-backdrop-filter:blur(9px) saturate(1.05);
  transition:opacity .55s ease, visibility .55s;
}

/* set by js/intro.js once a choice is made */
.intro.is-dismissed{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.intro-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.9em;
  max-width:min(680px, 92vw);
  animation:introRise .7s cubic-bezier(.2,.9,.3,1) both;
}

@keyframes introRise{
  from{ opacity:0; transform:translateY(18px) scale(0.97); }
  to  { opacity:1; transform:none; }
}

/* ---------- wordmark ---------- */
.intro-eyebrow{
  margin:0;
  font-size:clamp(9px,1.1vw,12px);
  letter-spacing:0.42em;
  text-indent:0.42em;          /* keeps the tracking from skewing it left */
  color:var(--sky);
  opacity:0.85;
}

.intro-title{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(30px, 6.4vw, 68px);
  letter-spacing:0.04em;
  line-height:1.15;
  background:linear-gradient(180deg,#fff 10%, var(--gold) 92%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 4px 22px rgba(255,180,60,0.35));
}

.intro-romaji{
  margin:0;
  font-size:clamp(10px,1.4vw,14px);
  letter-spacing:0.3em;
  text-indent:0.3em;
  opacity:0.7;
}

/* thin gold rule, same diagonal as the rest of the UI */
.intro-rule{
  width:min(320px,64vw);
  height:2px;
  margin:0.4em 0 0.2em;
  transform:skewX(var(--skew-angle));
  background:linear-gradient(90deg,
    rgba(255,216,115,0) 0%, var(--gold) 50%, rgba(255,216,115,0) 100%);
}

.intro-lead{
  margin:0;
  font-size:clamp(12px,1.5vw,16px);
  line-height:1.9;
  opacity:0.92;
}
.intro-lead b{ color:var(--gold); }

/* ---------- the two doors ---------- */
.intro-actions{
  display:flex;
  gap:clamp(12px,2vw,22px);
  margin-top:0.7em;
  flex-wrap:wrap;
  justify-content:center;
}

.intro-btn{
  position:relative;
  min-width:clamp(190px, 22vw, 250px);
  padding:2px;                 /* the gold frame; the fill is on ::before */
  border:none;
  border-radius:0;
  cursor:pointer;
  color:#fff;
  font-family:var(--font-body);
  background:linear-gradient(135deg, rgba(255,216,115,0.75), rgba(230,165,54,0.75));
  transform:skewX(var(--skew-angle));
  box-shadow:0 12px 30px rgba(0,0,0,0.5);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.intro-btn .btn-face{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.35em;
  padding:1.15em 1.4em;
  background:var(--panel-bg-strong);
  transform:skewX(calc(var(--skew-angle) * -1));
}

.intro-btn .btn-label{
  display:flex;
  align-items:center;
  gap:0.5em;
  font-size:clamp(14px,1.75vw,19px);
  font-weight:700;
  letter-spacing:0.03em;
  white-space:nowrap;
}

.intro-btn .btn-note{
  font-size:clamp(9.5px,1.05vw,11.5px);
  opacity:0.72;
  letter-spacing:0.02em;
}

.intro-btn svg{
  width:clamp(18px,2.2vw,24px);
  height:clamp(18px,2.2vw,24px);
  flex:none;
}

.intro-btn:hover,
.intro-btn:focus-visible{
  transform:skewX(var(--skew-angle)) translateY(-4px);
  box-shadow:0 18px 38px rgba(0,0,0,0.6);
  outline:none;
}

/* the recommended door wears the brand gradient */
.intro-btn.primary{
  background:linear-gradient(135deg, var(--pink), var(--gold) 55%, var(--sky));
}

.intro-btn.primary .btn-face{
  background:linear-gradient(135deg,
    rgba(255,111,160,0.22) 0%, rgba(79,208,234,0.22) 100%),
    var(--panel-bg-strong);
}

.intro-btn.primary .btn-label{ color:var(--gold); }

.intro-btn.primary::after{
  content:'';
  position:absolute;
  inset:-2px;
  pointer-events:none;
  box-shadow:0 0 22px rgba(255,216,115,0.45);
  animation:introGlow 2.4s ease-in-out infinite;
}

@keyframes introGlow{
  0%,100%{ opacity:0.35; }
  50%    { opacity:0.9; }
}

.intro-foot{
  margin:0.6em 0 0;
  font-size:clamp(9.5px,1.05vw,11.5px);
  opacity:0.6;
}

/* ---------- narrow windows ---------- */
@media (max-width:640px){
  .intro-actions{ flex-direction:column; width:100%; }
  .intro-btn{ width:100%; min-width:0; }
}

@media (prefers-reduced-motion:reduce){
  .intro-inner{ animation:none; }
  .intro-btn.primary::after{ animation:none; }
}