/* ==========================================================================
   THE QUIET STRENGTH — GRADUATION CEREMONY INVITATION
   Authentic Canva Typography & Smooth Cinematic Blur-to-Clear Animations
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT DEFINITIONS (Matching Canva Design Image)
   - The Seasons: Luxury editorial serif
   - Playfair Display: High-contrast headline serif
   - Cardo: Classic clean body serif
   - Beautifully Delicious Script / Alex Brush: Signature calligraphy script
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'The Seasons';
  src: url('fonts/the_seasons.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Beautifully Delicious Script Regular';
  src: url('fonts/BDScript-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Beautifully Delicious Script';
  src: url('fonts/BDScript-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-dark: #1d1a18;
  --text-platinum: #f4f4f6;
  --text-silver-muted: #b4b6bc;
  --border-silver: rgba(255, 255, 255, 0.14);
  
  --font-the-seasons: 'The Seasons', 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-playfair: 'Playfair Display', 'The Seasons', Georgia, serif;
  --font-cardo: 'Cardo', Georgia, serif;
  --font-script: 'Beautifully Delicious Script Regular', 'Beautifully Delicious Script', 'Alex Brush', 'Pinyon Script', cursive;
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  --mobile-max-w: 430px;
  --ease-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 1, 0.5, 1);
}

/* --------------------------------------------------------------------------
   2. BASE & RESETS
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

html, body {
  width: 100%;
  height: 100%;
  height: -webkit-fill-available;
  overflow: hidden;
  background-color: #050506;
  font-family: var(--font-cardo);
  color: var(--text-platinum);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient Backdrop (Desktop Screen Presentation) */
.ambient-backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 30%, #17181c 0%, #050506 80%);
}

.ambient-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.22;
}

.glow-1 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, #383942 0%, transparent 70%);
  top: 15%;
  left: calc(50% - 225px);
  animation: glowFloat 12s infinite alternate ease-in-out;
}

.glow-2 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, #252830 0%, transparent 70%);
  bottom: 10%;
  left: calc(50% - 190px);
  animation: glowFloat 15s infinite alternate-reverse ease-in-out;
}

@keyframes glowFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -20px) scale(1.08); }
  100% { transform: translate(-15px, 15px) scale(0.95); }
}

/* Mobile Frame Wrapper */
/* Mobile Frame Wrapper & Story Scaling Canvas (393px x 852px base artboard, responsive scale on all phones) */
.mobile-frame-wrapper {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #1d1a18;
}

.story-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 393px;
  height: 852px;
  transform: translate(-50%, -50%) scale(var(--story-scale, 1));
  transform-origin: center center;
  overflow: hidden;
  background-color: #1d1a18;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.85);
  will-change: transform;
}

@media (min-width: 600px) {
  body {
    background-color: #0b0a09;
  }
  .mobile-frame-wrapper {
    background-color: transparent;
  }
  .story-container {
    border-radius: 40px;
    box-shadow: 
      0 25px 70px -15px rgba(0, 0, 0, 0.95),
      0 0 0 1px rgba(255, 255, 255, 0.12),
      0 0 60px rgba(0, 0, 0, 0.85);
  }
}

/* --------------------------------------------------------------------------
   NAVIGATION GUIDANCE BUTTONS (Previous / Next chevrons centered vertically on sides)
   Ẩn mặc định, chỉ hiện chớp nhoáng lúc đầu hoặc khi user chạm/rê chuột vào
   -------------------------------------------------------------------------- */
.story-nav-bar {
  position: absolute;
  top: 50%;
  left: 2px;
  right: 2px;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 70;
  pointer-events: none;
}

.btn-story-nav {
  width: 44px;
  height: 80px;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: rgba(255, 255, 255, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  padding: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.4s ease, transform 0.25s ease, color 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-story-nav.nav-visible,
.btn-story-nav:hover,
.btn-story-nav:focus-visible {
  opacity: 0.32;
  transform: scale(1);
}

.btn-story-nav:hover {
  opacity: 0.7;
  color: rgba(255, 255, 255, 0.82);
  transform: scale(1.1);
}

.btn-story-nav:active {
  transform: scale(0.9);
}

.btn-story-nav svg {
  width: 24px;
  height: 36px;
  stroke: currentColor;
  stroke-width: 2.5;
}

.btn-story-nav.hidden-nav {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. SLIDES DECK (AUTHENTIC CANVA CROSS-DISSOLVE)
   -------------------------------------------------------------------------- */
.slides-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #1d1a18;
}

.slide-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.02);
  transition: opacity 0.8s var(--ease-cinematic), transform 0.9s var(--ease-cinematic), visibility 0.8s;
  will-change: opacity, transform;
}

.slide-item.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   SLIDE 0 (TRANG 1): INTRO RIBBON BOW (Nơ.png on #1d1a18, no effects or text)
   -------------------------------------------------------------------------- */
.slide-intro {
  background-color: #1d1a18;
  cursor: pointer;
  overflow: hidden;
}

.intro-bow-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.intro-bow-img {
  position: absolute;
  top: 34.04%;
  left: -13.23%;
  width: 126.21%;
  height: auto;
  display: block;
  pointer-events: none;
  opacity: 1;
  filter: none;
  transform: none;
}

/* Dòng chữ gợi ý chạm màn hình sau 3s (nằm dưới nơ, không đè lên nơ) */
.intro-tap-hint {
  position: absolute;
  bottom: 48px;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-playfair);
  font-style: italic;
  font-size: 11.5pt;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 1.2s ease-out, filter 1.2s ease-out;
}

.intro-tap-hint.revealed {
  opacity: 0.72;
  filter: blur(0px);
  animation: introHintBreathe 3s 1.2s infinite ease-in-out;
}

