/* ==========================================================
   Envelope WebGL Layer Styles
   
   📍 RSVP FORM POSITION ADJUSTMENT:
   
   Find #rsvp-paper below (line ~45) and change the calc() value:
   
   transform: translate(-50%, calc(-50% + 8vh));
                                         ^^^
                                    CHANGE THIS
   
   - Form too HIGH: INCREASE the number (try +10vh, +12vh, +15vh)
   - Form too LOW: DECREASE the number (try +5vh, +3vh, 0vh)
   - Perfectly centered: Use 0vh
   - Current: +8vh (slightly below center)
   
   Change this in THREE places (lines ~47, ~108, ~151)
   
   ========================================================== */

#envelope-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
}

#envelope-layer canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ==========================================================
   RSVP Paper Overlay
   ========================================================== */

#rsvp-paper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 48vh));  /* Offset from center: positive = down, negative = up */
  
  width: min(440px, 85vw);
  max-height: 75vh;
  overflow-y: auto;
  
  /* Realistic paper texture background */
  background: 
    /* Subtle paper grain */
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.01) 0px,
      transparent 1px,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.01) 0px,
      transparent 1px,
      transparent 2px,
      rgba(0, 0, 0, 0.01) 3px
    ),
    /* Subtle radial lighting */
    radial-gradient(
      ellipse at 30% 20%,
      rgba(255, 255, 255, 0.4) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 70% 80%,
      rgba(255, 253, 240, 0.3) 0%,
      transparent 50%
    ),
    /* Base gradient */
    linear-gradient(135deg, #fdfbf7 0%, #faf8f0 50%, #f7f5ed 100%);
  
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 4px;
  
  /* Realistic paper shadow with light coming from top-left */
  box-shadow:
    /* Main shadow */
    0 30px 90px rgba(0, 0, 0, 0.4),
    0 15px 40px rgba(0, 0, 0, 0.25),
    /* Soft inner shadow on right/bottom (paper curl effect) */
    inset -1px -1px 2px rgba(0, 0, 0, 0.08),
    /* Highlight on top/left edge */
    inset 2px 2px 3px rgba(255, 255, 255, 0.9),
    /* Subtle gold glow */
    0 0 40px rgba(255, 215, 0, 0.15);
  
  padding: 2.5rem 2rem;
  z-index: 20;
  
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  
  transition: all 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translate(-50%, calc(-50% + 48vh)) scale(0.92) translateY(0px);
  
  /* Paper texture overlay */
  position: relative;
}

/* Add paper fiber texture overlay */
#rsvp-paper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.05"/></svg>');
  border-radius: 4px;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.3;
}

/* Subtle vignette effect */
#rsvp-paper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 60%,
    rgba(0, 0, 0, 0.02) 100%
  );
  border-radius: 4px;
  pointer-events: none;
}

#rsvp-paper.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, calc(-50% + 48vh)) scale(1) translateY(20px);
}

/* Staggered animation for form fields */
#rsvp-paper.visible .rsvp-header {
  animation: fadeInUp 600ms ease-out 100ms both;
}

#rsvp-paper.visible .field:nth-child(1) {
  animation: fadeInUp 600ms ease-out 200ms both;
}

#rsvp-paper.visible .field:nth-child(2) {
  animation: fadeInUp 600ms ease-out 300ms both;
}

#rsvp-paper.visible .field:nth-child(3) {
  animation: fadeInUp 600ms ease-out 400ms both;
}

#rsvp-paper.visible .rsvp-submit {
  animation: fadeInUp 600ms ease-out 500ms both;
}

#rsvp-paper.visible .rsvp-footnote {
  animation: fadeInUp 600ms ease-out 600ms both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================
   RSVP Form Styles
   ========================================================== */

#rsvp-form {
  font-family: 'Georgia', 'Times New Roman', serif;
  color: #2c3e50;
}

.rsvp-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid rgba(255, 215, 0, 0.3);
  position: relative;
}

/* Decorative gold line accents */
.rsvp-header::before,
.rsvp-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  height: 1px;
  width: 60px;
  background: linear-gradient(90deg, transparent, #ffd700, transparent);
}

.rsvp-header::before {
  left: 50%;
  transform: translateX(-80px);
}

.rsvp-header::after {
  left: 50%;
  transform: translateX(20px);
}

