/* =====================================================================
   Pink Reign · Official Link Hub — stylesheet
   ---------------------------------------------------------------------
   1. Theme colours & tokens  (edit colours here)
   2. Base page
   3. Background sparkle & glow
   4. Hero (logo card, title, intro)
   5. Sections & link cards
   6. Footer
   7. Responsive & accessibility
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. THEME COLOURS & TOKENS
   --------------------------------------------------------------------- */
:root {
  --pr-pink: #ff1f8e;              /* hot pink accent */
  --pr-pink-soft: #ff7dbd;         /* light pink */
  --pr-magenta: #d4147a;           /* deep magenta */
  --pr-silver: #e4e2ea;            /* chrome / silver text */
  --pr-silver-dim: #b9b3c4;        /* muted silver */
  --pr-bg: #0d0409;                /* near-black plum */
  --pr-bg-2: #1c0816;
  --pr-surface: rgba(38,12,30,.72);
  --pr-surface-hover: rgba(58,16,44,.86);
  --pr-border: rgba(255,170,215,.16);
  --pr-text: #fff5fa;
  --pr-radius: 22px;
  --pr-shadow: 0 18px 50px rgba(0,0,0,.5);
  --pr-display: "Playfair Display", "Didot", "Bodoni 72", Georgia, serif;
  --pr-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}


/* ---------------------------------------------------------------------
   2. BASE PAGE
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--pr-bg); }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(120% 60% at 50% 0%, #3a0b2b 0%, rgba(58,11,43,0) 60%),
    linear-gradient(180deg, var(--pr-bg-2) 0%, var(--pr-bg) 55%, #090307 100%);
  background-attachment: fixed;
  color: var(--pr-text);
  font-family: var(--pr-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

.pr-page { position: relative; overflow: hidden; min-height: 100vh; }
.pr-linkhub { position: relative; isolation: isolate; }


/* ---------------------------------------------------------------------
   3. BACKGROUND SPARKLE & GLOW  (lightweight, CSS only)
   --------------------------------------------------------------------- */
.pr-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.pr-glow--top { width: 520px; height: 420px; top: -200px; left: 50%; transform: translateX(-50%); background: rgba(255,31,142,.30); }
.pr-glow--bottom { width: 420px; height: 420px; bottom: -220px; right: -160px; background: rgba(212,20,122,.16); }