@keyframes introHintBreathe {
  0%, 100% { opacity: 0.72; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.38; transform: translateX(-50%) scale(0.98); }
}

/* --------------------------------------------------------------------------
   SLIDE 1 (TRANG 2): COVER WITH RIBBON1.PNG, SAO.PNG & CARDO TYPOGRAPHY
   -------------------------------------------------------------------------- */
.slide-cover {
  background-color: #1d1a18;
  overflow: hidden;
}

/* Background Ribbon Layer: ribbon1.png (opacity 41%, tilted -80deg in Canva, zoom animation) */
.cover-ribbon-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.cover-ribbon-img {
  position: absolute;
  top: -24.8%;
  left: -19.3%;
  width: 112%;
  height: auto;
  display: block;
  opacity: 0.41; /* Độ trong suốt 41% */
  /* ribbon1.png đã xoay dọc sẵn (-90deg), nên góc nghiêng -80deg trên Canva tương ứng xoay bù +10deg..+13.15deg */
  transform-origin: 50% 50%;
  transform: rotate(13.15deg) scale(1.16);
  will-change: transform, opacity;
}

.slide-cover.active .cover-ribbon-img {
  animation:
    coverRibbonZoomIn 1.9s var(--ease-cinematic) forwards,
    coverRibbonZoomBreathe 6.5s 1.9s infinite alternate ease-in-out;
}

@keyframes coverRibbonZoomIn {
  0% {
    opacity: 0;
    transform: rotate(13.15deg) scale(1.16);
  }
  100% {
    opacity: 0.41;
    transform: rotate(13.15deg) scale(1);
  }
}

@keyframes coverRibbonZoomBreathe {
  0% {
    opacity: 0.41;
    transform: rotate(13.15deg) scale(1);
  }
  100% {
    opacity: 0.41;
    transform: rotate(13.15deg) scale(1.06);
  }
}

.cover-content-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* Star Sparkle (sao.png): độ trong suốt 81% */
.cover-star-sparkle {
  position: absolute;
  top: -14px;
  left: -16px;
  width: 68px;
  height: 68.7px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.65s ease-out, transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1; /* Nằm dưới lớp chữ THE & QUIET */
  pointer-events: none;
}

/* Hiệu ứng ngôi sao lấp lánh nhẹ nhàng, chuyển đậm nhạt từ từ, êm dịu */
@keyframes starSlowTwinkle {
  0%, 100% {
    opacity: 0.98;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6)) brightness(1.05);
  }
  50% {
    opacity: 0.38;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.15)) brightness(0.82);
  }
}

.cover-star-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  animation: starSlowTwinkle 5.5s infinite ease-in-out;
}

.invite-star-img {
  animation: starSlowTwinkle 5.5s 0.8s infinite ease-in-out;
}

.ceremony-star-img {
  animation: starSlowTwinkle 5.5s infinite ease-in-out;
}

.rsvp-star-img {
  animation: starSlowTwinkle 5.5s infinite ease-in-out;
}

.thankyou-star-img {
  animation: starSlowTwinkle 5.5s 1.2s infinite ease-in-out;
}

/* Hiệu ứng 4 ngôi sao ở A journey nhấp nháy cùng lúc, tốc độ chậm rãi êm dịu */
@keyframes starTimelineTwinkle {
  0%, 100% {
    opacity: 0.98;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.65)) brightness(1.1);
  }
  50% {
    opacity: 0.32;
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.12)) brightness(0.8);
  }
}

.milestone-star-img {
  animation: starTimelineTwinkle 7.5s infinite ease-in-out;
}

.slide-cover.active .cover-star-sparkle {
  opacity: 0.81; /* Độ trong suốt 81% */
  transform: scale(1);
}

.cover-title-group {
  position: absolute;
  top: 41.8%;
  left: 18.1%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 5;
}

/* Chữ THE: Cardo Regular 16.6 */
.cover-lead-the {
  font-family: var(--font-cardo);
  font-size: 16.6pt;
  font-weight: 400;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.76);
  margin-left: 24px;
  margin-bottom: -2px;
  position: relative;
  z-index: 5;
}

/* Heading: QUIET (Cardo Regular 30) & STRENGTH (Cardo Bold 30) */
.cover-heading {
  margin: 0;
  font-family: var(--font-cardo);
  font-size: 30pt;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
  position: relative;
  z-index: 5;
}

.title-line {
  display: block;
}

/* Chữ QUIET: Cardo Regular 30 */
.title-line.title-quiet {
  font-family: var(--font-cardo);
  font-size: 30pt;
  font-weight: 400;
  font-style: normal;
  margin-left: 0;
}

/* Chữ STRENGTH: Cardo Regular 30 (cùng font Cardo Regular 400 với QUIET) */
.title-line.title-strength {
  font-family: var(--font-cardo);
  font-size: 30pt;
  font-weight: 400;
  font-style: normal;
  margin-left: 32px;
}

/* Hiệu ứng Rõ nét từ giữa lan ra hai bên (Center-outward blur-to-clear) */
.clarity-char {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: scale(0.95);
  transition: opacity 0.9s var(--ease-cinematic), filter 1.05s ease-out, transform 0.9s var(--ease-cinematic);
  will-change: opacity, filter, transform;
}

/* Các ký tự ở tâm xuất hiện rõ nét trước */
.clarity-char.char-lead {
  filter: blur(8px);
  transition: opacity 0.62s var(--ease-cinematic), filter 0.72s ease-out, transform 0.62s var(--ease-cinematic);
}

.slide-cover.active:not(.exiting-title) .clarity-char {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1);
}

