/* ============================================================
   AZHAR FOOD DIGITAL HQ — GLOBAL MOTION SYSTEM (motion.css)
   Premium industrial AI · white minimalist · cinematic motion
   Reusable data-attribute components. Reduced-motion safe.
   ============================================================ */

/* --- Foundation: animation off until JS mounts, then reveal --- */
html.motion-on [data-reveal] { opacity: 0; }

html.motion-on [data-reveal].in-view { opacity: 1; }

/* ==== Reveal directions ==== */
html.motion-on [data-reveal="up"],
html.motion-on [data-reveal="down"] { transform: translate3d(0, 34px, 0); }
html.motion-on [data-reveal="left"] { transform: translate3d(-42px, 0, 0); }
html.motion-on [data-reveal="right"] { transform: translate3d(42px, 0, 0); }
html.motion-on [data-reveal="scale"] { transform: scale(0.94); }

html.motion-on [data-reveal].in-view {
  transform: none;
  transition: opacity .85s cubic-bezier(.2,0,0,1), transform .85s cubic-bezier(.2,0,0,1);
}

/* ---- Clip reveal (headlines) ---- */
.clip-reveal { overflow: hidden; }
.clip-reveal > .cr-inner {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition: transform 1s cubic-bezier(.16,.84,.44,1);
  will-change: transform;
}
html.motion-on .clip-reveal.in-view > .cr-inner { transform: translate3d(0, 0, 0); }

/* ---- Word stagger ---- */
html.motion-on [data-word] .w { display:inline-block; opacity:0; transform:translate3d(0,26px,0); }
html.motion-on [data-word].in-view .w {
  opacity:1; transform:none;
  transition: opacity .6s cubic-bezier(.16,0,0,1), transform .6s cubic-bezier(.16,0,0,1);
}

/* ---- Image mask reveal ---- */
html.motion-on .mask-reveal img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1); }
html.motion-on .mask-reveal.in-view img { clip-path: inset(0 0 0 0); }

/* ---- Stagger children ---- */
html.motion-on [data-stagger] > * { opacity: 0; transform: translate3d(0,26px,0); }
html.motion-on [data-stagger].in-view > * {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.16,0,0,1), transform .7s cubic-bezier(.16,0,0,1);
}
html.motion-on [data-stagger].in-view > *:nth-child(1){transition-delay:60ms}
html.motion-on [data-stagger].in-view > *:nth-child(2){transition-delay:120ms}
html.motion-on [data-stagger].in-view > *:nth-child(3){transition-delay:180ms}
html.motion-on [data-stagger].in-view > *:nth-child(4){transition-delay:240ms}
html.motion-on [data-stagger].in-view > *:nth-child(5){transition-delay:300ms}
html.motion-on [data-stagger].in-view > *:nth-child(6){transition-delay:360ms}
html.motion-on [data-stagger].in-view > *:nth-child(7){transition-delay:420ms}
html.motion-on [data-stagger].in-view > *:nth-child(8){transition-delay:480ms}

/* ---- Count up ---- */
html.motion-on [data-count] { opacity: 0; }
html.motion-on [data-count].in-view { opacity: 1; transition: opacity .4s; }