.pr-sparkles, .pr-sparkles::before, .pr-sparkles::after {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.pr-sparkles {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 8%,  rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 82% 12%,     rgba(255,200,230,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 68% 30%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 22% 42%,     rgba(255,180,220,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 55%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1px 1px at 6% 68%,      rgba(255,200,230,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 48% 80%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 76% 92%,     rgba(255,180,220,.8), transparent 60%);
  background-size: 100% 1100px;
  opacity: .8;
}
.pr-sparkles::before {
  content: "";
  background-image:
    radial-gradient(2px 2px at 30% 18%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 58% 52%, #ffd1e8, transparent 60%),
    radial-gradient(2px 2px at 14% 86%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 94% 34%, #ffd1e8, transparent 60%);
  background-size: 100% 1100px;
  animation: pr-twinkle 3.6s ease-in-out infinite;
}
.pr-sparkles::after {
  content: "";
  background-image:
    radial-gradient(2px 2px at 72% 6%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 64%, #ffc2e0, transparent 60%),
    radial-gradient(2px 2px at 86% 76%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 4% 26%, #ffc2e0, transparent 60%);
  background-size: 100% 1100px;
  animation: pr-twinkle 4.4s ease-in-out 1.6s infinite;
}
@keyframes pr-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }


/* ---------------------------------------------------------------------
   4. HERO
   --------------------------------------------------------------------- */
.pr-hero {
  display: flex; flex-direction: column; align-items: center;
  width: min(100%, 640px); margin: 0 auto;
  padding: 28px 18px 10px; text-align: center;
}

/* Framed logo card (video has a white background, so it lives on a light card) */
.pr-logo-card {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 2 / 1;
  margin-bottom: 26px;
  padding: 3px;                                  /* gradient border thickness */
  border-radius: 26px;
  background: linear-gradient(135deg, var(--pr-pink) 0%, #ffd6ea 30%, #c9c6d2 52%, #ffffff 64%, var(--pr-pink) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 28px rgba(255,31,142,.45),
    0 0 70px rgba(255,31,142,.25),
    0 22px 50px rgba(0,0,0,.55);
  animation: pr-card-glow 4s ease-in-out infinite;
}
.pr-logo-video {
  width: 100%; height: 100%;
  padding: 4% 6%;                                /* breathing room around the logo */
  object-fit: contain;
  border-radius: 23px;
  background: #fdfdfd;                           /* matches the video's white */
}
.pr-logo-video img { width: 100%; height: 100%; object-fit: contain; }
@keyframes pr-card-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 24px rgba(255,31,142,.40), 0 0 60px rgba(255,31,142,.20), 0 22px 50px rgba(0,0,0,.55); }
  50%      { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 36px rgba(255,31,142,.60), 0 0 90px rgba(255,31,142,.32), 0 22px 50px rgba(0,0,0,.55); }
}

/* Pause / play button (bottom-right of the logo card) */
.pr-video-toggle {
  position: absolute; right: 12px; bottom: 12px;
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid rgba(255,31,142,.35); border-radius: 50%;
  background: rgba(255,255,255,.82); color: var(--pr-magenta);
  cursor: pointer; backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(120,0,60,.18);
  opacity: .75; transition: opacity .2s ease, transform .2s ease;
}
.pr-video-toggle:hover { opacity: 1; transform: scale(1.06); }
.pr-video-toggle:focus-visible { opacity: 1; outline: 3px solid var(--pr-pink); outline-offset: 3px; }
.pr-video-toggle svg { width: 15px; height: 15px; fill: currentColor; }
.pr-video-toggle .pr-icon-play { display: none; }
.pr-video-toggle[data-state="paused"] .pr-icon-play { display: block; }
.pr-video-toggle[data-state="paused"] .pr-icon-pause { display: none; }

.pr-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 0 0 8px; color: var(--pr-pink-soft);
  font-size: .72rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase;
}
.pr-kicker::before, .pr-kicker::after {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pr-pink-soft));
}
.pr-kicker::after { transform: scaleX(-1); }

.pr-title {
  margin: 0; font-family: var(--pr-display);
  font-size: clamp(2.6rem, 12vw, 4.2rem); font-weight: 800;
  line-height: 1; letter-spacing: .01em;
}
.pr-title__pink {
  background: linear-gradient(180deg, #ffb3d9 0%, var(--pr-pink) 45%, var(--pr-magenta) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255,31,142,.45));
}
.pr-title__silver {
  font-style: italic; font-weight: 700;
  background: linear-gradient(180deg, #ffffff 0%, #d9d6e0 38%, #8f8a99 55%, #f2f0f6 80%, #b9b4c4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(255,255,255,.12));
}

.pr-description {
  max-width: 480px; margin: 14px auto 0;
  color: var(--pr-silver-dim); font-size: clamp(.98rem, 3.6vw, 1.08rem); line-height: 1.6;
}
.pr-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 6px 13px;
  border: 1px solid rgba(255,31,142,.45); border-radius: 999px;
  background: rgba(255,31,142,.08); color: #ffd6ea;
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.pr-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pr-pink); box-shadow: 0 0 0 4px rgba(255,31,142,.18), 0 0 10px var(--pr-pink);
}


/* ---------------------------------------------------------------------
   5. SECTIONS & LINK CARDS
   Variants:  .pr-card--highlight    (big glowing featured card)
              .pr-card--placeholder  (dashed border = link still needed)
   --------------------------------------------------------------------- */
.pr-shell { width: min(100%, 640px); margin: 0 auto; padding: 26px 18px 34px; }
.pr-section { margin-top: 30px; }
.pr-section:first-child { margin-top: 0; }
.pr-section__title {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 12px; color: var(--pr-silver);
  font-family: var(--pr-display); font-size: 1.22rem; font-weight: 700; font-style: italic; letter-spacing: .01em;
}
.pr-section__title::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255,31,142,.55), rgba(255,31,142,0));
}
.pr-links { display: grid; gap: 12px; }

