/* ===== POPUP WRAPPER ===== */
.popup {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .5s ease;
}

.popup-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .82); /* solid fallback when backdrop-filter unavailable */
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .popup-backdrop {
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* ===== POPUP CONTAINER (paper sheet) ===== */
.popup-container {
  position: relative;
  width: 90%;
  max-width: 560px;
  max-height: 88vh;
  /* Flex-column keeps page-nav always visible at the bottom */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(160deg, #fff9f5 0%, #fff2f6 55%, #fffaf4 100%);
  border-radius: 20px;
  padding: 1.8rem 2.2rem 2.2rem;
  /* Extend bottom padding for iOS home-indicator safe area */
  padding-bottom: calc(2.2rem + env(safe-area-inset-bottom, 0px));
  box-shadow:
    0 0 0 1px rgba(220, 155, 175, .22),
    0 35px 70px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  transform: perspective(1400px) scale(.8) translateY(45px) rotateX(-8deg) rotate(-2deg);
  opacity: 0;
  /* Subtle ruled-paper lines */
  background-image:
    linear-gradient(160deg, #fff9f5 0%, #fff2f6 55%, #fffaf4 100%),
    repeating-linear-gradient(
      transparent, transparent 27px,
      rgba(220, 175, 195, .13) 27px, rgba(220, 175, 195, .13) 28px
    );
}

.popup.visible .popup-container {
  transform: perspective(1400px) scale(1) translateY(0) rotateX(0deg) rotate(0deg);
  opacity: 1;
  animation: containerGlow 5s ease-in-out 1.4s infinite alternate;
}

/* dvh respects collapsible browser chrome; vh is the fallback */
.popup-container {
  max-height: 88dvh;
  transition:
    transform .6s cubic-bezier(.22, 1, .36, 1),
    opacity   .45s ease;
}

/* ===== CLOSE BUTTON ===== */
.popup-close {
  position: absolute;
  top: .8rem;
  right: .9rem;
  background: rgba(255, 215, 225, .6);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.35rem;
  color: #b07080;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, color .2s, transform .25s;
  line-height: 1;
  touch-action: manipulation;
}

/* Expand hit area to 48×48 px without changing the visual circle */
.popup-close::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.popup-close:hover {
  background: #ff6b81;
  color: #fff;
  transform: rotate(90deg) scale(1.1);
}

/* ===== WAX SEAL (decorative) ===== */
.popup-seal-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: .4rem;
}

.popup-wax-seal {
  width: 64px;
  height: 64px;
  filter: drop-shadow(0 4px 10px rgba(160, 20, 50, .38));
  animation: sealEntrance .7s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: .3s;
}

/* ===== LETTER CONTENT ===== */
.popup-letter {
  color: #3a2035;
  padding-bottom: 1.8rem;
}

.letter-greeting {
  font-family: 'Dancing Script', cursive;
  font-size: 2.3rem;
  margin-bottom: .4rem;
  text-align: center;
  opacity: 0;
  animation: fadeSlideUp .6s ease forwards .4s, shimmerText 4.5s linear 1.2s infinite;
  /* Animated gradient shimmer text */
  background: linear-gradient(90deg, #c94070 0%, #e05585 22%, #c084fc 44%, #ff8fab 66%, #e05585 88%, #c94070 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Wave divider */
.letter-divider {
  margin: .4rem 0 .9rem;
  opacity: 0;
  animation: fadeSlideUp .6s ease forwards;
  animation-delay: .6s;
}

.letter-divider svg {
  display: block;
  width: 100%;
  height: 14px;
}

.letter-divider-flip {
  margin: .9rem 0 .5rem;
  animation-delay: 1.9s;
}

.letter-body p {
  font-size: 1.04rem;
  line-height: 1.85;
  margin-bottom: .9rem;
  color: #4a2c3a;
  overflow-wrap: break-word;    /* prevent long Portuguese words from overflowing on narrow screens */
  opacity: 0;
  transform: translateY(14px);
  filter: blur(3px);
  animation: fadeSlideUp .65s ease forwards;
}

.letter-body p:nth-child(1) { animation-delay: .75s; }
.letter-body p:nth-child(2) { animation-delay: 1.1s;  }
.letter-body p:nth-child(3) { animation-delay: 1.45s; }
.letter-body p:nth-child(4) { animation-delay: 1.8s;  }

.letter-signature {
  font-family: 'Dancing Script', cursive;
  font-size: 1.35rem;
  color: #b04060;
  text-align: right;
  position: relative;
  margin-top: .35rem;
  /* Always visible — no animation dependency so it can never get stuck at opacity 0 */
  opacity: 1;
}

/* ===== STYLED SIGNATURE BLOCK ===== */
.letter-sign {
  margin-top: 1.2rem;
  text-align: right;
}

.sign-closing {
  font-family: 'Dancing Script', cursive;
  font-size: 1.15rem;
  color: #b04060;
  margin: 0 0 .08rem;
}

.sign-name {
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
  font-weight: 700;
  margin: 0;
  background: linear-gradient(90deg, #c94070 0%, #e05585 25%, #c084fc 50%, #ff8fab 75%, #c94070 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 4.5s linear 1s infinite;
}

.sign-swash {
  display: block;
  margin-left: auto;
  width: min(160px, 58%);
  height: 18px;
  margin-top: .2rem;
  opacity: .8;
  overflow: visible;
}

/* Ink underline that draws in from left after signature appears */
.letter-signature::after {
  content: '';
  position: absolute;
  bottom: -.22rem;
  left: 0;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, #c084fc, #c94070, transparent);
  border-radius: 2px;
  animation: signatureUnderline .9s ease forwards;
  animation-delay: .4s;
}

.signature-name {
  font-size: 1.6rem;
  font-weight: 700;
  display: block;
}

/* ===== KEYFRAMES ===== */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

@keyframes sealEntrance {
  from { opacity: 0; transform: scale(.2) rotate(-25deg); }
  to   { opacity: 1; transform: scale(1)  rotate(0deg);  }
}

@keyframes shimmerText {
  0%   { background-position: 0%   center; }
  100% { background-position: 250% center; }
}

@keyframes signatureUnderline {
  from { width: 0;     opacity: 0; }
  to   { width: 100%;  opacity: 1; }
}

@keyframes containerGlow {
  0%   { box-shadow: 0 0 0 1px rgba(220,155,175,.22), 0 35px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.95); }
  100% { box-shadow: 0 0 0 1px rgba(220,155,175,.45), 0 35px 70px rgba(0,0,0,.42), 0 0 38px rgba(220,90,140,.14), inset 0 1px 0 rgba(255,255,255,.95); }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 480px) {
  .popup-container {
    width: 96%;
    max-height: 92dvh;
    max-height: 92vh;
    padding: 1.2rem 1.1rem 1.4rem;
    padding-bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px));
    border-radius: 16px;
  }
  .popup-wax-seal    { width: 48px; height: 48px; }
  .letter-greeting   { font-size: 1.75rem; }
  .letter-body p     { font-size: .93rem; line-height: 1.72; }
  .letter-signature  { font-size: 1.1rem; }
  .signature-name    { font-size: 1.28rem; }
  .sign-closing      { font-size: 1rem; }
  .sign-name         { font-size: 1.55rem; }
}

/* Landscape phone: hide seal, compress spacing */
@media (max-height: 520px) and (orientation: landscape) {
  .popup-container {
    max-height: 90vh;
    max-height: 90dvh;
    padding: .9rem 1.5rem 1.1rem;
    padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  }
  .popup-seal-wrapper { display: none; }
  .letter-greeting    { font-size: 1.6rem; margin-bottom: .15rem; }
  .letter-divider     { margin: .2rem 0 .5rem; }
  .letter-body p      { line-height: 1.6; margin-bottom: .55rem; }
}

/* =====================================================
   PHOTO STRIP  –  polaroid cards below the letter
   ===================================================== */
.photo-strip {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
  padding-bottom: .4rem;
  opacity: 0;
  animation: fadeSlideUp .65s ease forwards;
  animation-delay: 2.6s;
  perspective: 800px; /* enables 3D child transforms */
}

/* Each polaroid card */
.photo-card {
  --rot: 0deg; /* overridden per-card below */
  background: #fff;
  border-radius: 4px;
  padding: .45rem .45rem .9rem;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, .18),
    0 1px 3px  rgba(0, 0, 0, .12);
  cursor: pointer;
  transform: rotate(var(--rot)) scale(1);
  transition:
    transform .35s cubic-bezier(.22, 1, .36, 1),
    box-shadow .35s ease;
  width: calc(33% - .7rem);
  min-width: 80px;
  max-width: 130px;
  outline: none;
  transform-style: preserve-3d;
  /* Subtle paper grain via repeating noise */
  position: relative;
}

.photo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  border-radius: 4px;
  pointer-events: none;
}

