/* =========================================================
   POICHÈ VIVO PER TE — KARINA
   Финальный романтический дизайн
   ========================================================= */

* {
  box-sizing: border-box;
}

:root {
  --bg: #080509;
  --bg2: #130912;
  --bg3: #1c0d17;

  --text: #fff4f7;
  --text-soft: #f3dbe4;
  --muted: #bfa3ae;

  --accent: #ff5f91;
  --accent-light: #ffabc5;
  --accent-dark: #a92858;

  --card: rgba(255, 255, 255, 0.055);
  --card-strong: rgba(255, 255, 255, 0.085);
  --border: rgba(255, 180, 205, 0.16);

  --shadow:
    0 30px 100px rgba(0, 0, 0, 0.5);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: Montserrat, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 50% -10%,
      rgba(255, 74, 126, 0.22),
      transparent 34%
    ),
    radial-gradient(
      circle at 0% 45%,
      rgba(154, 35, 95, 0.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 100% 70%,
      rgba(255, 75, 135, 0.08),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #080509 0%,
      #0d070c 45%,
      #120811 100%
    );

  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
}

/* =========================================================
   Фоновая текстура
   ========================================================= */

body::before {
  content: "";
  position: fixed;
  inset: 0;

  pointer-events: none;
  z-index: 100;

  background-image:
    radial-gradient(
      rgba(255, 255, 255, 0.13) 1px,
      transparent 1px
    );

  background-size: 38px 38px;
  opacity: 0.055;
}
/* =========================================================
   Grain
   ========================================================= */

.grain {
  position: fixed;
  inset: -50%;

  pointer-events: none;
  z-index: 101;

  opacity: 0.025;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

main {
  position: relative;
  z-index: 2;
}

/* =========================================================
   HERO
   ========================================================= */

.hero {
  min-height: 100vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  position: relative;

  padding: 70px 20px;

  text-align: center;

  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;

  width: min(900px, 95vw);
  height: min(900px, 95vw);

  left: 50%;
  top: 45%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 65, 126, 0.15),
      rgba(255, 65, 126, 0.04) 40%,
      transparent 70%
    );

  filter: blur(5px);

  pointer-events: none;
}

.hero-glow {
  position: absolute;

  width: 55vw;
  height: 55vw;

  max-width: 750px;
  max-height: 750px;

  border-radius: 50%;

  background: rgba(255, 63, 122, 0.10);

  filter: blur(100px);

  animation: pulse 6s ease-in-out infinite;

  pointer-events: none;
}

.date,
.subtitle,
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.28em;

  color: var(--muted);

  font-size: 0.7rem;
}

.date {
  position: relative;
  z-index: 2;

  padding: 9px 16px;

  border: 1px solid rgba(255, 174, 201, 0.12);
  border-radius: 100px;

  background: rgba(255, 255, 255, 0.025);

  backdrop-filter: blur(10px);

  box-shadow:
    0 0 30px rgba(255, 70, 130, 0.05);
}

.hero h1 {
  position: relative;
  z-index: 2;

  margin: 28px 0 0;

  font-family: var(--serif);

  font-size: clamp(5.5rem, 17vw, 12rem);

  line-height: 0.72;

  font-weight: 500;

  letter-spacing: -0.045em;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #ffe4ec 48%,
      #ff9fbd 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;

  text-shadow:
    0 0 55px rgba(255, 91, 140, 0.16);

  animation: heroTitle 2s ease both;
}

.subtitle {
  position: relative;
  z-index: 2;

  margin-top: 42px;

  color: var(--accent-light);

  font-family: var(--serif);

  font-size: clamp(1.5rem, 4vw, 2.45rem);

  text-transform: none;

  letter-spacing: 0.055em;

  text-shadow:
    0 0 35px rgba(255, 100, 150, 0.22);
}

.scroll-hint {
  position: absolute;

  bottom: 28px;

  z-index: 3;

  color: var(--accent-light);

  font-size: 1.4rem;

  opacity: 0.8;

  animation: bounce 1.8s ease-in-out infinite;
}

/* =========================================================
   SECTIONS
   ========================================================= */

.section {
  width: min(1080px, calc(100% - 32px));

  margin: 0 auto;

  padding: 105px 0;
}

.section-heading {
  text-align: center;

  margin-bottom: 48px;
}

.section-heading p {
  max-width: 650px;

  margin: -12px auto 0;

  color: var(--muted);

  line-height: 1.8;

  font-size: 0.92rem;
}

