* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@font-face {
  font-family: 'AlbumScript';
  src: url('fonts/IntroDemo-BlackCAPS.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
	font-family: 'AnothershabbyCyrillic-Regular';
	src: url('fonts/anothershabbycyrillic-regular.eot'); /* IE 9 Compatibility Mode */
	src: url('fonts/anothershabbycyrillic-regular.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('fonts/anothershabbycyrillic-regular.woff2') format('woff2'), /* Super Modern Browsers */
		url('fonts/anothershabbycyrillic-regular.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
		url('fonts/anothershabbycyrillic-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		url('fonts/anothershabbycyrillic-regular.svg#anothershabbycyrillic-regular') format('svg'); /* Chrome < 4, Legacy iOS */
}

html, body {
  width: 100%;
  height: 100%;
  background: #f9f5f2;
  font-family: 'AlbumScript', serif;
  overflow-x: hidden;
  font-weight: bold;
}
#mobile-only-warning {
  position: fixed;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: #f9f5f2;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.mobile-locked > *:not(#mobile-only-warning) {
  display: none !important;
}

/* === Конверт === */
.envelope-scene {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 180px;
  transform: translate(-50%, -50%);
  z-index: 20;
  perspective: 800px;
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.envelope {
  width: 100%;
  height: 100%;
  background: #e7d5c5; /* или без текстуры */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-top: 10%;
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
  position: relative;
  overflow: visible;
text-align: center;  
padding: 10px;
}


.flap {
  position: absolute;
  width: 100%;
  height: 10%;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, #e7d5c5, #d9c2ae);
  transform: translateX(0) rotate(0deg);
  transform-origin: left center;
  transition: transform 0.6s ease, opacity 0.4s ease 0.4s; /* opacity чуть позже */
  z-index: 10; /* поверх всего */
  border-bottom: 1px solid #c4b2a0;
  margin-top: -2%;
}



.face {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.initials {
font-size: 20px;
  font-family: 'AnothershabbyCyrillic-Regular', sans-serif;
  color: #7b5e44;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* === Карточка === */
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
  opacity: 1;
  transition: opacity 1.2s ease;
}

.container.hidden {
  opacity: 0;
  pointer-events: none;
}

.bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 9 / 16;
  z-index: 0;
}

.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
  cursor: pointer;
  z-index: 2;
}

.arrow-icon {
  width: 60px;
  height: 60px;
  fill: none;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }
  40% { transform: translate(-50%, -10px); }
  60% { transform: translate(-50%, -5px); }
}

/* Следующий блок */
.next-section {
  height: 100vh;
  background-color: #f9f5f2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  padding: 40px;
}
@keyframes bounceUpDown {
  0%, 100% { transform: translateX(-50%) translateY(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-50%) translateY(-10px); }
}

.tap-icon {
  position: absolute;
  top:  100%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 45px;
  animation: bounceUpDown 2s infinite;
  z-index: 15;
  pointer-events: none;
}

.wedding-timer {
  background-color: #f9f5f2;
  text-align: center;
  padding: 20px 20px;
  
  color: #7b5e44;
}

.wedding-timer h2,
.wedding-timer h3 {
  font-size: 28px;
  margin-bottom: 10px;
  
}

.wedding-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.wedding-date img {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  color: #7b5e44;
}

.wedding-date .date,
.wedding-date .time {
  font-size: 15px;
  
}

.countdown {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: 25px;
  font-weight: bold;

}

.countdown .unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 2px solid #b99d7f;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  justify-content: center;
}

.countdown .unit p {
  font-size: 12px;
  font-weight: normal;
  margin-top: 4px;
}
.calendar-block {
  margin-top: 40px;
  text-align: center;
 
  color: #7b5e44;
}

.calendar-header .month {
  font-size: 28px;
  
  margin-bottom: 4px;
}

.calendar-header .year {
  font-size: 20px;
  margin-bottom: 20px;
}

.calendar-table {
  margin: 0 auto;
  border-collapse: collapse;
}

.calendar-table th,
.calendar-table td {
  width: 40px;
  height: 40px;
  text-align: center;
  border: 1px solid #d5c4b4;
  font-size: 16px;
  font-weight: bold;
}

.calendar-table th {
  background-color: #f0e7df;
  font-weight: bold;
}


.heart-svg {
  width: 40px;
  height: 40px;
  cursor: pointer;
  font-size: 13px;
}

.falling-heart {
  position: fixed;
  top: -20px;
  font-size: 20px;
  animation: fall 2s ease forwards;
  z-index: 99;
  pointer-events: none;
}

@keyframes fall {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) scale(1.5);
  }
}

.location-section {
  background-color: #f9f5f2;
  padding: 60px 20px;
  text-align: center;
}

.location-section h3 {
  font-size: 28px;
  margin-bottom: 30px;
  color: #7b5e44;
}

.location-card {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  animation: fadeIn 1.2s ease;
  margin-bottom: 10%;
}

.location-icon {
  font-size: 36px;
  color: #a0866e;
}

.location-info h4 {
  font-size: 24px;
  margin: 0;
  color: #7b5e44;
}

.location-info p {
  margin: 5px 0 0;
  color: #555;
  font-size: 18px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.map-container {
  margin-top: 5%;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  
}

.rsvp-title {
  color: #7b5e44;
  font-size: 27px;
  
  margin: 38px 0 20px 0;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.rsvp-form-inline {
  width: 100%;
  max-width: 430px;
  margin: 0 auto 40px auto;
  padding: 0;
  border: none;
  box-shadow: none;
  text-align: center;
  background-color: #f9f5f2;
}
.rsvp-fields {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 15px;
}
.rsvp-input {
  background: #fff;
  border: 2px solid #b99d7f;
  border-radius: 28px;
  padding: 13px 20px;
  font-size: 19px;
  width: 48%;
  color: #555;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  text-align: center;
  transition: border 0.2s;
  margin-bottom: 0;
}
.rsvp-input:focus {
  border-color: #d36c6c;
}
.rsvp-partner-wrap { margin: 12px 0 12px 0; }

#partner-input {
  visibility: hidden;
  
  width: 98%;
  margin: 0 auto;
  background: #fff;
}
.rsvp-radios {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 10px 18%;
}
.rsvp-radio {
  position: relative;
  font-size: 17px;
  cursor: pointer;
  padding-left: 36px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  user-select: none;
  line-height: 1.7;
}
.rsvp-radio input[type="radio"] {
  position: absolute;
  color:#555;
  opacity: 0;
  cursor: pointer;
}
.radio-custom {
  position: absolute;
  left: 0;
  top: 4px;
  height: 22px;
  width: 22px;
  background: #fff;
  border: 2px solid #b99d7f;
  border-radius: 50%;
  transition: border 0.2s;
}
.rsvp-radio input[type="radio"]:checked + .radio-custom {
  border: 7px solid #d36c6c;
}
.rsvp-btn {
  background: #a89273;
  color: #fff;
  font-size: 20px;
  border: none;
  border-radius: 28px;
  padding: 13px 36px;
  cursor: pointer;
  transition: background 0.18s;

  margin-top: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.rsvp-btn:hover {
  background: #d36c6c;
}
.rsvp-success {
  color: #41a963;
  font-size: 17px;
  margin-top: 13px;
  font-family: inherit;
}