/* Individual rotations — gives the "scattered photos" feeling */
.photo-card:nth-child(1) { --rot: -3deg; }
.photo-card:nth-child(2) { --rot:  2deg; }
.photo-card:nth-child(3) { --rot: -1.5deg; }

.photo-card:hover,
.photo-card:focus {
  transform: rotate(0deg) scale(1.1) translateY(-6px) rotateY(4deg);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .25),
    0 4px  10px rgba(0, 0, 0, .14),
    0 0   18px rgba(220, 80, 130, .18);
  z-index: 2;
}

/* Photo frame inside the polaroid */
.photo-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f0e8ec; /* placeholder tint while loading */
  border-radius: 2px;
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .4s ease;
}

.photo-card:hover .photo-frame img,
.photo-card:focus .photo-frame img {
  transform: scale(1.06);
}

/* Caption area (icon or short text) */
.photo-caption {
  text-align: center;
  font-size: .75rem;
  color: #b08090;
  margin-top: .35rem;
  letter-spacing: .02em;
}

/* =====================================================
   LIGHTBOX
   ===================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .6rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .lightbox {
    background: rgba(0, 0, 0, .82);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
  }
}

.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}

/* The image */
.lightbox-img-wrap {
  position: relative;
  max-width: min(88vw, 520px);
  max-height: 72vh;
  max-height: 72dvh;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  background: #1a0f16;
}

