/* ============================================================
   AZHAR STAGE — automatic section theatre
   "Packet unwrap" motion for every page, every section.
   Brand red from the oval wordmark. Reduced-motion safe.
   Hidden states only apply after JS adds html.stage-on.
   ============================================================ */

:root {
  --af-red: #e30613;
  --af-stage-ease: cubic-bezier(.16, 1, .3, 1);
}

html.stage-on .af-stage-item {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  filter: blur(8px);
  will-change: opacity, transform, filter;
}
html.stage-on .af-stage.is-on .af-stage-item {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity .72s var(--af-stage-ease),
    transform .72s var(--af-stage-ease),
    filter .55s var(--af-stage-ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}

html.stage-on .af-stage-title {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(6px);
}
html.stage-on .af-stage.is-on .af-stage-title {
  opacity: 1;
  transform: none;
  filter: none;
  transition:
    opacity .8s var(--af-stage-ease),
    transform .8s var(--af-stage-ease),
    filter .6s var(--af-stage-ease);
}

/* Packet unwrap — images unseal from a sealed centre */
html.stage-on .af-stage-media {
  clip-path: inset(14% 16% 14% 16%);
  transform: scale(1.07);
  filter: saturate(.82) contrast(1.04);
  will-change: clip-path, transform, filter;
}
html.stage-on .af-stage.is-on .af-stage-media {
  clip-path: inset(0);
  transform: none;
  filter: none;
  transition:
    clip-path 1.05s var(--af-stage-ease),
    transform 1.15s var(--af-stage-ease),
    filter .85s ease;
}

/* Sequential process / rail — seasoning pulse in brand red */
html.stage-on .af-stage-seq {
  position: relative;
}
html.stage-on .af-stage.is-on .af-stage-seq {
  animation: afSeason 1.35s var(--af-stage-ease) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes afSeason {
  0% { box-shadow: inset 0 0 0 0 var(--af-red); }
  35% { box-shadow: inset 3px 0 0 0 var(--af-red); }
  100% { box-shadow: inset 3px 0 0 0 transparent; }
}

/* Hero copy — above-the-fold, plays immediately */
html.stage-on .af-stage-hero-copy {
  animation: afHeroIn 1s var(--af-stage-ease) both;
}
html.stage-on .af-stage-hero-copy .af-hero-eyebrow,
html.stage-on .af-stage-hero-copy .eyebrow {
  animation: afHeroIn .7s var(--af-stage-ease) both;
}
html.stage-on .af-stage-hero-copy h1 {
  animation: afHeroIn .95s var(--af-stage-ease) .08s both;
}
html.stage-on .af-stage-hero-copy p,
html.stage-on .af-stage-hero-copy .lead {
  animation: afHeroIn .9s var(--af-stage-ease) .16s both;
}
html.stage-on .af-stage-hero-copy .af-hero-actions,
html.stage-on .af-stage-hero-copy .actions {
  animation: afHeroIn .85s var(--af-stage-ease) .24s both;
}
@keyframes afHeroIn {
  from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Page intro (cart, contact, checkout, etc.) */
html.stage-on .page-intro.af-stage:not(.is-on) h1,
html.stage-on .page-intro.af-stage:not(.is-on) p,
html.stage-on .page-intro.af-stage:not(.is-on) .eyebrow {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
html.stage-on .page-intro.af-stage.is-on h1,
html.stage-on .page-intro.af-stage.is-on p,
html.stage-on .page-intro.af-stage.is-on .eyebrow {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--af-stage-ease), transform .7s var(--af-stage-ease);
}

/* Proposal sections share the same theatre via .af-stage-item marks */

/* Hover lift for staged cards — craft, not neon */
html.stage-on .af-stage.is-on .product-card,
html.stage-on .af-stage.is-on .article-card,
html.stage-on .af-stage.is-on .location-card,
html.stage-on .af-stage.is-on .inst-node,
html.stage-on .af-stage.is-on .sustain-card {
  transition: transform .35s var(--af-stage-ease), box-shadow .35s ease;
}
html.stage-on .af-stage.is-on .product-card:hover,
html.stage-on .af-stage.is-on .article-card:hover,
html.stage-on .af-stage.is-on .location-card:hover,
html.stage-on .af-stage.is-on .inst-node:hover,
html.stage-on .af-stage.is-on .sustain-card:hover {
  transform: translateY(-4px);
}

@media (max-width: 700px) {
  html.stage-on .af-stage-item { transform: translate3d(0, 16px, 0); filter: blur(4px); }
  html.stage-on .af-stage-media { clip-path: inset(8% 10% 8% 10%); transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  html.stage-on .af-stage-item,
  html.stage-on .af-stage-title,
  html.stage-on .af-stage-media,
  html.stage-on .af-stage-hero-copy,
  html.stage-on .af-stage-hero-copy h1,
  html.stage-on .af-stage-hero-copy p,
  html.stage-on .af-stage-hero-copy .lead,
  html.stage-on .af-stage-hero-copy .af-hero-actions,
  html.stage-on .af-stage-hero-copy .actions,
  html.stage-on .af-stage-hero-copy .af-hero-eyebrow,
  html.stage-on .page-intro.af-stage:not(.is-on) h1,
  html.stage-on .page-intro.af-stage:not(.is-on) p,
  html.stage-on .page-intro.af-stage:not(.is-on) .eyebrow {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
}