/* ---- Fine line draws across on section entry ---- */
html.motion-on .draw-line { position: relative; }
html.motion-on .draw-line::before {
  content:""; position:absolute; left:0; top:-1px; height:1px; width:0;
  background: linear-gradient(90deg, #111, #e5e7eb);
  transition: width 1.2s cubic-bezier(.7,0,.2,1);
}
html.motion-on .draw-line.in-view::before { width: 100%; }

/* ---- Parallax ---- */
[data-parallax] { will-change: transform; }

/* ---- Neural network ambient canvas ---- */
.af-neural {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: hidden;
  opacity: .5;
}

/* ---- Hero (cinematic) ---- */
.af-hero {
  position: relative;
  min-height: 92vh;
  display: flex; align-items: center;
  overflow: hidden;
  background: #111;
  color: #fff;
  isolation: isolate;
}
.af-hero-video {
  position: absolute; inset: -3px 0 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
.af-hero-video iframe {
  position: absolute; top:50%; left:50%;
  width: max(100vw,177.78vh); height: max(56.25vw,100vh);
  border:0; transform: translate(-50%,-50%) scale(1.35);
  pointer-events: none;
}
.af-hero-poster {
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  object-fit:cover; object-position:center;
  filter: saturate(.85) contrast(1.02) brightness(.82);
  transform: scale(1.06);
  transition: opacity 1s ease;
}
.af-hero.video-playing .af-hero-poster { opacity: 0; }
.af-hero-kenburns { animation: afKb 26s ease-in-out infinite alternate; }
@keyframes afKb { from{transform:scale(1.06) translate(0,0)} to{transform:scale(1.16) translate(1.5%,-1.5%)} }

.af-hero-overlay {
  position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(0deg, #fff 0%, rgba(255,255,255,0) 34%),
    linear-gradient(180deg, rgba(17,17,17,.28) 0%, rgba(17,17,17,.42) 100%);
}
.af-hero-bottom {
  position:absolute; left:0; right:0; bottom:0; height:120px; z-index:4;
  background: linear-gradient(0deg, #fff, rgba(255,255,255,0));
}
.af-hero-copy {
  position: relative; z-index: 3;
  width: min(1280px, calc(100% - 120px)); margin-inline:auto; padding-inline:60px;
  padding-bottom: 96px;
}
.af-hero-eyebrow {
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.85); font-weight: 600;
  display: flex; align-items:center; gap:10px;
}
.af-hero-eyebrow::before { content:""; width:26px; height:1px; background: rgba(255,255,255,.7); }
.af-hero h1 {
  font-size: clamp(44px, 7.2vw, 92px); line-height: .96;
  letter-spacing: -.055em; margin: 20px 0 16px; font-weight: 700; color:#fff;
}
.af-hero h1 em { font-style:normal; color:#fff; }
.af-hero p { font-size: 18px; max-width: 560px; color: rgba(255,255,255,.86); }
.af-hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.af-hero-actions .btn { text-decoration:none; }
.af-hero-scroll {
  position:absolute; bottom: 26px; left:50%; transform:translateX(-50%);
  z-index:5; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:#111; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
}
.af-hero-scroll i { width:1px; height:38px; background:#111; position:relative; overflow:hidden; display:block; }
.af-hero-scroll i::after { content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:#333; animation: af-scroll 1.8s ease-in-out infinite; }
@keyframes af-scroll { 0%{top:-50%} 60%{top:100%} 100%{top:100%} }

@media (max-width:700px){
  .af-hero { min-height:88svh; align-items:flex-end; }
  .af-hero-copy { padding-inline:0; width:min(100% - 40px, 1280px); padding-bottom:120px; }
  .af-hero h1 { font-size: clamp(40px,13vw,58px); }
  .af-hero-video iframe { width:auto; height:100%; min-width:100%; aspect-ratio:16/9; transform:translate(-50%,-50%) scale(1.35); }
  .af-hero p.lead { font-size:16px; }
}

/* ---- Hero load choreography (data-hero-reveal) ---- */
html.motion-on .af-hero-copy > * { opacity: 0; transform: translate3d(0,24px,0); }
html.motion-on .af-hero-video, html.motion-on .af-hero-poster, html.motion-on .af-hero-overlay { opacity: 0; }
.af-hero[data-hero-reveal].ready .af-hero-video,
.af-hero[data-hero-reveal].ready .af-hero-poster,
.af-hero[data-hero-reveal].ready .af-hero-overlay { opacity:1; transition: opacity 1.4s ease .1s; }
.af-hero[data-hero-reveal].ready.video-playing .af-hero-poster { opacity: 0; }
/* Video-only heroes stay clean while YouTube is blocked or challenged. */
.af-hero[data-hero-reveal].ready:not(:has(.af-hero-poster)) .af-hero-video { opacity: 0; }
.af-hero[data-hero-reveal].ready.video-playing:not(:has(.af-hero-poster)) .af-hero-video { opacity: 1; }
.af-hero[data-hero-reveal].ready .af-hero-copy > * {
  opacity:1; transform:none;
  transition: opacity .9s cubic-bezier(.16,0,0,1), transform .9s cubic-bezier(.16,0,0,1);
}
.af-hero[data-hero-reveal].ready .af-hero-copy > :nth-child(1){transition-delay:.15s}
.af-hero[data-hero-reveal].ready .af-hero-copy > :nth-child(2){transition-delay:.25s}
.af-hero[data-hero-reveal].ready .af-hero-copy > :nth-child(3){transition-delay:.35s}
.af-hero[data-hero-reveal].ready .af-hero-copy > :nth-child(4){transition-delay:.45s}
.af-hero[data-hero-reveal].ready .af-hero-scroll { opacity:1 !important; transition:opacity 1s .9s; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  html.motion-on [data-reveal],
  html.motion-on [data-stagger] > *,
  html.motion-on [data-word] .w,
  html.motion-on [data-count],
  html.motion-on .clip-reveal > .cr-inner {
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .af-hero-poster { animation:none !important; transform:none; }
  .af-hero-scroll i::after { animation:none; }
  html.motion-on .data-reveal img, html.motion-on .mask-reveal img { clip-path:none !important; }
  [data-parallax] { transform:none !important; }
  .af-neural { display:none !important; }
}