/* ====================================================================== *
 * File: landing.css
 * Location: static/css/landing.css
 * Description: Luxury full-screen landing page with flowing CSS curtain motion.
 * Version: 4.0.0
 * Last Modified: Sat Aug 08 2026 - 20:25
 * Dependencies: Vazirmatn webfont, local award assets, local eNAMAD asset
 * ====================================================================== */

/* -------------------------------------------------------------------------- *
 * 1. Typography, palette, and reset
 * -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;
  --landing-font: "Vazirmatn", "Vazir", "Shabnam", Tahoma, Arial, sans-serif;
  --landing-ink: #fbfdff;
  --landing-muted: rgba(239, 245, 255, 0.72);
  --landing-gold-1: #fff1bf;
  --landing-gold-2: #e9c46d;
  --landing-gold-3: #bf852b;
  --landing-blue-1: #3f78e8;
  --landing-blue-2: #1d4ea7;
  --landing-blue-3: #0d285f;
  --landing-violet: #7551c9;
}

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  font-family: var(--landing-font);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

/* -------------------------------------------------------------------------- *
 * 2. Full-viewport canvas
 * -------------------------------------------------------------------------- */

.landing-page {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding:
    max(24px, env(safe-area-inset-top))
    max(30px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(30px, env(safe-area-inset-left));
  background:
    linear-gradient(135deg, #020713 0%, #06152f 30%, #0a2854 64%, #10183d 100%);
  color: var(--landing-ink);
}

.landing-page::before {
  content: "";
  position: absolute;
  z-index: -5;
  inset: 0;
  background:
    linear-gradient(118deg, rgba(28, 64, 141, 0.13), transparent 27%, rgba(45, 91, 175, 0.12) 47%, transparent 68%, rgba(94, 62, 170, 0.11)),
    linear-gradient(20deg, rgba(233, 196, 109, 0.04), transparent 35%, rgba(44, 140, 232, 0.09) 70%, transparent);
  pointer-events: none;
}

.landing-page::after {
  content: "";
  position: absolute;
  z-index: 10;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(1, 4, 13, 0.08), transparent 20%, transparent 74%, rgba(1, 4, 13, 0.24)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.14), transparent 15%, transparent 85%, rgba(0, 0, 0, 0.14));
}

/* -------------------------------------------------------------------------- *
 * 3. Flowing curtain animation — no orbital circles or plus motifs
 * -------------------------------------------------------------------------- */

.landing-curtain-field {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}

.landing-curtain {
  position: absolute;
  top: -22%;
  height: 148%;
  border-radius: 46% 54% 42% 58% / 14% 18% 82% 86%;
  opacity: 0.6;
  transform-origin: 50% 0;
  will-change: transform, opacity;
}

.landing-curtain::before,
.landing-curtain::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.landing-curtain::before {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.015) 0%,
      rgba(255, 255, 255, 0.13) 14%,
      rgba(59, 123, 242, 0.08) 25%,
      rgba(255, 255, 255, 0.025) 42%,
      rgba(255, 255, 255, 0.12) 58%,
      rgba(44, 104, 218, 0.08) 72%,
      rgba(255, 255, 255, 0.02) 88%,
      rgba(255, 255, 255, 0.08) 100%
    );
  opacity: 0.72;
}

.landing-curtain::after {
  inset: 4% 8%;
  background:
    linear-gradient(92deg, transparent 0 22%, rgba(255, 255, 255, 0.12) 37%, transparent 53%, rgba(230, 195, 109, 0.08) 72%, transparent 91%);
  opacity: 0.52;
  animation: landing-curtain-sheen 9s ease-in-out infinite alternate;
}

.landing-curtain-a {
  left: -15%;
  width: 38vw;
  min-width: 430px;
  background:
    linear-gradient(180deg, rgba(48, 94, 205, 0.7), rgba(15, 45, 104, 0.22) 60%, rgba(8, 25, 65, 0.05));
  box-shadow: 36px 0 90px rgba(42, 91, 206, 0.1);
  animation: landing-curtain-a 16s ease-in-out infinite alternate;
}

