/* ============================================================
   Tafseela launch page — card-image background + buttons
   ----------------------------------------------------------- */

:root {
  --tilt-x: 0; /* set by device-orientation handler in script.js; -1..1 */

  /* brand palette */
  --wine:        #450427;
  --raspberry:   #860349;
  --pinkish-red: #C80842;
  --coral:       #F2472D;
  --peach:       #FFA44F;
  --cream:       #FDF6F0;
  --pale-pink:   #F9E9F2;

  /* card aspect ratio (matches card.png 3307×3779) */
  --card-ar: 2801 / 3586;

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* ----- locked-in layout tokens (tuned values) ----- */
  --card-max-px:  478;   /* desktop max width (px) */
  --card-vw-pct:  88;    /* mobile width cap (vw)  */
  --card-svh-pct: 82;    /* short-screen height cap (svh) */
  --band-top:     45;    /* % from top of card     */
  --band-bottom:  17;    /* % from bottom of card  */
  --band-inset:   17;    /* % from left/right of card */
  --btn-pad-y:    0.95;  /* em — button vertical padding */
  --btn-pad-x:    1.8;   /* em — button horizontal padding */
  --btn-font-max: 1.05;  /* rem — button font cap */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

html, body {
  /* Single-screen, fully locked iOS-app-style layout — no scroll,
     no rubber-band overscroll, no zoom on tap. The page is exactly
     the viewport size, never more. */
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  position: fixed;
  inset: 0;
  overscroll-behavior: none;
  scrollbar-width: none;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

/* Flex column on body so the stage fills available space and the
   brand footer takes its natural height at the bottom. */
body { display: flex; flex-direction: column; }
.stage { flex: 1 1 auto; min-height: 0; }

/* ============================================================
   Brand footer below the card
   ----------------------------------------------------------- */

.card-footer {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.18rem, .8vmin, .35rem);
  padding: clamp(.4rem, 1.4vmin, .9rem) clamp(1rem, 3vmin, 1.6rem)
           clamp(.5rem, 1.6vmin, 1rem);
  text-align: center;
  color: var(--wine);
  pointer-events: none;
}
.card-footer p {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  flex-wrap: wrap;
  justify-content: center;
}
.card-footer__micro {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(.62rem, 1.5vmin, .78rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--raspberry);
  opacity: .75;
}
.card-footer__copy {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(.55rem, 1.3vmin, .68rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wine);
  opacity: .5;
}
.card-footer__dot {
  display: inline-block;
  opacity: .6;
}
.card-footer [lang="ar"] {
  font-family: 'Amiri', serif;
  letter-spacing: 0;
  text-transform: none;
}

body {
  background: var(--pale-pink);
  color: var(--cream);
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Kill iOS pull-to-refresh + pinch-zoom + double-tap-zoom — none of
     them belong on a locked single-screen launch page. Taps still
     work because tap is a click event, not a touch behavior. */
  touch-action: none;
  /* iOS-native touches */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;     /* no long-press image/link menu */
  -webkit-user-select: none;       /* no accidental text selection on tap-hold */
  user-select: none;
  /* Honor the iPhone safe-area insets (notch / home indicator). */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  box-sizing: border-box;
}
/* touch-action doesn't inherit — apply it to the whole document so a
   touch starting on the card or any floater can't trigger pull-to-
   refresh either. */
html, body, .stage, .card, .btn, .arfaj, .spark, .particles span {
  touch-action: none;
}
/* Modals + embedded form iframes still need normal touch behavior so
   users can scroll inside Google Forms. */
.modal, .modal *, .modal iframe { touch-action: auto; }
/* Re-enable selection in form/text contexts where users might want it. */
.modal__body input, .modal__body textarea, .modal__address {
  -webkit-user-select: text;
  user-select: text;
}

/* atmospheric wash — corner glows in brand pinks/wine only */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(80vmax 80vmax at 70% 25%, rgba(239, 182, 203, .14), transparent 60%),
    radial-gradient(70vmax 70vmax at 18% 85%, rgba(200, 8, 66, .07), transparent 60%),
    radial-gradient(50vmax 50vmax at 85% 95%, rgba(134, 3, 73, .06), transparent 60%);
  mix-blend-mode: multiply;
  z-index: 0;
}

