/* =========================================================================
   Home hero, compact edition. Loaded by pages/home.html after style.css
   (block extra_head), so these rules win over sections 8, 24 and 27 there.
   Also loaded by pages/about.html, whose hero visual reuses the brand card
   and the chips below (placed there by style.css 32).
   - backdrop: column guides and a navy-grey ribbon with a halftone dot
     screen and a green dotted crest (templates/partials/hero_ribbon.html,
     styles shared with the Solutions hub in style.css 28), under the node
     network of main.js (stars reaching for the pointer)
   - a shorter hero: smaller headline, tighter rhythm, smaller visual
   - the brand card is a navy tile with the white NEXT MAROC DIGITAL.
     wordmark alone, which turns into a « Parlons-en » button on hover
   ========================================================================= */

/* ---- backdrop ---------------------------------------------------------- */
/* the ribbon itself (guides, SVG, shader canvas, fade, RTL flip) is shared
   with the Solutions hub and lives in style.css section 28 */
.hero { background: #f7f9fa; }

/* the node network (main.js, initNetwork) over the ribbon: navy stars and
   links, green only where the pointer reaches in and on the travelling sparks */
.hero {
  --net-link: 11, 29, 51;
  --net-pointer: 15, 122, 82;
  --net-node: 11, 29, 51;
  --net-spark: 15, 122, 82;
}

/* the same backdrop (ribbon, guides, node network) behind the expertises
   chapter, and behind the approach chapter and the CTA card: one stage wraps
   those two sections, which drop their own ground so the ribbon shows through */
.expertises,
.approach-stage {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #f7f9fa;
  --net-link: 11, 29, 51;
  --net-pointer: 15, 122, 82;
  --net-node: 11, 29, 51;
  --net-spark: 15, 122, 82;
}
.approach-stage .approach { background: none; }

/* the steps sit where the ribbon runs out: a frosted pane behind their column
   melts the dot screen into a soft grey wash so the copy reads cleanly. It
   lives on the grid, not on the list, because the list's reveal (filter,
   opacity) and the dimmed steps would cut the backdrop blur off. Edges are
   feathered into the bleed around the column, so no box shows. */
.approach-stage .approach-grid { position: relative; }
.approach-stage .approach-grid::before {
  content: "";
  position: absolute;
  z-index: -1;
  grid-column: 1;
  grid-row: 2;
  inset: -40px -56px;
  background: rgba(247, 249, 250, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent),
    linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent),
    linear-gradient(180deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-composite: intersect;
  pointer-events: none;
}
@media (min-width: 992px) {
  .approach-stage .approach-grid::before { grid-column: 2; grid-row: 1; }
}

/* ---- a full-screen, wider hero ------------------------------------------ */
/* fills the viewport on every screen (svh: no jump when mobile browser bars
   slide away), the marquee starts below the fold. The wider container is
   scoped to the hero, so the column guides follow it and the rest of the
   site keeps its 1240px measure. Type and visual grow with the viewport. */
.hero {
  --container-w: 1440px;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--header-h) + 32px) 0 52px;
}
@media (min-width: 992px) {
  .hero-grid { grid-template-columns: 1.25fr 0.75fr; gap: clamp(48px, 5vw, 96px); }
}
.hero-copy { max-width: 720px; }
.hero .eyebrow { margin-bottom: 14px; }
.hero-copy .display {
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3.5rem);
  line-height: 1.08;
  margin-bottom: 18px;
}
.hero-copy .lead {
  max-width: 600px;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.15rem);
  margin-bottom: 28px;
}

/* ---- the visual: compact chips on a stage that scales -------------------- */
.hero-visual { max-width: clamp(340px, 28vw, 440px); }
.hero-halo {
  inset: 18%;
  background: radial-gradient(circle, rgba(11, 29, 51, 0.12), rgba(11, 29, 51, 0.04) 50%, transparent 72%);
}
/* lit (hovering the brand card): the green shows up only as feedback */
.hero-visual.is-lit .hero-halo {
  background: radial-gradient(circle, rgba(47, 176, 124, 0.3), rgba(15, 122, 82, 0.1) 45%, transparent 70%);
}
.hero-card {
  gap: 8px;
  padding: 7px 13px 7px 7px;
  border-radius: 12px;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.8);
}
.hero-card i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 0.9rem;
}
body.is-rtl .hero-card { padding: 7px 7px 7px 13px; }
.layer-1 { top: 10%; inset-inline-start: 0; }
.layer-2 { top: 14%; inset-inline-end: 0; }
.layer-3 { bottom: 14%; inset-inline-start: 0; }
.layer-4 { bottom: 9%; inset-inline-end: 2%; }