.eyebrow {
  color: var(--accent-light);

  opacity: 0.8;

  font-size: 0.65rem;
}

h2 {
  margin: 10px 0 30px;

  font-family: var(--serif);

  font-weight: 500;

  font-size: clamp(3rem, 7vw, 5.2rem);

  line-height: 0.95;

  letter-spacing: -0.025em;
}

/* =========================================================
   CARDS
   ========================================================= */

.card {
  position: relative;

  padding: clamp(30px, 6vw, 75px);

  border: 1px solid var(--border);

  border-radius: 32px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.025)
    );

  box-shadow: var(--shadow);

  backdrop-filter: blur(16px);

  overflow: hidden;
}

.card::before {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  right: -130px;
  top: -130px;

  border-radius: 50%;

  background: rgba(255, 83, 139, 0.09);

  filter: blur(40px);

  pointer-events: none;
}

.card::after {
  content: "";

  position: absolute;

  left: 8%;
  right: 8%;
  top: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 170, 198, 0.4),
      transparent
    );

  opacity: 0.5;
}

.dedication {
  text-align: center;
}

.poem {
  position: relative;
  z-index: 2;

  max-width: 750px;

  margin: auto;

  font-family: var(--serif);

  font-size: clamp(1.35rem, 2.7vw, 1.8rem);

  line-height: 1.65;

  color: var(--text-soft);
}

/* =========================================================
   TIMER
   ========================================================= */

.timer {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 15px;

  margin-top: 15px;
}

.time-box {
  position: relative;

  padding: 30px 12px;

  text-align: center;

  border: 1px solid rgba(255, 180, 205, 0.13);

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0.025)
    );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 15px 50px rgba(0, 0, 0, 0.18);

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.time-box:hover {
  transform: translateY(-6px);

  border-color: rgba(255, 135, 175, 0.35);

  box-shadow:
    0 20px 60px rgba(255, 54, 120, 0.10);
}

.time-box strong {
  display: block;

  font-family: var(--serif);

  font-size: clamp(2.8rem, 6vw, 4.7rem);

  font-weight: 500;

  line-height: 1;

  background:
    linear-gradient(
      180deg,
      #fff,
      #ffb1c9
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.time-box span {
  display: block;

  margin-top: 10px;

  color: var(--muted);

  text-transform: uppercase;

  letter-spacing: 0.17em;

  font-size: 0.6rem;
}

/* =========================================================
   GALLERY
   ========================================================= */

.gallery {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 24px;
}

.photo-card {
  position: relative;

  margin: 0;

  min-height: 390px;

  overflow: hidden;

  border: 1px solid rgba(255, 190, 210, 0.15);

  border-radius: 26px;

  background: #140a10;

  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.38);

  transform: translateZ(0);

  transition:
    transform 0.5s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.5s ease,
    border-color 0.5s ease;
}

.photo-card::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.02),
      transparent 55%,
      rgba(0, 0, 0, 0.3)
    );
}

.photo-card:hover {
  transform: translateY(-9px) scale(1.012);

  border-color: rgba(255, 145, 180, 0.34);

  box-shadow:
    0 35px 90px rgba(0, 0, 0, 0.5),
    0 0 35px rgba(255, 60, 125, 0.07);
}

.photo-card img {
  width: 100%;
  height: 100%;
  min-height: 390px;

  display: block;

  object-fit: cover;

  transition:
    transform 0.8s cubic-bezier(.2,.8,.2,1),
    filter 0.5s ease;
}

.photo-card:hover img {
  transform: scale(1.055);

  filter: saturate(1.05);
}

/* =========================================================
   ВАЖНО:
   Заглушка скрыта по умолчанию.
   Появляется только если фотография не загрузилась.
   ========================================================= */

.photo-placeholder {
  position: absolute;

  inset: 0;

  display: none;

  align-items: center;
  justify-content: center;

  flex-direction: column;

  color: var(--muted);

  background:
    radial-gradient(
      circle at center,
      rgba(255, 99, 146, 0.14),
      transparent 45%
    ),
    #160d12;

  text-align: center;

  z-index: 5;
}

.photo-placeholder.visible {
  display: flex;
}

.photo-placeholder small {
  margin-top: 8px;

  opacity: 0.55;
}

/* =========================================================
   ENVELOPE
   ========================================================= */

.envelope-wrap {
  display: block;

  margin: 0 auto;

  padding: 30px;

  border: 0;

  background: none;

  color: inherit;

  cursor: pointer;
}

