@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700&display=swap');

:root {
  color-scheme: light;
  --navy: #071a3d;
  --navy-soft: #18335c;
  --sand: #efe6d3;
  --ivory: #fbf8f0;
  --gold: #c8983f;
  --gold-light: #e3bd6a;
  --line: rgba(7, 26, 61, 0.14);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--sand);
  color: var(--navy);
  font-family: "Noto Kufi Arabic", Tahoma, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.viewport {
  width: 100vw;
  height: 100dvh;
  min-height: 320px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.52), transparent 38%),
    linear-gradient(180deg, #f3ead9 0%, #eee4d0 44%, #d9dfdb 100%);
}

.stage {
  position: relative;
  width: min(100vw, 56.25dvh);
  aspect-ratio: 9 / 16;
  max-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 47%),
    linear-gradient(174deg, #f7efdf 0%, #ede2cd 43%, #c8d2d2 100%);
  box-shadow: 0 20px 80px rgba(7, 26, 61, 0.14);
}

.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.28;
  background:
    linear-gradient(115deg, transparent 0 47%, rgba(200, 152, 63, 0.22) 47.1% 47.22%, transparent 47.32% 100%),
    linear-gradient(65deg, transparent 0 53%, rgba(200, 152, 63, 0.18) 53.1% 53.22%, transparent 53.32% 100%);
  pointer-events: none;
}

.quiet-grid {
  position: absolute;
  inset: 22% 0 22%;
  opacity: 0.4;
  background-image:
    linear-gradient(45deg, transparent 47%, var(--line) 47.3%, var(--line) 47.55%, transparent 47.85%),
    linear-gradient(-45deg, transparent 47%, var(--line) 47.3%, var(--line) 47.55%, transparent 47.85%);
  background-size: 12cqw 12cqw;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}

.arch {
  position: absolute;
  z-index: 0;
  top: 24%;
  left: 9%;
  width: 82%;
  height: 50%;
  border: 1px solid rgba(7, 26, 61, 0.13);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 29% 29% 0 0;
  box-shadow:
    0 0 0 1cqw rgba(200, 152, 63, 0.035),
    0 0 7cqw rgba(7, 26, 61, 0.09);
  pointer-events: none;
}

.arch::before,
.arch::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 8%;
  border-left: 1px solid rgba(7, 26, 61, 0.08);
  border-right: 1px solid rgba(7, 26, 61, 0.08);
}

.arch::before { left: 12%; }
.arch::after { right: 12%; }

.uae-accent {
  position: absolute;
  z-index: 1;
  top: 23.8%;
  left: 9%;
  display: flex;
  gap: 0.9cqw;
  align-items: center;
  opacity: 0.88;
}

.uae-accent i {
  display: block;
  width: 2.1cqw;
  height: 0.65cqw;
  border-radius: 999px;
}