.landing-curtain-b {
  left: 10%;
  width: 31vw;
  min-width: 350px;
  opacity: 0.44;
  background:
    linear-gradient(180deg, rgba(70, 113, 232, 0.44), rgba(15, 51, 118, 0.16) 65%, rgba(5, 20, 56, 0.02));
  animation: landing-curtain-b 19s ease-in-out -5s infinite alternate;
}

.landing-curtain-c {
  left: 39%;
  width: 24vw;
  min-width: 300px;
  opacity: 0.38;
  background:
    linear-gradient(180deg, rgba(233, 196, 109, 0.17), rgba(54, 113, 224, 0.18) 38%, rgba(19, 49, 108, 0.06));
  animation: landing-curtain-c 14s ease-in-out -3s infinite alternate;
}

.landing-curtain-d {
  right: 8%;
  width: 31vw;
  min-width: 360px;
  opacity: 0.48;
  background:
    linear-gradient(180deg, rgba(42, 128, 222, 0.4), rgba(31, 72, 151, 0.18) 58%, rgba(83, 54, 159, 0.08));
  animation: landing-curtain-d 18s ease-in-out -8s infinite alternate;
}

.landing-curtain-e {
  right: -18%;
  width: 40vw;
  min-width: 450px;
  opacity: 0.52;
  background:
    linear-gradient(180deg, rgba(81, 64, 176, 0.36), rgba(31, 71, 148, 0.16) 62%, rgba(15, 37, 90, 0.03));
  box-shadow: -34px 0 88px rgba(88, 63, 190, 0.08);
  animation: landing-curtain-e 21s ease-in-out -6s infinite alternate;
}

/* - - - 3.1. Cross-screen silk ribbons - - - */

.landing-ribbon {
  position: absolute;
  left: -14vw;
  width: 132vw;
  border-radius: 48% 52% 44% 56% / 34% 44% 56% 66%;
  transform-origin: center;
  will-change: transform, opacity;
}

.landing-ribbon-a {
  top: 18%;
  height: 23vh;
  min-height: 160px;
  opacity: 0.34;
  background:
    linear-gradient(180deg, transparent 0%, rgba(73, 137, 243, 0.13) 25%, rgba(255, 255, 255, 0.08) 48%, rgba(35, 91, 192, 0.11) 70%, transparent 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  animation: landing-ribbon-a 13s ease-in-out infinite alternate;
}

.landing-ribbon-b {
  bottom: 8%;
  height: 19vh;
  min-height: 135px;
  opacity: 0.27;
  background:
    linear-gradient(180deg, transparent 0%, rgba(118, 78, 207, 0.12) 24%, rgba(233, 196, 109, 0.08) 51%, rgba(50, 101, 207, 0.09) 72%, transparent 100%);
  animation: landing-ribbon-b 16s ease-in-out -4s infinite alternate;
}

/* - - - 3.2. Slow luminous sweep across curtain folds - - - */

.landing-silk-sweep {
  position: absolute;
  top: -26%;
  left: -30%;
  width: 28vw;
  min-width: 300px;
  height: 160%;
  opacity: 0.17;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14) 38%, rgba(233, 196, 109, 0.11) 52%, rgba(101, 163, 255, 0.12) 62%, transparent);
  transform: rotate(19deg);
  will-change: transform;
  animation: landing-silk-sweep 17s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* -------------------------------------------------------------------------- *
 * 4. Top contact
 * -------------------------------------------------------------------------- */

.landing-topbar {
  position: absolute;
  z-index: 12;
  top: max(24px, env(safe-area-inset-top));
  right: max(30px, env(safe-area-inset-right));
  left: max(30px, env(safe-area-inset-left));
  display: flex;
  justify-content: flex-start;
}

.landing-contact-top {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(5, 18, 47, 0.28);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.84rem;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.landing-contact-top::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--landing-gold-2);
  box-shadow: 0 0 13px rgba(233, 196, 109, 0.6);
}

