:root {
  /* Paleta e luată din hainele Oanei: puloverul fucsia, tricoul roz aprins, bluza roz pal,
     hanoracul prună de la răsărit, rochia lila de la festival, geaca coral de munte, pantalonii bleu. */
  --blush: #fcecf3;
  --blush-2: #f8d8e8;
  --paper: #fff7fb;
  --rose: #c2185b;
  --rose-2: #f0489e;
  --peach: #e87888;
  --coral: #e87888;
  --lilac: #c888c8;
  --sky: #7fb8e6;
  --berry: #4e2442;
  --berry-2: #683858;
  --night: #2b1426;
  --gap: clamp(12px, 2.5vw, 24px);
  --serif: "Fraunces Variable", Georgia, "Times New Roman", serif;
  --sans: "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --hand: "Caveat Variable", "Bradley Hand", "Segoe Print", cursive;
  --glow: 0 30px 60px -28px rgba(194, 24, 91, .55), 0 10px 24px -12px rgba(78, 36, 66, .25);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { background: var(--blush); -webkit-text-size-adjust: 100%; }
body {
  background: var(--blush);
  color: var(--berry);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Granulație fină peste tot, ca pe hârtie */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Bara de progres și contorul */
.progress { position: fixed; inset: 0 0 auto; height: 4px; z-index: 30; background: #ffffff55; }
.progress__bar {
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, var(--rose), var(--rose-2), var(--lilac));
}
.counter {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: 12px;
  z-index: 30;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: #ffffffcc;
  color: var(--berry);
  font-weight: 700;
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 18px -8px rgba(78, 36, 66, .35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.counter.is-on { opacity: 1; transform: none; }
.counter__n { color: var(--rose); }
.counter__of { opacity: .6; }

/* Pete de culoare animate (start și ecranul de așteptare) */
.blobs { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
/* Gradienți radiali în loc de filter: blur, pe care Safari îl taie în pătrate */
.blobs span {
  position: absolute;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  opacity: .8;
  animation: drift 18s ease-in-out infinite alternate;
}
.blobs span:nth-child(1) { background: radial-gradient(circle, #f0489e 0%, rgba(240, 72, 158, 0) 65%); top: -35vmax; left: -30vmax; }
.blobs span:nth-child(2) { background: radial-gradient(circle, #e87888 0%, rgba(232, 120, 136, 0) 65%); bottom: -40vmax; right: -30vmax; animation-duration: 22s; }
.blobs span:nth-child(3) { background: radial-gradient(circle, #c888c8 0%, rgba(200, 136, 200, 0) 65%); top: 15%; left: 35%; width: 55vmax; height: 55vmax; opacity: .45; animation-duration: 26s; }
@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(8vmax, 6vmax) scale(1.15); }
}

/* Ecranul de start */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: #fff;
  background: linear-gradient(160deg, #c2185b 0%, #f0489e 50%, #e87888 100%);
  padding: 64px 16px 150px;
}
.hero__content { position: relative; z-index: 1; }
.hero__kicker { font-size: clamp(1rem, 4.5vw, 1.35rem); letter-spacing: .32em; text-transform: uppercase; font-weight: 600; opacity: .92; }
.hero__name {
  font-family: var(--serif);
  font-weight: 650;
  font-size: clamp(4.4rem, 23vw, 11rem);
  line-height: .95;
  letter-spacing: -.035em;
  margin-top: .25rem;
  text-shadow: 0 10px 40px rgba(78, 36, 66, .25);
}
.hero__age {
  font-family: var(--serif);
  font-weight: 850;
  font-size: clamp(7.5rem, 44vw, 19rem);
  line-height: .82;
  margin-top: .35rem;
  color: transparent;
  -webkit-text-stroke: 3px #fff;
  text-shadow: 0 18px 50px rgba(78, 36, 66, .25);
}
.hero__sub {
  display: inline-block;
  margin-top: 1.6rem;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  background: #ffffff33;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-weight: 600;
  font-size: clamp(.95rem, 3.8vw, 1.1rem);
}
.ribbon {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 78px;
  z-index: 1;
  transform: rotate(-3deg);
  background: var(--berry);
  color: #fff;
  overflow: hidden;
  padding: .75rem 0;
  box-shadow: 0 14px 30px -12px rgba(43, 20, 38, .5);
}
.ribbon__track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.ribbon__track span:nth-child(even) { color: var(--sky); }
.ribbon__track span { padding-right: 1.4rem; font-weight: 700; font-size: .9rem; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }
.hero__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 1;
  font-size: 1.5rem;
  animation: hint 2s ease-in-out infinite;
}
@keyframes hint {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(8px); opacity: 1; }
}

/* Elemente comune ale momentelor */
.moment { position: relative; padding: 14vh 20px; padding: 14svh 20px; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .5em 1em;
  border-radius: 999px;
  background: var(--rose);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px -10px rgba(194, 24, 91, .8);
}
.pill span { opacity: .75; }
.reason__text {
  font-family: var(--serif);
  font-weight: 560;
  font-size: clamp(1.75rem, 7.4vw, 3.3rem);
  line-height: 1.14;
  letter-spacing: -.015em;
  margin-top: 1.1rem;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: manual;
}
.moment__text { max-width: 40rem; margin: 0 auto; text-align: center; }
.moment__text .reason__text { max-width: 20ch; margin-inline: auto; }
.frame { position: relative; aspect-ratio: var(--ar); overflow: hidden; background: var(--blush-2); }

/* 1. Clasic: text, apoi poza ca o fotografie printată */
.moment--clasic .moment__text { margin-bottom: 7vh; margin-bottom: 7svh; }
.frame--clasic {
  width: min(100%, 720px, calc(76vh * var(--ar)));
  width: min(100%, 720px, calc(76svh * var(--ar)));
  margin: 0 auto;
  border-radius: 28px;
  border: 8px solid #fff;
  box-shadow: var(--glow);
}

/* 2. Plin: poza pe tot ecranul, cu fundal estompat din aceeași poză */
.moment--plin {
  min-height: 100vh;
  min-height: 100svh;
  padding: 12vh 20px 10vh;
  padding: 12svh 20px 10svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5vh;
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
  color: #fff;
}
.plin__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  transform: scale(1.15);
}
.moment--plin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(240, 72, 158, .28) 0%, rgba(43, 20, 38, .35) 45%, rgba(43, 20, 38, .85) 100%);
}
.frame--plin {
  width: min(100%, calc(64vh * var(--ar)));
  width: min(100%, calc(64svh * var(--ar)));
  border-radius: 26px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
}
.plin__text { max-width: 40rem; text-align: center; }
.plin__text .reason__text { color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, .35); }

/* 3. Polaroid pe hârtie cu buline */
.moment--polaroid {
  display: grid;
  place-items: center;
  background:
    radial-gradient(rgba(194, 24, 91, .22) 1.3px, transparent 1.6px) 0 0 / 22px 22px,
    var(--blush-2);
}
.polaroid {
  position: relative;
  width: min(86vw, 500px, calc(66vh * var(--ar) + 28px));
  width: min(86vw, 500px, calc(66svh * var(--ar) + 28px));
  padding: 14px 14px 20px;
  background: #fff;
  border-radius: 6px;
  transform: rotate(var(--tilt));
  box-shadow: 0 28px 50px -22px rgba(104, 56, 88, .55), 0 2px 8px rgba(0, 0, 0, .08);
}
.polaroid__tape {
  position: absolute;
  top: -16px;
  left: 50%;
  z-index: 2;
  width: 120px;
  height: 32px;
  transform: translateX(-50%) rotate(-5deg);
  background: repeating-linear-gradient(45deg, rgba(240, 72, 158, .85) 0 8px, rgba(127, 184, 230, .85) 8px 16px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.frame--polaroid { border-radius: 2px; }
.polaroid figcaption { margin-top: 14px; text-align: center; color: var(--berry); }
.polaroid__n { display: block; font-family: var(--hand); font-size: 1.25rem; color: var(--rose); font-weight: 700; }
.polaroid__caption { display: block; font-family: var(--hand); font-weight: 600; font-size: clamp(1.55rem, 6.4vw, 2.1rem); line-height: 1.12; text-wrap: balance; }

/* 4. Editorial: număr mare, text lângă poză */
.moment--editorial { background: var(--paper); }
.moment--editorial > * { max-width: 560px; margin-inline: auto; }
.editorial__text { margin-bottom: 6vh; margin-bottom: 6svh; }
.editorial__num {
  font-family: var(--serif);
  font-weight: 850;
  font-size: clamp(6rem, 32vw, 13rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px var(--rose);
  margin-bottom: 1.2rem;
}
.frame--editorial {
  width: min(100%, calc(74vh * var(--ar)));
  width: min(100%, calc(74svh * var(--ar)));
  border-radius: 32px 32px 32px 140px;
  box-shadow: var(--glow);
}
.moment--flip .frame--editorial { border-radius: 32px 32px 140px 32px; }

/* 5. Arcadă */
.moment--arcada { background: linear-gradient(180deg, var(--blush) 0%, #f1d0ea 100%); }
.arch {
  position: relative;
  width: min(80vw, 440px, calc(62vh * var(--ar)));
  width: min(80vw, 440px, calc(62svh * var(--ar)));
  margin: 0 auto 7vh;
  margin: 0 auto 7svh;
}
.arch::before {
  content: "";
  position: absolute;
  inset: -14px 14px 14px -14px;
  border: 2px solid var(--rose);
  border-radius: 999px 999px 34px 34px;
}
.frame--arch { border-radius: 999px 999px 34px 34px; box-shadow: var(--glow); }
.moment--arcada .reason__text { font-style: italic; font-variation-settings: "SOFT" 100; }

/* Videoclipuri */
.frame--video { cursor: pointer; }
.sound {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(194, 24, 91, .9);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5);
}
.frame--video.is-paused::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 3rem;
  color: #fff;
  background: rgba(43, 20, 38, .3);
  pointer-events: none;
}

/* Galeria */
.gallery { padding: 14vh 16px 8vh; padding: 14svh 16px 8svh; max-width: 1200px; margin: 0 auto; }
.gallery__title {
  font-family: var(--hand);
  font-weight: 700;
  font-size: clamp(2.2rem, 9vw, 3.6rem);
  line-height: 1.05;
  color: var(--rose);
  text-align: center;
  margin-bottom: 5vh;
}
.mosaic { columns: 2; column-gap: 12px; }
.frame--mosaic {
  break-inside: avoid;
  margin-bottom: 12px;
  border-radius: 18px;
  box-shadow: 0 16px 30px -18px rgba(104, 56, 88, .6);
}

/* Finalul */
.final { padding: 8vh 16px 16vh; padding: 8svh 16px 16svh; max-width: 1100px; margin: 0 auto; text-align: center; }
.final__photos { display: grid; gap: 22px; justify-items: center; margin-bottom: 8vh; margin-bottom: 8svh; }
.frame--final {
  width: min(100%, 520px, calc(70vh * var(--ar)));
  width: min(100%, 520px, calc(70svh * var(--ar)));
  border-radius: 24px;
  border: 8px solid #fff;
  box-shadow: var(--glow);
}
.final__photos .frame--final:nth-child(odd) { rotate: -2deg; }
.final__photos .frame--final:nth-child(even) { rotate: 2deg; }
.final__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(36px, 8vw, 72px) clamp(22px, 6vw, 64px);
  border-radius: 34px;
  color: #fff;
  background: linear-gradient(150deg, #c2185b 0%, #f0489e 55%, #c888c8 100%);
  box-shadow: 0 40px 80px -40px rgba(194, 24, 91, .9);
}
.final__message {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 5.8vw, 2.3rem);
  line-height: 1.32;
  max-width: 28ch;
  margin: 0 auto;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.final__message p + p { margin-top: 1em; }
.final__heart { font-size: 2.4rem; margin-top: 1.8rem; animation: beat 1.6s ease-in-out infinite; }

/* Apariția la scroll (doar cu JavaScript activ) */
html.js .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}
html.js .reveal.is-visible { opacity: 1; transform: none; }
html.js .polaroid.reveal { transform: rotate(var(--tilt)) translateY(48px) scale(.94); }
html.js .polaroid.reveal.is-visible { transform: rotate(var(--tilt)); }

/* Blocarea până pe 8 octombrie */
.lock { display: none; }
html.locked .page { display: none; }
html.locked .lock {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-content: center;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  color: #fff;
  padding: 24px 16px;
  background: linear-gradient(160deg, #c2185b 0%, #f0489e 50%, #e87888 100%);
}
.lock > :not(.blobs) { position: relative; z-index: 1; }
.lock__heart { font-size: 2.6rem; animation: beat 1.6s ease-in-out infinite; }
.lock__title { font-family: var(--serif); font-size: clamp(1.9rem, 7.5vw, 3rem); font-weight: 650; margin: 1rem 0 .75rem; }
.lock__text { font-size: clamp(1rem, 4vw, 1.15rem); opacity: .92; }
.lock__date {
  display: inline-block;
  margin-top: 1.8rem;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  background: #ffffff33;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .85rem;
}
.lock__countdown { margin-top: 1.2rem; min-height: 1.5em; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1.15rem; }
@keyframes beat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.18); }
  30% { transform: scale(1); }
}

/* Tabletă */
@media (min-width: 768px) {
  .mosaic { columns: 3; column-gap: 16px; }
  .frame--mosaic { margin-bottom: 16px; }
  .final__photos { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); align-items: center; }
}

/* Laptop */
@media (min-width: 960px) {
  .moment { padding: 16vh 6vw; padding: 16svh 6vw; }
  .pill { font-size: .85rem; }
  .reason__text { font-size: clamp(2.4rem, 3.6vw, 3.8rem); }

  .moment--plin { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); justify-items: stretch; align-items: center; gap: 6vw; padding: 10vh 8vw; padding: 10svh 8vw; }
  .moment--plin .frame--plin { justify-self: end; width: min(100%, calc(78vh * var(--ar))); width: min(100%, calc(78svh * var(--ar))); }
  .plin__text { text-align: left; max-width: 34rem; }
  .plin__text .reason__text { max-width: 16ch; }

  .moment--editorial { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 6vw; }
  .moment--editorial > * { max-width: none; margin: 0; }
  .moment--flip .editorial__text { order: 2; }
  .moment--flip .frame--editorial { justify-self: end; }
  .editorial__text { margin: 0; }
  .editorial__num { font-size: clamp(8rem, 13vw, 14rem); }

  .moment--arcada { display: grid; grid-template-columns: auto minmax(0, 32rem); justify-content: center; align-items: center; gap: 7vw; }
  .moment--arcada .arch { margin: 0; }
  .moment--arcada .moment__text { text-align: left; margin: 0; }

  .polaroid { width: min(520px, calc(70vh * var(--ar) + 28px)); width: min(520px, calc(70svh * var(--ar) + 28px)); }
  .mosaic { columns: 4; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .polaroid.reveal { opacity: 1; transition: none; }
  html.js .reveal { transform: none; }
  html.js .polaroid.reveal { transform: rotate(var(--tilt)); }
  .blobs span, .ribbon__track, .hero__hint, .lock__heart, .final__heart { animation: none; }
}