/* ═══ الافتتاحية — مسرح مثبّت طوله أطول من الشاشة ═══
   صورة المحل جوّا قوس حموي. التمرير (scroll.js) بيكبّر القوس لحتى يعبّي
   الشاشة، والصورة جوّاه بتنعكس بنفس النسبة فبتضل بحجمها — يعني القوس
   «بينفتح» على الصورة مو الصورة بتتمطّ. ومعه: الكلمة بتنشق، والنص بيختفي،
   والناعورة بتدور. كله transform و opacity. */

.hero {
  position: relative;
  height: 230svh;
}

.hero-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  padding: calc(var(--topbar-h) + 0.5svh) var(--gutter) calc(2.5svh + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

/* ناعورة حماة — خفيفة عن قصد: خلفية بتحسّها، مو رسمة بتنافس الصورة */
.noria {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 62%;
  width: max(150vw, 1000px);
  aspect-ratio: 1;
  margin: calc(max(150vw, 1000px) / -2) 0 0 calc(max(150vw, 1000px) / -2);
  color: #E9A56B;
  opacity: 0.26;
  will-change: transform;
}
.noria svg { width: 100%; height: 100%; display: block; }

.hero-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 62%;
  width: min(130vw, 900px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--apricot-soft), rgba(251, 210, 174, 0) 72%);
}

.hero-kicker {
  margin: 0 0 1svh;
  font-family: var(--brand);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cocoa-2);
  will-change: opacity;
}

/* الكلمة فوق القوس — بتغطي رأسه شوي، والتمرير بيشقّها */
.hero-word {
  --fs: min(27vw, 17svh, 13rem);
  position: relative;
  z-index: 3;
  margin: 0 0 calc(var(--fs) * -0.3);
  display: flex;
  direction: ltr;
  font-family: var(--brand);
  font-weight: 800;
  font-size: var(--fs);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--cocoa);
  pointer-events: none;
}
.hw { display: inline-block; will-change: transform; }
.hw-b { margin-left: -0.02em; }

/* توقيع بخط يدوي فوق الكلمة — متل ختم على علبة حلو */
.hero-script {
  position: absolute;
  right: -0.04em;
  bottom: -0.34em;
  font-family: var(--script);
  font-weight: 400;
  font-size: calc(var(--fs) * 0.3);
  letter-spacing: 0;
  line-height: 1;
  color: var(--tangerine);
  rotate: -7deg;
  white-space: nowrap;
  text-shadow: 0 2px 0 var(--cream);
  will-change: opacity;
}

/* القوس: شبّاك بيت حموي قديم */
.hero-window {
  position: relative;
  z-index: 2;
  flex: none;
  width: min(76vw, 45svh, 440px);
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px var(--r-lg) var(--r-lg);
  overflow: hidden;
  background: #E9DECF;
  box-shadow: 0 34px 70px -30px rgba(46, 26, 16, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  will-change: transform;
}
/* الصورة بحجم الشاشة كاملة (scroll.js بيضبطه بالبكسل)، ومتمركزة بالقوس */
.hero-window img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100svh;
  max-width: none;
  object-fit: cover;
  translate: -50% -50%;
  will-change: transform;
}

.hero-copy {
  position: relative;
  z-index: 3;
  margin-top: 2.2svh;
  display: grid;
  justify-items: center;
  gap: 1.4svh;
  text-align: center;
  will-change: opacity;
}
.hero-tag {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 5.4vw, 1.9rem);
  line-height: 1.3;
  text-wrap: balance;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 26px 6px;
  font-family: var(--display);
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--cream);
  background: var(--cocoa);
  border-radius: var(--r-full);
  box-shadow: 0 10px 24px -12px rgba(46, 26, 16, 0.7);
  transition: transform var(--d-state) var(--ease-out), background-color var(--d-state) ease;
}
.hero-cta::after { content: "↓"; font-family: var(--font); font-size: 1rem; }
.hero-cta:hover { transform: translateY(-2px); background: #46291A; }
.hero-cta:active { transform: scale(0.97); }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(6px + env(safe-area-inset-bottom));
  width: 2px;
  height: 22px;
  margin-left: -1px;
  overflow: hidden;
  border-radius: 2px;
}
.scroll-cue span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cocoa);
  animation: cue 1.8s var(--ease-inout) infinite;
}
@keyframes cue {
  from { transform: translateY(-100%); }
  to { transform: translateY(100%); }
}

/* دخول أولي: الكلمة والقوس بيطلعوا من تحت */
.ready .hw, .ready .hero-window { animation: rise 900ms var(--ease-out) both; }
.ready .hw-b { animation-delay: 80ms; }
.ready .hero-window { animation-delay: 160ms; animation-name: rise-win; }
.ready .hero-script { animation: ink 1100ms var(--ease-out) 650ms both; }
@keyframes rise { from { opacity: 0; translate: 0 40px; } }
@keyframes rise-win { from { opacity: 0; translate: 0 80px; scale: 0.92; } }
/* التوقيع بينكتب من اليسار لليمين متل قلم */
/* بلا «to»: لو ثبّتنا opacity بآخر الحركة، بتغلب الـ inline style تبع التمرير وما بيختفي */
@keyframes ink { from { opacity: 0; clip-path: inset(0 100% 0 0); } }

/* الشاشات العريضة: قوس عريض بنسبة الصورة الأفقية */
@media (min-aspect-ratio: 1/1) {
  .hero-word { --fs: min(17vw, 21svh, 15rem); }
  .noria { opacity: 0.16; }
  /* مربّع: رأس نصف دائرة فوق جسم قائم = شبّاك قوس، مو قبّة مفلطحة */
  .hero-window { width: min(40vw, 52svh, 560px); aspect-ratio: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero-stage { position: relative; height: 100svh; }
  .scroll-cue span { animation: none; }
}