.rsvp-kicker {
  font-size: 0.875rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffd700;
  font-weight: 600;
  margin-bottom: 0.5rem;
  
  /* Golden shimmer effect */
  background: linear-gradient(90deg, #e6be46 0%, #ffd700 50%, #ffed4e 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  
  text-shadow: 0 1px 2px rgba(255, 215, 0, 0.3);
  
  animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
  to {
    background-position: 200% center;
  }
}

.rsvp-header h2 {
  font-size: 1.75rem;
  font-weight: 400;
  margin: 0.5rem 0;
  color: #2c3e50;
  letter-spacing: 0.02em;
  
  /* Elegant embossed text effect */
  text-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.8),
    0 2px 3px rgba(0, 0, 0, 0.1);
  
  position: relative;
}

.rsvp-sub {
  font-size: 0.9rem;
  color: #5a6c7d;
  font-style: italic;
  margin-top: 0.5rem;
}

.rsvp-date {
  font-weight: 600;
  color: #ffd700;
  font-style: normal;
}

/* Form Grid */
.rsvp-grid {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.field.field-full {
  grid-column: 1 / -1;
}

.label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4a5568;
  letter-spacing: 0.02em;
  
  /* Subtle embossed effect */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  
  position: relative;
  padding-left: 8px;
}

/* Decorative accent before labels */
.label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 12px;
  background: linear-gradient(to bottom, #ffd700, #e6be46);
  border-radius: 2px;
  opacity: 0.6;
}

/* Inputs */
input[type="text"],
select,
textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid rgba(255, 215, 0, 0.25);
  border-radius: 3px;
  
  /* Subtle inset paper effect */
  background: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.02) 0%, transparent 3px),
    rgba(255, 255, 255, 0.5);
  
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1rem;
  color: #2c3e50;
  
  /* Subtle inset shadow */
  box-shadow: 
    inset 0 1px 3px rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.5);
  
  transition: all 200ms ease;
}

input[type="text"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #ffd700;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15);
}

textarea {
  resize: vertical;
  min-height: 80px;
  font-family: 'Georgia', 'Times New Roman', serif;
}

/* Submit Button */
.rsvp-submit {
  width: 100%;
  padding: 1rem 2rem;
  
  /* Metallic gold gradient with highlights */
  background: 
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, transparent 50%, rgba(0, 0, 0, 0.15) 100%),
    linear-gradient(135deg, #ffd700 0%, #e6be46 100%);
  
  color: #ffffff;
  
  border: none;
  border-radius: 3px;
  
  /* Metallic edge */
  outline: 1px solid rgba(255, 237, 78, 0.4);
  outline-offset: -1px;
  
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  
  /* Engraved text effect */
  text-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.3),
    0 -1px 0 rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2);
  
  cursor: pointer;
  transition: all 250ms ease;
  
  /* 3D depth effect */
  box-shadow:
    0 1px 0 rgba(255, 237, 78, 0.8) inset,
    0 -1px 0 rgba(230, 190, 70, 0.8) inset,
    0 6px 15px rgba(255, 215, 0, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.15);
  
  position: relative;
  overflow: hidden;
}

/* Metallic shine effect */
.rsvp-submit::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  transform: rotate(45deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.rsvp-submit:hover {
  background: 
    linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%, rgba(0, 0, 0, 0.1) 100%),
    linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
  
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -1px 0 rgba(255, 215, 0, 0.9) inset,
    0 8px 20px rgba(255, 215, 0, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.2);
  
  transform: translateY(-1px);
}

.rsvp-submit:active {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(230, 190, 70, 0.9) inset,
    0 -1px 0 rgba(255, 237, 78, 0.6) inset,
    0 3px 10px rgba(255, 215, 0, 0.4),
    0 1px 5px rgba(0, 0, 0, 0.2);
}

/* Footnote */
.rsvp-footnote {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  
  font-size: 0.75rem;
  color: #8795a1;
  text-align: center;
  font-style: italic;
}

/* Mobile Adjustments */
@media (max-width: 640px) {
  #rsvp-paper {
    padding: 2rem 1.5rem;
  }
  
  .rsvp-header h2 {
    font-size: 1.5rem;
  }
  
  .rsvp-grid {
    gap: 1rem;
  }
}

/* Scrollbar Styling */
#rsvp-paper::-webkit-scrollbar {
  width: 8px;
}

#rsvp-paper::-webkit-scrollbar-track {
  background: rgba(212, 175, 55, 0.05);
  border-radius: 4px;
}

#rsvp-paper::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.3);
  border-radius: 4px;
}

#rsvp-paper::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 55, 0.5);
}