/* 01 · Hero — «نجمك بين ثمانية». Cinematic footage + the eight-star constellation drawn over the eight tents.
   Final state is the base; `.js` + [data-play] runs the story (STORYBOARD.md). Values: tokens + HERO-SPEC.md. */
.hero {
  position: relative; display: grid; min-block-size: max(100svh, 600px); background: var(--night); color: var(--star);
  overflow-x: clip; isolation: isolate;
}
.hero-media { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.hero-par {
  position: absolute; inset: 0; transform-origin: 50% 82%; scale: 1.08;
  translate: var(--px, 0px) var(--py, 0px); will-change: translate;
}
.hero-poster, .hero-video, .hero-stars, .const { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.hero-poster, .hero-video { object-fit: cover; object-position: 50% 50%; }
.hero-poster { transition: opacity .8s ease; }
.hero[data-video] .hero-poster { opacity: 0; }
.hero-stars { pointer-events: none; }

/* the city haze (setup beat): an orange skyglow veil that hides the stars; base state is clear sky */
.haze {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 100%, rgba(232, 150, 90, .55), transparent 70%),
    linear-gradient(to top, rgba(214, 130, 70, .62) 0%, rgba(176, 112, 84, .55) 40%, rgba(110, 86, 90, .5) 100%),
    linear-gradient(rgba(10, 11, 20, .35), rgba(10, 11, 20, .35));
  -webkit-mask-image: linear-gradient(to bottom, transparent 6%, #000 22%); mask-image: linear-gradient(to bottom, transparent 6%, #000 22%);
}

/* constellation layer */
.const--port { display: none; }
.seg { fill: none; stroke: rgba(246, 231, 200, .55); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; stroke-linecap: round; }
.const--port .seg { stroke-width: 2.4; }
.thread { fill: none; stroke: rgba(242, 199, 126, .62); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke .3s ease; }
.const--port .thread { stroke-width: 2.6; }
.cs, .cs-h { transform-box: fill-box; transform-origin: center; }
.cs-core { fill: var(--star); }
.cs--you .cs-core { fill: var(--gold); filter: drop-shadow(0 0 6px rgba(242, 199, 126, .9)); }
.cs-h { transition: transform .35s var(--ease-spring); }
.you-label { fill: var(--gold); font-family: var(--font-text); font-weight: 600; paint-order: stroke; stroke: rgba(10, 11, 20, .85); stroke-width: 7px; stroke-linejoin: round; }
.you-label tspan { opacity: 0; transition: opacity .25s ease; }

/* CTA coupling: hovering / focusing «احجز ليلتك» re-lights your star (CONCEPT § Interaction) */
.hero:has(.hero-cta:hover, .hero-cta:focus-visible) .cs--you .cs-h { transform: scale(1.3); }
.hero:has(.hero-cta:hover, .hero-cta:focus-visible) .thread { stroke: rgba(242, 199, 126, .95); }
.hero:has(.hero-cta:hover, .hero-cta:focus-visible):not([data-pressed]) .you-label-a { opacity: 1; }
.hero[data-pressed] .you-label-b { opacity: 1; }
.hero[data-pressed] .cs--you .cs-h { transform: scale(1.3); }

/* readability: scrims behind the header band and the copy only */
.scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10, 11, 20, .72) 0, rgba(10, 11, 20, .38) 72px, rgba(10, 11, 20, 0) 150px), linear-gradient(to top, rgba(10, 11, 20, .86) 0%, rgba(10, 11, 20, .62) 30%, rgba(10, 11, 20, 0) 54%); }