.envelope {
  width: min(460px, 82vw);
  height: 285px;

  position: relative;

  perspective: 1000px;

  filter:
    drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45));

  transition:
    transform 0.45s ease,
    filter 0.45s ease;
}

.envelope-wrap:hover .envelope {
  transform: translateY(-7px);

  filter:
    drop-shadow(0 38px 50px rgba(0, 0, 0, 0.5));
}

.envelope-back {
  position: absolute;

  inset: 0;

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      #8f2850,
      #47142d
    );

  border: 1px solid rgba(255, 200, 220, 0.22);

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.envelope-back::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      135deg,
      transparent 48%,
      rgba(255, 180, 205, 0.12) 49%,
      transparent 51%
    );

  opacity: 0.6;
}

.letter-paper {
  position: absolute;

  left: 7%;
  top: 9%;

  width: 86%;
  height: 84%;

  border-radius: 7px;

  background:
    linear-gradient(
      180deg,
      #fffafd,
      #fff1f5
    );

  color: #5d2639;

  padding: 28px;

  text-align: left;

  transform: translateY(20px);

  transition:
    transform 0.9s cubic-bezier(.2,.8,.2,1),
    box-shadow 0.9s ease;

  box-shadow:
    0 6px 25px rgba(0, 0, 0, 0.2);
}

.letter-mini-title {
  font-family: var(--serif);

  font-size: 1.8rem;

  color: #70233e;
}

.letter-lines {
  margin-top: 18px;

  height: 72px;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 12px,
      rgba(93, 38, 57, 0.16) 13px 14px
    );
}

.envelope-flap {
  position: absolute;

  inset: 0 0 auto;

  height: 56%;

  background:
    linear-gradient(
      160deg,
      #a73360,
      #591733
    );

  clip-path:
    polygon(
      0 0,
      100% 0,
      50% 100%
    );

  transform-origin: top;

  transition:
    transform 0.9s cubic-bezier(.2,.8,.2,1);

  z-index: 4;

  border-radius: 15px 15px 0 0;
}

.heart-seal {
  position: absolute;

  z-index: 6;

  left: 50%;
  top: 47%;

  transform: translate(-50%, -50%);

  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #ffb7cc,
      #ff5d91 55%,
      #d93169
    );

  color: white;

  font-size: 1.35rem;

  box-shadow:
    0 8px 30px rgba(255, 70, 130, 0.42),
    0 0 0 8px rgba(255, 100, 150, 0.06);

  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.envelope-wrap:hover .heart-seal {
  transform:
    translate(-50%, -50%)
    scale(1.08);
}

.envelope-wrap.open .envelope-flap {
  transform: rotateX(180deg);

  z-index: 2;
}

.envelope-wrap.open .letter-paper {
  transform: translateY(-110px);

  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.25);
}

.envelope-wrap.open .heart-seal {
  opacity: 0;

  transform:
    translate(-50%, -50%)
    scale(0.7);
}

.open-hint {
  display: block;

  margin-top: 18px;

  color: var(--muted);

  font-size: 0.68rem;

  text-transform: uppercase;

  letter-spacing: 0.2em;

  transition: opacity 0.3s ease;
}

.envelope-wrap:hover .open-hint {
  color: var(--accent-light);
}

/* =========================================================
   SECRET LETTER
   ========================================================= */

.secret-letter {
  max-width: 780px;

  margin: 85px auto 0;

  padding: clamp(32px, 6vw, 65px);

  position: relative;

  background:
    linear-gradient(
      145deg,
      #fffafd,
      #fff0f4
    );

  color: #3e1d2a;

  border-radius: 7px;

  box-shadow:
    0 35px 110px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.35);

  opacity: 0;

  transform: translateY(45px);

  pointer-events: none;

  transition:
    opacity 1.1s ease,
    transform 1.1s cubic-bezier(.2,.8,.2,1);

  font-family: var(--serif);

  font-size: 1.38rem;

  line-height: 1.72;

  overflow: hidden;
}

.secret-letter::before {
  content: "♥";

  position: absolute;

  right: 30px;
  top: 18px;

  color: rgba(160, 40, 88, 0.08);

  font-size: 5rem;

  transform: rotate(12deg);
}

.secret-letter::after {
  content: "";

  position: absolute;

  left: 7%;
  right: 7%;
  bottom: 25px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(150, 40, 88, 0.18),
      transparent
    );
}

.secret-letter.visible {
  opacity: 1;

  transform: translateY(0);

  pointer-events: auto;
}

.secret-letter p {
  margin: 0 0 24px;
}

