/* =========================================================
   PRINCESS DANA — danaownsu.com
   Color palette: soft pink, hot pink, white, deep plum-black
   Aesthetic: butterfly princess, bratty-sweet findom
   ========================================================= */

:root {
  --bg: #0d0509;
  --bg-soft: #1a0a14;
  --bg-card: #1f0c18;
  --pink-soft: #ffd1e3;
  --pink: #ff8fc1;
  --pink-hot: #ff3d8b;
  --pink-glow: #ff66a8;
  --lilac: #d9b3ff;
  --white: #fff5fa;
  --gold: #ffd9a8;
  --text: #ffe4ef;
  --text-dim: #d4a5ba;
  --shadow-pink: 0 0 24px rgba(255, 102, 168, 0.45);
  --shadow-soft: 0 8px 32px rgba(255, 61, 139, 0.18);
  --radius: 18px;
  --radius-lg: 28px;
  --serif: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --script: "Dancing Script", "Brush Script MT", cursive;
  --sans: "Poppins", "Inter", -apple-system, system-ui, sans-serif;
  --nav-h: 78px;
  --safe-top: env(safe-area-inset-top, 0px);
}

@media (max-width: 820px) {
  :root { --nav-h: 72px; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse at top left, rgba(255, 143, 193, 0.12), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(217, 179, 255, 0.08), transparent 50%),
    linear-gradient(180deg, #0d0509 0%, #1a0a14 100%);
  background-attachment: fixed;
}

/* ---------- Floating butterflies background ---------- */
.butterfly-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.butterfly-field span {
  position: absolute;
  font-size: 1.5rem;
  opacity: 0.35;
  animation: flutter 18s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255, 102, 168, 0.6));
}

.butterfly-field span:nth-child(1) { top: 10%; left: 8%;  animation-delay: 0s;  font-size: 1.8rem; }
.butterfly-field span:nth-child(2) { top: 25%; left: 80%; animation-delay: 3s;  font-size: 1.4rem; }
.butterfly-field span:nth-child(3) { top: 60%; left: 15%; animation-delay: 6s;  font-size: 2rem;   }
.butterfly-field span:nth-child(4) { top: 75%; left: 70%; animation-delay: 9s;  font-size: 1.6rem; }
.butterfly-field span:nth-child(5) { top: 40%; left: 50%; animation-delay: 12s; font-size: 1.2rem; }
.butterfly-field span:nth-child(6) { top: 85%; left: 35%; animation-delay: 15s; font-size: 1.5rem; }

@keyframes flutter {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  25%      { transform: translate(40px, -30px) rotate(8deg); }
  50%      { transform: translate(-20px, -60px) rotate(-4deg); }
  75%      { transform: translate(30px, -20px) rotate(12deg); }
}

/* ---------- Layout wrapper ---------- */
.wrap {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-top: var(--safe-top);
  background: rgba(13, 5, 9, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255, 143, 193, 0.1);
  transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
}

.nav.scrolled {
  background: rgba(13, 5, 9, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 143, 193, 0.18);
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand {
  font-family: var(--script);
  font-size: 2rem;
  font-weight: 700;
  color: var(--pink-soft);
  text-shadow: 0 0 18px rgba(255, 143, 193, 0.5);
  letter-spacing: 1px;
  text-decoration: none;
}

.brand span { color: var(--pink-hot); }

.nav-links {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  list-style: none;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 999px;
  transition: all 0.25s ease;
  letter-spacing: 0.5px;
}

.nav-links a:hover {
  background: rgba(255, 143, 193, 0.12);
  color: var(--pink-soft);
}

.nav-links a.active {
  background: linear-gradient(135deg, var(--pink-hot), var(--pink));
  color: var(--white);
  box-shadow: var(--shadow-pink);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--pink-soft);
  font-size: 1.6rem;
  cursor: pointer;
}

/* ---------- Hero ---------- */
.hero {
  padding-top: 8rem;
  padding-right: 1.5rem;
  padding-bottom: 3rem;
  padding-left: 1.5rem;
  text-align: center;
  position: relative;
}

.hero .eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--pink-hot);
  margin-bottom: 1rem;
}

