/* Allonia home: hero light, foundations, statement, product scenes, the three-layer story.
   Set pieces adapted from the pertimm.com home (same components, Allonia ring light). */
/* ---------------------------------------------------------------- Hero */
.hero {
  --prism-x: 72%;
  --prism-y: 41%;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(100svh, 680px);
  display: flex; flex-direction: column;
  padding-top: var(--header-h);
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 22vh; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(5 6 11 / 0), var(--ink));
}
.hero__prism {
  position: absolute; left: var(--prism-x); top: var(--prism-y); z-index: 0;
  width: clamp(132px, 18vw, 320px);
  transform: translate(-50%, -50%) translateY(calc(var(--p, 0) * -18vh)) scale(calc(1 - var(--p, 0) * .14));
  will-change: transform;
}
/* Parallax is a flat translate only: a 3D tilt would pull the artwork away from the
   light that hero.js draws around its true silhouette (the rim must never distort the edges). */
.hero__prism-inner {
  position: relative;
  transform: translate3d(calc(var(--mx, 0) * 6px), calc(var(--my, 0) * -5px), 0);
}
.hero__prism img { width: 100%; height: auto; }
.hero.is-static .hero__prism img, .no-js .hero__prism img { filter: drop-shadow(0 0 1px rgb(214 230 250 / .7)) drop-shadow(0 0 24px rgb(173 203 240 / .45)) drop-shadow(0 0 70px rgb(166 244 234 / .16)); }
.hero__glint {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("../../img/brand/allonia-ring.svg") center / 100% 100% no-repeat;
  mask: url("../../img/brand/allonia-ring.svg") center / 100% 100% no-repeat;
  background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / .12) 48%, rgb(166 140 255 / .1) 53%, transparent 60%) calc(50% + var(--mx, 0) * 70%) 0 / 280% 100% no-repeat;
  mix-blend-mode: screen;
}
.is-file .hero__glint { display: none; } /* CSS masks cannot load across file:// */

