/* Royal Gold – Scroll Unroll Reveal */
.tpl-rg-wrapper {
  position: relative; min-height: 540px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', 'Georgia', serif;
  background: #0a1628; overflow: hidden;
}

/* ── Scroll Cover ────────────────────── */
.tpl-rg-scroll-cover {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #0d1b2a, #1b2838);
  cursor: pointer; transition: opacity .7s ease .6s, transform .7s ease .6s;
}
.tpl-rg-scroll-cover.unrolled {
  opacity: 0; pointer-events: none; transform: scaleY(0);
}

.tpl-rg-scroll-roll {
  width: 80%; height: 20px;
  background: linear-gradient(180deg, #d4af37, #b8962e, #d4af37);
  border-radius: 10px; position: relative;
  box-shadow: 0 4px 16px rgba(212,175,55,.3);
  transition: transform 1s cubic-bezier(.68,-.55,.27,1.55);
}
.tpl-rg-roll-bar {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 60%; height: 4px; background: rgba(0,0,0,.2); border-radius: 2px;
}
.tpl-rg-scroll-cover.unrolled .tpl-rg-roll-top { transform: translateY(-200px); }
.tpl-rg-scroll-cover.unrolled .tpl-rg-roll-bottom { transform: translateY(200px); }

.tpl-rg-scroll-face {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 20px;
}
.tpl-rg-royal-crest {
  font-size: 48px; color: #d4af37; margin-bottom: 12px;
  text-shadow: 0 0 20px rgba(212,175,55,.5);
  animation: rg-crest-glow 3s ease-in-out infinite;
}
@keyframes rg-crest-glow {
  0%, 100% { text-shadow: 0 0 20px rgba(212,175,55,.4); }
  50% { text-shadow: 0 0 40px rgba(212,175,55,.7), 0 0 80px rgba(212,175,55,.3); }
}
.tpl-rg-scroll-title {
  font-size: 16px; font-weight: 700; color: #d4af37;
  letter-spacing: 4px; text-transform: uppercase; margin-bottom: 12px;
}
.tpl-rg-scroll-hint {
  font-size: 12px; color: rgba(212,175,55,.5);
  font-family: 'Montserrat', sans-serif; font-weight: 600;
  animation: ce-pulse 2s ease-in-out infinite;
}

/* ── Card ────────────────────────────── */
.tpl-rg-card {
  position: relative; z-index: 1; width: 100%; max-width: 520px;
}
.tpl-rg-sparkles {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.tpl-rg-sparkle {
  position: absolute; top: -20px; font-size: 14px; color: #d4af37;
  animation: rg-sparkle-fall linear forwards; opacity: 0;
}
@keyframes rg-sparkle-fall {
  0% { opacity: 0; transform: translateY(-20px) rotate(0) scale(.5); }
  20% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: translateY(500px) rotate(720deg) scale(.3); }
}

.tpl-rg-inner {
  padding: 36px 28px; text-align: center;
}

.tpl-rg-top-border, .tpl-rg-bottom-border {
  height: 3px; margin: 16px 0;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
}

.tpl-rg-emblem {
  font-size: 36px; color: #d4af37; margin-bottom: 8px;
  text-shadow: 0 0 16px rgba(212,175,55,.4);
}
.tpl-rg-header {
  font-size: 11px; font-weight: 700; letter-spacing: 5px;
  text-transform: uppercase; color: #8a7a50; margin-bottom: 18px;
}
.tpl-rg-name {
  font-family: 'Great Vibes', cursive; font-size: 38px;
  font-weight: 400; color: #d4af37; margin: 0; line-height: 1.2;
  text-shadow: 0 0 10px rgba(212,175,55,.25);
}
.tpl-rg-and {
  font-size: 18px; color: #8a7a50; margin: 6px 0;
}
.tpl-rg-parents {
  font-size: 12px; color: #8a7a50; margin: 14px 0; line-height: 1.7;
}
.tpl-rg-parents p { margin: 0; }
.tpl-rg-divider {
  width: 100px; height: 2px; margin: 16px auto;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
}
.tpl-rg-details { margin-top: 12px; }
.tpl-rg-date, .tpl-rg-time, .tpl-rg-venue {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-bottom: 5px;
}
.tpl-rg-date { font-size: 15px; font-weight: 700; color: #d4af37; letter-spacing: 1.5px; }
.tpl-rg-date i, .tpl-rg-time i, .tpl-rg-venue i { color: #c9a351; font-size: 13px; }
.tpl-rg-time { font-size: 13px; color: #8a7a50; }
.tpl-rg-venue { font-size: 14px; font-weight: 700; color: #d4af37; }
.tpl-rg-address { font-size: 12px; color: #8a7a50; text-align: center; }

/* ── Animate ─────────────────────────── */
.rg-anim { opacity: 0; transform: translateY(18px); }
.tpl-rg-scroll-cover.unrolled ~ .tpl-rg-card .rg-anim {
  animation: rg-reveal .7s ease forwards; animation-delay: var(--d, 0s);
}
@keyframes rg-reveal { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 480px) {
  .tpl-rg-wrapper { min-height: 460px; }
  .tpl-rg-inner { padding: 24px 16px; }
  .tpl-rg-name { font-size: 28px; }
  .tpl-rg-royal-crest { font-size: 36px; }
}