.lightbox-img-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 72vh;
  max-height: 72dvh;
  object-fit: contain;
  transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}

/* Swipe / transition states */
.lightbox-img-wrap img.lb-fade-out {
  opacity: 0;
  transform: scale(.94);
}

/* Close button */
.lightbox-close {
  position: absolute;
  top: calc(.9rem + env(safe-area-inset-top, 0px));
  right: calc(.9rem + env(safe-area-inset-right, 0px));
  background: rgba(255, 255, 255, .12);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.6rem;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
  touch-action: manipulation;
  z-index: 10;
}

.lightbox-close::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.lightbox-close:hover {
  background: rgba(255, 60, 90, .55);
  transform: rotate(90deg);
}

/* Prev / Next arrows */
.lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .1);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.8rem;
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
  touch-action: manipulation;
  z-index: 10;
  user-select: none;
}

.lightbox-arrow::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}

.lightbox-prev { left: calc(.8rem + env(safe-area-inset-left, 0px)); }
.lightbox-next { right: calc(.8rem + env(safe-area-inset-right, 0px)); }

.lightbox-arrow:hover {
  background: rgba(255, 255, 255, .22);
  transform: translateY(-50%) scale(1.1);
}

/* Dots indicator */
.lightbox-dots {
  display: flex;
  gap: .45rem;
}

.lightbox-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  transition: background .25s, transform .25s;
  cursor: pointer;
  touch-action: manipulation;
}

.lightbox-dot.active {
  background: #ff8fab;
  transform: scale(1.25);
}

/* ===== PHOTO MOBILE ===== */
@media (max-width: 480px) {
  .photo-strip { gap: .65rem; }
  .photo-card  { min-width: 72px; padding: .35rem .35rem .75rem; }
  .lightbox-arrow { width: 38px; height: 38px; font-size: 1.5rem; }
}

/* =====================================================
   TWO-PAGE SYSTEM
   ===================================================== */

/* ── Clip: fills remaining flex space, clips off-screen page ── */
.page-clip {
  flex: 1;
  min-height: 0;          /* required for flex children to shrink below content size */
  display: flex;          /* propagate definite height down via flex, not height:100% */
  flex-direction: column;
  overflow: hidden;       /* fallback for Safari < 16 */
  overflow: clip;         /* preferred: clips without creating a scroll container,
                             so child scrollbars are not suppressed in WebKit */
}

