/* =============================================
   SHAWARMA CLASSIC — HERO
   White · #E94E1B · #EF7D00
   ============================================= */

#hero {
  position:relative; min-height:100vh;
  display:flex; align-items:center;
  overflow:hidden; background:var(--bg);
}

.hero-media { position:absolute; inset:0; z-index:0; }

.hero-image {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  /* src="images/hero/hero-food.jpg" */
}

.hero-video {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
}

/* Overlay: brand red fades in from the text side */
.hero-overlay {
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(
      to inline-end,
      rgba(233,78,27,0.96) 0%,
      rgba(233,78,27,0.88) 35%,
      rgba(233,78,27,0.55) 60%,
      rgba(233,78,27,0.10) 100%
    );
}

/* Content grid */
.hero-content {
  position:relative; z-index:2;
  padding-top:var(--nav-h);
  padding-inline:var(--gutter);
  padding-block:88px;
  width:100%; max-width:var(--max-w);
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:52px; align-items:center;
}

@media (max-width:860px) {
  .hero-content { grid-template-columns:1fr; padding-top:calc(var(--nav-h) + 32px); }
}

/* Left text */
.hero-text { display:flex; flex-direction:column; }

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:rgba(255,255,255,0.80);
  margin-bottom:18px;
  opacity:0; animation:heroUp .8s .2s var(--ease) forwards;
}
.hero-eyebrow::before,.hero-eyebrow::after {
  content:''; display:block; width:28px; height:1px;
  background:rgba(255,255,255,0.60);
}

.hero-title {
  font-size:clamp(50px,9vw,108px); font-weight:900;
  line-height:.92; color:#fff; margin-bottom:20px;
  opacity:0; animation:heroUp .9s .4s var(--ease) forwards;
}
.hero-title .line-brand {
  display:block; color:var(--accent);
  text-shadow:0 2px 24px rgba(239,125,0,0.35);
}

.hero-sub {
  font-size:clamp(14px,1.5vw,16px);
  color:rgba(255,255,255,0.80); line-height:1.80;
  margin-bottom:34px; max-width:460px;
  opacity:0; animation:heroUp .9s .6s var(--ease) forwards;
}

.hero-btns {
  display:flex; align-items:center;
  gap:12px; flex-wrap:wrap;
  opacity:0; animation:heroUp .9s .8s var(--ease) forwards;
}

/* Right stat cards */
.hero-stats-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  opacity:0; animation:heroUp .9s 1s var(--ease) forwards;
}

.hero-stat-card {
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:var(--r-md); padding:20px 16px; text-align:center;
  backdrop-filter:blur(4px);
  transition:transform var(--dur-fast), background var(--dur-fast);
}
.hero-stat-card:hover { transform:translateY(-3px); background:rgba(255,255,255,0.20); }

/* Accent card */
.hero-stat-card.accent {
  background:var(--accent);
  border-color:var(--accent);
}
/* White card */
.hero-stat-card.white {
  background:#fff;
  border-color:#fff;
}

.hero-stat-number {
  font-size:clamp(26px,4vw,38px); font-weight:900;
  color:#fff; line-height:1;
}
.hero-stat-card.white .hero-stat-number { color:var(--brand); }

.hero-stat-label {
  font-size:11px; font-weight:500;
  color:rgba(255,255,255,0.75); margin-top:5px;
}
.hero-stat-card.white .hero-stat-label { color:var(--ink-60); }

/* Scroll indicator */
.hero-scroll {
  position:absolute; bottom:30px; left:50%;
  transform:translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  opacity:0; animation:heroFade 1s 1.5s forwards;
}
.hero-scroll-label { font-size:9px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:rgba(255,255,255,0.55); }
.scroll-line {
  width:1px; height:38px;
  background:linear-gradient(to bottom,rgba(255,255,255,0.55),transparent);
  animation:scrollPulse 2s var(--ease) infinite;
}

@keyframes heroUp   { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes heroFade { from{opacity:0} to{opacity:1} }
@keyframes scrollPulse { 0%,100%{opacity:.6} 50%{opacity:.15} }

@media (max-width:768px) {
  .hero-stats-grid { grid-template-columns:repeat(4,1fr); }
  .hero-overlay { background: linear-gradient(to bottom, rgba(233,78,27,.94) 0%, rgba(233,78,27,.80) 60%, rgba(233,78,27,.50) 100%); }
}
@media (max-width:480px) { .hero-stats-grid { grid-template-columns:1fr 1fr; } }