/* Home hero (index.html): copy on the right, the red mark on the left, on a moving WebGL background (js/sections/home-hero.js)
   seen through fluted frosted glass. The CSS gradient is the fallback for no-WebGL. */
.s-hero{position:relative;isolation:isolate;overflow:hidden;color:var(--white);
  display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;
  min-height:max(640px,calc(100svh - var(--nav-h,105px)));padding:var(--section-y) var(--gutter-hero);
  background:
    radial-gradient(45% 55% at 85% 80%,var(--hero-glow-1) 0,transparent 70%),
    radial-gradient(35% 45% at 70% 20%,var(--hero-glow-2) 0,transparent 70%),
    var(--hero-base)}
.s-hero>canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;
  -webkit-mask-image:var(--mask-flute-hero);
  mask-image:var(--mask-flute-hero)}
/* the hero melts into the page below it: no edge where the next section starts */
.s-hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:min(260px,40%);z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--paper))}
.s-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--hero-shade-55),var(--hero-shade-15) 55%,transparent);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}

.h-title{font-weight:var(--fw-regular);font-size:var(--fs-hero);line-height:1.15;color:var(--white);display:flex;flex-direction:column}
.h-title b{font-weight:var(--fw-bold)}
/* "تأثير" in the logo red */
.h-red{color:var(--red);font-weight:var(--fw-bold)}
.h-lead{margin-top:26px;font-size:var(--fs-hero-lead);max-width:44ch;color:var(--white-a62)}
.h-lead-short{display:none}

/* On load the copy comes in one line after another, each line uncovered from right to left (.wipe in components/motion.css) */
.s-hero .wipe{transition-duration:1.8s}   /* slower than the site default */
.h-title>.wipe:nth-child(1){--wipe-after:200ms}
.h-title>.wipe:nth-child(2){--wipe-after:1400ms}
.h-lead{--wipe-after:2600ms}
.h-cta{--wipe-after:3500ms;display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.h-mark.rise{--rise-after:300ms;transform:translateY(48px) scale(.965);transition-duration:1.8s}
.h-mark.rise.in{transform:none}
/* light parallax: the moving background drifts slower than the page, the mark a little faster */
.s-hero>canvas{translate:0 calc(var(--sy,0) * .06px)}
.h-mark{translate:0 calc(var(--sy,0) * -.02px)}
@media (prefers-reduced-motion:reduce){.s-hero>canvas,.h-mark{translate:none}}

.h-mark{justify-self:center;width:min(380px,34vw);display:grid;place-items:center;position:relative}
.h-mark img{width:100%;height:auto;display:block;filter:drop-shadow(0 0 0 var(--mark-glow-0));transition:filter .45s ease,transform .45s ease}
.h-mark:hover img{filter:drop-shadow(0 0 18px var(--mark-glow-55)) drop-shadow(0 0 48px var(--mark-glow-35)) brightness(1.08);transform:scale(1.02)}

@media (max-width:760px){
  .s-hero{grid-template-columns:1fr;align-content:center;gap:28px;min-height:calc(100svh - var(--nav-h,61px));padding:48px var(--gutter-m)}
  .h-mark{grid-row:1;width:170px;justify-self:start}
  .h-lead-long{display:none}
  .h-lead-short{display:block}
}