.pr-card {
  position: relative; display: flex; align-items: center;
  min-height: 78px; padding: 12px 52px 12px 12px;
  border: 1px solid var(--pr-border); border-radius: var(--pr-radius);
  background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,0) 60%), var(--pr-surface);
  color: var(--pr-text);
  box-shadow: 0 10px 30px rgba(0,0,0,.32);
  backdrop-filter: blur(14px);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.pr-card:hover, .pr-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,31,142,.6);
  background-color: var(--pr-surface-hover);
  box-shadow: var(--pr-shadow), 0 0 26px rgba(255,31,142,.22);
  outline: none;
}
.pr-card:focus-visible { box-shadow: 0 0 0 3px var(--pr-bg), 0 0 0 5px var(--pr-pink), var(--pr-shadow); }

/* Card parts */
.pr-card__icon {
  display: grid; place-items: center; flex: 0 0 52px;
  width: 52px; height: 52px; margin-right: 14px; border-radius: 16px;
  background: linear-gradient(140deg, rgba(255,31,142,.30), rgba(212,20,122,.12));
  border: 1px solid rgba(255,125,189,.25);
  color: var(--pr-pink-soft);
}
.pr-card__icon svg, .pr-card__arrow svg { width: 24px; height: 24px; fill: currentColor; }
.pr-card__body { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.pr-card__title { font-size: 1rem; font-weight: 600; letter-spacing: .01em; }
.pr-card__description { color: var(--pr-silver-dim); font-size: .84rem; }
.pr-card__badge {
  position: absolute; top: 10px; right: 12px;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid rgba(255,125,189,.3); background: rgba(13,4,9,.55);
  color: var(--pr-pink-soft);
  font-size: .58rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.pr-card__arrow {
  position: absolute; right: 16px; bottom: 16px; color: var(--pr-silver-dim);
  transition: transform .18s ease, color .18s ease;
}
.pr-card__arrow svg { width: 20px; height: 20px; }
.pr-card:hover .pr-card__arrow { transform: translate(2px,-2px); color: var(--pr-pink); }

/* Placeholder cards: dashed border so it's obvious a link is still needed */
.pr-card--placeholder { border-style: dashed; border-color: rgba(255,170,215,.26); }

/* Highlight card (featured) */
.pr-card--highlight {
  min-height: 108px; padding: 40px 52px 18px 16px;
  border: 1.5px solid rgba(255,31,142,.85);
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(255,31,142,.30) 0%, rgba(40,10,30,.92) 58%, rgba(200,195,215,.10) 100%);
  animation: pr-glow 3.2s ease-in-out infinite;
}
.pr-card--highlight:hover, .pr-card--highlight:focus-visible { border-color: var(--pr-pink); background-color: transparent; }
.pr-card--highlight .pr-card__icon {
  background: linear-gradient(140deg, #ff4fa6, var(--pr-pink) 50%, var(--pr-magenta));
  border-color: rgba(255,255,255,.25); color: #fff;
  box-shadow: 0 0 22px rgba(255,31,142,.55);
}
.pr-card--highlight .pr-card__title { font-size: 1.18rem; font-weight: 700; }
.pr-card--highlight .pr-card__description { color: #f1dbe7; }
.pr-card--highlight .pr-card__badge {
  top: 13px; left: 16px; right: auto; border: 0;
  background: linear-gradient(135deg, #ff5fae, var(--pr-pink));
  color: #fff; font-size: .62rem; font-weight: 700;
  box-shadow: 0 0 14px rgba(255,31,142,.55);
}
.pr-card--highlight .pr-card__badge::before { content: "♛ "; }
.pr-card--highlight .pr-card__arrow { color: var(--pr-pink-soft); }

@keyframes pr-glow {
  0%, 100% { box-shadow: 0 16px 45px rgba(0,0,0,.45), 0 0 18px rgba(255,31,142,.22); }
  50%      { box-shadow: 0 16px 45px rgba(0,0,0,.45), 0 0 40px rgba(255,31,142,.48); }
}


/* ---------------------------------------------------------------------
   6. FOOTER
   --------------------------------------------------------------------- */
.pr-footer {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid var(--pr-border);
  text-align: center; color: var(--pr-silver-dim);
}
.pr-footer__crown { width: 22px; height: 22px; fill: var(--pr-pink); filter: drop-shadow(0 0 8px rgba(255,31,142,.6)); }
.pr-footer__brand { margin: 8px 0 0; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }


/* ---------------------------------------------------------------------
   7. RESPONSIVE & ACCESSIBILITY
   --------------------------------------------------------------------- */
@media (min-width: 720px) {
  .pr-hero { padding-top: 48px; }
}
@media (max-width: 400px) {
  .pr-shell, .pr-hero { padding-inline: 14px; }
  .pr-card__icon { flex-basis: 46px; width: 46px; height: 46px; margin-right: 12px; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pr-sparkles::before, .pr-sparkles::after, .pr-logo-card, .pr-card--highlight { animation: none; }
  .pr-card, .pr-card__arrow, .pr-video-toggle { transition: none; }
  .pr-card:hover, .pr-card:focus-visible { transform: none; }
}


/* =====================================================================
   8. LUXE UPGRADE — typography, polish & animation  (Oct 2026)
   ===================================================================== */
:root {
  --pr-display: "Cinzel Decorative", "Cinzel", "Didot", Georgia, serif;
  --pr-heading: "Cinzel", "Didot", Georgia, serif;
  --pr-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pr-ease: cubic-bezier(.2,.8,.2,1);
}
body {
  background:
    radial-gradient(90% 45% at 50% 0%, rgba(255,31,142,.22) 0%, transparent 70%),
    radial-gradient(70% 40% at 0% 60%, rgba(150,20,100,.18) 0%, transparent 70%),
    radial-gradient(70% 40% at 100% 85%, rgba(200,190,220,.07) 0%, transparent 70%),
    linear-gradient(180deg, #22091b 0%, var(--pr-bg) 50%, #070205 100%);
  letter-spacing: .005em;
}
/* fine diamond texture */
.pr-page::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 1px, transparent 1px 14px),
                    repeating-linear-gradient(-45deg, rgba(255,255,255,.018) 0 1px, transparent 1px 14px);
}

/* --- Hero typography --- */
.pr-hero { position: relative; padding-top: 34px; }
.pr-kicker { font-family: var(--pr-heading); font-size: .7rem; letter-spacing: .42em; margin-bottom: 12px; }
.pr-title {
  font-family: var(--pr-display); font-weight: 900;
  font-size: clamp(2.5rem, 12.5vw, 4.4rem); letter-spacing: .02em; line-height: 1.05;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .28em;
}
.pr-title__pink, .pr-title__silver {
  font-style: normal; font-weight: 900;
  background-size: 250% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pr-shine 5.5s var(--pr-ease) infinite;
}
.pr-title__pink {
  background-image: linear-gradient(110deg, #ff5fae 0%, var(--pr-pink) 35%, #fff 45%, #ffc2e0 48%, var(--pr-pink) 58%, var(--pr-magenta) 100%);
}
.pr-title__silver {
  background-image: linear-gradient(110deg, #cfcbd8 0%, #8f8a99 30%, #fff 44%, #fff 47%, #d9d6e0 56%, #a7a2b2 100%);
  animation-delay: .35s;
}
@keyframes pr-shine {
  0%, 55% { background-position: 100% 0; }
  85%, 100% { background-position: 0% 0; }
}
.pr-description { font-weight: 400; font-size: .98rem; letter-spacing: .02em; color: #d6cfdd; }
.pr-badge { font-family: var(--pr-sans); letter-spacing: .22em; }

/* --- Logo card: rotating conic ring --- */
.pr-logo-card {
  overflow: hidden; isolation: isolate; background: #2a0b20; padding: 3px;
}
.pr-ring {
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 150%; aspect-ratio: 1; margin: -75% 0 0 -75%;
  background: conic-gradient(from 0deg, var(--pr-pink), #ffd6ea, #fff, #b9b4c4, var(--pr-magenta), #ff9fd0, #fff, var(--pr-pink));
  animation: pr-spin 6s linear infinite;
  will-change: transform;
}
@keyframes pr-spin { to { transform: rotate(1turn); } }
.pr-logo-video { position: relative; z-index: 1; }
.pr-video-toggle { z-index: 2; }

/* --- Hero sparkles (4-point stars) --- */
.pr-stars { position: absolute; inset: 0 0 auto; height: 100%; pointer-events: none; z-index: 0; }
.pr-hero > *:not(.pr-stars) { position: relative; z-index: 1; }
.pr-hero > .pr-logo-card { position: relative; }
.pr-star {
  position: absolute; width: var(--s); height: var(--s); opacity: 0;
  animation: pr-twinkle var(--t) ease-in-out infinite;
}
.pr-star svg { width: 100%; height: 100%; fill: #fff; filter: drop-shadow(0 0 4px rgba(255,255,255,.9)); }
.pr-star--pink svg { fill: #ffb3d9; filter: drop-shadow(0 0 5px rgba(255,31,142,.9)); }
@keyframes pr-twinkle {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* --- Floating pink particles / hearts --- */
.pr-floaters { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.pr-float {
  position: absolute; bottom: -20px; width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,140,200,.9), rgba(255,31,142,0) 70%);
  animation: pr-rise var(--t) linear infinite; will-change: transform, opacity;
}
.pr-float--heart { background: none; width: auto; height: auto; font-size: calc(var(--s) + 6px); line-height: 1; color: rgba(255,90,170,.55); }
@keyframes pr-rise {
  0% { transform: translate3d(0,0,0); opacity: 0; }
  10% { opacity: .8; }
  90% { opacity: .5; }
  100% { transform: translate3d(var(--x), -110vh, 0); opacity: 0; }
}

/* --- Entrance / scroll reveal --- */
.js .pr-reveal { opacity: 0; transform: translateY(18px); }
.js .pr-logo-card.pr-reveal { transform: scale(.88); }
.js .pr-reveal.pr-in { animation: pr-up .8s var(--pr-ease) var(--d, 0s) both; }
.js .pr-logo-card.pr-reveal.pr-in { animation: pr-pop 1s var(--pr-ease) var(--d, 0s) both, pr-card-glow 4s ease-in-out 1s infinite; }
.js .pr-card--highlight.pr-reveal.pr-in { animation: pr-up .8s var(--pr-ease) var(--d, 0s) both, pr-glow 3.2s ease-in-out 1.6s infinite; }
@keyframes pr-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pr-pop { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }

/* --- Section titles --- */
.pr-section { margin-top: 34px; }
.pr-section__title {
  font-family: var(--pr-heading); font-style: normal; font-weight: 600;
  font-size: .82rem; letter-spacing: .3em; text-transform: uppercase; color: #f3e6ee; margin-bottom: 14px;
}
.pr-section__title::before { content: "♛"; color: var(--pr-pink); font-size: .95rem; letter-spacing: 0; text-shadow: 0 0 10px rgba(255,31,142,.7); }
.pr-section__title::after { background: linear-gradient(90deg, rgba(255,31,142,.7), rgba(228,226,234,.25) 60%, transparent); }

/* --- Cards: polish, lift, shine sweep --- */
.pr-card {
  overflow: hidden; border-radius: 20px;
  border-color: rgba(255,190,225,.18);
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,0) 55%), var(--pr-surface);
  transition: transform .3s var(--pr-ease), border-color .3s ease, box-shadow .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.pr-card::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-100%) skewX(-18deg); opacity: 0;
}
.pr-card:hover::after, .pr-card:focus-visible::after, .pr-card:active::after { animation: pr-sweep .9s var(--pr-ease); }
@keyframes pr-sweep { 0% { opacity: 1; transform: translateX(0) skewX(-18deg); } 100% { opacity: 1; transform: translateX(420%) skewX(-18deg); } }
.pr-card:hover, .pr-card:focus-visible { transform: translateY(-4px) scale(1.01); box-shadow: var(--pr-shadow), 0 0 32px rgba(255,31,142,.35); }
.pr-card:active { transform: translateY(-1px) scale(.99); }
.pr-card__title { font-weight: 600; letter-spacing: .02em; }
.pr-card__description { font-size: .82rem; letter-spacing: .01em; }
.pr-card--highlight .pr-card__title { font-family: var(--pr-heading); font-weight: 700; font-size: 1.12rem; letter-spacing: .04em; }
.pr-card--highlight::after { animation: pr-sweep 1.2s var(--pr-ease) 2.4s; }

/* --- Footer --- */
.pr-footer { border-top: 0; position: relative; }
.pr-footer::before { content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,31,142,.6), rgba(228,226,234,.5), rgba(255,31,142,.6), transparent); }
.pr-footer__brand { font-family: var(--pr-heading); font-size: .62rem; letter-spacing: .28em; }

/* --- Reduced motion: switch everything off --- */
@media (prefers-reduced-motion: reduce) {
  .pr-ring, .pr-star, .pr-float, .pr-title__pink, .pr-title__silver, .pr-card::after,
  .js .pr-reveal.pr-in, .js .pr-logo-card.pr-reveal.pr-in, .js .pr-card--highlight.pr-reveal.pr-in { animation: none !important; }
  .pr-stars, .pr-floaters { display: none; }
  .js .pr-reveal { opacity: 1; transform: none; }
  .pr-title__pink, .pr-title__silver { background-position: 50% 0; }
}


/* =====================================================================
   9. CINEMATIC INTRO, BOLD RING, TAP SPARKLES
   ===================================================================== */
.pr-intro { display: none; }
.pr-intro-on .pr-intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; cursor: pointer;
  background: radial-gradient(60% 45% at 50% 50%, #3d0d2f 0%, #14050f 70%, #0a0207 100%);
  clip-path: circle(150% at 50% 50%);
}
.pr-intro-on body { overflow: hidden; }
.pr-intro--out { animation: pr-iris .7s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes pr-iris { from { clip-path: circle(150% at 50% 50%); } to { clip-path: circle(0% at 50% 50%); opacity: .6; } }
.pr-intro__burst { position: absolute; inset: 0; width: 100%; height: 100%; }
.pr-intro__flash {
  position: absolute; left: 50%; top: 50%; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,60,160,.7) 14%, rgba(255,31,142,.15) 38%, transparent 60%);
  opacity: 0; transform: scale(.1);
  animation: pr-flash .9s ease-out .45s forwards;
}
@keyframes pr-flash { 0% { opacity: 0; transform: scale(.1); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }
.pr-intro__logo {
  position: relative; width: min(78vw, 420px); overflow: hidden;
  opacity: 0; transform: translateY(-40px) scale(1.6);
  animation: pr-drop .6s cubic-bezier(.2,1.4,.4,1) .05s forwards;
  filter: drop-shadow(0 0 24px rgba(255,31,142,.7));
  -webkit-mask: url(assets/images/logo-intro.webp) center / contain no-repeat; mask: url(assets/images/logo-intro.webp) center / contain no-repeat;
}
.pr-intro__logo img { width: 100%; height: auto; }
@keyframes pr-drop { to { opacity: 1; transform: none; } }
.pr-intro__sweep {
  position: absolute; inset: 0; transform: translateX(-120%) skewX(-20deg);
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.85) 50%, transparent 70%);
  animation: pr-isweep .7s ease-in-out .75s forwards;
}
@keyframes pr-isweep { to { transform: translateX(120%) skewX(-20deg); } }

/* Bolder rotating ring */
.pr-logo-card { padding: 6px; border-radius: 28px; }
.pr-logo-video { border-radius: 22px; }
.js .pr-logo-card.pr-reveal.pr-in { animation: pr-pop 1s var(--pr-ease) var(--d, 0s) both, pr-ring-glow 3s ease-in-out 1s infinite; }
@keyframes pr-ring-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 0 30px rgba(255,31,142,.6), 0 0 80px rgba(255,31,142,.3), 0 22px 50px rgba(0,0,0,.55); }
  50% { box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 0 46px rgba(255,31,142,.85), 0 0 120px rgba(255,31,142,.45), 0 22px 50px rgba(0,0,0,.55); }
}
.pr-ring { animation-duration: 4.5s; }

/* Tap sparkles */
.pr-tap { position: fixed; z-index: 90; width: 12px; height: 12px; margin: -6px 0 0 -6px; pointer-events: none; animation: pr-tap .65s ease-out forwards; }
.pr-tap svg { width: 100%; height: 100%; fill: #ffc2e0; filter: drop-shadow(0 0 4px rgba(255,31,142,.9)); }
.pr-tap:nth-child(odd) svg { fill: #fff; }
@keyframes pr-tap { 0% { transform: translate(0,0) scale(.3) rotate(0); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)) scale(1) rotate(90deg); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .pr-intro, .pr-tap { display: none !important; }
}


/* =====================================================================
   10. "MAKE IT SO COOL" — rays, chrome sweeps, aurora, 3D tilt
   ===================================================================== */
.pr-intro__rays {
  position: absolute; left: 50%; top: 50%; width: 140vmax; height: 140vmax; margin: -70vmax 0 0 -70vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255,140,200,.16) 0deg 4deg, transparent 4deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0%, transparent 55%); mask: radial-gradient(circle, #000 0%, transparent 55%);
  opacity: 0; transform: scale(.3) rotate(0deg);
  animation: pr-rays 1.4s ease-out .45s forwards;
}
@keyframes pr-rays { 0% { opacity: 0; transform: scale(.3) rotate(0); } 30% { opacity: 1; } 100% { opacity: .35; transform: scale(1) rotate(25deg); } }
.pr-intro__sweep--2 {
  background: linear-gradient(100deg, transparent 38%, rgba(255,200,230,.7) 47%, #fff 50%, rgba(200,200,220,.7) 53%, transparent 62%);
  animation-delay: 1.05s; animation-duration: .55s;
}

/* Aurora / smoke behind the hero */
.pr-aurora { position: absolute; left: -20%; right: -20%; top: -40px; height: 520px; z-index: 0; pointer-events: none; filter: blur(48px); opacity: .75; }
.pr-aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.pr-aurora i:nth-child(1) { width: 60%; height: 55%; left: 5%; top: 10%; background: radial-gradient(circle, rgba(255,31,142,.55), transparent 70%); animation: pr-aur1 14s ease-in-out infinite alternate; }
.pr-aurora i:nth-child(2) { width: 55%; height: 50%; right: 5%; top: 25%; background: radial-gradient(circle, rgba(190,60,255,.32), transparent 70%); animation: pr-aur2 17s ease-in-out infinite alternate; }
.pr-aurora i:nth-child(3) { width: 50%; height: 40%; left: 28%; top: 50%; background: radial-gradient(circle, rgba(255,190,225,.3), transparent 70%); animation: pr-aur3 12s ease-in-out infinite alternate; }
@keyframes pr-aur1 { to { transform: translate3d(18%, 12%, 0) scale(1.25); } }
@keyframes pr-aur2 { to { transform: translate3d(-22%, -8%, 0) scale(.85); } }
@keyframes pr-aur3 { to { transform: translate3d(10%, -20%, 0) scale(1.3); } }

/* 3D tilt + chrome glare on the logo card (uses the individual `rotate` property so it stacks on the entrance transform) */
.pr-hero { perspective: 900px; }
.pr-logo-card { rotate: 1 0 0 var(--rx, 0deg); transition: rotate .25s ease-out; transform-style: preserve-3d; }
.pr-logo-card { translate: 0 0; }
.pr-logo-card::after {
  content: ""; position: absolute; inset: 6px; z-index: 2; border-radius: 22px; pointer-events: none;
  background: radial-gradient(60% 80% at var(--gx, 50%) 0%, rgba(255,255,255,.35), transparent 60%);
  mix-blend-mode: soft-light;
}
.pr-logo-card .pr-logo-video { rotate: 0 1 0 var(--ry, 0deg); transition: rotate .25s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .pr-aurora i, .pr-intro__rays { animation: none !important; }
  .pr-logo-card, .pr-logo-card .pr-logo-video { rotate: none !important; }
}

/* fixes */
.pr-hero > .pr-aurora { position: absolute; z-index: 0; }
.pr-intro__logo { -webkit-mask: none; mask: none; overflow: visible; }
.pr-intro__sweep { -webkit-mask: url(assets/images/logo-intro.webp) center / contain no-repeat; mask: url(assets/images/logo-intro.webp) center / contain no-repeat; }
.pr-intro__sweep { -webkit-mask: none; mask: none; }
.pr-intro__shine { position: absolute; inset: 0; overflow: hidden; -webkit-mask: url(assets/images/logo-intro.webp) center / contain no-repeat; mask: url(assets/images/logo-intro.webp) center / contain no-repeat; }