/* Staggered transition delays KHI XUẤT HIỆN: Từ chữ ở giữa lan sang trái - phải */
/* THE: H (giữa) -> T (trái) & E (phải) */
.slide-cover.active:not(.exiting-title) .cover-lead-the .clarity-char:nth-child(2) { transition-delay: 0.08s; } /* H - giữa */
.slide-cover.active:not(.exiting-title) .cover-lead-the .clarity-char:nth-child(1) { transition-delay: 0.42s; } /* T - trái */
.slide-cover.active:not(.exiting-title) .cover-lead-the .clarity-char:nth-child(3) { transition-delay: 0.54s; } /* E - phải */

/* QUIET: I (giữa) -> U (trái) & E (phải) -> Q (ngoài trái) & T (ngoài phải) */
.slide-cover.active:not(.exiting-title) .title-quiet .clarity-char:nth-child(3) { transition-delay: 0.08s; } /* I - giữa */
.slide-cover.active:not(.exiting-title) .title-quiet .clarity-char:nth-child(2) { transition-delay: 0.38s; } /* U - trái */
.slide-cover.active:not(.exiting-title) .title-quiet .clarity-char:nth-child(4) { transition-delay: 0.50s; } /* E - phải */
.slide-cover.active:not(.exiting-title) .title-quiet .clarity-char:nth-child(1) { transition-delay: 0.78s; } /* Q - ngoài trái */
.slide-cover.active:not(.exiting-title) .title-quiet .clarity-char:nth-child(5) { transition-delay: 0.90s; } /* T - ngoài phải */

/* STRENGTH: E & N (giữa) -> R & G -> T & T -> S & H (ngoài cùng) */
.slide-cover.active:not(.exiting-title) .title-strength .clarity-char:nth-child(4) { transition-delay: 0.08s; } /* E - giữa */
.slide-cover.active:not(.exiting-title) .title-strength .clarity-char:nth-child(5) { transition-delay: 0.18s; } /* N - giữa */
.slide-cover.active:not(.exiting-title) .title-strength .clarity-char:nth-child(3) { transition-delay: 0.42s; } /* R - trái */
.slide-cover.active:not(.exiting-title) .title-strength .clarity-char:nth-child(6) { transition-delay: 0.52s; } /* G - phải */
.slide-cover.active:not(.exiting-title) .title-strength .clarity-char:nth-child(2) { transition-delay: 0.76s; } /* T - trái */
.slide-cover.active:not(.exiting-title) .title-strength .clarity-char:nth-child(7) { transition-delay: 0.86s; } /* T - phải */
.slide-cover.active:not(.exiting-title) .title-strength .clarity-char:nth-child(1) { transition-delay: 1.08s; } /* S - ngoài trái */
.slide-cover.active:not(.exiting-title) .title-strength .clarity-char:nth-child(8) { transition-delay: 1.18s; } /* H - ngoài phải */

/* Staggered transition delays KHI BIẾN MẤT (chuyển trang): Mờ dần từ giữa lan ra hai bên giống khi xuất hiện */
.slide-cover.exiting-title .clarity-char {
  opacity: 0;
  filter: blur(14px);
  transform: scale(0.95);
  transition: opacity 0.46s var(--ease-cinematic), filter 0.5s ease-in, transform 0.46s var(--ease-cinematic);
}

/* THE biến mất: H -> T & E */
.slide-cover.exiting-title .cover-lead-the .clarity-char:nth-child(2) { transition-delay: 0.02s; } /* H */
.slide-cover.exiting-title .cover-lead-the .clarity-char:nth-child(1) { transition-delay: 0.18s; } /* T */
.slide-cover.exiting-title .cover-lead-the .clarity-char:nth-child(3) { transition-delay: 0.24s; } /* E */

/* QUIET biến mất: I -> U & E -> Q & T */
.slide-cover.exiting-title .title-quiet .clarity-char:nth-child(3) { transition-delay: 0.02s; } /* I */
.slide-cover.exiting-title .title-quiet .clarity-char:nth-child(2) { transition-delay: 0.16s; } /* U */
.slide-cover.exiting-title .title-quiet .clarity-char:nth-child(4) { transition-delay: 0.22s; } /* E */
.slide-cover.exiting-title .title-quiet .clarity-char:nth-child(1) { transition-delay: 0.34s; } /* Q */
.slide-cover.exiting-title .title-quiet .clarity-char:nth-child(5) { transition-delay: 0.40s; } /* T */

/* STRENGTH biến mất: E & N -> R & G -> T & T -> S & H */
.slide-cover.exiting-title .title-strength .clarity-char:nth-child(4) { transition-delay: 0.02s; } /* E */
.slide-cover.exiting-title .title-strength .clarity-char:nth-child(5) { transition-delay: 0.06s; } /* N */
.slide-cover.exiting-title .title-strength .clarity-char:nth-child(3) { transition-delay: 0.16s; } /* R */
.slide-cover.exiting-title .title-strength .clarity-char:nth-child(6) { transition-delay: 0.22s; } /* G */
.slide-cover.exiting-title .title-strength .clarity-char:nth-child(2) { transition-delay: 0.30s; } /* T */
.slide-cover.exiting-title .title-strength .clarity-char:nth-child(7) { transition-delay: 0.36s; } /* T */
.slide-cover.exiting-title .title-strength .clarity-char:nth-child(1) { transition-delay: 0.44s; } /* S */
.slide-cover.exiting-title .title-strength .clarity-char:nth-child(8) { transition-delay: 0.50s; } /* H */

/* Chữ Graduation Ceremony: Beautifully Delicious Script Regular 28.9pt (tăng 1pt và đẩy cao lên chút nữa)
   Chữ G nằm thẳng dưới chữ S của STRENGTH (margin-left: 32px), độ dài dòng gần bằng STRENGTH */