.landing-contact-top:hover {
  transform: translateY(-2px);
  border-color: rgba(233, 196, 109, 0.35);
  background: rgba(9, 27, 63, 0.5);
}

.landing-contact-top.is-disabled {
  opacity: 0.42;
}

/* -------------------------------------------------------------------------- *
 * 5. Hero
 * -------------------------------------------------------------------------- */

.landing-center {
  position: relative;
  z-index: 5;
  display: flex;
  width: min(900px, 100%);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 74px 20px 176px;
  text-align: center;
}

.landing-center h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(2.65rem, 5.1vw, 4.65rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.035em;
  text-shadow:
    0 18px 48px rgba(0, 0, 0, 0.28),
    0 0 34px rgba(65, 120, 228, 0.12);
}

.landing-accent {
  position: relative;
  width: 86px;
  height: 1px;
  margin-top: 18px;
  background: linear-gradient(90deg, transparent, rgba(233, 196, 109, 0.9), transparent);
}

.landing-accent::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--landing-gold-1);
  box-shadow: 0 0 14px rgba(233, 196, 109, 0.55);
  transform: translate(-50%, -50%);
}

.landing-cta {
  position: relative;
  display: inline-flex;
  min-width: 205px;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  margin-top: 31px;
  overflow: hidden;
  padding: 12px 28px;
  border: 1px solid rgba(255, 243, 205, 0.78);
  border-radius: 999px;
  background: linear-gradient(135deg, #f8e4aa 0%, #e2bb60 54%, #c38a31 100%);
  color: #07182f;
  font-size: 0.92rem;
  font-weight: 800;
  box-shadow:
    0 16px 42px rgba(204, 157, 56, 0.24),
    inset 0 1px rgba(255, 255, 255, 0.58);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.landing-cta::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -38%;
  width: 27%;
  height: 210%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.66), transparent);
  transform: rotate(18deg) translateX(-260%);
  animation: landing-button-sheen 6.4s ease-in-out 1s infinite;
  pointer-events: none;
}

.landing-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow:
    0 21px 55px rgba(204, 157, 56, 0.32),
    inset 0 1px rgba(255, 255, 255, 0.64);
}

.landing-cta:focus-visible,
.landing-contact-top:focus-visible,
.landing-social:focus-visible,
.enamad-seal-link:focus-visible {
  outline: 3px solid rgba(245, 221, 154, 0.8);
  outline-offset: 5px;
}

/* -------------------------------------------------------------------------- *
 * 6. Credentials — three separate items, three separate micro-plinths
 * -------------------------------------------------------------------------- */

.landing-credentials {
  position: absolute;
  z-index: 12;
  left: max(28px, env(safe-area-inset-left));
  bottom: max(58px, calc(env(safe-area-inset-bottom) + 46px));
  display: flex;
  align-items: flex-end;
  gap: 13px;
  direction: ltr;
}

.landing-credential {
  position: relative;
  display: flex;
  width: 70px;
  min-height: 98px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  user-select: none;
}

.landing-credential-enamad {
  width: 92px;
  pointer-events: auto;
}

.landing-credential-visual {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 76px;
  align-items: flex-end;
  justify-content: center;
}

.landing-award {
  display: block;
  width: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter:
    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.3))
    drop-shadow(0 0 10px rgba(221, 171, 57, 0.09));
}

.landing-award-consumer {
  height: 82px;
}

.landing-award-beauty {
  height: 78px;
}

.landing-enamad-visual {
  min-height: 76px;
}

/* - - - 6.1. Feather-light individual gold-glass shelves - - - */

.landing-micro-plinth {
  position: relative;
  z-index: 1;
  display: block;
  width: 54px;
  height: 5px;
  margin-top: 2px;
  border: 1px solid rgba(255, 235, 176, 0.34);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(233, 196, 109, 0.07));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 5px 9px rgba(220, 170, 57, 0.08),
    0 0 12px rgba(233, 196, 109, 0.07);
  opacity: 0.82;
}

