:root {
  color-scheme: dark;
  background: #181714;
}

* { box-sizing: border-box; }

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

body { overflow: hidden; }

.scene {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: clip;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 55% at 48% 42%, rgba(84, 75, 58, .32), transparent 75%),
    radial-gradient(ellipse 55% 70% at 4% 93%, rgba(82, 59, 43, .22), transparent 78%),
    radial-gradient(ellipse 70% 60% at 94% 8%, rgba(70, 55, 42, .18), transparent 78%),
    linear-gradient(125deg, #25231e 0%, #191916 43%, #201e19 100%);
}

/* A cached Canvas tile adds mineral detail over the existing lighting. */
.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .78;
  background-image: var(--sand-texture);
  background-size: var(--sand-tile-size) var(--sand-tile-size);
  background-repeat: repeat;
  mix-blend-mode: overlay;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 80% at 50% 46%, transparent 42%, rgba(6, 6, 5, .34) 100%);
}

.fruit {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  transform: translate(-50%, -50%) translate(var(--clear-x, 0px), var(--clear-y, 0px)) rotate(var(--rotation));
  filter: drop-shadow(0 19px 13px rgba(0, 0, 0, .4)) drop-shadow(0 4px 4px rgba(0, 0, 0, .24));
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.surprise-button {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-width: 204px;
  padding: 16px 30px;
  border: 1px solid rgba(255, 246, 218, .65);
  border-radius: 100px;
  background: linear-gradient(150deg, #eee7d4, #d6c5a3);
  color: #383a2c;
  box-shadow: 0 8px 32px #0006, inset 0 1px 0 #fff7;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 18px);
  transition: opacity 800ms ease, transform 800ms cubic-bezier(.22, 1, .36, 1), visibility 800ms;
  -webkit-tap-highlight-color: transparent;
}

.surprise-button.is-ready {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.surprise-button.is-dismissed {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 14px);
  transition-duration: 350ms;
}

.surprise-button:hover { box-shadow: 0 10px 36px #0008, inset 0 1px 0 #fff9; }
.surprise-button:focus-visible { outline: 2px solid #fff5d3; outline-offset: 5px; }
.surprise-label { display: grid; gap: 2px; text-align: center; }
.surprise-label > span { font: 500 22px/1.25 Tajawal, Tahoma, sans-serif; white-space: nowrap; }
.surprise-label > span:lang(en) { font: 600 17px/1.25 Manrope, Arial, sans-serif; letter-spacing: .02em; }

.plated-fruit {
  position: absolute;
  z-index: 12;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 7px 5px #0005) drop-shadow(0 2px 2px #0003);
}
.fruit { opacity: 1; }
.surprise-button:disabled { cursor: wait; }

@media (prefers-reduced-motion: reduce) {
  .surprise-button { transition-duration: 250ms; }
}

.fruit { z-index: 1; }
/* Both layers sit beneath the curated fruit and never receive pointer input. */
.sand-response {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-size: 100% 100%;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.curation-plate {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform: translate(-50%, -50%);
  object-fit: contain;
  /* The PNG is the only plate artwork; its transparent outline casts a shadow. */
  filter: drop-shadow(0 16px 12px #0006) drop-shadow(0 3px 3px #0005);
}

/* Phones: once the plate forms, the field fruit stay where they are but go soft
   and dim underneath, so the plate, words and button are the only clear things.
   Matching filter lists so the blur can ease in. */
@media (max-width: 700px) {
  .fruit { filter: blur(0px) brightness(1) drop-shadow(0 19px 13px rgba(0, 0, 0, .4)) drop-shadow(0 4px 4px rgba(0, 0, 0, .24)); }
  .scene[data-assembly] .fruit {
    filter: blur(10px) brightness(.62) drop-shadow(0 19px 13px rgba(0, 0, 0, .4)) drop-shadow(0 4px 4px rgba(0, 0, 0, .24));
    transition: filter 1200ms cubic-bezier(.45, 0, .25, 1) 200ms;
  }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .scene[data-assembly] .fruit { transition: none; }
}

/* ---- Masthead ------------------------------------------------------------
   One type system for the homepage and the fruit notes overlay:
   Tajawal (Arabic), Manrope (wordmark, English headings, labels),
   DM Sans (English body). Cream text, gold labels, 40px / 20px frame. */
.masthead {
  position: absolute;
  z-index: 30;
  inset: 0 0 auto;
  padding: max(34px, env(safe-area-inset-top)) 40px 0;
  color: #f3e8d2;
  pointer-events: none;
}
/* Soft shade so the masthead reads over fruit; part of the existing vignette. */
.masthead::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 140px;
  z-index: -1;
  background:
    radial-gradient(ellipse 620px 100% at 0 0, rgba(12, 11, 9, .55), transparent 75%),
    linear-gradient(to bottom, rgba(12, 11, 9, .55), rgba(12, 11, 9, .22) 55%, transparent);
}
:root[dir="rtl"] .masthead::before {
  background:
    radial-gradient(ellipse 620px 100% at 100% 0, rgba(12, 11, 9, .55), transparent 75%),
    linear-gradient(to bottom, rgba(12, 11, 9, .55), rgba(12, 11, 9, .22) 55%, transparent);
}
.masthead-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font: 500 17px/1 Manrope, Arial, sans-serif;
  letter-spacing: .38em;
}
.wordmark svg { flex: none; }
.language-toggle {
  pointer-events: auto;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: rgba(243, 232, 210, .78);
  font: 500 14px/1 Tajawal, Tahoma, sans-serif;
  cursor: pointer;
  text-underline-offset: 6px;
  -webkit-tap-highlight-color: transparent;
}
.language-toggle:lang(en) { font: 500 13px/1 Manrope, Arial, sans-serif; letter-spacing: .04em; }
.language-toggle:hover { color: #f3e8d2; text-decoration: underline; text-decoration-color: rgba(234, 199, 139, .7); }
.language-toggle:focus-visible { outline: 2px solid #fff5d3; outline-offset: 5px; border-radius: 2px; }
/* ---- Intro ---------------------------------------------------------------
   The soil shows first, with a light veil in the middle that speaks about the
   season's variety. The fruit then spread out beneath it, nearest first, and
   the button appears below. The veil steps away on the first fruit touch or
   Mix. Positions, sizes and the Mix choreography are untouched. */
.intro {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 46%;
  display: grid;
  justify-items: center;
  width: min(640px, calc(100% - 40px));
  padding: 30px 24px;
  color: #f3e8d2;
  text-align: center;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .7);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: opacity 700ms ease, visibility 0s 700ms;
}
.intro::before {
  content: "";
  position: absolute;
  inset: -70px -110px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(12, 11, 9, .66), rgba(12, 11, 9, .42) 50%, transparent);
}
.intro > * { margin: 0; transition: opacity 900ms ease, translate 1100ms cubic-bezier(.2, .7, .2, 1); }
.season { margin-bottom: 16px; color: #eac78b; font: 500 15px/1 Tajawal, Tahoma, sans-serif; }
:root[lang="en"] .season { font: 600 11px/1 Manrope, Arial, sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.intro-title { font: 500 38px/1.3 Tajawal, Tahoma, sans-serif; text-wrap: balance; }
:root[lang="en"] .intro-title { font: 600 36px/1.15 Manrope, Arial, sans-serif; letter-spacing: -.02em; }
.intro-body { margin-top: 12px; max-width: 30em; font: 400 19px/1.55 Tajawal, Tahoma, sans-serif; text-wrap: balance; color: rgba(243, 232, 210, .9); }
:root[lang="en"] .intro-body { font: 400 17px/1.5 "DM Sans", Arial, sans-serif; }
/* The veil leaves once the visitor starts: a fruit touch, or Mix. */
.scene.intro-done .intro { opacity: 0; visibility: hidden; }
/* On the button press the words step back quickly, before the plate lands. */
.scene[data-assembly] .intro {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(.97);
  transition: opacity 380ms ease, transform 500ms ease, visibility 0s 500ms;
}

/* After the plate settles: a soft, tappable question just above the button. */
.want-plate {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: calc(max(28px, env(safe-area-inset-bottom)) + 84px);
  padding: 8px 14px;
  border: 0;
  background: none;
  color: #eac78b;
  font: 500 19px/1.3 Tajawal, Tahoma, sans-serif;
  text-decoration: underline;
  text-decoration-color: rgba(234, 199, 139, .45);
  text-underline-offset: 7px;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .7);
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 450ms ease, visibility 450ms, color 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
:root[lang="en"] .want-plate { font: 600 16px/1.3 Manrope, Arial, sans-serif; }
.want-plate:hover { color: #f6dfb0; text-decoration-color: currentColor; }
.want-plate:focus-visible { outline: 2px solid #fff5d3; outline-offset: 4px; border-radius: 4px; }
.scene[data-assembly="settled"] .want-plate { opacity: 1; visibility: visible; transition: opacity 700ms ease 500ms, visibility 0s 500ms; }

/* The season box card. */
.plate-card { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; }
.plate-card[hidden] { display: none; }
.plate-card-scrim {
  position: absolute; inset: 0;
  background: rgba(10, 9, 7, .62);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 420ms ease;
}
.plate-card-panel {
  position: relative;
  width: min(440px, 100%);
  padding: 30px 28px 26px;
  border: 1px solid rgba(234, 199, 139, .22);
  border-radius: 22px;
  background: linear-gradient(170deg, #2a2620, #1b1915);
  color: #f3e8d2;
  text-align: center;
  font-family: Tajawal, Tahoma, sans-serif;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(.2, .7, .2, 1);
}
:root[lang="en"] .plate-card-panel { font-family: "DM Sans", Arial, sans-serif; }
.plate-card.is-open .plate-card-scrim { opacity: 1; }
.plate-card.is-open .plate-card-panel { opacity: 1; transform: none; }
.plate-card-eyebrow { margin: 0; color: #eac78b; font-size: 14px; }
:root[lang="en"] .plate-card-eyebrow { font: 600 11px/1 Manrope, Arial, sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.plate-card-fruit { display: grid; grid-template-columns: repeat(6, minmax(0, 46px)); justify-content: center; gap: 6px 8px; margin: 22px auto 20px; }
.plate-card-fruit img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .45));
  opacity: 0; transform: translateY(6px);
  transition: opacity 400ms ease, transform 500ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(180ms + var(--i) * 45ms);
}
.plate-card.is-open .plate-card-fruit img { opacity: 1; transform: none; }
.plate-card-title { margin: 0; font: 500 26px/1.35 Tajawal, Tahoma, sans-serif; text-wrap: balance; }
:root[lang="en"] .plate-card-title { font: 600 24px/1.2 Manrope, Arial, sans-serif; letter-spacing: -.01em; }
.plate-card-body { margin: 12px 0 0; color: rgba(243, 232, 210, .78); font-size: 16px; line-height: 1.6; text-wrap: balance; }
:root[lang="en"] .plate-card-body { font-size: 15px; line-height: 1.5; }
.plate-card-close {
  margin-top: 24px;
  padding: 13px 26px;
  border: 1px solid rgba(255, 246, 218, .65);
  border-radius: 100px;
  background: linear-gradient(150deg, #eee7d4, #d6c5a3);
  color: #383a2c;
  font: 500 17px/1 Tajawal, Tahoma, sans-serif;
  cursor: pointer;
}
:root[lang="en"] .plate-card-close { font: 600 15px/1 Manrope, Arial, sans-serif; }
.plate-card-close:focus-visible { outline: 2px solid #fff5d3; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .plate-card-scrim, .plate-card-panel, .plate-card-fruit img { transition: none; }
}

@media (max-width: 700px) {
  .masthead { padding: max(20px, env(safe-area-inset-top)) 20px 0; }
  .masthead::before { height: 120px; }
  .wordmark { gap: 11px; font-size: 14px; }
  .wordmark svg { width: 25px; height: 15px; }
  .intro { top: 44%; padding: 24px 8px; }
  .intro::before { inset: -60px -40px; }
  .intro-title { font-size: 29px; }
  :root[lang="en"] .intro-title { font-size: 27px; }
  .intro-body { font-size: 17px; }
  :root[lang="en"] .intro-body { font-size: 15px; }
  .want-plate { bottom: calc(max(24px, env(safe-area-inset-bottom)) + 78px); }
}

/* ---- Arrival --------------------------------------------------------------
   1. Empty soil; the veil's lines appear one by one.
   2. When every fruit has loaded and the words have had time, intro.js adds
      .spread: fruit appear from the middle out (--spread-delay by distance).
   3. The masthead and the button follow. */
.scene:not(.spread) .fruit { opacity: 0; scale: .9; }
.scene:not(.spread) .surprise-button.is-ready { opacity: 0; visibility: hidden; transform: translate(-50%, 18px); }
.scene:not(.spread) .masthead { opacity: 0; }
.fruit { transition: opacity 900ms ease, scale 1100ms cubic-bezier(.2, .7, .2, 1); transition-delay: var(--spread-delay, 0ms); }
.masthead { transition: opacity 800ms ease var(--masthead-delay, 350ms); }
.surprise-button.is-ready { transition-delay: var(--button-delay, 600ms); }
.intro > * { opacity: 0; translate: 0 10px; }
.scene.intro-on .intro > * { opacity: 1; translate: 0 0; }
.scene.intro-on .season { transition-delay: 200ms; }
.scene.intro-on .intro-title { transition-delay: 500ms; }
.scene.intro-on .intro-body { transition-delay: 1300ms; }
@media (prefers-reduced-motion: reduce) {
  .fruit, .masthead, .intro > * { transition: none; }
  .surprise-button.is-ready { transition-delay: 0s; }
  .scene:not(:has(.surprise-button.is-ready)) .fruit { scale: 1; }
}