.hero h1 {
  font-family: var(--script);
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 700;
  background: linear-gradient(135deg, var(--pink-soft) 0%, var(--pink-hot) 50%, var(--lilac) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 60px rgba(255, 61, 139, 0.4);
  line-height: 1;
  margin-bottom: 1rem;
}

.hero .tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--text-dim);
  max-width: 580px;
  margin: 0 auto 2rem;
}

.hero .cta-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 1.8rem;
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--sans);
  font-size: 0.95rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, var(--pink-hot), var(--pink-glow));
  color: var(--white);
  box-shadow: var(--shadow-pink);
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 0 40px rgba(255, 61, 139, 0.7);
}

.btn-ghost {
  background: rgba(255, 143, 193, 0.08);
  color: var(--pink-soft);
  border: 1px solid rgba(255, 143, 193, 0.4);
  backdrop-filter: blur(8px);
}

.btn-ghost:hover {
  background: rgba(255, 143, 193, 0.18);
  border-color: var(--pink-hot);
  color: var(--white);
}

/* ---------- Section primitives ---------- */
.section {
  padding: 5rem 0;
}

.section-eyebrow {
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--pink-hot);
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.section-title {
  text-align: center;
  font-family: var(--script);
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--pink-soft);
  margin-bottom: 3rem;
  text-shadow: 0 0 30px rgba(255, 143, 193, 0.35);
}

.section-lead {
  max-width: 720px;
  margin: -2rem auto 3rem;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--text-dim);
}

/* ---------- Cards / gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.photo-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, var(--pink-soft) 0%, var(--pink) 100%);
  box-shadow: var(--shadow-soft);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}

/* The butterfly border — purely CSS using a pseudo + inset frame */
.photo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 4px;
  background: linear-gradient(135deg, var(--pink-hot), var(--lilac), var(--pink-soft), var(--pink-hot));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* Corner butterflies on cards */
.photo-card::after {
  content: "🦋";
  position: absolute;
  top: -8px;
  right: -4px;
  font-size: 1.6rem;
  filter: drop-shadow(0 0 8px var(--pink-hot)) hue-rotate(0deg);
  z-index: 3;
  transform: rotate(15deg);
  transition: transform 0.4s ease;
}

.photo-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 48px rgba(255, 61, 139, 0.4);
}

.photo-card:hover::after {
  transform: rotate(-15deg) scale(1.2);
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-card .placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.4) 0%, transparent 25%),
    radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.3) 0%, transparent 20%),
    linear-gradient(160deg, #ffd1e3 0%, #ff8fc1 50%, #d9b3ff 100%);
  color: var(--white);
  font-family: var(--script);
  font-size: 1.5rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.photo-card .placeholder small {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ---------- Tribute cards ---------- */
.tribute-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  max-width: 700px;
  margin: 0 auto;
}

.tribute-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  background: rgba(255, 143, 193, 0.06);
  border: 1px solid rgba(255, 143, 193, 0.25);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.tribute-card:hover {
  background: rgba(255, 61, 139, 0.15);
  border-color: var(--pink-hot);
  transform: translateX(4px);
  box-shadow: var(--shadow-soft);
}

.tribute-card .tc-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.tribute-card .tc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--pink-hot), var(--lilac));
  font-size: 1.4rem;
  flex-shrink: 0;
}

.tribute-card .tc-name {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--white);
}

.tribute-card .tc-sub {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.tribute-card .tc-arrow {
  color: var(--pink-soft);
  font-size: 1.4rem;
  transition: transform 0.3s ease;
}

.tribute-card:hover .tc-arrow { transform: translateX(4px); }

/* ---------- Featured tribute (minimum messaging) ---------- */
.minimum-banner {
  text-align: center;
  margin: 0 auto 2.5rem;
  padding: 1.5rem 2rem;
  max-width: 640px;
  background: linear-gradient(135deg, rgba(255, 61, 139, 0.15), rgba(217, 179, 255, 0.1));
  border: 1px solid rgba(255, 61, 139, 0.4);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.minimum-banner .amt {
  font-family: var(--script);
  font-size: 3rem;
  color: var(--pink-hot);
  text-shadow: 0 0 20px rgba(255, 61, 139, 0.5);
  line-height: 1;
}

.minimum-banner .label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--pink-soft);
}

