/* ============================================================
   intro.css — MÀN MỞ ĐẦU: màn nhung, đèn rọi, máy quay, chuyển cảnh vào rạp
   Trình tự (JS thêm class lên .intro):
     is-opening  0s     → màn kéo sang hai bên
     is-rolling  1.5s   → máy quay sáng, cuộn phim xoay, luồng sáng ống kính
     is-zooming  3s     → zoom vào ống kính, lóa trắng
     is-theater  4.2s   → hiện khán phòng
     is-titled   4.5s   → chữ "ĐIỆN ẢNH" hiện trên màn chiếu
     is-entering 5.2s   → màn chiếu phóng to, mờ dần vào trang Bìa
   Chỉ animate transform / opacity.
============================================================ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 60% at 50% 35%, #2a1209 0%, #120806 55%, #050302 100%);
  transition: opacity .7s ease;
}

.intro.is-entering { opacity: 0; transition: opacity .7s ease .15s; }
.intro.is-gone { opacity: 0; pointer-events: none; }

/* Sân khấu luôn giữ tỉ lệ dọc, desktop thì đứng giữa, hai bên là nền rạp tối */
.intro__stage {
  position: relative;
  width: min(100vw, 62.5vh);
  width: min(100vw, 62.5dvh);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  container-type: size;
  cursor: pointer;
  background: #0d0705;
  box-shadow: 0 0 90px rgba(0, 0, 0, .85);
}

.intro.is-opening .intro__stage { cursor: default; }

/* ---------- Phía sau màn ---------- */
.intro__scene { position: absolute; inset: 0; }

.intro__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 42% at 50% 40%, rgba(201, 151, 59, .38), transparent 70%),
    radial-gradient(ellipse 100% 45% at 50% 100%, rgba(140, 90, 40, .32), transparent 70%),
    linear-gradient(180deg, #1a0d07 0%, #2c180c 50%, #170c06 100%);
}

/* Luồng đèn rọi từ trên xuống */
.intro__spot {
  position: absolute;
  left: 5%;
  width: 90%;
  top: -2%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 240, 205, .6) 0%, rgba(255, 228, 175, .2) 55%, rgba(255, 220, 160, 0) 92%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  filter: blur(10px);
  animation: spotBreath 5s ease-in-out infinite alternate;
  will-change: opacity;
}

.intro__spot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 90px;
  height: 60px;
  margin-left: -45px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #fffaf0 0%, rgba(255, 236, 190, .7) 35%, transparent 70%);
}

@keyframes spotBreath {
  from { opacity: .75; }
  to { opacity: 1; }
}

/* Khói / sương mờ chuyển động chậm */
.intro__smoke span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(232, 206, 160, .3), rgba(232, 206, 160, 0) 66%);
  filter: blur(16px);
  will-change: transform;
  animation: smokeDrift 16s ease-in-out infinite alternate;
}

.intro__smoke span:nth-child(1) { left: -15%; bottom: -8%; width: 130%; height: 40%; }
.intro__smoke span:nth-child(2) { left: 15%; bottom: 20%; width: 95%; height: 30%; opacity: .7; animation-duration: 21s; animation-delay: -7s; }
.intro__smoke span:nth-child(3) { left: -25%; bottom: 40%; width: 85%; height: 26%; opacity: .5; animation-duration: 26s; animation-delay: -12s; }

@keyframes smokeDrift {
  from { transform: translate3d(-8%, 0, 0) scale(1); }
  to { transform: translate3d(8%, -5%, 0) scale(1.15); }
}

/* Máy quay cổ điển (SVG) */
.intro__camera {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4%;
  margin-inline: auto;
  width: 74%;
  width: min(74%, 46cqh);
  aspect-ratio: 300 / 400;
  transform-origin: var(--lens-x, 97%) var(--lens-y, 40%);
  transition: transform 1.25s cubic-bezier(.55, 0, .35, 1);
}

.camera-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: scale(.94);
  transform-origin: 50% 100%;
  transition: transform 1.4s var(--ease-out);
}

.camera-svg__reel {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.camera-svg__beam { opacity: 0; transition: opacity 1s ease .3s; }
.camera-svg__lens { transition: opacity .6s ease .2s; }

/* Bóng tối phủ máy quay khi màn còn khép */
.intro__shade {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(0, 0, 0, .1), rgba(0, 0, 0, .7));
  transition: opacity 1.4s ease;
}

/* Bụi sáng (canvas) */
.intro__dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---------- Hai tấm màn nhung ---------- */
.intro__curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 54%;
  transition: transform 1.8s cubic-bezier(.65, 0, .35, 1);
  will-change: transform;
}

/* Mép trong cong vào chỗ dây buộc, mép dưới hơi loe ra */
.intro__curtain--left {
  left: 0;
  clip-path: polygon(0 0, 100% 0, 97% 10%, 93% 20%, 88% 30%, 83% 40%, 78% 50%, 74% 58%, 72% 66%, 74% 72%,
      79% 80%, 85% 88%, 91% 95%, 94% 100%, 0 100%);
}