/* big soft cream/pink glow centered behind the card */
body::after {
  content: '';
  position: fixed;
  left: 50%; top: 50%;
  width: min(900px, 90vmin);
  height: min(900px, 90vmin);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(253, 246, 240, .35),
    rgba(239, 182, 203, .18) 28%,
    rgba(200, 8, 66, .06) 55%,
    transparent 68%);
  filter: blur(40px);
  z-index: 0;
  pointer-events: none;
  animation: glowPulse 10s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: .7;  transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}

/* 4-point concave sparkle stars (matching the brand sparkle shape) */
.spark {
  position: fixed;
  width: var(--s, 14px);
  height: var(--s, 14px);
  pointer-events: none;
  z-index: 0;
  opacity: var(--o, .55);
  transform-origin: center;
  translate: calc(var(--tilt-x, 0) * 2vw) 0;
  transition: translate .4s var(--ease);
  animation: sparkTwinkle var(--td, 4s) ease-in-out var(--delay, 0s) infinite;
  filter: drop-shadow(0 0 6px rgba(253, 246, 240, .55));
}
.spark svg { width: 100%; height: 100%; display: block; }
.spark--pink   svg path { fill: rgba(239, 182, 203, .95); }
.spark--pale   svg path { fill: rgba(249, 233, 242, .95); }
.spark--cream  svg path { fill: rgba(253, 246, 240, .95); }
.spark--rasp   svg path { fill: rgba(200, 8, 66, .65); }

@keyframes sparkTwinkle {
  0%, 100% { transform: scale(.85) rotate(0deg);   opacity: var(--o, .35); }
  50%      { transform: scale(1.15) rotate(45deg); opacity: 1; }
}

/* Arfaj flowers (Rhanterium epapposum, Kuwait's national flower)
   drifting up the screen — small tribute to the arfaj movement. */
.arfaj {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--af-w, 36px);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  will-change: transform, opacity, translate;
  /* Tilt: arfaj drift toward the side the phone is tipped. Layered
     on top of the float + spin transforms via the separate translate
     property so the animations keep running. */
  translate: calc(var(--tilt-x, 0) * 4vw) 0;
  transition: translate .35s var(--ease);
  animation:
    arfajFloat var(--af-dur, 32s) linear var(--af-delay, 0s) infinite,
    arfajSpin  var(--af-spin, 18s) linear var(--af-delay, 0s) infinite;
}
.arfaj img {
  width: 100%;
  height: auto;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  filter: drop-shadow(0 4px 10px rgba(122, 58, 0, .25));
}

@keyframes arfajFloat {
  0%   { transform: translate3d(var(--af-xs, 50vw), var(--af-ys, 50vh), 0); opacity: 0; }
  8%   { opacity: var(--af-op, .55); }
  92%  { opacity: var(--af-op, .55); }
  100% { transform: translate3d(var(--af-xe, 50vw), var(--af-ye, -10vh), 0); opacity: 0; }
}
@keyframes arfajSpin {
  0%   { rotate: 0deg; }
  100% { rotate: 360deg; }
}

/* ============================================================
   Stage
   ----------------------------------------------------------- */

.stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: clamp(.5rem, 3vmin, 2rem);
}

/* ============================================================
   Card (the image itself acts as the chrome)
   ----------------------------------------------------------- */