.hero__inner {
  position: relative; z-index: 1; flex: 1;
  display: grid; grid-template-rows: auto 1fr auto auto;
  padding-block: clamp(1.25rem, 3.5vh, 2.75rem) clamp(1.5rem, 4vh, 2.75rem);
}
.hero__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.hero__title {
  grid-row: 3;
  font-size: clamp(3.6rem, 1.1rem + 8.4vw, 10.75rem);
  line-height: .86; letter-spacing: -.058em; font-weight: 530;
  font-stretch: 100%;
  color: var(--fg);
  text-wrap: balance;
}
.hero__line { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.hero__line > span { display: block; }
.hero__line--serif {
  font-family: var(--font-serif); font-style: italic; font-weight: 300;
  font-size: .62em; line-height: 1.02; letter-spacing: -.028em;
  margin-top: .05em; padding-left: .04em; color: var(--fg);
}
.hero__foot {
  grid-row: 4;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem var(--space-m);
  align-items: end;
  margin-top: clamp(1.75rem, 4vh, 3rem); padding-top: clamp(1.25rem, 2.5vh, 1.75rem);
  border-top: 1px solid var(--line-2);
}
.hero__lead { grid-column: 1 / span 4; font-size: var(--step-1); line-height: 1.45; color: var(--fg-2); max-width: 34ch; }
.hero__actions { grid-column: 5 / span 5; --cluster-gap: .6rem; }
.hero__signature {
  grid-column: 10 / -1; justify-self: end;
  display: flex; gap: .75rem; align-items: flex-start;
  font-size: var(--step--1); line-height: 1.45; color: var(--fg-2); max-width: 22rem;
}
.hero__signature .flag-fr { margin-top: .2em; }

/* Load choreography: light first, then type (only with JS + motion) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__prism-inner { animation: prism-in 1.8s var(--ease-out) .15s both; }
  .js .hero__line > span { animation: line-up 1.25s var(--ease-out) both; }
  .js .hero__line:nth-child(1) > span { animation-delay: .35s; }
  .js .hero__line:nth-child(2) > span { animation-delay: .5s; }
  .js .hero__eyebrow, .js .hero__foot { animation: fade-in 1.2s var(--ease-out) .85s both; }
  .js .hero__foot { animation-delay: 1s; }
}
@keyframes prism-in { from { opacity: 0; scale: .86; filter: blur(8px); } }
@keyframes line-up { from { transform: translateY(105%); } }
@keyframes fade-in { from { opacity: 0; transform: translateY(10px); } }

@media (max-width: 1079px) {
  .hero__lead { grid-column: 1 / span 7; }
  .hero__signature { grid-column: 8 / -1; grid-row: 1; justify-self: end; }
  .hero__actions { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 759px) {
  .hero { --prism-x: 50%; --prism-y: 31%; min-height: max(100svh, 700px); }
  .hero__prism { width: clamp(120px, 36vw, 168px); }
  .hero__foot { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero__lead, .hero__actions, .hero__signature { grid-column: 1; grid-row: auto; justify-self: start; justify-content: flex-start; }
  .hero__actions { width: 100%; }
  .hero__actions > .btn { flex: 1 1 auto; }
  .hero__actions .btn--lg { min-height: 3.25rem; padding: .8rem 1.15rem; font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__prism { transform: translate(-50%, -50%); }
}

/* --------------------------------------------------------- Foundations */
/* .feature-strip (base.css); the home band also has a hairline above it */
.foundations { border-top: 1px solid var(--line); }
/* Four narrow columns (strip 1080–1399px): the glyph moves above the title, so every title keeps
   one line and the row stays aligned ("Production-grade" itself never breaks: .nowrap in the HTML). */
@container strip (min-width: 1080px) and (max-width: 1399px) {
  .foundations .feature-strip__item { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .foundations .feature-strip__glyph { grid-row: auto; margin-bottom: .7rem; }
}

/* --------------------------------------------------- Expertise matters */
/* Kinetic crossover from base.css (.kinetic: "Expertise" condensed→wide & light→bold,
   "matters." the opposite) driven by data-kinetic, plus a spectral sweep through the
   letters that settles to solid pearl when the statement reaches mid-viewport (--p = 1). */
.statement { position: relative; padding-top: var(--space-section); padding-bottom: 0; overflow: clip; }
.statement__inner { display: grid; gap: var(--space-l); }
.statement__title {
  --p: 1;
  font-size: clamp(3.5rem, 17.4vw, 17.5rem); line-height: .84; letter-spacing: -.055em;
  color: var(--fg);
}
.js .statement__title { --p: 0; }
.no-reveal .statement__title { --p: 1 !important; }
.statement__word {
  --sweep: calc(var(--p) * 190% - 45%);
  display: block; width: fit-content; padding-bottom: .07em; padding-right: .04em;
  background: linear-gradient(100deg,
    var(--fg) 0%, var(--fg) calc(var(--sweep) - 26%),
    var(--sky) calc(var(--sweep) - 12%), #fff calc(var(--sweep) - 4%),
    var(--aqua) calc(var(--sweep) + 6%), var(--fg-3) calc(var(--sweep) + 22%), var(--fg-3) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.statement__word--end { margin-left: auto; }
.statement__aside {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.25rem 2rem;
  padding-top: var(--space-m); border-top: 1px solid var(--line);
}
.statement__text { color: var(--fg-2); font-size: var(--step-1); line-height: 1.45; max-width: 36ch; }
@media (max-width: 639px) {
  .statement__aside { grid-template-columns: 1fr; justify-items: start; }
}
@media (prefers-reduced-motion: reduce) { .statement__word { --sweep: 145%; } }

/* Services ticker — alternating light-wide / bold-condensed (Mona Sans width axis) */
.statement__ticker { margin-top: var(--space-xl); padding-block: 1.3rem; border-block: 1px solid var(--line); --marquee-gap: clamp(1.5rem, .9rem + 2vw, 3rem); }
.statement__ticker .ticker-item { font-size: clamp(1.5rem, .95rem + 2.1vw, 3.1rem); line-height: 1.1; color: var(--fg); }
.statement__ticker .ticker-item:nth-child(odd) { font-weight: 250; font-stretch: 120%; letter-spacing: -.04em; }
.statement__ticker .ticker-item:nth-child(even) { font-weight: 700; font-stretch: 78%; letter-spacing: -.02em; }
/* the echo run only exists to keep the alternation seamless across the loop */
.marquee:not(.is-ready) .ticker-item--echo { display: none; }
@media (prefers-reduced-motion: reduce) { .ticker-item--echo { display: none !important; } }
.statement__ticker:not(.is-ready) .marquee__track { justify-content: flex-start; padding-inline: var(--gutter); column-gap: 2rem; }

/* ----------------------------------------------- Control at every layer */
.control { overflow: clip; }
.control__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-m) var(--space-m); margin-bottom: var(--space-xl); }
.control__head .eyebrow { grid-column: 1 / -1; }
.control__title { grid-column: 1 / span 7; font-size: var(--step-5); line-height: .9; letter-spacing: var(--track-display); font-weight: 530; }
.control__title em { font-weight: 320; }
.control__intro { grid-column: 8 / -1; align-self: end; display: grid; gap: var(--space-m); }
.control__intro .body-l { color: var(--fg-2); }
@media (max-width: 999px) {
  .control__title, .control__intro { grid-column: 1 / -1; }
}

/* The stage: a floating prism, a beam of light through four textured plates, the L1–L4 legend */
.control__stage { display: grid; justify-items: center; align-content: center; gap: clamp(1rem, .6rem + 1vw, 1.75rem); }
.layers { width: 100%; max-width: 30rem; height: auto; overflow: visible; }
.layer__lift { transition: transform .9s var(--ease-out); }
.layer__top { fill: rgb(13 17 34 / .92); stroke: rgb(240 237 247 / .3); stroke-width: 1; transition: fill .7s, stroke .7s, filter .7s; }
.layer__side { fill: rgb(6 8 16 / .96); stroke: rgb(240 237 247 / .16); stroke-width: 1; }
.layer__tex { opacity: .3; transition: opacity .7s; }
.layer__pierce { opacity: .5; transform-box: fill-box; transform-origin: center; transition: opacity .6s, transform .8s var(--ease-out); }
.layer__leader { stroke: rgb(240 237 247 / .24); stroke-width: 1; transition: stroke .5s; }
.layer__label { fill: #b4b7c9; font-family: var(--font-sans); font-size: 19px; font-weight: 520; letter-spacing: -.01em; transition: fill .5s; }
.layer__key { fill: #8b90a7; font-weight: 640; letter-spacing: .02em; transition: fill .5s; }
.layer.is-active .layer__lift { transform: translateY(-14px); }
.layer.is-active .layer__top { fill: url(#g-plate); stroke: rgb(255 255 255 / .72); filter: drop-shadow(0 0 22px rgb(173 203 240 / .5)); }
.layer.is-active .layer__tex { opacity: .7; }
.layer.is-active .layer__pierce { opacity: 1; transform: scale(1.7); }
.layer.is-active .layer__leader { stroke: var(--iris); }
.layer.is-active .layer__label { fill: #f0edf7; }
.layer.is-active .layer__key { fill: #c8b8ff; }

.beam__soft { opacity: .85; }
.beam__core { fill: none; stroke-width: 1.6; }
.beam__photon { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 6 94; stroke-dashoffset: 6; opacity: 0; filter: drop-shadow(0 0 4px #adcbf0); }
.float-prism__halo { opacity: .95; }
.float-prism__body { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .control__story.is-inview .beam__photon { animation: photon 3.6s var(--ease-in-out) infinite; }
  .float-prism__body { animation: prism-float 6.5s ease-in-out infinite; animation-play-state: paused; }
  .control__story.is-inview .float-prism__body { animation-play-state: running; }
}
@keyframes photon { 0% { stroke-dashoffset: 6; opacity: 0; } 8% { opacity: 1; } 86% { opacity: 1; } 100% { stroke-dashoffset: -94; opacity: 0; } }
@keyframes prism-float { 50% { transform: translateY(-8px); } }

/* L1–L4 summary: always visible, doubles as the legend and as shortcuts to each layer */
.control__summary { width: 100%; max-width: 34rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.control__sum { min-width: 0; }
.control__sum-link { position: relative; display: grid; align-content: start; gap: .15rem; height: 100%; padding: .85rem .7rem .15rem 0; color: var(--fg-2); text-decoration: none; }
.control__sum + .control__sum .control__sum-link { padding-left: .8rem; border-left: 1px solid var(--line); }
.control__sum-link::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--spectrum); box-shadow: 0 0 8px var(--glow); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease-out); }
.control__sum.is-active .control__sum-link::before { transform: none; }
.control__sum-key { font-size: var(--step--2); font-weight: 640; letter-spacing: .04em; color: var(--fg-3); transition: color .5s; }
.control__sum-name { font-size: var(--step-0); font-weight: 560; color: var(--fg); letter-spacing: -.01em; line-height: 1.25; }
.control__sum-gist { font-size: var(--step--2); color: var(--fg-3); line-height: 1.4; }
.control__sum.is-active .control__sum-key { color: var(--accent-text); }
.control__sum-link:hover .control__sum-name { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; }

.control__steps { counter-reset: none; }
.control__index { font-size: var(--step--1); color: var(--fg-3); margin-bottom: 1rem; }
.control__step-title { font-size: var(--step-4); line-height: .98; letter-spacing: var(--track-h2); font-weight: 530; max-width: 12ch; }
.control__step-text { margin-top: 1.25rem; font-size: var(--step-1); line-height: 1.5; color: var(--fg-2); max-width: 34ch; }
.control__step { position: relative; }
.control__step::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--spectrum); transition: width 1.1s var(--ease-out); }
.control__step.is-active::before { width: 100%; }
.no-js .control__step::before { width: 3rem; }
/* inactive layers stay readable: titles dim to fg-3 (≥ 5:1 on navy), body copy keeps fg-2 */
.js .control__step:not(.is-active) .control__step-text { color: var(--fg-2); }
.js .control__step:not(.is-active) .control__index { color: var(--fg-3); }
.control__step.is-active .control__index { color: var(--accent-text); }

@media (min-width: 1000px) {
  /* a shorter runway: compact steps, the stage centred in the viewport, no trailing void */
  .control__stage { height: auto; min-height: 0; top: max(calc(var(--header-h) + 1rem), calc(50vh + var(--header-h) / 2 - 20.5rem)); }
  .control__step { min-height: 38vh; scroll-margin-top: 30vh; }
  .control__step:last-child { min-height: 44vh; justify-content: flex-start; padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
  .control { padding-bottom: var(--space-2xl); }
}
@media (max-width: 999px) {
  /* narrow stage: the L1–L4 summary below is the legend, the plates re-centre */
  .control__stage { max-width: 34rem; margin-inline: auto; width: 100%; overflow: hidden; }
  .layers { max-width: 30rem; transform: translateX(10.9%); }
  .layer__label, .layer__leader { display: none; }
}
@media (max-width: 559px) {
  .control__summary { grid-template-columns: 1fr; }
  .control__sum + .control__sum .control__sum-link { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}