.intro__curtain--right {
  right: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 6% 100%, 9% 95%, 15% 88%, 21% 80%, 26% 72%, 28% 66%, 26% 58%,
      22% 50%, 17% 40%, 12% 30%, 7% 20%, 3% 10%);
}

/* Nếp gấp dọc: gradient lặp + bóng trên/dưới + ánh đèn rọi ở mép trong */
.intro__fabric {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .5) 100%),
    repeating-linear-gradient(90deg,
      #2a0205 0%, #5c0810 3%, #96101a 6.2%, #c8232d 8.4%, #96101a 10.6%, #5c0810 13.6%, #2a0205 16%);
  will-change: transform;
}

.intro__curtain--left .intro__fabric {
  transform-origin: 0 50%;
  background:
    radial-gradient(ellipse 45% 70% at 92% 30%, rgba(255, 170, 140, .22), transparent 70%),
    linear-gradient(90deg, transparent 72%, rgba(0, 0, 0, .45) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .5) 100%),
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .28) 0%, transparent 9%, rgba(255, 120, 110, .08) 15%, transparent 21%, rgba(0, 0, 0, .22) 27%),
    repeating-linear-gradient(90deg,
      #2a0205 0%, #5c0810 3%, #96101a 6.2%, #c8232d 8.4%, #96101a 10.6%, #5c0810 13.6%, #2a0205 16%);
}

.intro__curtain--right .intro__fabric {
  transform-origin: 100% 50%;
  background:
    radial-gradient(ellipse 45% 70% at 8% 30%, rgba(255, 170, 140, .22), transparent 70%),
    linear-gradient(270deg, transparent 72%, rgba(0, 0, 0, .45) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .5) 100%),
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, .28) 0%, transparent 9%, rgba(255, 120, 110, .08) 15%, transparent 21%, rgba(0, 0, 0, .22) 27%),
    repeating-linear-gradient(90deg,
      #2a0205 0%, #5c0810 3%, #96101a 6.2%, #c8232d 8.4%, #96101a 10.6%, #5c0810 13.6%, #2a0205 16%);
}

/* Dây buộc màn: dải nhung thắt ngang chỗ màn túm lại, viền chỉ vàng */
.intro__tieback {
  position: absolute;
  top: 64.6%;
  width: 34%;
  height: 1.7%;
  border-radius: 40px;
  background: linear-gradient(180deg, #a3151f 0%, #6d0a12 55%, #3d0408 100%);
  box-shadow: 0 0 0 1px rgba(240, 201, 106, .55), 0 4px 8px rgba(0, 0, 0, .55);
}

.intro__curtain--left .intro__tieback { right: 26%; transform: rotate(-9deg); }
.intro__curtain--right .intro__tieback { left: 26%; transform: rotate(9deg); }

/* ---------- Chữ & nút ở trạng thái chờ ---------- */
.intro__title {
  position: absolute;
  z-index: 4;
  top: 5%;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22vw;
  font-size: 23cqw;
  line-height: 1.1;
  letter-spacing: .02em;
  opacity: .84;
  pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .65)) drop-shadow(0 0 24px rgba(240, 201, 106, .28));
  transition: opacity .6s ease, transform .9s ease;
}

.intro__bottom {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20% 7% calc(7% + env(safe-area-inset-bottom, 0px));
  text-align: center;
  background: linear-gradient(180deg, rgba(10, 4, 3, 0), rgba(10, 4, 3, .78) 38%, rgba(10, 4, 3, .94));
  transition: opacity .5s ease;
}

.intro__invite {
  font-size: 14px;
  font-size: clamp(13px, 3.8cqw, 18px);
  line-height: 1.55;
  color: var(--text);
  text-shadow: 0 1px 6px #000;
  margin-bottom: 16px;
}

.intro__guest {
  display: block;
  margin: .05em 0 .1em;
  font-family: var(--font-script);
  font-size: 2.3em;
  line-height: 1.25;
  color: var(--gold-100);
  overflow-wrap: anywhere;
}

.intro__guest.is-long { font-size: 1.75em; }
.intro__guest.is-very-long { font-size: 1.35em; line-height: 1.35; }

.intro__invite strong {
  display: block;
  text-wrap: balance;
  margin-top: .35em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.04em;
  letter-spacing: .05em;
  color: var(--gold-300);
}

/* Biển vàng "Chạm để mở thiệp" */
.intro__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64%;
  min-height: 52px;
  padding: 10px 26px;
  border: 2px solid var(--gold-300);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff6d8 0%, #f3dd9e 45%, #e2bf6c 100%);
  color: var(--velvet-900);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(61, 4, 8, .7), 0 0 0 5px rgba(240, 201, 106, .7), 0 10px 28px rgba(0, 0, 0, .6);
}

.intro__cta::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 16px;
  box-shadow: 0 0 26px 8px rgba(255, 214, 120, .55);
  opacity: 0;
  animation: ctaPulse 2.2s ease-in-out infinite;
  pointer-events: none;
}