.landing-micro-plinth::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(229, 185, 83, 0.16);
  filter: blur(5px);
}

.landing-credential-consumer .landing-micro-plinth {
  width: 58px;
}

.landing-credential-beauty .landing-micro-plinth {
  width: 50px;
}

.landing-credential-enamad .landing-micro-plinth {
  width: 76px;
}

/* - - - 6.2. eNAMAD — genuine recognizable mark, no white card - - - */

.enamad-seal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  transition: transform 180ms ease, filter 180ms ease;
}

.enamad-seal-link:hover {
  transform: translateY(-2px);
}

.enamad-seal-image {
  display: block;
  width: 86px;
  height: auto;
  max-height: 72px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 1px rgba(210, 232, 255, 0.95))
    drop-shadow(0 0 7px rgba(70, 145, 255, 0.28))
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.24));
}

/* -------------------------------------------------------------------------- *
 * 7. Social channels
 * -------------------------------------------------------------------------- */

.landing-socials {
  position: absolute;
  z-index: 12;
  left: max(30px, env(safe-area-inset-left));
  bottom: max(19px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
}

.landing-social {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  background: rgba(4, 18, 48, 0.24);
  color: rgba(255, 255, 255, 0.76);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  transition: transform 180ms ease, color 180ms ease, border-color 180ms ease, background 180ms ease;
}

.landing-social:hover {
  transform: translateY(-2px);
  color: var(--landing-gold-1);
  border-color: rgba(233, 196, 109, 0.3);
  background: rgba(13, 35, 78, 0.48);
}

.landing-social svg {
  width: 16px;
  height: 16px;
  overflow: visible;
  fill: currentColor;
}

.landing-social rect,
.landing-social circle,
.landing-social path:last-child:not(:only-child) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-social .landing-social-dot {
  fill: currentColor;
  stroke: none;
}

/* -------------------------------------------------------------------------- *
 * 8. Copyright
 * -------------------------------------------------------------------------- */

.landing-copyright {
  position: absolute;
  z-index: 12;
  right: 50%;
  bottom: max(21px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transform: translateX(50%);
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.landing-copyright-dot {
  color: rgba(233, 196, 109, 0.7);
}

/* -------------------------------------------------------------------------- *
 * 9. Responsive behavior
 * -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .landing-curtain-a,
  .landing-curtain-e {
    opacity: 0.48;
  }

  .landing-center h1 {
    font-size: clamp(2.55rem, 8vw, 4.15rem);
  }
}

@media (max-width: 700px) {
  .landing-page {
    padding-inline: 20px;
  }

  .landing-topbar {
    top: max(18px, env(safe-area-inset-top));
    right: max(20px, env(safe-area-inset-right));
    left: max(20px, env(safe-area-inset-left));
  }

  .landing-contact-top {
    min-height: 38px;
    padding: 8px 13px;
    font-size: 0.8rem;
  }

  .landing-center {
    padding: 72px 10px 218px;
  }

  .landing-center h1 {
    font-size: clamp(2.25rem, 10.5vw, 3.55rem);
  }

  .landing-cta {
    min-width: 190px;
    min-height: 51px;
    margin-top: 28px;
  }

  .landing-curtain {
    min-width: 270px;
  }

  .landing-curtain-a {
    left: -45%;
  }

  .landing-curtain-b {
    left: -4%;
  }

  .landing-curtain-c {
    left: 34%;
  }

  .landing-curtain-d {
    right: -10%;
  }

  .landing-curtain-e {
    right: -48%;
  }

  .landing-credentials {
    left: max(16px, env(safe-area-inset-left));
    bottom: max(64px, calc(env(safe-area-inset-bottom) + 52px));
    gap: 8px;
  }

  .landing-credential {
    width: 60px;
    min-height: 84px;
  }

  .landing-credential-enamad {
    width: 82px;
  }

  .landing-award-consumer {
    height: 70px;
  }

  .landing-award-beauty {
    height: 67px;
  }

  .enamad-seal-image {
    width: 76px;
    max-height: 63px;
  }

  .landing-socials {
    left: max(18px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
  }

  .landing-copyright {
    right: 20px;
    left: 20px;
    bottom: max(20px, env(safe-area-inset-bottom));
    transform: none;
    justify-content: flex-end;
    font-size: 0.68rem;
    white-space: normal;
  }
}

@media (max-width: 470px) {
  .landing-center {
    padding-bottom: 235px;
  }

  .landing-credentials {
    gap: 5px;
  }

  .landing-copyright {
    bottom: max(54px, calc(env(safe-area-inset-bottom) + 42px));
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-curtain,
  .landing-curtain::after,
  .landing-ribbon,
  .landing-silk-sweep,
  .landing-cta::before {
    animation: none !important;
  }

  .landing-cta,
  .landing-contact-top,
  .landing-social,
  .enamad-seal-link {
    transition: none;
  }
}

/* -------------------------------------------------------------------------- *
 * 10. Motion keyframes
 * -------------------------------------------------------------------------- */

@keyframes landing-curtain-a {
  0% { transform: translate3d(-5%, -1%, 0) rotate(-5deg) skewX(-4deg) scaleX(0.96); }
  50% { transform: translate3d(4%, 1.5%, 0) rotate(-1deg) skewX(3deg) scaleX(1.06); }
  100% { transform: translate3d(-1%, -0.5%, 0) rotate(-7deg) skewX(-1deg) scaleX(1.01); }
}

@keyframes landing-curtain-b {
  0% { transform: translate3d(-7%, 1%, 0) rotate(6deg) skewX(4deg) scaleX(1.02); }
  100% { transform: translate3d(8%, -1.5%, 0) rotate(1deg) skewX(-5deg) scaleX(0.93); }
}

@keyframes landing-curtain-c {
  0% { transform: translate3d(-6%, -1%, 0) rotate(-2deg) skewX(-5deg) scaleX(0.9); opacity: 0.28; }
  100% { transform: translate3d(7%, 1.8%, 0) rotate(4deg) skewX(4deg) scaleX(1.12); opacity: 0.46; }
}

@keyframes landing-curtain-d {
  0% { transform: translate3d(7%, -1%, 0) rotate(-4deg) skewX(5deg) scaleX(1.05); }
  100% { transform: translate3d(-7%, 1.5%, 0) rotate(3deg) skewX(-4deg) scaleX(0.94); }
}

@keyframes landing-curtain-e {
  0% { transform: translate3d(5%, 1%, 0) rotate(6deg) skewX(4deg) scaleX(0.95); }
  100% { transform: translate3d(-6%, -1%, 0) rotate(1deg) skewX(-4deg) scaleX(1.07); }
}

@keyframes landing-curtain-sheen {
  0% { transform: translate3d(-7%, 0, 0); opacity: 0.26; }
  100% { transform: translate3d(8%, 0, 0); opacity: 0.6; }
}

@keyframes landing-ribbon-a {
  0% { transform: translate3d(-2%, -8%, 0) rotate(-7deg) skewX(-5deg) scaleY(0.88); }
  100% { transform: translate3d(3%, 8%, 0) rotate(-2deg) skewX(4deg) scaleY(1.08); }
}

@keyframes landing-ribbon-b {
  0% { transform: translate3d(2%, 8%, 0) rotate(5deg) skewX(5deg) scaleY(1.04); }
  100% { transform: translate3d(-3%, -7%, 0) rotate(1deg) skewX(-4deg) scaleY(0.9); }
}

@keyframes landing-silk-sweep {
  0% { transform: translate3d(-10vw, 0, 0) rotate(19deg); }
  45% { transform: translate3d(64vw, 0, 0) rotate(19deg); }
  100% { transform: translate3d(138vw, 0, 0) rotate(19deg); }
}

@keyframes landing-button-sheen {
  0%, 62% { transform: rotate(18deg) translateX(-260%); }
  78%, 100% { transform: rotate(18deg) translateX(520%); }
}

/* ============================= End of landing.css ============================= */