/* MR1-003 home page: page-specific layout only. Components and effects live in main.css. */

/* Hero: the marquee band and the stats card follow it, so it needs less bottom padding than main.css assumes */
.hero{padding-bottom:56px}
/* Deliberate hero-only h1 size: smaller than the BRIEF 5.2 h1 token because the hero shares its row with the machine render. Not a drift; do not "fix" it to the token. */
.hero h1{font-size:clamp(2.25rem,1.5rem + 2.4vw,3.5rem)}
.hero__chip{max-width:calc(100% - 8px)}
/* Reserves the render's height (960x1298) before the image arrives, so the pulse rings do not move while the page streams in (CLS). Home only: styleguide.html's hero image is 4:5. */
.hero__media{aspect-ratio:960/1298}
@media (min-width:1024px){.hero{padding-bottom:72px}}

/* Hero machine: client render, transparent cutout straight on the dark mesh (MR1-003-FOLLOWUP-2).
   No frame, no clipping; the BRIEF 5.7 blue glow is a soft radial layer behind the silhouette. */
.hero__frame{overflow:visible;isolation:isolate;border:0;border-radius:0;background:none;box-shadow:none}
.hero__frame::before{content:"";position:absolute;z-index:-1;inset:10% -16% -4%;border-radius:50%;background:radial-gradient(closest-side,rgb(59 130 246/.8),rgb(59 130 246/.4) 62%,transparent);pointer-events:none}
.hero__frame img{filter:drop-shadow(0 26px 32px rgb(6 15 31/.55))}
.hero__chip--side{bottom:17%} /* below the chamber, so the chip does not cover the container */
@media (max-width:767.98px){.hero__media{max-width:320px}}
/* E4 glare only where the machine is: mask it with the same cutout (fetched on hover-capable devices only) */
@media (hover:hover){.hero__frame .tilt__glare{-webkit-mask:url(/assets/img/mr1-render-open-480.webp) 0 0/100% 100% no-repeat;mask:url(/assets/img/mr1-render-open-480.webp) 0 0/100% 100% no-repeat}}

/* Dark band under the hero (continues the hero); the stats card overlaps its lower part */
.home-band{background:var(--c-navy-950);border-top:1px solid rgb(255 255 255/.08);padding-bottom:112px}
.home-band .marquee{background:transparent;border-bottom:0;padding-block:22px}
.home-band .marquee__item{color:rgb(255 255 255/.82)}

/* 3. Why on site */
.home-why .section-head{margin-bottom:28px}
.compare{padding:32px;border:1px solid var(--c-gray-200);box-shadow:var(--shadow-card),0 30px 60px -30px rgb(21 89 199/.3)}
.compare .card__title{margin-bottom:20px}
@media (min-width:768px){.compare{padding:40px}}

