/* ==========================================================================
   Retro RollRoll — Loading Page
   一張逐層被印出的昭和版畫：墨線 → 朱紅套色 → 植物輪廓 → 金箔 → Logo
   ========================================================================== */

.rr-loading {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--rr-ivory, #F1E8D8);
  background-image: url('../img/bg.jpg');
  background-size: 480px;
  transition: opacity .85s ease;
}

body.is-loaded .rr-loading {
  opacity: 0;
  pointer-events: none;
}

.rr-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
}

.rr-load-shape {
  position: relative;
  width: 148px;
  height: 148px;
  margin-bottom: 30px;
}

.rr-load-gold {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, var(--rr-gold-pale, #E7D7A4), rgba(167,127,54,.14) 58%, transparent 74%);
  opacity: 0;
  transform: scale(.7);
}

.rr-load-ink {
  position: absolute;
  left: 8px; right: 8px; top: 50%;
  height: 3px;
  background: var(--rr-ink, #201D1A);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}

.rr-load-vermilion {
  position: absolute;
  left: 46%; top: 30%;
  width: 34px; height: 34px;
  background: var(--rr-vermilion, #A63A2B);
  opacity: 0;
  transform: translate(-4px, -4px);
}

.rr-load-plant {
  position: absolute;
  left: 32%; top: 42%;
  width: 46px; height: 26px;
  border-radius: 0 100% 0 100%;
  background: var(--rr-moss, #52604B);
  opacity: 0;
  transform: translateY(6px) rotate(-8deg);
}

.rr-load-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(6px);
}

.rr-load-brand {
  font-family: var(--heading-en, serif);
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--rr-ink, #201D1A);
  margin: 0 0 4px;
  opacity: 0;
}

.rr-load-tagline {
  font-family: var(--mono, monospace);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--rr-gold, #A77F36);
  margin: 0 0 14px;
  opacity: 0;
}

.rr-load-en {
  font-family: var(--heading-en, serif);
  font-style: italic;
  font-size: 15px;
  color: var(--rr-ink-soft, #5B534A);
  margin: 0 0 6px;
  opacity: 0;
}

.rr-load-zh {
  font-family: var(--heading-zh, serif);
  font-size: 13px;
  color: var(--rr-ink-faint, #8B7D70);
  margin: 0;
  opacity: 0;
}

/* ---- full layered play (first visit in session) ---- */
body.rr-play-full .rr-load-ink { animation: rrInk .5s ease forwards .05s; }
body.rr-play-full .rr-load-vermilion { animation: rrBlock .5s ease forwards .35s; }
body.rr-play-full .rr-load-plant { animation: rrFade .5s ease forwards .6s; }
body.rr-play-full .rr-load-gold { animation: rrGold .55s ease forwards .85s; }
body.rr-play-full .rr-load-logo,
body.rr-play-full .rr-load-brand,
body.rr-play-full .rr-load-tagline,
body.rr-play-full .rr-load-en,
body.rr-play-full .rr-load-zh { animation: rrRise .6s ease forwards 1.15s; }

/* ---- quick play (subsequent pages same session) ---- */
body.rr-play-quick .rr-load-gold,
body.rr-play-quick .rr-load-logo,
body.rr-play-quick .rr-load-brand,
body.rr-play-quick .rr-load-tagline { animation: rrRise .3s ease forwards .05s; }
body.rr-play-quick .rr-load-ink,
body.rr-play-quick .rr-load-vermilion,
body.rr-play-quick .rr-load-plant,
body.rr-play-quick .rr-load-en,
body.rr-play-quick .rr-load-zh { display: none; }

/* ---- reduced motion: logo only, instant ---- */
body.rr-play-reduced .rr-load-ink,
body.rr-play-reduced .rr-load-vermilion,
body.rr-play-reduced .rr-load-plant,
body.rr-play-reduced .rr-load-en,
body.rr-play-reduced .rr-load-zh,
body.rr-play-reduced .rr-load-tagline { display: none; }
body.rr-play-reduced .rr-load-gold,
body.rr-play-reduced .rr-load-logo,
body.rr-play-reduced .rr-load-brand { opacity: 1; transform: none; }

@keyframes rrInk { from { opacity: 0; transform: scaleX(0);} to { opacity: 1; transform: scaleX(1);} }
@keyframes rrBlock { from { opacity: 0; transform: translate(-4px,-4px);} to { opacity: .92; transform: translate(0,0);} }
@keyframes rrFade { from { opacity: 0; transform: translateY(6px) rotate(-8deg);} to { opacity: .85; transform: translateY(0) rotate(-4deg);} }
@keyframes rrGold { from { opacity: 0; transform: scale(.7);} to { opacity: 1; transform: scale(1);} }
@keyframes rrRise { from { opacity: 0; transform: translateY(8px);} to { opacity: 1; transform: translateY(0);} }

body.is-loading { overflow: hidden; height: 100vh; }