.cover-script-subtitle {
  font-family: 'Beautifully Delicious Script Regular', 'Beautifully Delicious Script', var(--font-script);
  font-size: 30.9pt;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.012em;
  color: rgba(255, 255, 255, 0.76);
  margin-top: -12px;
  margin-left: 32px; /* Đặt chữ G thẳng dưới chữ S của STRENGTH */
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
  transform: rotate(-3.5deg);
  transform-origin: left bottom;
  position: relative;
  z-index: 5;
}

.typewriter-script-text {
  display: inline-block;
}

.typewriter-cursor {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.70);
  animation: cursorBlink 0.85s infinite ease-in-out;
  margin-left: 2px;
  vertical-align: middle;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Nguyen Thi Diem Phuong & Quote */
.cover-footer-meta {
  position: absolute;
  bottom: 19%;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 32px;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(10px);
  transition: opacity 1.5s var(--ease-cinematic), filter 1.6s ease-out, transform 1.5s var(--ease-cinematic);
}

.cover-footer-meta.revealed {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

/* Nguyen Thi Diem Phuong: Cardo Regular 8.9 */
.author-name {
  font-family: var(--font-cardo);
  font-size: 8.9pt;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 6px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* Some journeys are not linear, but still lead to something beautiful.: in nghiêng, Cardo Regular 7.9 */
.author-quote {
  font-family: var(--font-cardo);
  font-size: 7.9pt;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* --------------------------------------------------------------------------
   SLIDE 2 (TRANG 3): WARM INVITATION (ribbon2.png + sao.png + Playfair 3.2s Blur-In)
   -------------------------------------------------------------------------- */
.slide-invite {
  background-color: #1d1a18;
  overflow: hidden;
}

.invite-ribbon-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.invite-ribbon-img {
  position: absolute;
  top: 0;
  left: -13.5%;
  width: 113.5%;
  height: auto;
  display: block;
  opacity: 0;
  filter: blur(18px);
  transform: scale(1.03);
  transition: opacity 1.8s var(--ease-cinematic), filter 1.8s ease-out, transform 1.8s var(--ease-cinematic);
  will-change: opacity, filter, transform;
}

.slide-invite.active .invite-ribbon-img {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1);
}

.invite-content-container {
  position: absolute;
  top: 47.5%;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 32px;
  pointer-events: none;
}

/* Hiệu ứng mờ khi xuất hiện nhanh hơn và mượt mà (~1.4s) */
.invite-line {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(6px);
  transition: opacity 1.4s var(--ease-cinematic), filter 1.4s ease-out, transform 1.4s var(--ease-cinematic);
  will-change: opacity, filter, transform;
}

.invite-line.revealed {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

/* You are warmly invited: Playfair Display Trung bình, Bold, 14.9pt */
.invite-line.line-1 {
  font-family: var(--font-playfair);
  font-size: 14.9pt;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

/* to my graduation ceremony: Playfair Display Thông thường, 11.9pt */
.invite-line.line-2 {
  font-family: var(--font-playfair);
  font-size: 11.9pt;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.64);
  margin-top: 2px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

/* Ngôi sao sao.png rõ dần cùng thời điểm với ribbon2 */
.invite-star-sparkle {
  width: 46px;
  height: 46px;
  margin-top: 95px;
  opacity: 0;
  filter: blur(14px);
  transform: scale(0.75);
  transition: opacity 1.8s var(--ease-cinematic), filter 1.8s ease-out, transform 1.8s var(--ease-cinematic);
  will-change: opacity, filter, transform;
}

.invite-star-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.slide-invite.active .invite-star-sparkle {
  opacity: 0.9;
  filter: blur(0px);
  transform: scale(1);
}

/* Khi chuyển trang ở Slide 2: ribbon2 và sao có hiệu ứng biến mất, dòng chữ giữ nguyên */
.slide-invite.exiting-invite .invite-ribbon-img {
  opacity: 0;
  filter: blur(16px);
  transform: scale(0.97);
  transition: opacity 0.55s ease-in, filter 0.55s ease-in, transform 0.55s ease-in;
}

.slide-invite.exiting-invite .invite-star-sparkle {
  opacity: 0;
  filter: blur(12px);
  transform: scale(0.65);
  transition: opacity 0.55s ease-in, filter 0.55s ease-in, transform 0.55s ease-in;
}

.slide-invite.exiting-invite .invite-line {
  opacity: 1 !important;
  filter: none !important;
  transform: translateY(0) !important;
}

/* --------------------------------------------------------------------------
   SLIDE 3 (TRANG 4): STAR TIMELINE (núi1.png + rotated sao.png + Playfair)
   -------------------------------------------------------------------------- */
.slide-timeline {
  background-color: #1d1a18;
  overflow: hidden;
}

.timeline-mountain-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.timeline-mountain-img {
  position: absolute;
  top: 0;
  left: 73.28%;
  width: 39.44%;
  height: 100.7%;
  object-fit: cover;
  object-position: left top;
  display: block;
}

.timeline-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* A journey of small steps and big dreams: Playfair Display Trung bình, Bold, 18.9pt, hiệu ứng đánh chữ */
.timeline-heading {
  position: absolute;
  top: 13.8%;
  left: 48px;
  display: flex;
  flex-direction: column;
  font-family: var(--font-playfair);
  font-size: 18.9pt;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0.015em;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.timeline-type-line {
  display: block;
  min-height: 1.32em;
}

.timeline-track-wrapper {
  position: absolute;
  top: 34.5%;
  left: 44px;
  right: 28%;
  bottom: 26%;
}

/* Nét nối liền các ngôi sao: điểm đầu và điểm cuối dài ra thêm một đoạn (~24px) */
.timeline-vertical-line {
  position: absolute;
  left: 13.25px;
  top: -24px;
  width: 1.5px;
  height: 0%;
  max-height: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.70) 75%, rgba(255, 255, 255, 0.52) 100%);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
  transition: height 2.8s var(--ease-soft);
  z-index: 1;
}

.timeline-milestones {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

/* Các dòng cột mốc: hiệu ứng rõ dần khi xuất hiện tốc độ chậm */
.milestone-item {
  display: flex;
  align-items: center;
  opacity: 0;
  filter: blur(12px);
  transform: translateX(-6px);
  transition: opacity 2.2s var(--ease-cinematic), filter 2.2s ease-out, transform 2.2s var(--ease-cinematic);
  will-change: opacity, filter, transform;
}

.milestone-item.revealed {
  opacity: 1;
  filter: blur(0px);
  transform: translateX(0);
}

.milestone-star {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* Ngôi sao sao.png căn đúng tâm sáng (56.2%, 42.4%) trùng lên trục dọc (14px, 14px) và xoay nhiều góc khác nhau */
.milestone-star-img {
  position: absolute;
  width: 38px;
  height: 38px;
  left: -7.35px;
  top: -2.12px;
  object-fit: contain;
  display: block;
  transform-origin: 56.19% 42.42%;
}

.milestone-star-img.star-rot-1 {
  transform: rotate(45deg);
}

.milestone-star-img.star-rot-2 {
  transform: rotate(60deg);
}

.milestone-star-img.star-rot-3 {
  transform: rotate(75deg);
}

.milestone-star-img.star-rot-4 {
  transform: rotate(90deg);
}

.milestone-text {
  padding-left: 20px;
}

/* Các dòng còn lại: Playfair Display Thông thường, 11.9pt */
.milestone-title {
  font-family: var(--font-playfair);
  font-size: 11.9pt;
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.70);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
}

/* --------------------------------------------------------------------------
   SLIDE 4 (TRANG 5): CEREMONY DETAILS (thư.png + sao.png + Cardo & Playfair)
   Vị trí chuẩn tham chiếu file The/6.png (Left 17%, top %)
   -------------------------------------------------------------------------- */
.slide-ceremony {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.ceremony-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ceremony-star-wrapper {
  position: absolute;
  top: 14.9%;
  left: 17%;
  width: 25px;
  height: 25px;
  opacity: 0.85;
  z-index: 10;
}

.ceremony-star-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Hiệu ứng các dòng chữ trang 5: rõ dần từ mờ đến hiển thị rõ */
.ceremony-line {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(0);
  transition: opacity 1.4s var(--ease-cinematic), filter 1.4s ease-out;
  will-change: opacity, filter;
}

.slide-ceremony.active .ceremony-line {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
  transition-delay: 0.35s;
}

/* Dear Name: Playfair Display Italic 11.9pt, Name in đậm */
.ceremony-guest {
  position: absolute;
  top: 25.4%;
  left: 17%;
  right: 12%;
  font-family: var(--font-playfair);
  font-style: italic;
  font-weight: 400;
  font-size: 11.9pt;
  color: #353432;
  letter-spacing: 0.01em;
}

.guest-name-bold {
  font-weight: 700;
  font-style: italic;
  color: #1e1d1b;
}

/* You are invited to: Playfair Display Regular Italic 12.9pt */
.ceremony-intro {
  position: absolute;
  top: 33.6%;
  left: 17%;
  right: 12%;
  font-family: var(--font-playfair);
  font-style: italic;
  font-weight: 400;
  font-size: 12.9pt;
  color: #353432;
  letter-spacing: 0.01em;
}

/* Phuong’s Graduation Ceremony: Playfair Display Bold 17.9pt */
.ceremony-title {
  position: absolute;
  top: 37.0%;
  left: 17%;
  right: 12%;
  font-family: var(--font-playfair);
  font-weight: 700;
  font-size: 17.9pt;
  color: #1e1d1b;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* Sun, Nov 8, 2026 / 08:00AM - 11:30AM: Cardo Regular 15.9pt */
.ceremony-datetime {
  position: absolute;
  top: 48.6%;
  left: 17%;
  width: fit-content;
  pointer-events: none;
}

.datetime-date, .datetime-time {
  font-family: var(--font-cardo);
  font-weight: 400;
  font-size: 15.9pt;
  color: #2a2927;
  line-height: 1.32;
  letter-spacing: 0.02em;
}

/* FPT University HCMC (Cardo Regular 13.9pt) + Underlined '>>> Google maps' Link */
.ceremony-venue {
  position: absolute;
  top: 59.2%;
  left: 17%;
  right: 12%;
  pointer-events: none;
}

.venue-uni {
  font-family: var(--font-cardo);
  font-weight: 400;
  font-size: 13.9pt;
  color: #2a2927;
  line-height: 1.35;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.venue-maps-row {
  margin-top: 6px;
  pointer-events: auto;
}

.venue-maps-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-cardo);
  font-size: 13.5pt;
  color: #2a2825;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.venue-maps-link:hover {
  color: #000000;
  opacity: 0.85;
  text-decoration: none;
}

.maps-chevrons {
  font-family: var(--font-playfair);
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #8b3a2b;
  display: inline-block;
  text-decoration: none !important;
}

.maps-text {
  text-decoration: none;
}

/* Date/Time link trigger */
.ceremony-link-trigger {
  display: inline-block;
  width: fit-content;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
}

/* Thanh gạt chậm từ trái sang phải, xuất hiện cùng lúc với các dòng chữ */
.ceremony-divider-wrapper {
  position: absolute;
  top: 68.9%;
  left: 17%;
  width: 92px;
  height: 1.5px;
  overflow: hidden;
}

.ceremony-divider-line {
  width: 92px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(43, 40, 37, 0.45) 0%, rgba(43, 40, 37, 0.15) 80%, transparent 100%);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 2.8s var(--ease-cinematic), opacity 2.8s ease-out;
}

/* Dấu gạch xuất hiện thanh thoát, nhẹ nhàng đồng bộ chuẩn xác với phần RSVP */
.slide-ceremony.active .ceremony-divider-line {
  transform: scaleX(1);
  opacity: 0.42;
}

.slide-ceremony.active .ceremony-quote {
  transition-delay: 0.35s;
}

/* Your prescence means a lot of me: Playfair Display Italic 9.9pt */
.ceremony-quote {
  position: absolute;
  top: 79.5%;
  left: 17%;
  right: 12%;
  font-family: var(--font-playfair);
  font-style: italic;
  font-weight: 400;
  font-size: 9.9pt;
  color: #444341;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   SLIDE 5 (TRANG 6): RSVP (thư.png + sao.png + Playfair Display)
   Vị trí chuẩn tham chiếu file The/7.png (Left 17%, top %)
   -------------------------------------------------------------------------- */
.slide-rsvp {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.rsvp-content-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.rsvp-star-wrapper {
  position: absolute;
  top: 14.9%;
  left: 17%;
  width: 25px;
  height: 25px;
  opacity: 0.85;
}

.rsvp-star-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.rsvp-line {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(6px);
  transition: opacity 2.2s var(--ease-cinematic), filter 2.2s ease-out, transform 2.2s var(--ease-cinematic);
  will-change: opacity, filter, transform;
}

.slide-rsvp.active .rsvp-line {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

/* RSVP: Playfair Display Bold 17.9pt */
.rsvp-heading {
  position: absolute;
  top: 23.9%;
  left: 17%;
  font-family: var(--font-playfair);
  font-weight: 700;
  font-size: 17.9pt;
  color: #1e1d1b;
  letter-spacing: 0.02em;
}

/* Initial Question Block */
.rsvp-flow-initial {
  position: absolute;
  top: 34.9%;
  left: 17%;
  right: 12%;
  transition: opacity 0.5s var(--ease-cinematic), filter 0.5s ease-out;
}

.rsvp-flow-initial.hidden-flow {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Will you join the ceremony?: Playfair Display Regular 12.9pt */
.rsvp-question {
  font-family: var(--font-playfair);
  font-weight: 400;
  font-size: 12.9pt;
  color: #353432;
  letter-spacing: 0.01em;
}

.rsvp-divider-wrapper {
  margin-top: 12px;
  width: 92px;
  height: 1.5px;
  overflow: hidden;
}

.rsvp-divider-line {
  width: 92px;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(43, 40, 37, 0.45) 0%, rgba(43, 40, 37, 0.15) 80%, transparent 100%);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  transition: transform 2.8s var(--ease-cinematic), opacity 2.8s ease-out;
}

.slide-rsvp.active .rsvp-divider-line {
  transform: scaleX(1);
  opacity: 0.42;
}

/* Yes / No Choice Buttons: Playfair Display Regular 12.9pt, NO underline */
.rsvp-choices-group {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-playfair);
  font-size: 12.9pt;
  color: #353432;
  pointer-events: auto;
}

.btn-rsvp-opt {
  font-family: var(--font-playfair);
  font-size: 12.9pt;
  font-weight: 400;
  color: #353432;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.2s ease-out;
}

.btn-rsvp-opt:hover {
  color: #0c0c0e;
  font-weight: 700;
}

.btn-rsvp-opt.selected {
  color: #0c0c0e;
  font-weight: 700;
  background: rgba(29, 26, 24, 0.08);
}

.rsvp-choice-slash {
  font-family: var(--font-playfair);
  font-size: 12.9pt;
  color: #777570;
}

/* Interactive Inline Step (Same background, no separate window/modal) */
.rsvp-inline-step {
  position: absolute;
  top: 34.9%;
  left: 17%;
  right: 14%;
  pointer-events: auto;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(6px);
  transition: opacity 0.8s var(--ease-cinematic), filter 0.8s ease-out, transform 0.8s var(--ease-cinematic);
}

.rsvp-inline-step.revealed {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}


.rsvp-field-label {
  font-family: var(--font-playfair);
  font-size: 11pt;
  font-style: italic;
  font-weight: 500;
  color: #2a2927;
  text-align: left;
  margin-bottom: 2px;
  display: block;
  letter-spacing: 0.01em;
}

.rsvp-no-prompt {
  font-size: 11.5pt;
  line-height: 1.4;
  margin-bottom: 6px;
  font-style: italic;
}

.rsvp-step-prompt {
  font-family: var(--font-playfair);
  font-size: 12.5pt;
  font-weight: 400;
  line-height: 1.45;
  color: #2a2927;
  margin-bottom: 14px;
}

.rsvp-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rsvp-fields-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.rsvp-inline-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(43, 40, 37, 0.22);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: var(--font-playfair);
  font-size: 11pt;
  color: #1e1d1b;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}

.rsvp-inline-input:focus {
  border-color: #1e1d1b;
  background: rgba(255, 255, 255, 0.85);
}

.rsvp-inline-input.input-error {
  border-color: #8b3a2b !important;
  background: rgba(255, 240, 238, 0.9) !important;
  box-shadow: 0 0 0 2px rgba(139, 58, 43, 0.28);
  animation: rsvpShakeAnim 0.55s ease-in-out;
}

.rsvp-inline-input::placeholder {
  color: rgba(30, 29, 27, 0.45);
  font-style: italic;
}

.rsvp-shake {
  animation: rsvpShakeAnim 0.55s ease-in-out;
}

@keyframes rsvpShakeAnim {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.rsvp-inline-textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(43, 40, 37, 0.22);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-family: var(--font-playfair);
  font-size: 11.5pt;
  color: #1e1d1b;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
}

.rsvp-inline-textarea:focus {
  border-color: #1e1d1b;
  background: rgba(255, 255, 255, 0.85);
}

.rsvp-btn-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-rsvp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-playfair);
  font-size: 11.9pt;
  font-weight: 500;
  color: #353432;
  background: rgba(43, 40, 37, 0.08);
  border: 1px solid rgba(43, 40, 37, 0.22);
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn-rsvp-back:hover {
  background: rgba(43, 40, 37, 0.16);
  color: #121110;
}

.btn-rsvp-back:active {
  transform: scale(0.96);
}

.btn-rsvp-back svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

.btn-rsvp-inline-submit {
  font-family: var(--font-playfair);
  font-size: 11.9pt;
  font-weight: 600;
  color: #f7f6f2;
  background: #2a2724;
  border: none;
  padding: 8px 18px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.btn-rsvp-inline-submit:hover {
  background: #121110;
}

.btn-rsvp-inline-submit:active {
  transform: scale(0.96);
}

/* Inline Final Confirmation Message after Submit */
.rsvp-inline-feedback {
  position: absolute;
  top: 37%;
  left: 17%;
  right: 14%;
  pointer-events: auto;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.8s var(--ease-cinematic), filter 0.8s ease-out;
}

.rsvp-inline-feedback.revealed {
  opacity: 1;
  filter: blur(0px);
}

.rsvp-inline-feedback .feedback-msg {
  font-family: var(--font-playfair);
  font-size: 13.5pt;
  line-height: 1.5;
  color: #1e1d1b;
}

/* --------------------------------------------------------------------------
   SLIDE 6 (TRANG 7): THANK YOU & SIGNATURE (núi2.png + sao.png + sign.png)
   -------------------------------------------------------------------------- */
.slide-thankyou {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.thankyou-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 1. Text lines: Playfair Display Regular 15pt, left-aligned at left 19%, top 38.5% */
.thankyou-text-box {
  position: absolute;
  top: 38.5%;
  left: 19%;
  width: 220px;
  text-align: left;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(6px);
  transition: opacity 1.2s var(--ease-cinematic), filter 1.2s ease-out, transform 1.2s var(--ease-cinematic);
  will-change: opacity, filter, transform;
}

.thankyou-text-box.revealed {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

.thankyou-line {
  font-family: var(--font-playfair);
  font-weight: 400;
  font-size: 15pt;
  line-height: 1.42;
  color: rgba(255, 255, 255, 0.74);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.85);
}

/* 2. Star: sao.png có TÂM nằm ngay trên đường thẳng trục dọc 19% (X = 74.7px) */
.thankyou-star-wrapper {
  position: absolute;
  top: 62%;
  left: 19%;
  width: 36px;
  height: 36px;
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-50%) scale(0.8);
  transition: opacity 1.1s var(--ease-cinematic), filter 1.1s ease-out, transform 1.1s var(--ease-cinematic);
  will-change: opacity, filter, transform;
}

.thankyou-star-wrapper.revealed {
  opacity: 0.95;
  filter: blur(0px);
  transform: translateX(-50%) scale(1);
}

.thankyou-star-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 3. Signature: sign.png bù trừ phần trong suốt 24.8% để nét chữ bắt đầu chuẩn xác tại left 19% */
.thankyou-sign-wrapper {
  position: absolute;
  top: 73%;
  left: 7%;
  right: auto;
  width: 192px;
  height: auto;
  opacity: 0;
  pointer-events: none;
  transform-origin: 24.8% 50%;
}

.thankyou-sign-wrapper.revealed {
  animation: brushCurveDraw 2.0s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.thankyou-sign-img {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(1.2) contrast(1.1);
}

@keyframes brushCurveDraw {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    opacity: 0;
    transform: scale(0.96) rotate(-2deg);
  }
  20% {
    opacity: 1;
  }
  50% {
    clip-path: polygon(0 0, 58% 18%, 42% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Khi chạm vào màn hình để qua trang khác: dòng chữ mất trước, ngôi sao và sign mất sau rồi chuyển trang */
.slide-thankyou.exiting-step1 .thankyou-text-box {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(-6px);
  transition: opacity 0.4s ease-in, filter 0.4s ease-in, transform 0.4s ease-in;
}

.slide-thankyou.exiting-step2 .thankyou-star-wrapper {
  opacity: 0;
  filter: blur(8px);
  transform: translateX(-50%) scale(0.75);
  transition: opacity 0.4s ease-in, filter 0.4s ease-in, transform 0.4s ease-in;
}

.slide-thankyou.exiting-step2 .thankyou-sign-wrapper {
  opacity: 0;
  filter: blur(8px);
  transform: scale(0.95);
  transition: opacity 0.4s ease-in, filter 0.4s ease-in, transform 0.4s ease-in;
}

/* --------------------------------------------------------------------------
   SLIDE 7 (TRANG 8): SHORT VIDEO (núi2.png background)
   -------------------------------------------------------------------------- */
.slide-video {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.video-overlay-tint {
  position: absolute;
  inset: 0;
  background: rgba(29, 26, 24, 0.42);
  pointer-events: none;
}

.video-trigger-hotspot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  z-index: 15;
  padding: 16px;
  border-radius: 20px;
}

.play-pulse-ring {
  position: absolute;
  top: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: ringExpand 2s infinite ease-out;
}

@keyframes ringExpand {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

.play-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s, background-color 0.2s;
}

.video-trigger-hotspot:hover .play-icon-box {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.25);
}

.play-icon-box svg {
  width: 24px;
  height: 24px;
  margin-left: 2px;
}

.play-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

/* Video Modal */
.video-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.3s ease-out;
}

.video-modal-box {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9);
}

.memory-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.btn-close-video {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 40;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(20, 20, 25, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   SLIDE 8 (TRANG 9): OUTRO (Tương tự Trang 2, Thank you Cardo Italic 18.9pt & Contact 8.9pt)
   -------------------------------------------------------------------------- */
.slide-outro {
  background-color: #1d1a18;
  cursor: pointer;
  overflow: hidden;
}

.outro-ribbon-img {
  animation: coverRibbonZoom 20s infinite alternate ease-in-out;
}

.outro-script-subtitle {
  margin-top: -12px;
  margin-left: 32px;
}

.outro-footer-meta {
  position: absolute;
  bottom: 19%;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 32px;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(10px);
  transition: opacity 1.5s var(--ease-cinematic), filter 1.6s ease-out, transform 1.5s var(--ease-cinematic);
}

.outro-footer-meta.revealed {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

/* Thank you!: Cardo Regular 18.9pt Italic */
.outro-thankyou-text {
  font-family: var(--font-cardo);
  font-size: 18.9pt;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.76);
  margin-bottom: 6px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

/* Contact: Cardo Regular 8.9pt */
.outro-contact-text {
  font-family: var(--font-cardo);
  font-size: 8.9pt;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.outro-contact-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
}

.outro-contact-link:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* Replay Icon ở phía trên màn hình, chỉ giữ lại vòng xoay, không viền, không nền */
.replay-story-icon {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 10px;
  color: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.replay-story-icon:hover {
  color: rgba(255, 255, 255, 0.75);
  transform: translateX(-50%) scale(1.1);
}

.replay-story-icon:active {
  transform: translateX(-50%) scale(0.92) rotate(-30deg);
}

.replay-story-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

/* --------------------------------------------------------------------------
   LUXURY BOTTOM SHEET (RSVP SUBMISSION TO GOOGLE SHEETS)
   -------------------------------------------------------------------------- */
.rsvp-bottom-sheet {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: opacity 0.35s ease-out, visibility 0.35s;
}

.rsvp-bottom-sheet.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.sheet-panel {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border-radius: 28px 28px 0 0;
  padding: 16px 22px 30px;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.4);
  color: #1a1a1c;
  transform: translateY(0);
  transition: transform 0.35s var(--ease-cinematic);
}

.rsvp-bottom-sheet.hidden .sheet-panel {
  transform: translateY(100%);
}

.sheet-drag-handle {
  width: 36px;
  height: 4px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  margin: 0 auto 14px;
}

.sheet-header {
  text-align: center;
  margin-bottom: 14px;
}

.sheet-title {
  font-family: var(--font-the-seasons);
  font-size: 26px;
  font-weight: 400;
  color: #111113;
}

.sheet-sub {
  font-size: 12px;
  color: #666562;
  margin-top: 2px;
}

.sheet-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sheet-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.sheet-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #55555c;
  font-family: var(--font-sans);
}

.sheet-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: #fbfbfa;
  font-family: var(--font-sans);
  font-size: 13px;
  color: #111113;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.sheet-input:focus {
  border-color: #111113;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.sheet-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23222' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}

.sheet-textarea {
  resize: none;
  font-size: 12px;
  line-height: 1.4;
}

.sheet-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.btn-sheet-cancel {
  flex: 1;
  padding: 12px;
  border-radius: 999px;
  background: #ecebe6;
  border: none;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  color: #4a4947;
  cursor: pointer;
}

.btn-sheet-submit {
  flex: 2;
  padding: 12px;
  border-radius: 999px;
  background: #111113;
  border: none;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.btn-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.sheet-success-state {
  text-align: center;
  padding: 16px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.success-sparkle-icon {
  font-size: 34px;
}

.success-heading {
  font-family: var(--font-the-seasons);
  font-size: 26px;
  color: #111113;
}

.success-desc {
  font-size: 13px;
  color: #55555c;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   TOAST NOTIFICATION
   -------------------------------------------------------------------------- */
.toast-notification {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(18, 18, 22, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s;
}

.toast-notification.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.hidden {
  display: none !important;
}


/* Giao diện RSVP khi đã gửi câu trả lời và xem lại:
   Your response: Yes/No
   [icon edit] Change response (thuần text + icon, không có viền/nền button) */
.rsvp-completed-view {
  margin-top: 18px;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: auto !important;
  position: relative;
  z-index: 10;
}

.rsvp-completed-view.hidden {
  display: none !important;
}

/* Hiệu ứng hiển thị mờ ảo, rõ dần 2.2s đồng bộ hoàn toàn với câu hỏi */
.rsvp-completed-view.rsvp-line {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(6px);
  transition: opacity 2.2s var(--ease-cinematic), filter 2.2s ease-out, transform 2.2s var(--ease-cinematic);
  will-change: opacity, filter, transform;
}

.slide-rsvp.active .rsvp-completed-view.rsvp-line {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
}

.rsvp-revisit-line {
  font-family: var(--font-playfair);
  font-size: 13pt;
  font-weight: 400;
  color: #2a2825;
  letter-spacing: 0.02em;
  margin: 0;
  pointer-events: auto !important;
}

.rsvp-recorded-choice {
  font-weight: 700;
  color: #8b3a2b;
}

.rsvp-change-action {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none;
  padding: 2px 0;
  font-family: var(--font-playfair);
  font-size: 11.5pt;
  font-style: italic;
  color: #2a2825;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  pointer-events: auto !important;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
  position: relative;
  z-index: 15;
}

.rsvp-change-action .rsvp-edit-icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  display: inline-block;
  flex-shrink: 0;
}

.rsvp-change-action .rsvp-change-text {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.rsvp-change-action:hover {
  color: #8b3a2b;
  opacity: 0.85;
}

.rsvp-change-action:active {
  opacity: 0.65;
}