@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Playfair+Display:wght@500;600;700&display=swap");

:root {
  color-scheme: dark;
  --ink: #fff8fc;
  --muted: #d3a8c1;
  --rose: #ff5c9b;
  --pink: #ff9bc4;
  --violet: #8d5cff;
  --panel: rgba(255, 255, 255, 0.06);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background: #090513;
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  overflow: hidden;
}

button { font: inherit; }

.experience {
  background:
    radial-gradient(circle at 50% 48%, rgba(116, 35, 91, .35), transparent 34rem),
    linear-gradient(145deg, #080511 0%, #170a29 48%, #310c2c 100%);
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.experience::after {
  background: linear-gradient(transparent 50%, rgba(0,0,0,.2));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}

.aurora { border-radius: 50%; filter: blur(80px); opacity: .2; position: absolute; pointer-events: none; }
.aurora-one { background: #c92990; height: 28rem; left: -12rem; top: 20%; width: 28rem; }
.aurora-two { background: #6848f8; height: 25rem; right: -12rem; top: -8rem; width: 25rem; }
.stars { inset: 0; overflow: hidden; position: absolute; }
.star { animation: drift var(--duration) linear infinite; background: #ffd9ed; border-radius: 50%; height: var(--size); left: var(--left); opacity: .6; position: absolute; top: 105%; width: var(--size); }
.particle-layer { inset: 0; pointer-events: none; position: absolute; z-index: 2; }
.particle { animation: float-up var(--duration) ease-out forwards; color: var(--color); left: var(--left); position: absolute; top: var(--top); text-shadow: 0 0 20px currentColor; }

.scene { align-items: center; display: flex; flex-direction: column; inset: 0; justify-content: center; opacity: 0; padding: 2rem; pointer-events: none; position: absolute; text-align: center; transform: scale(.97); transition: opacity .8s ease, transform .8s ease; z-index: 4; }
.scene.active { opacity: 1; pointer-events: auto; transform: scale(1); }
.scene.exit { opacity: 0; transform: scale(1.03); }

.eyebrow { color: var(--pink); font-size: .73rem; font-weight: 700; letter-spacing: .3em; margin: 0 0 1.5rem; text-transform: uppercase; }
h1, h2, .word { font-family: "Playfair Display", Georgia, serif; }
h1 { font-size: clamp(3.2rem, 11vw, 8.5rem); letter-spacing: -.06em; line-height: .87; margin: 0; }
h1 span { color: var(--pink); display: inline-block; font-size: .6em; letter-spacing: .02em; }
h1 b, h2 span { color: var(--rose); font-weight: 500; text-shadow: 0 0 35px rgba(255, 92, 155, .8); }
.intro-copy { color: var(--muted); font-size: clamp(.85rem, 2vw, 1rem); margin: 2rem 0; max-width: 24rem; }
.primary-button, .outline-button, .skip-button { cursor: pointer; transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.primary-button { background: var(--ink); border: 0; border-radius: 99px; color: #281026; font-weight: 700; padding: .9rem 1.35rem; }
.primary-button span, .skip-button span { color: var(--rose); margin-left: .5rem; }
.primary-button:hover, .outline-button:hover { transform: translateY(-3px); }
.sound-toggle { bottom: max(1.5rem, env(safe-area-inset-bottom)); left: 1.5rem; position: absolute; z-index: 6; }
.sound-toggle button { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; }
.sound-toggle span { color: var(--rose); }

.progress-label { color: var(--muted); font-size: .75rem; letter-spacing: .2em; position: absolute; right: 2rem; top: max(2rem, env(safe-area-inset-top)); }
.arabic-heading { color: var(--pink); font-family: Tahoma, Arial, sans-serif; font-size: clamp(1.05rem, 3vw, 1.65rem); margin: 0 0 2.2rem; text-shadow: 0 0 22px rgba(255, 91, 166, .35); }
.language-card { min-height: 13rem; }
.word { font-size: clamp(3rem, 12vw, 8rem); letter-spacing: -.05em; max-width: 90vw; overflow-wrap: anywhere; }
.phrase-word { font-size: clamp(2.4rem, 8vw, 6.5rem); }
.language-name { color: var(--pink); font-size: .8rem; letter-spacing: .3em; margin-top: 1.6rem; text-transform: uppercase; }
.phrase-scene { overflow: hidden; }
.n-words { height: min(80vw, 33rem); left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: min(82vw, 37rem); }
.heart-word { color: rgba(255, 190, 218, .58); font-family: "Playfair Display", Georgia, serif; font-size: clamp(.5rem, 1.35vw, .82rem); left: 50%; max-width: 7.2rem; opacity: .65; position: absolute; text-align: center; transform: translate(-50%, -50%); transition: color .35s ease, opacity .35s ease, text-shadow .35s ease, transform .35s ease; }
.heart-word.active { color: var(--ink); opacity: 1; text-shadow: 0 0 18px var(--rose); transform: translate(-50%, -50%) scale(1.3); }
.phrase-focus { opacity: 0; pointer-events: none; position: relative; z-index: 1; }
.progress-track { background: rgba(255,255,255,.14); bottom: 5.3rem; height: 2px; left: 12%; overflow: hidden; position: absolute; width: 76%; }
.progress-track span { background: linear-gradient(90deg, var(--violet), var(--rose)); display: block; height: 100%; transition: width .3s ease; width: 5%; }
.skip-button { background: transparent; border: 0; bottom: 2rem; color: var(--muted); font-size: .75rem; letter-spacing: .08em; position: absolute; }
.skip-button:hover { color: var(--ink); }

.heart-scene { gap: 2rem; }
.heart, .finale-heart { color: var(--rose); font-family: Georgia, serif; line-height: .8; text-shadow: 0 0 18px var(--rose), 0 0 60px rgba(255, 50, 140, .75); }
.heart { animation: pulse 1.55s ease-in-out infinite; font-size: clamp(11rem, 42vw, 28rem); }
.heart-halo { animation: halo 2.2s ease-out infinite; border: 1px solid rgba(255, 130, 190, .4); border-radius: 50%; height: min(60vw, 24rem); position: absolute; width: min(60vw, 24rem); }
.heart-caption { color: var(--muted); font-size: .9rem; letter-spacing: .16em; margin: 0; text-transform: uppercase; }
.finale-heart { animation: pulse 1.4s ease-in-out infinite; font-size: clamp(10rem, 35vw, 22rem); }
.finale-scene h2 { font-size: clamp(2.5rem, 8vw, 6rem); letter-spacing: -.06em; margin: 1rem 0 .4rem; }
.finale-scene > p:not(.eyebrow) { color: var(--muted); font-size: clamp(.85rem, 2vw, 1rem); }
.outline-button { background: transparent; border: 1px solid rgba(255,255,255,.4); border-radius: 99px; color: var(--ink); margin-top: 1.3rem; padding: .75rem 1.2rem; }

@keyframes pulse { 50% { transform: scale(1.08); } }
@keyframes halo { 0% { opacity: .7; transform: scale(.65); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes drift { to { transform: translateY(-120vh); } }
@keyframes float-up { 0% { opacity: 0; transform: translate(0, 0) scale(.5) rotate(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--drift), -16rem) scale(1.3) rotate(40deg); } }

@media (max-width: 520px) {
  .scene { padding: 1.25rem; }
  h1 { font-size: clamp(3rem, 16vw, 5rem); }
  .word { font-size: clamp(2.7rem, 15vw, 5rem); }
  .phrase-word { font-size: clamp(2rem, 11vw, 4rem); }
  .n-words { height: min(92vw, 27rem); width: 90vw; }
  .heart-word { font-size: .48rem; max-width: 4.8rem; }
  .language-name { font-size: .68rem; letter-spacing: .18em; }
  .progress-label { right: 1.25rem; }
  .sound-toggle { left: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}