.card {
  position: relative;
  /* Card size composed from three caps (px / vw / svh-via-aspect)
     using locked-in token values from :root. */
  width: min(
    calc(var(--card-max-px)  * 1px),
    calc(var(--card-vw-pct)  * 1vw),
    calc(var(--card-svh-pct) * 1svh * (2801 / 3586))
  );
  aspect-ratio: var(--card-ar);
  /* Centered transform origin so scale + rotate stay symmetric around
     the card's middle, not the upper-left tag-string anchor. */
  transform-origin: 50% 50%;
}

/* Entrance + drop-shadow for the card. The card stays perfectly
   straight at rest — only the background floaters (arfaj, sparkles)
   respond to device tilt. Keeps the focal element calm and on-axis. */
.card {
  opacity: 0;
  transform: translateY(-2vh);
  transition: opacity .6s var(--ease);
  will-change: transform, opacity;
  filter: drop-shadow(0 30px 50px rgba(69, 4, 39, .22));
}

.card__art {
  position: absolute; inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.is-ready .card {
  opacity: 1;
  /* Card lands straight and stays straight, with only a very slight
     vertical "breathe" so it isn't perfectly static. No idle rotation. */
  animation:
    cardDrop 1.4s var(--ease) .15s both,
    cardBreathe 9s ease-in-out 1.6s infinite;
}

@keyframes cardDrop {
  0%   { opacity: 0; transform: translateY(-5vh); }
  60%  { opacity: 1; transform: translateY(.6vh); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes cardBreathe {
  /* Gentle continuous drift — the card sways in a small lazy figure-8
     so it feels alive without being movable by the user. */
  0%, 100% { transform: translate(0, 0)         rotate(0deg); }
  25%      { transform: translate(6px, -4px)    rotate(.6deg); }
  50%      { transform: translate(0, -8px)      rotate(0deg); }
  75%      { transform: translate(-6px, -4px)   rotate(-.6deg); }
}

/* ============================================================
   Buttons — positioned in the card's empty middle band.
   The card image's empty band sits roughly between 47% and 78%
   of the image height (between the tagline and the dotted line).
   ----------------------------------------------------------- */

.links {
  position: absolute;
  /* Band geometry driven by the locked-in tokens in :root. The translate
     nudges the whole stack 17 px leftward to compensate for the card
     image's slight asymmetric padding. */
  top:    calc(var(--band-top)    * 1%);
  bottom: calc(var(--band-bottom) * 1%);
  left:   calc(var(--band-inset)  * 1%);
  right:  calc(var(--band-inset)  * 1%);
  translate: -17px 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;            /* fill width of band */
  gap: clamp(.45rem, 2.6cqi, .95rem);
  container-type: inline-size;
}

.btn {
  --b-bg: transparent;
  --b-fg: var(--cream);
  position: relative;
  /* Non-bilingual buttons use flex with center justify so icon + label
     cluster in the middle of the pill instead of slamming to the left
     edge — visually balances them against the bilingual buttons. */
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 100%;
  max-width: 100%;            /* never wider than the band */
  min-width: 0;               /* allow children to shrink */
  gap: .55em;
  padding:
    calc(var(--btn-pad-y) * 1em)
    calc(var(--btn-pad-x) * 1em);
  line-height: 1.15;
  text-decoration: none;
  color: var(--b-fg);
  background: var(--b-bg);
  border: 1.2px solid var(--cream);
  border-radius: 999px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  /* cqi here means % of the .links container width. With a 322 px card
     and 9% insets the container is ~264 px → font ≈ 14.5 px at 5.5cqi.
     Caps prevent buttons from getting absurdly large on a desktop where
     the card is at its full 360 px. */
  font-size: clamp(.85rem, 5.5cqi, calc(var(--btn-font-max) * 1rem));
  /* CRITICAL: prevent inner grid content from overflowing the pill. */
  overflow: hidden;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition:
    transform .35s var(--ease),
    background .35s var(--ease),
    color .35s var(--ease),
    box-shadow .35s var(--ease),
    border-color .35s var(--ease);
  opacity: 0;
  transform: translateY(8px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* The tiny blur behind the buttons is gorgeous on desktop but
   expensive on mobile compositors — desktop only. */
@media (pointer: fine) and (min-width: 720px) {
  .btn { backdrop-filter: blur(2px); }
}

/* Bilingual buttons override the base flex layout with a 4-column grid:
     icon | english | sep | arabic
   minmax(0, …) lets the text cells shrink instead of forcing the row
   wider than the pill body. */
.btn--bi {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, auto);
}

.btn__icon {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.btn__label { justify-self: start; }

.btn__sep {
  width: 1px;
  height: 1em;
  background: currentColor;
  opacity: .35;
}

.btn__ar {
  font-family: 'Aref Ruqaa', serif;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: .92em;
  white-space: nowrap;
}

.btn__label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.btn__ar {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Narrow band — drop the Arabic label inside bilingual buttons so the
   pill stays single-line. Triggered by the .links container width so it
   reacts to the actual card size, not the viewport. */
@container (max-width: 260px) {
  .btn--bi { grid-template-columns: auto 1fr; }
  .btn--bi .btn__sep,
  .btn--bi .btn__ar { display: none; }
}

.btn:hover,
.btn:focus-visible {
  --b-bg: var(--cream);
  --b-fg: var(--wine);
  transform: translateY(-3px);
  box-shadow:
    0 14px 28px -16px rgba(200, 8, 66, .55),
    0 2px 0 rgba(69, 4, 39, .18);
  border-color: var(--cream);
}
.btn:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.btn:active { transform: translateY(-1px) scale(.995); }

.is-ready .btn { animation: rise .55s var(--ease) forwards; }
.is-ready .btn:nth-of-type(1) { animation-delay: 1.20s; }
.is-ready .btn:nth-of-type(2) { animation-delay: 1.35s; }
.is-ready .btn:nth-of-type(3) { animation-delay: 1.50s; }
.is-ready .btn:nth-of-type(4) { animation-delay: 1.65s; }

/* ============================================================
   Particles
   ----------------------------------------------------------- */

.particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.particles span {
  position: absolute;
  width: var(--p-size, 6px);
  height: var(--p-size, 6px);
  border-radius: 50%;
  background: var(--p-color, var(--cream));
  opacity: 0;
  filter: blur(.4px);
  animation: drift var(--p-dur, 22s) linear var(--p-delay, 0s) infinite;
}

@keyframes drift {
  0%   { transform: translate3d(var(--p-x, 0vw), var(--p-y, 0vh), 0) scale(.6); opacity: 0; }
  10%  { opacity: var(--p-op, .22); }
  90%  { opacity: var(--p-op, .22); }
  100% { transform: translate3d(calc(var(--p-x, 0vw) + var(--p-dx, 8vw)), calc(var(--p-y, 0vh) - 110vh), 0) scale(1); opacity: 0; }
}

@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   Responsive — card always fits viewport, buttons scale with it.
   The buttons use container queries off the .links band so they
   stay proportional regardless of card size.
   ----------------------------------------------------------- */

/* The default .card width rule above handles every viewport — small
   phone, large phone, laptop, desktop. The button sizing is driven by
   container queries inside .links so it scales with the actual band
   width regardless of viewport. We deliberately do NOT shrink button
   padding on small screens — the cqi-based font already adapts. */
@media (max-height: 600px) {
  .btn { padding: .8em 1.1em; }
}

/* ============================================================
   Modal — opens in-page instead of launching a new tab
   ----------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.modal[aria-hidden="false"] {
  pointer-events: auto;
  opacity: 1;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(69, 4, 39, .88);
}
/* Backdrop blur only on devices that can afford it (desktop pointers). */
@media (pointer: fine) and (min-width: 720px) {
  .modal__backdrop {
    background: rgba(69, 4, 39, .78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

.modal__panel {
  position: relative;
  width: min(560px, 94vw);
  max-width: 94vw;
  max-height: 90svh;
  background: var(--wine);
  color: var(--cream);
  border: 1px solid rgba(239, 182, 203, .25);
  border-radius: 14px;
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(239, 182, 203, .25);
  padding: clamp(1rem, 3.5vmin, 1.8rem);
  padding-top: clamp(2.4rem, 4.5vmin, 3rem); /* room for close button */
  transform: translateY(16px) scale(.98);
  transition: transform .35s var(--ease);
  display: flex;
  flex-direction: column;
}
.modal[aria-hidden="false"] .modal__panel {
  transform: translateY(0) scale(1);
}

.modal__close {
  position: absolute;
  top: .55rem;
  right: .65rem;
  width: 2.2rem;
  height: 2.2rem;
  background: transparent;
  border: 1px solid var(--cream);
  border-radius: 50%;
  color: var(--cream);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.modal__close:hover,
.modal__close:focus-visible {
  background: var(--cream);
  color: var(--wine);
  outline: none;
}

.modal__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(.7rem, 2vmin, 1.2rem);
  overflow: hidden;
  min-height: 0;
}
.modal__body h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.4rem, 4.5vmin, 2.2rem);
  color: var(--cream);
}
.modal__body p {
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(.95rem, 2.4vmin, 1.15rem);
  color: var(--pale-pink);
  letter-spacing: .02em;
}
.modal__address {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1rem, 3vmin, 1.35rem) !important;
  letter-spacing: .04em !important;
  color: var(--cream) !important;
  padding: .6em .9em;
  background: rgba(253, 246, 240, .08);
  border: 1px solid rgba(253, 246, 240, .25);
  border-radius: 10px;
  user-select: all;
  word-break: break-all;
}
.modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: auto;
}
.modal__action {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  padding: .55em 1.1em;
  text-decoration: none;
  color: var(--cream);
  background: transparent;
  border: 1px solid var(--cream);
  border-radius: 999px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(.85rem, 2.4vmin, 1rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
.modal__action:hover,
.modal__action:focus-visible {
  background: var(--cream);
  color: var(--wine);
  outline: none;
  transform: translateY(-1px);
}
.modal__action.is-copied {
  background: var(--cream);
  color: var(--wine);
}

.modal--form .modal__panel {
  width: min(720px, 96vw);
  height: 90svh;
  max-height: 90svh;
  padding: clamp(.7rem, 2.5vmin, 1.1rem);
  padding-top: clamp(2.4rem, 4.5vmin, 3rem);
}
.modal--form .modal__body { gap: .55rem; }
.modal--form iframe {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 10px;
  background: var(--cream);
  min-height: 0;
}
.modal--form .modal__actions { margin-top: 0; flex: 0 0 auto; }
.modal--form .modal__body h2 { flex: 0 0 auto; }

/* Phone-specific tightening so the form takes the full screen comfortably. */
@media (max-width: 520px) {
  .modal__panel {
    width: 96vw;
    border-radius: 12px;
    padding: clamp(.9rem, 3.5vmin, 1.2rem);
    padding-top: 2.6rem;
  }
  .modal__close {
    width: 2rem;
    height: 2rem;
    top: .4rem;
    right: .4rem;
    font-size: 1.25rem;
  }
  .modal__body h2 { font-size: 1.35rem; }
  .modal__action { padding: .55em .9em; font-size: .85rem; }
  .modal--form .modal__panel {
    width: 96vw;
    height: 92svh;
    max-height: 92svh;
    padding: .7rem;
    padding-top: 2.4rem;
  }
  .modal--form .modal__body { gap: .45rem; }
  .modal--form .modal__body h2 { font-size: 1.2rem; }
}

.modal--lock { overflow: hidden !important; }

/* ============================================================
   Reduced motion
   ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001s !important;
    animation-delay: 0s !important;
    transition-duration: .001s !important;
  }
  .is-ready .card { animation: none; opacity: 1; transform: none; }
  .particles { display: none; }
}