/* =========================================================
   Noventra — homepage hero above the film (index.html, hero.js).
   ========================================================= */

.home-hero{position:relative; z-index:5; min-height:100vh; min-height:100svh; overflow:hidden; display:flex;
           background:
             radial-gradient(ellipse 55% 60% at 74% 46%, rgba(255,138,76,.20), transparent 70%),
             radial-gradient(ellipse 40% 50% at 8% 100%, rgba(243,56,1,.08), transparent 70%),
             linear-gradient(180deg, #f8f6f3 0%, #f4efe9 100%)}
/* a fine dot grid, fading towards the edges */
.home-hero::before{content:""; position:absolute; inset:0; pointer-events:none;
                   background-image:radial-gradient(rgba(13,14,17,.10) 1px, transparent 1.2px); background-size:26px 26px;
                   -webkit-mask-image:radial-gradient(ellipse 70% 70% at 60% 45%, #000 30%, transparent 80%);
                   mask-image:radial-gradient(ellipse 70% 70% at 60% 45%, #000 30%, transparent 80%)}
.hero-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 1.2s ease}
.home-hero.scene-ready .hero-canvas{opacity:1}

/* without WebGL: the mark itself, gently glowing */
.hero-fallback-mark{display:none}
.home-hero.no-webgl .hero-fallback-mark{display:block; position:absolute; right:12%; top:50%; width:min(30vw,340px);
                                        transform:translateY(-50%); filter:drop-shadow(0 30px 60px rgba(243,56,1,.35))}
.hero-fallback-mark path{fill:var(--red)}

.hero-inner{position:relative; z-index:1; width:100%; max-width:1480px; margin:0 auto;
            padding:calc(var(--nav-h) + clamp(2rem,6vh,4rem)) clamp(1.2rem,5vw,2.6rem) clamp(4.5rem,10vh,6rem);
            display:grid; align-items:center; gap:2rem}
@media(min-width:1000px){ .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }

/* ---- the words ---- */
.hero-copy{max-width:600px}
.hero-eyebrow{display:inline-flex; align-items:center; gap:.6rem; margin:0 0 1.4rem; padding:.45rem .9rem .45rem .7rem;
              border-radius:999px; font-size:.78rem; font-weight:700; color:var(--ink);
              background:rgba(255,255,255,.75); border:1px solid rgba(13,14,17,.08);
              backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.hero-eyebrow span{position:relative; width:8px; height:8px; border-radius:50%; background:var(--red)}
.hero-eyebrow span::after{content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--red);
                          animation:heroPing 2.2s ease-out infinite}
@keyframes heroPing{from{transform:scale(.4); opacity:.8} to{transform:scale(1.6); opacity:0}}
.home-hero h1{margin:0; font-size:clamp(2.6rem,6.4vw,5.6rem); line-height:.98; letter-spacing:-.045em; font-weight:800;
              color:var(--ink); text-wrap:balance}
.home-hero h1 em{font-style:normal; color:var(--red);
                 background:linear-gradient(100deg, #ff8a4c 0%, var(--red) 55%, #c92c00 100%);
                 -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
.hero-lead{margin:1.5rem 0 0; max-width:46ch; font-size:clamp(1.05rem,1.5vw,1.22rem); line-height:1.65; color:#4a4f5a}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; margin-top:2rem}
.hero-actions .btn-large{margin-top:0}
.hero-link{display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color:var(--ink); text-decoration:none}
.hero-link::after{content:"↓"; display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
                  color:var(--red); background:rgba(243,56,1,.1); transition:transform .2s}
.hero-link:hover{color:var(--red)}
.hero-link:hover::after{transform:translateY(3px)}
.hero-points{list-style:none; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; margin:2.4rem 0 0; padding:0}
.hero-points li{display:flex; align-items:center; gap:.5rem; font-size:.88rem; font-weight:600; color:#4a4f5a}
.hero-points li::before{content:""; width:16px; height:16px; border-radius:50%; flex:none;
                        background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat}

/* the words arrive one after another */
.hero-copy > *{animation:heroRise .9s cubic-bezier(.2,.7,.2,1) both}
.hero-copy > :nth-child(2){animation-delay:.08s}
.hero-copy > :nth-child(3){animation-delay:.18s}
.hero-copy > :nth-child(4){animation-delay:.28s}
.hero-copy > :nth-child(5){animation-delay:.4s}
@keyframes heroRise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}

/* ---- a status tag where a shipment arrives at the mark (positioned by hero.js) ---- */
.hero-tag{position:absolute; left:var(--x,0); top:var(--y,0); z-index:2; display:flex; width:max-content; align-items:center; gap:.55rem;
          padding:.45rem .8rem .45rem .45rem; border-radius:999px; white-space:nowrap; pointer-events:none;
          background:rgba(255,255,255,.92); border:1px solid rgba(13,14,17,.08);
          backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
          box-shadow:0 16px 36px -18px rgba(13,14,17,.45);
          opacity:0; transform:translate(calc(14px + var(--dx,0px)), -50%) scale(.92);
          transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1)}
.hero-tag.show{opacity:1; transform:translate(calc(14px + var(--dx,0px)), -50%) scale(1)}
.hero-tag.flip{transform:translate(calc(-100% - 14px + var(--dx,0px)), -50%) scale(.92)}
.hero-tag.flip.show{transform:translate(calc(-100% - 14px + var(--dx,0px)), -50%) scale(1)}
.hero-tag.flip::before{left:auto; right:calc(-14px + var(--dx,0px)); margin:-4px -4px 0 0}
/* the arrival point: a dot with a ring that pulses out (it stays on the point when the tag shifts) */
.hero-tag::before{content:""; position:absolute; left:calc(-14px - var(--dx,0px)); top:50%; width:8px; height:8px; margin:-4px 0 0 -4px;
                  border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(243,56,1,.5)}
.hero-tag.show::before{animation:heroArrive 1.2s ease-out}
@keyframes heroArrive{from{box-shadow:0 0 0 0 rgba(243,56,1,.55)} to{box-shadow:0 0 0 18px rgba(243,56,1,0)}}
.hero-tag-icon{display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:rgba(24,160,88,.14)}
.hero-tag-icon svg{width:14px; height:14px; fill:none; stroke:#18a058; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.hero-tag.warn .hero-tag-icon{background:rgba(243,56,1,.12)}
.hero-tag.warn .hero-tag-icon svg{stroke:var(--red)}
.hero-tag b{font-size:.82rem; color:var(--ink)}

/* ---- scroll cue ---- */
.hero-scroll{position:absolute; left:50%; bottom:1.4rem; z-index:2; width:26px; height:40px; margin-left:-13px;
             border-radius:14px; border:2px solid rgba(13,14,17,.25)}
.hero-scroll span{position:absolute; left:50%; top:7px; width:4px; height:8px; margin-left:-2px; border-radius:2px;
                  background:var(--red); animation:heroWheel 1.8s ease-in-out infinite}
@keyframes heroWheel{0%{transform:translateY(0); opacity:1} 70%{transform:translateY(12px); opacity:0} 100%{opacity:0}}

/* ---- phones and tablets: the mark above, the words below ---- */
@media(max-width:999px){
  .hero-inner{align-items:end; padding-top:calc(68px + 40vh)}
  .home-hero.no-webgl .hero-fallback-mark{right:auto; left:50%; top:calc(var(--nav-h) + 4vh); width:min(44vw,220px);
                                          transform:translateX(-50%)}
}
@media(max-width:560px){
  .hero-inner{padding-top:calc(68px + 37vh)}
  .hero-points{gap:.5rem 1rem}
}

@media(prefers-reduced-motion:reduce){
  .hero-copy > *{animation:none}
  .hero-tag{display:none}
  .hero-eyebrow span::after, .hero-scroll span{animation:none}
  .hero-canvas{transition:none}
}

/* ---- the light hero fades into the sky at the top of the film ---- */
.film-fade{position:absolute; left:0; right:0; top:0; height:38vh; z-index:6; pointer-events:none;
           background:linear-gradient(180deg, #f4efe9 0%, rgba(244,239,233,.6) 35%, rgba(244,239,233,0) 100%)}
body.static .film-fade{display:none}
/* the bottom of the hero ends in exactly the colour the fade starts with: no seam */
.home-hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:22vh; pointer-events:none;
                  background:linear-gradient(180deg, rgba(244,239,233,0), #f4efe9)}

/* ---- the globe can be dragged, and stays clear of the words ---- */
.home-hero.over-globe{cursor:grab}
.home-hero.dragging{cursor:grabbing; user-select:none}
@media(min-width:1000px){
  .hero-world .hero-canvas{-webkit-mask-image:linear-gradient(90deg, transparent 34%, #000 50%); mask-image:linear-gradient(90deg, transparent 34%, #000 50%)}
}
@media(max-width:999px){
  .hero-world .hero-canvas{-webkit-mask-image:linear-gradient(180deg, #000 calc(68px + 26vh), transparent calc(68px + 35vh));
                            mask-image:linear-gradient(180deg, #000 calc(68px + 26vh), transparent calc(68px + 35vh))}
}

/* the first film stop is only the logo and its heading now: keep it clear of the scroll cue below */
.block.hero h2{margin-bottom:12rem}
body.static .block.hero h2{margin-bottom:0}