.uae-accent i:nth-child(1) { background: #00732f; }
.uae-accent i:nth-child(2) { background: #ffffff; box-shadow: 0 0 0 1px rgba(7, 26, 61, 0.09); }
.uae-accent i:nth-child(3) { background: #ce1126; }

.content {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.brand-logo {
  position: absolute;
  top: 0.26%;
  width: 15.3%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.occasion {
  position: absolute;
  top: 9.8%;
  margin: 0;
  color: var(--gold);
  font-size: 2.25cqw;
  font-weight: 600;
  letter-spacing: 0.03em;
}

h1 {
  position: absolute;
  top: 13.4%;
  width: 86%;
  margin: 0;
  color: var(--navy);
  font-size: 4.45cqw;
  font-weight: 700;
  line-height: 1.38;
  letter-spacing: -0.04em;
}

.lead {
  position: absolute;
  top: 22.8%;
  width: 84%;
  margin: 0;
  color: var(--navy-soft);
  font-size: 2.35cqw;
  font-weight: 500;
  line-height: 1.7;
}

.card-figure {
  position: absolute;
  top: 26.8%;
  width: 78%;
  margin: 0;
  filter: drop-shadow(0 2.1cqw 2.6cqw rgba(7, 26, 61, 0.2));
  animation: cardFloat 5.8s ease-in-out infinite;
}

.card-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.encouragement {
  position: absolute;
  top: 48%;
  width: 80%;
  margin: 0;
  color: var(--navy);
  font-size: 2.45cqw;
  font-weight: 600;
  line-height: 1.75;
}

.cta {
  position: absolute;
  top: 52.3%;
  display: grid;
  place-items: center;
  width: 54%;
  min-height: 6.1%;
  padding: 1.5cqw 3cqw;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  color: #fffaf0;
  background: linear-gradient(135deg, #b57d24 0%, #d7ad58 52%, #b57d24 100%);
  box-shadow: 0 1.3cqw 2.2cqw rgba(89, 57, 8, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.34);
  font-size: 2.65cqw;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  animation: ctaBreath 3.8s ease-in-out infinite;
}

.cta:focus-visible {
  outline: 0.45cqw solid rgba(7, 26, 61, 0.34);
  outline-offset: 0.7cqw;
}

@keyframes cardFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.65cqw);
  }
}

@keyframes ctaBreath {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 1.3cqw 2.2cqw rgba(89, 57, 8, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.34);
  }
  50% {
    transform: scale(1.018);
    box-shadow: 0 1.7cqw 2.7cqw rgba(89, 57, 8, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.34);
  }
}

.legal {
  position: absolute;
  top: 59.2%;
  width: 78%;
  margin: 0;
  color: rgba(7, 26, 61, 0.68);
  font-size: 1.55cqw;
  font-weight: 400;
  line-height: 1.7;
}

.promo-copy {
  position: absolute;
  z-index: 4;
  top: 62.6%;
  height: auto;
  transform: translateY(0);
  left: 7%;
  width: 86%;
  text-align: center;
}

.promo-copy h2,
.promo-copy p {
  margin: 0;
}

.promo-copy h2 {
  color: var(--navy);
  font-size: 2.55cqw;
  font-weight: 700;
  line-height: 1.2;
}

.promo-copy p {
  max-width: 84%;
  margin: 0.75cqw auto 0;
  padding: 0.7cqw 1.4cqw;
  border-top: 0.2cqw solid rgba(200, 152, 63, 0.7);
  border-bottom: 0.2cqw solid rgba(200, 152, 63, 0.7);
  border-radius: 0.8cqw;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  color: var(--navy-soft);
  font-size: 2.15cqw;
  font-weight: 600;
  line-height: 1.55;
  text-wrap: balance;
}

.promo-panel {
  position: absolute;
  z-index: 3;
  top: 74.8%;
  left: 7%;
  width: 86%;
  height: 24.3%;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(200, 152, 63, 0.36);
  border-radius: 2.2cqw;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.5), transparent 34%),
    linear-gradient(145deg, rgba(251, 248, 240, 0.88), rgba(214, 222, 220, 0.72));
  box-shadow: 0 1.4cqw 3.5cqw rgba(7, 26, 61, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.promo-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  width: 64%;
  height: 0.35cqw;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}

.promo-panel h2,
.promo-panel p {
  position: relative;
  z-index: 1;
  margin: 0;
}

.promo-panel h2 {
  color: var(--navy);
  font-size: 3cqw;
  font-weight: 700;
  line-height: 1.25;
}

.promo-panel > p {
  margin-top: 0.6cqw;
  color: var(--navy-soft);
  font-size: 2cqw;
  font-weight: 600;
  line-height: 1.5;
}

.package-gallery {
  position: absolute;
  inset: 0;
  height: 100%;
  overflow: hidden;
  direction: ltr;
}

.package-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.package-slide {
  flex: 0 0 100%;
  position: relative;
  display: block;
  justify-items: center;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  direction: rtl;
}

.package-visual {
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
  align-self: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.package-visual img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.package-slide figcaption {
  position: absolute;
  right: 5%;
  bottom: 1.2cqw;
  left: 5%;
  width: auto;
  padding-top: 0;
  color: #fff;
  font-size: 1.9cqw;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 0.2cqw 0.6cqw rgba(0, 0, 0, 0.9);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation: none !important;
  }

  .package-track {
    transition: none;
  }
}

@media (max-aspect-ratio: 9 / 16) {
  .stage { width: 100vw; }
}