/* copy */
.hero-copy {
  position: relative; z-index: 1; align-self: end; justify-self: center; display: grid; justify-items: center; text-align: center;
  inline-size: min(100% - 2 * var(--gutter), 940px); padding-block: calc(var(--header-h) + 24px) calc(clamp(28px, 5vh, 56px) + var(--r-sheet));
}
.hero .opener { color: var(--gold); padding: 4px 14px; border-radius: var(--r-pill); background: rgba(10, 11, 20, .62); }
.hero h1 { font-size: var(--d-h1); color: var(--star); margin-block: 8px 0; text-shadow: 0 1px 24px rgba(10, 11, 20, .5); }
.hero h1 .ln { display: inline-block; overflow: clip; padding-block: .1em .4em; margin-block: -.1em -.4em; vertical-align: top; }
.hero h1 .ln > span { display: inline-block; }
.hero-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 40px; inline-size: 100%;
  margin-block-start: 18px; padding-block-start: 18px; border-block-start: 1px solid var(--line-night); text-align: start;
}
.hero-sub { font-size: var(--t-md); color: var(--star-2); max-inline-size: 26em; }
.hero-act { display: grid; justify-items: start; gap: 6px; }
.hero-act-row { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.hero .price-line { color: var(--star-2); }

/* pause control for the looping footage (WCAG 2.2.2) */
.hero-pause {
  position: absolute; inset-block-end: calc(20px + var(--r-sheet)); inset-inline-end: var(--gutter); z-index: 2; inline-size: 44px; block-size: 44px;
  display: grid; place-items: center; border-radius: var(--r-pill); border: 1px solid var(--glass-edge); color: var(--star); cursor: pointer;
  background: var(--glass-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.hero-pause svg { inline-size: 18px; block-size: 18px; fill: currentColor; }
.hero-pause .i-play, .hero-pause[aria-pressed="true"] .i-pause { display: none; }
.hero-pause[aria-pressed="true"] .i-play { display: block; }
.hero:not([data-video]) .hero-pause { display: none; }

/* ── the story (only with JS; paused until seen) ──
   0.0 city veil (stars hidden) → 0.2–0.9 veil lifts, stars switch on → 0.9–1.6 eight stars + lines →
   1.6 your star blooms, thread drops to its tent → 2.3 its label shows once (every device) → rest */
.js .hero:not([data-play]) .hero-media * { animation-play-state: paused !important; }
.js .hero h1 .ln > span { animation: hero-rise .9s var(--ease-out) both; }
.js .hero h1 .ln + .ln > span { animation-delay: .08s; }
.js .hero .opener { animation: hero-up .6s var(--ease-out) .2s both; }
.js .hero-row { animation: hero-up .6s var(--ease-out) .35s both; }
.js .hero-act { animation: hero-up .6s var(--ease-out) .45s both; }
.js .haze { animation: haze-out .6s var(--ease-soft) .05s both; }
.js .cs { animation: star-in .45s var(--ease-soft) both; animation-delay: calc(.9s + var(--i) * .07s); }
.js .seg { animation: draw .32s cubic-bezier(.4, 0, .6, 1) both; animation-delay: calc(1s + var(--i) * .07s); }
.js .cs--you { animation: you-bloom .4s var(--ease-spring) 1.6s both; }
.js .cs--you .cs-halo { animation: halo-in .4s ease-out 1.6s both, breathe 2s ease-in-out 2.4s 6 alternate; }
.js .thread { animation: draw .45s var(--ease-soft) 1.8s both; }
.js .you-label-a { animation: label-peek 3s ease 2.3s backwards; }
@keyframes hero-rise { from { transform: translateY(110%); } }
@keyframes hero-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes city-off { from { filter: brightness(.62) contrast(.62) saturate(.55); } to { filter: none; } }
@keyframes haze-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(14%); } }
@keyframes star-in { from { opacity: 0; transform: scale(.2); } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes you-bloom { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes halo-in { from { opacity: 0; } }
@keyframes breathe { to { opacity: .55; } }
@keyframes label-peek { 0% { opacity: 0; } 12%, 82% { opacity: 1; } 100% { opacity: 0; } }

/* ── portrait (phones, portrait tablets): the 9:16 footage is fitted to the WIDTH so all eight tents and all
      eight stars stay on screen; the hero continues as night below it. ── */
@media (orientation: portrait) {
  .const--land { display: none; }
  .const--port { display: block; }
  .hero-par { inset: 0 0 auto 0; block-size: calc(100vw * 16 / 9); scale: 1; transform-origin: 50% 50%; }
  .hero-par::after { content: ""; position: absolute; inset: auto 0 0 0; block-size: 22%; background: linear-gradient(to bottom, rgba(10, 11, 20, 0), var(--night)); }
  .hero-copy { align-self: start; padding-block: calc(var(--header-h) + 14px) 24px; }
  .scrim { background: linear-gradient(to bottom, rgba(10, 11, 20, .78) 0%, rgba(10, 11, 20, .55) 34%, rgba(10, 11, 20, 0) 56%); }
  .hero-row { grid-template-columns: 1fr; justify-items: center; text-align: center; border: 0; padding-block-start: 0; margin-block-start: 12px; gap: 14px; }
  .hero-sub { max-inline-size: 22em; font-size: var(--t-sm); }
  .hero-act { justify-items: center; }
  .hero-act-row { justify-content: center; }
}
/* tall phones: copy sits under the tents, the sky above is the constellation's */
@media (orientation: portrait) and (max-aspect-ratio: 1/2) {
  .hero-copy { align-self: end; padding-block: 0 calc(20px + var(--r-sheet) + env(safe-area-inset-bottom)); }
  .hero h1 { margin-block-start: 4px; }
  .scrim { background: linear-gradient(to bottom, rgba(10, 11, 20, .6) 0, rgba(10, 11, 20, 0) 120px), linear-gradient(to top, rgba(10, 11, 20, .7) 0%, rgba(10, 11, 20, 0) 40%); }
  .hero-pause { inset-block: calc(var(--header-h) + 12px) auto; }
}
@media (orientation: portrait) and (max-height: 760px) { .hero-sub { display: none; } }
@media (orientation: portrait) and (max-height: 700px) {
  .hero-copy { align-self: end; padding-block: 0 calc(16px + var(--r-sheet)); }
  .hero .opener { display: none; }
  .hero-par { translate: 0 -60px; }
  .scrim { background: linear-gradient(to bottom, rgba(10, 11, 20, .6) 0, rgba(10, 11, 20, 0) 110px), linear-gradient(to top, rgba(10, 11, 20, .78) 0%, rgba(10, 11, 20, 0) 42%); }
  .hero-pause { inset-block: calc(var(--header-h) + 12px) auto; }
}
/* phones see "your star" sooner (no hover there) */
@media (orientation: portrait) { .js .you-label-a { animation-delay: 1.9s; } }
@media (orientation: portrait) and (max-width: 400px) { .hero-more { display: none; } }
@media (orientation: landscape) and (max-height: 700px) {
  .hero h1 { font-size: var(--d-h2); }
  .hero-sub { display: none; }
  .hero-row { grid-template-columns: auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hero-par { translate: none; } }