.intro__cta span::before,
.intro__cta span::after {
  content: "◆";
  font-size: 9px;
  color: var(--gold-700);
  vertical-align: middle;
  margin: 0 10px;
}

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

/* ---------- Lóa sáng & khán phòng ---------- */
.intro__flash {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #fffaf0 0%, #ffecc8 45%, #f6d79c 100%);
  opacity: 0;
  transition: opacity .85s ease-in;
}

.intro__theater {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  transform-origin: 50% 32%;
  transition: opacity .5s ease, transform .85s cubic-bezier(.6, 0, .4, 1);
}

.cinema--intro .cinema__screen.intro__screen {
  left: 14%;
  right: 14%;
  top: 20%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  /* màn chiếu tối ấm để chữ vàng phát sáng nổi lên */
  background: radial-gradient(ellipse at 50% 50%, #5b4f42 0%, #3a3129 60%, #2a231d 100%);
  box-shadow: 0 0 40px rgba(255, 228, 180, .18), inset 0 0 26px rgba(0, 0, 0, .45);
}

.cinema--intro .seats { height: 47%; }

.intro__screen-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 12vw;
  font-size: 12.5cqw;
  line-height: 1.08;
  text-align: center;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(255, 226, 150, .8)) drop-shadow(0 0 22px rgba(255, 190, 90, .55));
  transition: opacity .8s ease;
}

/* Nút bỏ qua */
.intro__skip {
  position: absolute;
  z-index: 10;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: 14px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(240, 201, 106, .5);
  background: rgba(10, 6, 4, .55);
  color: var(--gold-100);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  cursor: pointer;
}

/* =================== TRÌNH TỰ KHI BẤM =================== */
.intro.is-opening .intro__curtain--left { transform: translate3d(-102%, 0, 0); }
.intro.is-opening .intro__curtain--right { transform: translate3d(102%, 0, 0); }
.intro.is-opening .intro__curtain--left .intro__fabric { animation: gatherLeft 1.8s cubic-bezier(.65, 0, .35, 1) forwards; }
.intro.is-opening .intro__curtain--right .intro__fabric { animation: gatherRight 1.8s cubic-bezier(.65, 0, .35, 1) forwards; }
.intro.is-opening .intro__title { opacity: 0; transform: translateY(-5%) scale(1.04); }
.intro.is-opening .intro__bottom { opacity: 0; pointer-events: none; }

/* Màn dồn nếp + gợn sóng khi kéo */
@keyframes gatherLeft {
  0% { transform: scaleX(1) skewY(0); }
  30% { transform: scaleX(.86) skewY(-1.4deg); }
  55% { transform: scaleX(.74) skewY(.9deg); }
  80% { transform: scaleX(.68) skewY(-.4deg); }
  100% { transform: scaleX(.66) skewY(0); }
}

@keyframes gatherRight {
  0% { transform: scaleX(1) skewY(0); }
  30% { transform: scaleX(.86) skewY(1.4deg); }
  55% { transform: scaleX(.74) skewY(-.9deg); }
  80% { transform: scaleX(.68) skewY(.4deg); }
  100% { transform: scaleX(.66) skewY(0); }
}

.intro.is-rolling .intro__shade { opacity: .2; }
.intro.is-rolling .camera-svg { transform: scale(1); }
.intro.is-rolling .camera-svg__beam { opacity: .95; }
.intro.is-rolling .camera-svg__lens { opacity: .95; }
.intro.is-rolling .camera-svg__reel--a { animation: reelSpinUp 1s ease-in 1, reelSpin .85s linear 1s infinite; }
.intro.is-rolling .camera-svg__reel--b { animation: reelSpinUp 1s ease-in 1, reelSpin .7s linear 1s infinite; }

@keyframes reelSpinUp {
  from { transform: rotate(0deg); }
  to { transform: rotate(180deg); }
}

@keyframes reelSpin {
  from { transform: rotate(180deg); }
  to { transform: rotate(540deg); }
}

/* --zoom-x/y do JS tính để kéo ống kính về giữa khung hình */
.intro.is-zooming .intro__camera {
  transform: translate3d(var(--zoom-x, 0px), var(--zoom-y, 0px), 0) scale(5);
}

.intro.is-zooming .intro__flash { opacity: 1; transition-delay: .35s; }

.intro.is-theater .intro__flash { opacity: 0; transition: opacity .8s ease-out; }
.intro.is-theater .intro__theater { opacity: 1; }
.intro.is-theater .intro__scene { visibility: hidden; }
.intro.is-titled .intro__screen-title { opacity: 1; }
.intro.is-entering .intro__theater { transform: scale(4.2); }

/* =================== GIẢM CHUYỂN ĐỘNG =================== */
@media (prefers-reduced-motion: reduce) {
  .intro__smoke,
  .intro__dust { display: none; }

  .intro__spot,
  .intro__cta::before { animation: none; }

  .intro__curtain,
  .intro__fabric,
  .intro__camera,
  .camera-svg,
  .camera-svg__reel {
    transition: none !important;
    animation: none !important;
  }

  .intro.is-gone { transition: opacity .6s ease; }
}