.minimum-banner p {
  margin-top: 0.75rem;
  font-family: var(--serif);
  font-style: italic;
  color: var(--text-dim);
}

/* ---------- Rules / Protocol grid ---------- */
.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  max-width: 1000px;
  margin: 0 auto;
}

.rule {
  padding: 1.8rem 1.6rem;
  background: rgba(31, 12, 24, 0.6);
  border: 1px solid rgba(255, 143, 193, 0.2);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  position: relative;
  transition: all 0.3s ease;
}

.rule:hover {
  border-color: var(--pink-hot);
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}

.rule .num {
  font-family: var(--script);
  font-size: 2.4rem;
  color: var(--pink-hot);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.rule h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--pink-soft);
  margin-bottom: 0.6rem;
  letter-spacing: 0.5px;
}

.rule p {
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---------- About hero block ---------- */
.about-block {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.about-block .portrait {
  aspect-ratio: 3/4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(255, 61, 139, 0.3);
}

.about-block .portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 5px;
  background: linear-gradient(135deg, var(--pink-hot), var(--lilac), var(--pink-soft));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: 2;
}

.about-block .placeholder {
  width: 100%;
  height: 100%;
}

.about-content h2 {
  font-family: var(--script);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  color: var(--pink-soft);
  margin-bottom: 1.2rem;
  line-height: 1.1;
}

.about-content p {
  color: var(--text);
  font-size: 1.05rem;
  margin-bottom: 1rem;
  line-height: 1.7;
}

.about-content p strong {
  color: var(--pink-hot);
  font-weight: 600;
}

.about-content .stats {
  display: flex;
  gap: 2rem;
  margin-top: 1.8rem;
  flex-wrap: wrap;
}

.about-content .stat {
  border-left: 2px solid var(--pink-hot);
  padding-left: 1rem;
}

.about-content .stat .val {
  font-family: var(--script);
  font-size: 2rem;
  color: var(--pink-soft);
  line-height: 1;
}

.about-content .stat .key {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------- Quote / pull ---------- */
.pull-quote {
  max-width: 760px;
  margin: 4rem auto;
  padding: 2.5rem 2rem;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  color: var(--pink-soft);
  border-top: 1px solid rgba(255, 143, 193, 0.25);
  border-bottom: 1px solid rgba(255, 143, 193, 0.25);
  position: relative;
}

.pull-quote::before {
  content: "❀";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  padding: 0 1rem;
  color: var(--pink-hot);
  font-size: 1.4rem;
}

.pull-quote cite {
  display: block;
  margin-top: 1.2rem;
  font-family: var(--script);
  font-style: normal;
  font-size: 1.5rem;
  color: var(--pink-hot);
}

/* ---------- Footer ---------- */
.footer {
  margin-top: 4rem;
  padding: 3rem 1.5rem 2rem;
  text-align: center;
  border-top: 1px solid rgba(255, 143, 193, 0.15);
  color: var(--text-dim);
  font-size: 0.85rem;
  position: relative;
  z-index: 1;
}

.footer .brand {
  font-size: 1.6rem;
  display: inline-block;
  margin-bottom: 0.8rem;
}

.footer p { margin-bottom: 0.4rem; }

.footer .small {
  margin-top: 1rem;
  font-size: 0.75rem;
  opacity: 0.6;
  letter-spacing: 1px;
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .about-block { grid-template-columns: 1fr; gap: 2rem; }

  /* mobile menu — full-width dropdown that matches the site */
  .nav-inner { padding: 0.85rem 1.1rem; }
  .nav-links {
    position: fixed;
    top: calc(var(--nav-h) + var(--safe-top));
    left: 0;
    right: 0;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(13, 5, 9, 0.96) 0%, rgba(31, 12, 24, 0.96) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    padding: 0.6rem 1rem 1.2rem;
    gap: 0.3rem;
    border-bottom: 1px solid rgba(255, 143, 193, 0.25);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    display: none;
    transform: translateY(-8px);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .nav-links.open {
    display: flex;
    transform: translateY(0);
    opacity: 1;
  }
  .nav-links a {
    display: flex !important;
    justify-content: flex-start !important;
    width: 100%;
    text-align: left;
    padding: 0.95rem 1.2rem !important;
    border-radius: 12px;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
  }
  .nav-links a.active {
    background: linear-gradient(135deg, rgba(255, 61, 139, 0.22), rgba(217, 179, 255, 0.10)) !important;
    color: var(--pink-soft) !important;
    box-shadow: none !important;
    border-color: rgba(255, 143, 193, 0.3);
  }
  .nav-links a::after { display: none; }
  .nav-toggle { display: block; }

  .hero {
    padding-top: 7.5rem !important;
    padding-right: 1.1rem !important;
    padding-bottom: 2rem !important;
    padding-left: 1.1rem !important;
  }
  .section { padding: 2.5rem 0; }
  .wrap { padding: 0 1.1rem; }

  /* gallery — 2 cols on phones instead of 1 */
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
  .photo-card { aspect-ratio: 3 / 4; border-radius: 16px; }
  .photo-card::before { border-radius: 16px; padding: 2px; }
  .photo-card::after { font-size: 1.1rem; top: -5px; right: -2px; }

  /* tribute grid — keep stacked, but tighter */
  .tribute-grid { gap: 0.85rem; }
  .tribute-card { padding: 1rem 1.1rem; }
  .tribute-card .tc-name { font-size: 0.95rem; }
  .tribute-card .tc-sub { font-size: 0.75rem; }

  /* rules grid — 1 col looks fine but make cards tighter */
  .rules { gap: 0.85rem; }
  .rule { padding: 1.3rem 1.2rem; }

  /* minimum banner */
  .minimum-banner { padding: 1.1rem 1.2rem; }
  .minimum-banner .amt { font-size: 2.3rem; }

  /* pull quote */
  .pull-quote { padding: 1.8rem 1.2rem; margin: 2.5rem auto; font-size: 1.05rem; }

  /* marquee shrinks */
  .marquee-track { font-size: 1.3rem; }
  .marquee-track span { margin: 0 1.2rem; }
  .marquee-track span::after { margin-left: 1.2rem; }

  /* hero scroll-expand bg — frame the subject better on portrait viewports */
  .se-bg {
    background-size: cover, cover;
    background-position: center 35%, center 35%;
  }

  /* scroll-expand media box clamps to phone width nicely */
  .se-media-box {
    max-width: 88vw;
    max-height: 72vh;
  }
  .se-title h2 { font-size: clamp(3rem, 14vw, 5rem); }
  .se-meta .se-date { font-size: 1.3rem; }
  .se-meta .se-prompt { font-size: 0.7rem; letter-spacing: 3px; }

  /* about portrait card sizes down */
  .about-block .portrait { max-width: 360px; margin: 0 auto; }

  /* buttons — min 44px tap target */
  .btn {
    padding: 0.95rem 1.4rem;
    font-size: 0.85rem;
    min-height: 46px;
    justify-content: center;
  }
  .cta-row { gap: 0.6rem !important; }
  .cta-row .btn { flex: 1 1 auto; min-width: 0; }

  /* footer tighten + safe-area for home indicator */
  .footer { padding: 2rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
  .footer .brand { font-size: 1.4rem; }

  /* prevent any horizontal overflow */
  html, body { overflow-x: hidden; max-width: 100vw; }
}

@media (max-width: 420px) {
  /* extra-narrow phones */
  .hero h1 { font-size: clamp(2.8rem, 11vw, 4rem); }
  .section-title { font-size: clamp(2rem, 8vw, 2.8rem); margin-bottom: 2rem; }
  .nav-inner .brand { font-size: 1.6rem; }
  .gallery { gap: 0.5rem; }
  .photo-card { border-radius: 14px; }
  .photo-card::before { border-radius: 14px; }
}

/* iOS Safari hates background-attachment: fixed on body, drop it on touch devices */
@media (hover: none) and (pointer: coarse) {
  body { background-attachment: scroll; }
}

/* =========================================================
   SCROLL-EXPAND HERO (vanilla port of ScrollExpandMedia)
   ========================================================= */

body.se-locked {
  overflow: hidden;
  height: 100vh;
}

.se-root {
  position: relative;
  overflow-x: hidden;
  transition: background-color 0.7s ease;
}

.se-stage {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.se-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: opacity 0.1s linear;
  background-image:
    linear-gradient(180deg, rgba(13, 5, 9, 0.35) 0%, rgba(42, 14, 31, 0.45) 50%, rgba(13, 5, 9, 0.55) 100%),
    url("../assets/images/dana-bg.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.se-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255, 143, 193, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 70%, rgba(217, 179, 255, 0.18) 0%, transparent 55%);
  mix-blend-mode: screen;
}

/* ---------- Hypnosis spiral behind the video ---------- */
.se-spiral {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  display: grid;
  place-items: center;
  opacity: calc(0.65 - var(--se-progress, 0) * 0.65);
  transition: opacity 0.1s linear;
  mix-blend-mode: screen;
}
.se-spiral::before,
.se-spiral::after {
  content: "";
  position: absolute;
  width: min(140vmin, 1100px);
  height: min(140vmin, 1100px);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 61, 139, 0.55) 30deg,
    transparent 70deg,
    rgba(217, 179, 255, 0.45) 110deg,
    transparent 150deg,
    rgba(255, 143, 193, 0.5) 190deg,
    transparent 230deg,
    rgba(255, 61, 139, 0.5) 270deg,
    transparent 310deg,
    rgba(217, 179, 255, 0.45) 350deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(circle, transparent 0, transparent 16%, #000 24%, #000 48%, transparent 62%);
          mask: radial-gradient(circle, transparent 0, transparent 16%, #000 24%, #000 48%, transparent 62%);
  animation: spinSpiral 28s linear infinite;
  filter: blur(2px);
}
.se-spiral::after {
  width: min(90vmin, 720px);
  height: min(90vmin, 720px);
  animation-duration: 18s;
  animation-direction: reverse;
  opacity: 0.85;
  filter: blur(1px);
}
@keyframes spinSpiral { to { transform: rotate(360deg); } }

.se-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.se-hero {
  width: 100%;
  height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.se-media-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  max-width: 95vw;
  max-height: 85vh;
  box-shadow: 0 0 80px rgba(255, 61, 139, 0.4), 0 30px 60px rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.se-media-box video,
.se-media-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.se-media-inner {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.se-media-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 16px;
  transition: opacity 0.2s ease;
}

.se-media-frame {
  position: absolute;
  inset: -3px;
  border-radius: 22px;
  padding: 3px;
  background: linear-gradient(135deg, var(--pink-hot), var(--lilac), var(--pink-soft), var(--pink-hot));
  background-size: 200% 200%;
  animation: frameShimmer 6s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 4;
}

@keyframes frameShimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}

.se-meta {
  position: absolute;
  bottom: -2.8rem;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: center;
  z-index: 5;
}

.se-meta .se-date {
  font-family: var(--script);
  font-size: 1.6rem;
  color: var(--pink-soft);
}

.se-meta .se-prompt {
  font-size: 0.8rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--pink-hot);
  animation: bobPulse 2.4s ease-in-out infinite;
}

@keyframes bobPulse {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50%      { transform: translateY(6px); opacity: 1; }
}

.se-title {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  width: 100%;
  pointer-events: none;
}

.se-title.blend { mix-blend-mode: difference; }

.se-title h2 {
  font-family: var(--script);
  font-size: clamp(3.5rem, 9vw, 8rem);
  font-weight: 700;
  background: linear-gradient(135deg, var(--pink-soft), var(--pink-hot), var(--lilac));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 0.9;
  text-shadow: 0 0 60px rgba(255, 61, 139, 0.4);
}

.se-after {
  position: relative;
  z-index: 10;
  width: 100%;
  padding: 4rem 1.5rem 0;
  transition: opacity 0.7s ease;
}

/* =========================================================
   ANIMATION UTILITIES
   ========================================================= */

.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-blur {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(.2,.8,.2,1), transform 0.9s cubic-bezier(.2,.8,.2,1), filter 0.9s ease;
  will-change: opacity, transform, filter;
}

.reveal,
.reveal-up    { transform: translateY(40px); }
.reveal-left  { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }
.reveal-scale { transform: scale(0.85); }
.reveal-blur  { filter: blur(14px); transform: translateY(20px); }

.reveal.visible,
.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: translate(0,0) scale(1);
}

.reveal-blur.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Letter-by-letter float-in for headings */
.float-letters {
  display: inline-block;
}
.float-letters .ltr {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotate(8deg);
  animation: letterIn 0.7s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes letterIn {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

/* Floating heart sparkle on hover for cards */
.tilt {
  transition: transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s ease;
  will-change: transform;
}

/* Magnetic button — base style */
.magnetic {
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1);
}

/* Pulsing heart */
.pulse {
  display: inline-block;
  animation: heartPulse 1.6s ease-in-out infinite;
}
@keyframes heartPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); filter: drop-shadow(0 0 12px var(--pink-hot)); }
}

/* Gradient text wash animation */
.shimmer-text {
  background: linear-gradient(90deg, var(--pink-soft), var(--pink-hot), var(--lilac), var(--pink-soft));
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
  to { background-position: 300% center; }
}

/* Marquee strip */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid rgba(255, 143, 193, 0.18);
  border-bottom: 1px solid rgba(255, 143, 193, 0.18);
  padding: 1rem 0;
  background: rgba(255, 61, 139, 0.04);
  margin: 3rem 0;
}
.marquee-track {
  display: inline-block;
  animation: marqueeRoll 28s linear infinite;
  font-family: var(--script);
  font-size: 1.8rem;
  color: var(--pink-soft);
}
.marquee-track span {
  margin: 0 2rem;
  text-shadow: 0 0 16px rgba(255, 143, 193, 0.4);
}
.marquee-track span::after {
  content: "♡";
  margin-left: 2rem;
  color: var(--pink-hot);
}
@keyframes marqueeRoll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Page enter — fades whole page on load */
.page-enter {
  animation: pageIn 1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Animated underline on nav */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 0.35rem;
  height: 2px;
  background: linear-gradient(90deg, var(--pink-hot), var(--lilac));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1);
  border-radius: 2px;
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active::after { opacity: 0; }

/* Tribute card icon spin on hover */
.tribute-card:hover .tc-icon {
  animation: iconSpin 0.6s cubic-bezier(.2,.8,.2,1);
}
@keyframes iconSpin {
  0%   { transform: rotate(0)   scale(1); }
  50%  { transform: rotate(180deg) scale(1.15); }
  100% { transform: rotate(360deg) scale(1); }
}

/* Sparkle dots that float across screen */
.sparkle-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.sparkle-field i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--pink-soft) 50%, transparent 100%);
  opacity: 0;
  animation: sparkle 6s linear infinite;
}
.sparkle-field i:nth-child(1)  { left: 5%;  top: 90%; animation-delay: 0s; }
.sparkle-field i:nth-child(2)  { left: 15%; top: 90%; animation-delay: 1s; }
.sparkle-field i:nth-child(3)  { left: 28%; top: 90%; animation-delay: 2s; }
.sparkle-field i:nth-child(4)  { left: 42%; top: 90%; animation-delay: 3s; }
.sparkle-field i:nth-child(5)  { left: 55%; top: 90%; animation-delay: 4s; }
.sparkle-field i:nth-child(6)  { left: 68%; top: 90%; animation-delay: 5s; }
.sparkle-field i:nth-child(7)  { left: 80%; top: 90%; animation-delay: 0.5s; }
.sparkle-field i:nth-child(8)  { left: 92%; top: 90%; animation-delay: 2.5s; }
@keyframes sparkle {
  0%   { opacity: 0; transform: translateY(0)    scale(0.5); }
  10%  { opacity: 1; }
  90%  { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-100vh) scale(1.2); }
}

/* Hero CTA pulse glow */
.btn-primary {
  animation: ctaGlow 3s ease-in-out infinite;
}
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 0 24px rgba(255, 102, 168, 0.45); }
  50%      { box-shadow: 0 0 48px rgba(255, 61, 139, 0.75); }
}