/* ═══════════════════════════════════════════════════════════════
   HERO — карточка с именами, календарь,
   intro-конверт с восковой печатью
   ═══════════════════════════════════════════════════════════════ */

.hero {
  /* карточка с отступами, не на всю ширину */
  width: calc(100% - 4rem);
  max-width: 1152px;
  margin: 2rem auto;
  min-height: calc(100vh - 4rem);

  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  /* Сдвиг центра имён чуть вниз (через padding-top) */
  padding-top: clamp(3rem, 10vh, 8rem);
  text-align: center;
  position: relative;

  border-radius: 28px;
  background:
    /* кремовый полупрозрачный градиент сверху для читаемости текста */
    linear-gradient(180deg,
      rgba(255,252,247,0.55) 0%,
      rgba(232,213,188,0.45) 45%,
      rgba(255,252,247,0.55) 100%),
    /* фото-фон под градиентом */
    url('../images/photo_4.jpg') center/cover no-repeat;
  border: 1px solid rgba(201,169,110,0.40);
  box-shadow:
    0 30px 80px rgba(120,90,40,0.20),
    0 4px  16px rgba(120,90,40,0.12),
    inset 0 0 0 1px rgba(255,252,247,0.50);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 600px 400px at 15% 20%, rgba(212,190,158,0.15), transparent),
    radial-gradient(ellipse 500px 500px at 85% 75%, rgba(201,169,110,0.10), transparent);
  pointer-events: none;
}

.hero-botanical {
  position: absolute; font-size: 280px; opacity: 0.04;
  color: var(--sage-deep); pointer-events: none;
}
.hero-botanical.left  { top: 5%;    left: -4%;  transform: rotate(-25deg); }
.hero-botanical.right { bottom: 5%; right: -4%; transform: rotate(155deg); }

/* ─── Hero text ─── */
.hero-names {
  font-family: 'Aquarelle', 'ScriptThinpen', 'Marck Script', cursive;
  font-size: clamp(2.5rem, 6.5vw, 5.5rem);
  font-weight: 300;
  letter-spacing: 1px;
  /* Белая заливка + золотая обводка */
  color: #FFFCF7;
  -webkit-text-stroke: 1.2px var(--gold);
  paint-order: stroke fill;
  text-shadow:
    0 4px 14px rgba(120,90,40,0.30),
    0 2px 4px  rgba(255,250,235,0.50);
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  opacity: 0; animation: fadeUp 1s 0.6s forwards;
}
.hero-ampersand {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300; font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  color: var(--gold);
  margin: 0.3rem 0;
}
.hero-line {
  width: 60px; height: 1px;
  background: var(--gold); margin: clamp(1.4rem, 2vw, 2rem) auto;
  opacity: 0; animation: fadeUp 1s 1.1s forwards;
}
.hero-scroll {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(0.4rem, 0.7vw, 0.6rem);
  width: fit-content;
  margin: clamp(0.5rem, 1.5vw, 1.2rem) auto clamp(0.5rem, 1.5vw, 1rem);
  opacity: 0; animation: fadeUp 1s 1.4s forwards;
}
.hero-scroll span {
  font-size: 0.6rem; letter-spacing: 3px; text-transform: uppercase;
  color: var(--taupe);
}
.scroll-line {
  width: 1px; height: 40px; background: var(--gold);
  animation: scrollPulse 2s infinite;
}


/* ─── Hero calendar — почти в самом низу hero, по центру ─── */
.hero-calendar {
  position: absolute;
  bottom: clamp(1rem, 2vw, 2rem);
  left: 0; right: 0;
  margin-left: auto; margin-right: auto;
  width: fit-content;
  z-index: 2;
  display: block;
  padding: clamp(0.9rem, 1.2vw, 1.4rem) clamp(1rem, 1.5vw, 1.7rem) clamp(1rem, 1.3vw, 1.5rem);
  background: rgba(255, 252, 247, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(201,169,110,0.45);
  border-radius: 14px;
  box-shadow:
    0 8px 28px rgba(120,90,40,0.18),
    0 1px 4px  rgba(120,90,40,0.10);
  opacity: 0; animation: fadeUp 1s 0.9s forwards;
}
.cal-month {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 400;
  font-size: clamp(0.85rem, 1vw, 1.05rem);
  letter-spacing: clamp(2px, 0.4vw, 5px);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(0.7rem, 0.9vw, 1rem);
}
.cal-weekdays,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, clamp(22px, 2.1vw, 30px));
  gap: clamp(2px, 0.3vw, 4px);
}
.cal-weekdays { margin-bottom: clamp(4px, 0.5vw, 6px); }
.cal-weekdays span {
  text-align: center;
  font-size: clamp(0.50rem, 0.55vw, 0.58rem);
  letter-spacing: 2px;
  color: var(--text-light);
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  padding: 3px 0;
}
.cal-day {
  width:  clamp(22px, 2.1vw, 30px);
  height: clamp(22px, 2.1vw, 30px);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.78rem, 0.85vw, 0.95rem);
  color: var(--text);
  border-radius: 50%;
}
.cal-empty { visibility: hidden; }
/* Выделение даты — красное пульсирующее сердце */
.cal-highlight {
  position: relative;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: #FFFCF7;
  font-weight: 600;
  font-size: clamp(0.78rem, 0.9vw, 0.95rem);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  z-index: 1;
}
.cal-highlight::before {
  content: '';
  position: absolute;
  inset: -3px;
  z-index: -1;
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>") center/contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(170,20,20,0.5));
  animation: heartCellPulse 1.6s ease-in-out infinite;
}