.final-line {
  position: relative;
  z-index: 2;

  margin-top: 35px;

  font-size: clamp(1.8rem, 4vw, 2.4rem);

  line-height: 1.2;

  text-align: center;

  color: #9e315a;

  font-weight: 600;
}

.letter-sign {
  margin-top: 40px;

  text-align: right;

  color: #9e315a;

  font-size: 1.65rem;

  font-style: italic;
}

/* =========================================================
   FOOTER
   ========================================================= */

footer {
  position: relative;

  text-align: center;

  padding: 80px 20px 55px;

  color: var(--muted);

  font-size: 0.7rem;

  letter-spacing: 0.13em;
}

footer::before {
  content: "♥";

  display: block;

  margin-bottom: 20px;

  color: var(--accent);

  font-size: 1.2rem;

  opacity: 0.8;
}

footer span {
  display: block;

  margin-top: 12px;

  color: var(--accent-light);

  font-family: var(--serif);

  font-size: 1.25rem;

  letter-spacing: 0.04em;
}

/* =========================================================
   ПЛАВАЮЩИЕ СЕРДЦА
   ========================================================= */

.heart {
  position: fixed;

  left: var(--x);
  bottom: -30px;

  z-index: 1;

  color: var(--accent);

  opacity: 0;

  pointer-events: none;

  animation:
    floatHeart var(--duration) linear forwards;

  font-size: var(--size);

  filter:
    drop-shadow(
      0 0 7px rgba(255, 72, 135, 0.35)
    );
}

/* =========================================================
   REVEAL
   ========================================================= */

.reveal {
  opacity: 1;

  transform: translateY(0);
}

.delay-1,
.delay-2,
.delay-3 {
  transition-delay: 0s;
}

/* =========================================================
   АНИМАЦИИ
   ========================================================= */

@keyframes pulse {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.65;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes heroTitle {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
    filter: blur(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(9px);
  }
}

@keyframes floatHeart {
  0% {
    transform:
      translateY(0)
      rotate(0deg)
      scale(0.7);

    opacity: 0;
  }

  12% {
    opacity: 0.65;
  }

  100% {
    transform:
      translateY(-115vh)
      rotate(25deg)
      scale(1.1);

    opacity: 0;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .hero {
    min-height: 100svh;

    padding:
      60px 18px
      80px;
  }

  .hero h1 {
    font-size: clamp(4.7rem, 25vw, 7rem);

    line-height: 0.78;
  }

  .subtitle {
    margin-top: 34px;

    font-size: 1.45rem;

    line-height: 1.15;
  }

  .date {
    font-size: 0.58rem;

    letter-spacing: 0.2em;
  }

  .section {
    width: min(100% - 24px, 1080px);

    padding: 75px 0;
  }

  .card {
    padding:
      30px 20px;

    border-radius: 24px;
  }

  h2 {
    font-size: 3.1rem;
  }

  .poem {
    font-size: 1.28rem;

    line-height: 1.6;
  }

  .timer {
    grid-template-columns: repeat(2, 1fr);

    gap: 10px;
  }

  .time-box {
    padding: 24px 8px;

    border-radius: 18px;
  }

  .time-box strong {
    font-size: 3rem;
  }

  .time-box span {
    font-size: 0.55rem;

    letter-spacing: 0.11em;
  }

  .gallery {
    grid-template-columns: 1fr;

    gap: 18px;
  }

  .photo-card {
    min-height: 330px;

    border-radius: 22px;
  }

  .photo-card img {
    min-height: 330px;
  }

  .photo-card:hover {
    transform: none;
  }

  .photo-card:hover img {
    transform: none;
  }

  .envelope-wrap {
    padding: 20px 5px;
  }

  .envelope {
    width: min(430px, 92vw);

    height: 220px;
  }

  .letter-paper {
    padding: 20px;
  }

  .letter-mini-title {
    font-size: 1.45rem;
  }

  .letter-lines {
    height: 52px;
  }

  .secret-letter {
    margin-top: 70px;

    padding: 30px 23px;

    font-size: 1.2rem;

    line-height: 1.65;
  }

  .final-line {
    font-size: 1.8rem;
  }

  .letter-sign {
    font-size: 1.45rem;
  }

  footer {
    padding-top: 65px;
  }
}

/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .hero h1 {
    font-size: 4.5rem;
  }

  .subtitle {
    font-size: 1.25rem;
  }

  .time-box strong {
    font-size: 2.6rem;
  }

  .photo-card,
  .photo-card img {
    min-height: 290px;
  }

  .secret-letter {
    font-size: 1.12rem;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}