/*
 * MAJIFO Toolkit, module "hero": What we make (design system 2.1.0). Named exception to Elementor
 * native styles (custom code): only the field, its caption and the stats overlay are styled here.
 * Layout of the hero itself (height, copy, buttons) stays in Elementor classes.
 * Values from tokens.json 2.0.1: text #F5F5F5, muted #B3B3B3, border #2E2E2E, margin clamp(16px, 4vw, 48px), ease in-out.
 */
.mj-hero{min-height:100vh}   /* fallback for browsers without svh; the Elementor class mj-hero sets 100svh (fits the visible phone screen with the browser bars showing) */
.mj-hero-field{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0A0A0A}
.mj-hero-field canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer;opacity:0;transition:opacity 600ms cubic-bezier(.76,0,.24,1)}
.mj-hero-field.is-ready canvas{opacity:1}
.mj-hero-field.is-static canvas{display:none}
/* the dark fade under the copy, as on the approved board, so the headline reads over the ice */
.mj-hero-field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,#0A0A0A 0%,rgba(10,10,10,.92) 14%,rgba(10,10,10,.55) 45%,rgba(10,10,10,0));pointer-events:none}   /* fully dark at the bottom edge: the hero fades into the page */
/* no hairline where the hero meets the footer (only on pages with the hero) */
body:has(.mj-hero) .mj-footer{box-shadow:inset 0 0 0 0 transparent}
/* the rest of the hero sits above the field; empty areas let the pointer through to the ice */
.mj-hero > :not(.mj-hero-field){position:relative;z-index:1;pointer-events:none}
.mj-hero > :not(.mj-hero-field) :is(a,button,h1,h2,h3,p,input,select,textarea){pointer-events:auto}

/* service caption: phones centred under the icon; desktop bottom right, on the CTA line */
.mj-hero-caption{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,8px);transition:opacity 400ms cubic-bezier(.76,0,.24,1),transform 400ms cubic-bezier(.76,0,.24,1);text-shadow:0 0 24px rgba(10,10,10,.95),0 0 8px rgba(10,10,10,.8)}
.mj-hero-caption.on{opacity:1;transform:translate(-50%,0)}
.mj-hero-caption .idx{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#B3B3B3}
.mj-hero-caption .name{font-family:"Sora",sans-serif;font-weight:600;font-size:clamp(18px,1.7vw,26px);line-height:1.2;letter-spacing:-.02em;color:#F5F5F5}
/* Caption style "Quiet" (default): one line in the label style, subtle grey, no halo: "02 / 06 · COMMERCIAL PHOTOGRAPHY" */
.mj-hero-caption.is-quiet{flex-direction:row;align-items:baseline;gap:0;text-shadow:none}
.mj-hero-caption.is-quiet .idx{color:#6B6B6B}
.mj-hero-caption.is-quiet .idx{font-size:14px}
.mj-hero-caption.is-quiet .name{font-family:"JetBrains Mono",monospace;font-weight:400;font-size:14px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:#8F8F8F}
.mj-hero-caption.is-quiet .name::before{content:"\00B7";margin:0 10px;color:#6B6B6B}
/* iPhone: "Tap to tilt" under the caption until the visitor answers the motion question (hero.js) */
.mj-hero-caption .hint{flex-basis:100%;display:block;margin-top:6px;font-family:"JetBrains Mono",monospace;font-size:11px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:#6B6B6B}
/* phones (and other tall screens): centred on the screen, never wider than it; a long name wraps to a second centred line */
@media (max-aspect-ratio:9/10){
  .mj-hero-caption{left:50%!important;width:max-content;max-width:calc(100% - 2 * clamp(16px,4vw,48px));white-space:normal}
  .mj-hero-caption.is-quiet{flex-wrap:wrap;justify-content:center;row-gap:2px}
}
@media (min-aspect-ratio:9/10){
  .mj-hero-caption{left:auto!important;top:auto!important;right:var(--mj-hero-caption-right,clamp(16px,4vw,48px));bottom:var(--mj-hero-caption-bottom,clamp(16px,4vw,48px));align-items:flex-end;text-align:right;transform:translateY(8px)}
  .mj-hero-caption.on{transform:none}
  .mj-hero-caption.is-quiet{align-items:baseline}
}

/* stats overlay: administrators only, when switched on in the Toolkit */
.mj-hero-stats{position:absolute;top:84px;left:clamp(16px,4vw,48px);z-index:3;margin:0;padding:12px 14px;font:400 12px/1.6 "JetBrains Mono",monospace;color:#B3B3B3;background:rgba(10,10,10,.78);box-shadow:inset 0 0 0 1px #2E2E2E;white-space:pre;pointer-events:none}
.mj-hero-stats[hidden]{display:none}