/* ─── Envelope intro overlay ─── */
.envelope-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: radial-gradient(ellipse at center,
    var(--cream)  0%,
    var(--ivory) 50%,
    var(--beige) 100%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 1s ease, visibility 1s;
}
.envelope-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.envelope-stage {
  display: flex; flex-direction: column; align-items: center;
  perspective: 1600px;
}
.envelope-prelude {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.7rem; letter-spacing: 6px; text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 2.2rem;
  opacity: 0; animation: fadeUp 1s 0.3s forwards;
}
.envelope {
  position: relative;
  width: min(380px, 82vw);
  height: min(260px, 58vw);
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.7,0,0.2,1) 1.3s,
              opacity 0.8s ease 1.5s;
  opacity: 0; animation: fadeUp 1.2s 0.6s forwards;
}
.envelope-back {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #d8baa0 0%, #b89673 100%);
  border-radius: 3px;
  box-shadow: 0 25px 70px rgba(0,0,0,0.5),
              inset 0 0 0 1px rgba(255,255,255,0.12);
}
.envelope-front {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #E8D5C4 0%, #C9A37A 100%);
  clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%);
  border-radius: 3px;
  z-index: 2;
  box-shadow: inset 0 -20px 40px rgba(120,80,50,0.15);
}
.envelope-flap {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #DCC5A7 0%, #B89971 100%);
  clip-path: polygon(0 0, 50% 50%, 100% 0);
  transform-origin: top center;
  transition: transform 1.3s cubic-bezier(0.7,0,0.25,1) 0.4s;
  z-index: 3;
  backface-visibility: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Wax seal */
.envelope-seal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 96px; height: 96px;
  border-radius: 48% 52% 47% 53% / 51% 48% 52% 49%;
  border: none;
  cursor: pointer;
  z-index: 4;
  background:
    radial-gradient(circle at 18% 14%, rgba(232,195,120,0.55) 0%, transparent 14%),
    radial-gradient(circle at 78% 22%, rgba(70,15,15,0.75)    0%, transparent 17%),
    radial-gradient(circle at 25% 78%, rgba(50,8,8,0.7)       0%, transparent 16%),
    radial-gradient(circle at 70% 70%, rgba(210,160,80,0.4)   0%, transparent 18%),
    radial-gradient(circle at 50% 50%, rgba(170,90,40,0.3)    0%, transparent 30%),
    radial-gradient(circle at 32% 24%,
      #E0B670 0%,
      #A86628 22%,
      #6B2418 50%,
      #3F0E0E 80%,
      #2A0606 100%);
  box-shadow:
    inset 4px 5px 11px rgba(255,210,150,0.32),
    inset -4px -5px 13px rgba(35,5,5,0.95),
    0 5px  10px rgba(60,10,10,0.55),
    0 14px 32px rgba(40, 5, 5,0.7);
  display: flex; align-items: center; justify-content: center;
  color: #F5E5C5;
  transition: transform 0.5s ease, opacity 0.5s ease;
  animation: sealPulse 2.6s infinite;
}
.envelope-seal::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  border: 1px solid rgba(232,195,120,0.55);
  box-shadow:
    inset 0 0 2px rgba(245,220,160,0.3),
    0 1px 1px rgba(35,5,5,0.5);
  pointer-events: none;
}
.envelope-seal::after {
  content: '';
  position: absolute;
  width: 16px; height: 14px;
  bottom: -5px; right: -2px;
  border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
  background:
    radial-gradient(circle at 30% 30%, #8B4520 0%, #3F0E0E 55%, #2A0606 100%);
  box-shadow:
    inset 1px 2px 3px rgba(255,200,140,0.2),
    inset -1px -1px 3px rgba(20,3,3,0.9),
    0 2px 4px rgba(50,8,8,0.6);
  pointer-events: none;
}
.seal-text {
  font-family: 'Aquarelle', 'ScriptThinpen', 'Marck Script', cursive;
  font-size: 1.4rem;
  line-height: 1; letter-spacing: 1px;
  text-shadow:
    0 -1px 1px  rgba(35,5,5,0.95),
    0  1px 0    rgba(255,225,170,0.35),
    0  0   6px  rgba(232,195,120,0.55),
    0  0   12px rgba(232,195,120,0.25);
  display: flex; align-items: center; gap: 2px;
  position: relative; z-index: 1;
}
.seal-text em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.8em;
  opacity: 0.92;
  color: #FFE9B8;
}
.envelope-seal:hover {
  transform: translate(-50%, -50%) scale(1.06) rotate(-2deg);
}
.envelope-hint {
  margin-top: 2.5rem;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem; letter-spacing: 2px;
  color: var(--taupe);
  opacity: 0; animation: fadeUp 1s 1.2s forwards, hintFloat 2.4s 2.2s infinite;
}

/* Opening sequence — запускается классом .opening на overlay */
.envelope-overlay.opening .envelope-seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.6);
  animation: none;
  transition: opacity 0.45s ease, transform 0.6s ease;
}
.envelope-overlay.opening .envelope-flap {
  transform: rotateX(-180deg);
  transition-delay: 0.25s;
}
.envelope-overlay.opening .envelope {
  transform: scale(1.08) translateY(-10%);
  opacity: 0;
}
.envelope-overlay.opening .envelope-prelude,
.envelope-overlay.opening .envelope-hint {
  opacity: 0;
  animation: none;
  transition: opacity 0.4s ease;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .hero {
    width: calc(100% - 1.5rem);
    margin: 0.75rem auto;
    min-height: calc(100vh - 1.5rem);
    border-radius: 18px;
  }
}