/* 4. Advantages bento: 3 columns on desktop = wide photo card + tall card + two small cards, no holes */
.home-adv__grid .bento__item{display:flex;flex-direction:column}
.home-adv__grid .bento__item--wide{display:grid;gap:28px;align-content:start}
.home-adv__photo{overflow:hidden;border-radius:var(--radius-lg);background:radial-gradient(ellipse 75% 70% at 50% 55%,#fff,var(--c-blue-50) 80%)}
.home-adv__photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 57%}
.bento__deco{display:none}
@media (min-width:768px){
  .home-adv__grid .bento__item--wide{grid-template-columns:1fr 1fr;align-items:center;gap:32px}
  .home-adv__grid .bento__item:last-child{grid-column:span 2}
}
@media (min-width:1024px){
  .home-adv__grid{grid-template-columns:repeat(3,1fr)}
  .home-adv__grid .bento__item:last-child{grid-column:auto}
  .home-adv__grid .bento__item{padding:32px}
  .bento__deco{display:block;position:absolute;right:-24px;bottom:-24px;width:240px;height:240px;stroke-width:1;color:var(--c-blue-600);opacity:.07;pointer-events:none}
}

/* 5. Tiles: 3 x 2 on desktop (6 tiles) */
.home-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.home-tiles .tile{height:100%;min-width:0;overflow-wrap:break-word;hyphens:auto}
@media (min-width:1024px){.home-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 6. Who: 2 x 2 on phones */
.home-who__grid .bento__item .card__icon{margin-bottom:16px}
.home-who__grid .bento__item .card__title{margin-bottom:0}
@media (max-width:767.98px){
  .home-who__grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .home-who__grid .bento__item{padding:20px}
  .home-who__grid .card__title{font-size:1.0625rem}
}
@media (min-width:1024px){.home-who__grid .bento__item{padding:32px}}

/* 7. Story: renders (transparent cutouts) on a navy glow, HMI shown as an inline SVG diagram, text link */
.story__img{background:var(--c-navy-900)}
.story__img--render{background:radial-gradient(ellipse 85% 62% at 50% 56%,rgb(59 130 246/.4),transparent 72%),var(--c-navy-900)}
.story__img--render img{object-fit:contain;padding:14px;filter:drop-shadow(0 18px 22px rgb(6 15 31/.5))}
.story__img--crop img{object-fit:cover;object-position:50% 60%;padding:0;filter:none}
.link-arrow{display:inline-flex;align-items:center;gap:8px;margin-top:32px;padding-block:10px;font-weight:600;text-decoration:none}
.link-arrow .icon{transition:transform var(--dur-1) var(--ease-out)}
.link-arrow:hover .icon{transform:translateX(4px)}
.story:not(.story--pinned) .story__media{grid-template-columns:repeat(2,1fr);gap:12px;max-width:560px}
.story:not(.story--pinned) :is(.story__img--hmi,.story__img--crop){grid-column:1/-1}
.story:not(.story--pinned) .story__img--crop img{aspect-ratio:16/10}
/* pinned: zoom into the chamber by sizing the render 1.9x the frame and centring the container (GSAP owns the img transform, so no scale here) */
.story--pinned .story__img--crop{height:clamp(200px,calc(100vh - 160px),550px)}
.story--pinned .story__img--crop picture{display:block;position:relative;height:100%}
.story--pinned .story__img--crop img{position:absolute;max-width:none;width:190%;height:auto;aspect-ratio:960/1298;left:calc(50% - 435px);top:calc(50% - 600px)}
@media (max-height:780px) and (min-width:1024px){.story--pinned .link-arrow{margin-top:16px;padding-block:4px}}

/* 7b. HMI diagram (inline SVG, colours from the design tokens, text uses the page fonts) */
.story__img--hmi{display:grid;place-items:center}
.hmi{display:block;width:100%;height:auto;aspect-ratio:4/5}
.story--pinned .hmi{height:clamp(280px,calc(100vh - 190px),550px)}
.hmi text{font-family:var(--f-body);font-weight:600;fill:rgb(255 255 255/.92)}
.hmi .hmi__num{font-family:var(--f-head);font-weight:800;fill:#fff}
.hmi__s1{stop-color:var(--c-navy-700)}.hmi__s2{stop-color:var(--c-navy-950)}
.hmi__v1{stop-color:var(--c-blue-700)}.hmi__v2{stop-color:var(--c-glow)}
.hmi__screen{stroke:rgb(255 255 255/.14);stroke-width:1.5}
.hmi__label{font-size:14px;fill:var(--c-sky)!important}
.hmi__num--lg{font-size:22px}.hmi__num--md{font-size:16px}.hmi__num--sm{font-size:13px}
.hmi__track,.hmi__arc,.hmi__hand,.hmi__link,.hmi__ico :is(path,line,circle,ellipse){fill:none;stroke-linecap:round;stroke-linejoin:round}
.hmi__track{stroke:rgb(255 255 255/.16);stroke-width:4}
.hmi__arc{stroke:var(--c-green-600);stroke-width:4}
.hmi__hand{stroke:#fff;stroke-width:2}
.hmi__ring{fill:none;stroke:var(--c-glow);stroke-width:1.5;opacity:.3;transform-box:fill-box;transform-origin:center}
.hmi__link{stroke:var(--c-sky);stroke-width:1.5;opacity:.55}
.hmi__lid{fill:rgb(255 255 255/.85)}.hmi__base{fill:rgb(255 255 255/.55)}
.hmi__body{stroke:rgb(255 255 255/.28);stroke-width:1.5}
.hmi__badge{fill:#fff}
.hmi__badge+.hmi__num{fill:var(--c-navy-900)}
.hmi__motor{fill:var(--c-navy-950);stroke:var(--c-sky);stroke-width:2}
.hmi__tile{fill:rgb(255 255 255/.07);stroke:rgb(255 255 255/.18);stroke-width:1}
.hmi__ico :is(path,line,circle,ellipse){stroke:var(--c-sky);stroke-width:1.75}
.hmi__tl{font-size:13px}
@keyframes hmi-pulse{0%{transform:scale(.62);opacity:.55}100%{transform:scale(1.12);opacity:0}}
@keyframes hmi-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.hmi__ring{animation:hmi-pulse 3.6s ease-out infinite}
.hmi__ring:nth-child(1){transform:scale(.62)}.hmi__ring:nth-child(2){transform:scale(.85);animation-delay:1.2s}.hmi__ring:nth-child(3){transform:scale(1.1);animation-delay:2.4s}
.story--pinned .story__img.is-active .hmi__link{stroke-dasharray:1;animation:hmi-draw 900ms var(--ease-out) both}
@supports (animation-timeline:view()){
  .story:not(.story--pinned) .hmi__link{stroke-dasharray:1;animation:hmi-draw linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
}

/* 8. Certification cards */
.home-cert .section-head{margin-bottom:24px}
.home-cert__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.home-cert__cards .card{display:flex;align-items:center;gap:16px;padding:20px}
.home-cert__cards .card__icon{flex:none;margin:0}
.home-cert__cards .card__title{margin:0;font-size:1.0625rem}
.home-cert__cards .card--wide{grid-column:1/-1}
.home-cert__cards .card--iso{flex-direction:column;align-items:flex-start;gap:14px}
@media (max-width:479.98px){.home-cert__cards .card--iso{padding:16px 14px}.home-cert__cards .card--iso .card__title{font-size:.9375rem}}

/* Marquee: keep each of the two lists at least viewport-wide so the loop never shows a gap on very wide screens */
@media (min-width:1646px){.home-band .marquee__list{min-width:100vw;justify-content:space-around}}
@media (min-width:1646px) and (prefers-reduced-motion:reduce){.home-band .marquee__list{min-width:0;justify-content:center}}

/* 9. CTA: spacing between heading and text */
.cta-band h2+p{margin-top:8px}