/* ── Track: two pages side-by-side, fills clip height ── */
.page-track {
  display: flex;
  width: 200%;        /* 2 pages × 100% of clip = 200% */
  flex: 1;            /* grow to fill page-clip (reliable alternative to height:100%) */
  min-height: 0;
  align-items: stretch;
  transition: transform .52s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

/* Slide to page 2 */
.page-track.on-page-2 {
  transform: translateX(-50%); /* -50% of track = -100% of one page = full slide */
}

/* Each page occupies exactly the popup-container width and scrolls internally */
.letter-page {
  width: 50%;         /* half the track = full container width */
  flex-shrink: 0;
  min-width: 0;       /* prevent flex blow-out */
  overflow-y: auto;   /* scroll only when content overflows */
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y; /* enable native touch scroll on mobile */
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 138, 162, .5) transparent;
}

/* WebKit/Blink overlay-style scrollbar: 3 px pill, floats inside padding so
   it never shifts the letter text sideways */
.letter-page::-webkit-scrollbar {
  width: 3px;
}
.letter-page::-webkit-scrollbar-track {
  background: transparent;
  margin-block: 6px;
}
.letter-page::-webkit-scrollbar-thumb {
  background: rgba(200, 138, 162, .55);
  border-radius: 99px;
}
.letter-page::-webkit-scrollbar-thumb:hover {
  background: rgba(200, 100, 140, .82);
}

/* ── Page 2 heading ── */
.page2-heading {
  font-family: 'Dancing Script', cursive;
  font-size: 1.9rem;
  margin-bottom: .4rem;
  text-align: center;
  /* Gradient shimmer (same as letter-greeting) */
  background: linear-gradient(90deg, #c94070 0%, #e05585 22%, #c084fc 44%, #ff8fab 66%, #e05585 88%, #c94070 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 4.5s linear infinite;
}

/* ── Page navigation bar — flex-shrink:0 keeps it always at bottom ── */
.page-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding-top: .85rem;
  margin-top: .5rem;
  border-top: 1px solid rgba(220, 175, 195, .22);
}

/* Arrow buttons */
.page-arrow {
  position: relative; /* needed so ::before expands the hit-area correctly */
  background: rgba(255, 215, 225, .55);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 1.1rem;
  color: #b07080;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .22s, color .22s, transform .22s;
  touch-action: manipulation;
  flex-shrink: 0;
}

/* Expand hit area */
.page-arrow::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.page-arrow:not(:disabled):hover {
  background: #ff6b81;
  color: #fff;
  transform: scale(1.12);
}

.page-arrow:disabled {
  opacity: .28;
  cursor: default;
}

/* Dot indicators */
.page-dots {
  display: flex;
  gap: .42rem;
  align-items: center;
}

.page-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  border: none;
  background: rgba(192, 132, 252, .28);
  cursor: pointer;
  padding: 0;
  transition: background .3s ease, width .3s ease, transform .3s ease;
  touch-action: manipulation;
}

.page-dot.active {
  width: 22px;
  background: linear-gradient(135deg, #c94070, #c084fc);
  transform: scale(1.08);
}

.page-dot:not(.active):hover {
  background: rgba(192, 132, 252, .55);
  transform: scale(1.15);
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .page2-heading { font-size: 1.55rem; }
  .page-arrow    { width: 30px; height: 30px; font-size: 1rem; }
  .page-nav      { gap: .5rem; padding-top: .65rem; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .page2-heading { font-size: 1.3rem; margin-bottom: .2rem; }
  .page-nav      { padding-top: .45rem; margin-top: .3rem; }
}

/* =====================================================
   PRIVACY — prevent text selection and media detaching
   ===================================================== */

/* Block text selection across all letter content */
.popup-container {
  -webkit-user-select: none;
  user-select: none;
}

/* Allow text selection inside close/nav buttons (hits the text fallback) */
.popup-close,
.page-arrow,
.page-dot {
  -webkit-user-select: none;
  user-select: none;
}

/* Prevent drag-and-drop detachment of images and lightbox photo */
.popup-container img,
.popup-container video,
.lightbox img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS long-press callout (Save Image) */
}