/* ---- the brand card, the wordmark alone on navy ------------------------- */
/* card size and ratio unchanged (the chips are placed around it); the
   wordmark sits in the middle with its protection zone and more around it */
.hero-brandcard {
  width: 176px;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 30px 60px -30px rgba(11, 29, 51, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.brandcard-logo { width: 124px; height: auto; align-self: center; margin-top: 0; }

/* touching the brand card lights the whole network (main.js wires the cards
   to it): a soft green glow around the card, no gradient on the card itself */
.hero-brandcard {
  cursor: default;
  transition: box-shadow 0.6s ease, scale 0.6s var(--ease);
}
.hero-brandcard.is-lit {
  scale: 1.03;
  box-shadow: 0 30px 60px -30px rgba(11, 29, 51, 0.55), 0 0 64px -8px rgba(15, 122, 82, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
@media (prefers-reduced-motion: reduce) { .hero-brandcard.is-lit { scale: 1; } }

@media (max-width: 639px) {
  .hero-visual { max-width: 290px; }
  .hero-card { padding: 6px 11px 6px 6px; font-size: 0.74rem; gap: 7px; border-radius: 10px; }
  .hero-card i { width: 26px; height: 26px; font-size: 0.85rem; border-radius: 7px; }
  body.is-rtl .hero-card { padding: 6px 6px 6px 11px; }
  .hero-brandcard { width: 144px; padding: 14px; }
  .brandcard-logo { width: 100px; }
  .brandcard-btn { gap: 6px; padding: 0 12px; font-size: 13px; }
}

/* ---- the brand card as a way in: wordmark -> « Parlons-en » ------------- */
/* Hover or keyboard focus on the card swaps the wordmark for a white button
   to /contact: Button "inverse", size "sm" (40px, the size for a card) from
   components/Button (white on navy, radius-md, Inter 600, bright green on
   its own hover), as in the claim block of 05-applications.md. The link
   stretches over the whole card; the button takes the centre of the card,
   where the wordmark was, so nothing reflows. The wordmark itself is never
   altered (no recolour, no effect), only faded out while the button is up. */
.brandcard-cta {
  display: block;
  align-self: center;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.brandcard-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.brandcard-cta:focus-visible { outline: none; }
.brandcard-logo {
  display: block;
  transition: opacity 0.24s var(--ease), translate 0.24s var(--ease);
}
.brandcard-btn {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  background: #fff;
  color: #0b1d33;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  translate: 0 8px;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), translate 0.2s var(--ease), background-color 0.12s, color 0.12s;
}
.brandcard-btn i { font-size: 0.95em; transition: transform 0.35s var(--ease); }
body.is-rtl .brandcard-btn { font-family: var(--font-ar); }
body.is-rtl .brandcard-btn i { transform: scaleX(-1); }

/* the chips overlap the card's corners: while it is a button, the card comes
   forward and stops floating, so the target holds still under the pointer */
.layer-core:hover,
.layer-core:focus-within { z-index: 3; }
.hero-brandcard:hover,
.hero-brandcard:focus-within { animation-play-state: paused; }
.hero-brandcard:hover::after,
.hero-brandcard:focus-within::after { border-color: rgba(255, 255, 255, 0.18); }
.hero-brandcard:hover .brandcard-logo,
.hero-brandcard:focus-within .brandcard-logo { opacity: 0; translate: 0 -8px; }
.hero-brandcard:hover .brandcard-btn,
.hero-brandcard:focus-within .brandcard-btn {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
  transition-delay: 0.06s, 0.06s, 0s, 0s;
}
.brandcard-btn:hover { background: #2fb07c; color: #0b1d33; }
.brandcard-btn:hover i { transform: translateX(3px); }
body.is-rtl .brandcard-btn:hover i { transform: scaleX(-1) translateX(3px); }
/* focus ring on the button, dark-theme focus token for a navy ground */
.brandcard-cta:focus-visible .brandcard-btn { outline: 2px solid #7fb0ff; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .brandcard-logo,
  .brandcard-btn { translate: none !important; }
}

/* ---- opening intro (templates/partials/intro.html) ----------------------
   Timeline, from the first paint:
   0 – 0.7s    "Cloud" rises in letter by letter (20 ms apart), then fades
   0.7 – 1.7s  the other three words cut in, about 0.3 s each
   1.7 – 2.5s  the words go, the two navy halves draw back to the edges
   2.5s        the overlay is hidden (main.js then removes it)
   Pure CSS, so it ends on its own; it never catches the pointer. Shown only
   with JavaScript on (html.js) and without reduced motion. */
.intro { display: none; }
.js .intro {
  position: fixed;
  inset: 0;
  z-index: 1100; /* above the header, the skip link and the cookie banner */
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  animation: intro-gone 0s linear 2.5s forwards;
}
.intro-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 1px); /* 1px overlap: no seam down the middle */
  background: #0b1d33; /* the navy of the logo */
  animation: intro-open 0.8s cubic-bezier(0.9, 0.03, 0.2, 1.01) 1.7s forwards;
}
.intro-panel--left { left: 0; transform-origin: 0 50%; }
.intro-panel--right { right: 0; transform-origin: 100% 50%; }

.intro-words {
  position: relative;
  display: grid;
  max-width: calc(100vw - 2 * var(--gutter));
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 9vw, 6.25rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-align: center;
  animation: intro-gone 0s linear 1.7s forwards;
}
body.is-rtl .intro-words { font-family: var(--font-ar); letter-spacing: 0; line-height: 1.25; }
/* the four words share one cell, centred on each other */
.intro-word { grid-area: 1 / 1; align-self: center; opacity: 0; }
.intro-word--1 { opacity: 1; animation: intro-out 0.2s ease 0.7s forwards; }
.intro-word--1 > span {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateY(10px);
  animation: intro-rise 0.3s var(--ease) calc(var(--i) * 0.02s) forwards;
}
.intro-word--2 { animation: intro-in 0.2s ease 0.7s forwards, intro-out 0.2s ease 1s forwards; }
.intro-word--3 { animation: intro-in 0.3s ease 1s forwards, intro-out 0.2s ease 1.3s forwards; }
.intro-word--4 { animation: intro-in 0.3s ease 1.3s forwards; }

@keyframes intro-rise { to { opacity: 1; transform: none; } }
@keyframes intro-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes intro-open { to { transform: scaleX(0); } }
@keyframes intro-gone { to { visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  .js .intro { display: none; }
}

/* the intro has already played in this tab (html.intro-seen, set by the inline
   script in pages/home.html): the overlay never shows, main.js removes it */
.js.intro-seen .intro { display: none; }

/* ---- solution chips around the brand card ------------------------------
   One compact chip per sector of the Solutions hub (templates/pages/home.html
   loops over NAV_HUBS), icon and name side by side, each a link to its card
   on /solutions/. Sized to be read at a glance; placed so that all seven fit
   around the card without touching it. The chips still carry .hero-card, so
   the network wiring and the lit state of main.js apply. */
.hero-card--icon {
  gap: 9px;
  padding: 6px 14px 6px 6px;
  border-radius: 13px;
  font-size: 0.95rem;
  cursor: pointer;
}
body.is-rtl .hero-card--icon { padding: 6px 6px 6px 14px; font-size: 1.01rem; }
.hero-card--icon i {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  font-size: 1.05rem;
}
.hero-card-label { line-height: 1.2; }
.hero-card--icon:hover,
.hero-card--icon:focus-visible { z-index: 2; }
.hero-card--icon:focus-visible { outline: 2px solid #0f7a52; outline-offset: 2px; }
.hero-layer:has(.hero-card--icon:hover),
.hero-layer:has(.hero-card--icon:focus-visible) { z-index: 4; }

/* three down each side, clear of the card, the longest name (RH) alone and
   centred under it; its layer spans the stage, so only the chip takes the pointer */
.layer-s1 { top: 2%; inset-inline-start: -4%; }
.layer-s2 { top: -2%; inset-inline-end: 0; }
.layer-s3 { top: 19%; inset-inline-end: -10%; }
.layer-s4 { top: 50%; inset-inline-start: -10%; margin-top: -21px; }
.layer-s5 { bottom: 19%; inset-inline-end: -12%; }
.layer-s6 { bottom: 19%; inset-inline-start: -6%; }
.layer-s7 { bottom: -4%; inset-inline: 0; display: flex; justify-content: center; pointer-events: none; }
.layer-s7 .hero-card { pointer-events: auto; }
/* narrow desktop: the visual sits close to the viewport edge, so the end
   side chips come in (pointer parallax still has room to drift) */
@media (min-width: 992px) and (max-width: 1199px) {
  .layer-s2 { inset-inline-end: -2%; }
  .layer-s3 { top: 14%; inset-inline-end: -5%; }
  .layer-s5 { bottom: 16%; inset-inline-end: -4%; }
  .layer-s6 { bottom: 16%; }
}
.card-s2 { animation-delay: -1s; }
.card-s3 { animation-delay: -2.5s; }
.card-s4 { animation-delay: -4s; }
.card-s5 { animation-delay: -1.8s; }
.card-s6 { animation-delay: -3.2s; }
.card-s7 { animation-delay: -5s; }

@media (max-width: 639px) {
  .hero-card--icon { gap: 7px; padding: 4px 11px 4px 4px; font-size: 0.86rem; border-radius: 11px; }
  body.is-rtl .hero-card--icon { padding: 4px 4px 4px 11px; font-size: 0.92rem; }
  .hero-card--icon i { width: 26px; height: 26px; font-size: 0.94rem; border-radius: 8px; }
  .layer-s1 { inset-inline-start: -6%; }
  .layer-s2 { inset-inline-end: -4%; }
  .layer-s3 { inset-inline-end: -8%; }
  .layer-s4 { inset-inline-start: -8%; margin-top: -17px; }
  .layer-s5 { inset-inline-end: -10%; }
  .layer-s6 { inset-inline-start: -6%; }
}

/* ---- the hero reel: the selected sector's clip behind the visual ----------
   One <video> per sector of the Solutions hub (templates/pages/home.html,
   .hero-reel), stacked on the visual's side of the hero, under the ribbon and
   the node network (z-index -2 inside the hero's own stacking context; the
   backdrop is -1), so the stars and the lit connector keep drawing over the
   footage. Hovering or focusing a chip selects it (hero-reel.js): its clip
   gets .is-on, fades in and settles from a slight zoom while the ribbon dims
   to let it through (.hero.is-reeling), and stays until another chip is
   selected; the chip keeps a quiet green mark meanwhile (.is-current).
   The shade on top melts the clip's start edge into the copy column and ties
   top and bottom into the page ground, in the hero's own #f7f9fa. Desktop
   with a pointer only (hero-reel.js checks the same media query): on phones
   the visual sits under the copy and the chips cannot be hovered.
   The footage is washed a little (saturation, contrast) so the navy, the
   greys and the green of the chips stay the colours of the hero. */
.hero-reel {
  --reel-in: to right; /* the side the clip fades in from: the copy's */
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: 60%;
  z-index: -2;
  display: none;
  overflow: hidden;
  pointer-events: none;
}
body.is-rtl .hero-reel { --reel-in: to left; }
@media (hover: hover) and (min-width: 992px) {
  .hero-reel { display: block; }
}
.reel-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.06);
  filter: saturate(0.8) contrast(0.96);
  transition: opacity 0.7s ease, transform 1.6s var(--ease);
  will-change: opacity, transform;
}
.reel-clip.is-on {
  opacity: 1;
  transform: scale(1);
}
.reel-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--reel-in), #f7f9fa 8%, rgba(247, 249, 250, 0) 40%),
    linear-gradient(180deg, rgba(247, 249, 250, 0.45), rgba(247, 249, 250, 0) 26%, rgba(247, 249, 250, 0) 74%, rgba(247, 249, 250, 0.7)),
    linear-gradient(0deg, rgba(11, 29, 51, 0.08), rgba(11, 29, 51, 0.08));
}

/* while a clip is up: the ribbon steps back, the node network stays */
.hero .ribbon-art,
.hero .ribbon-canvas { transition: opacity 0.7s ease; }
.hero.is-reeling .ribbon-art,
.hero.is-reeling .ribbon-canvas { opacity: 0.3; }

/* the sector on screen: the chip keeps the green of its lit state, without
   the lift, so the clip reads as its own once the pointer has moved on */
.hero-card.is-current { border-color: rgba(15, 122, 82, 0.7); background: rgba(255, 255, 255, 0.96); }
.hero-card.is-current i { background: var(--teal); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .reel-clip { transform: none; transition: opacity 0.4s ease; }
  .reel-clip.is-on { transform: none; }
}