/* Home page only: the Artemis illustration-card keyframes and the
   Artemis product-shot stage. Kept out of components.css because
   nothing else on the site uses them. */

@property --tri { syntax: "<number>"; inherits: true; initial-value: 470; }
@property --n1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --n2 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --n3 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --nsc { syntax: "<number>"; inherits: true; initial-value: 0.4; }
@property --core { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --hub { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --wire { syntax: "<number>"; inherits: true; initial-value: 150; }
@property --nd { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --lift { syntax: "<length>"; inherits: true; initial-value: 26px; }
@property --flow { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --ringo { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --vx { syntax: "<length>"; inherits: true; initial-value: 74px; }
@property --vy { syntax: "<length>"; inherits: true; initial-value: 32px; }
@property --vs { syntax: "<number>"; inherits: true; initial-value: 100; }
@property --vp { syntax: "<number>"; inherits: true; initial-value: 0.75; }

@keyframes avE1 {
  0%   { --tri: 470; --core: 0; --n1: 0; --n2: 0; --n3: 0; --nsc: .4; }
  45%  { --tri: 0; }
  50%  { --core: 1; --nsc: .8; }
  64%  { --n1: 1; }
  80%  { --n2: 1; }
  100% { --tri: 0; --core: 1; --n1: 1; --n2: 1; --n3: 1; --nsc: 1; }
}
@keyframes avE2 {
  0%   { --hub: 0; --wire: 150; --nd: 0; --lift: 26px; --flow: 0; }
  22%  { --hub: 1; }
  62%  { --wire: 0; }
  88%  { --nd: 1; --lift: 0px; }
  100% { --hub: 1; --wire: 0; --nd: 1; --lift: 0px; --flow: 1; }
}
@keyframes avE3 {
  0%   { --ringo: 0; }
  70%  { --ringo: 0; }
  100% { --ringo: 1; }
}
@keyframes avSpin { to { transform: rotate(360deg); } }
@keyframes avCaret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes avGlow { 0%, 100% { opacity: 0; transform: scale(.6); } 45% { opacity: .95; transform: scale(2.6); } }
@keyframes avFlow { to { stroke-dashoffset: -38; } }
@keyframes avHubPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes avDotIn { from { opacity: 0; transform: scale(.2); } to { opacity: .9; transform: scale(1); } }
@keyframes avTwinkle2 { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes avVerify {
  0%   { --vx: 74px;  --vy: 32px;  --vs: 100; --vp: .75; }
  7%   { --vx: 74px;  --vy: 32px;  --vs: 0;   --vp: 1.12; }
  11%  { --vp: 1; }
  18%  { --vx: 74px;  --vy: 32px;  --vs: 0;   --vp: 1; }
  21%  { --vx: 74px;  --vy: 32px;  --vs: 100; --vp: .8; }
  25%  { --vx: 176px; --vy: 60px;  --vs: 100; --vp: .75; }
  32%  { --vx: 176px; --vy: 60px;  --vs: 0;   --vp: 1.12; }
  36%  { --vp: 1; }
  43%  { --vx: 176px; --vy: 60px;  --vs: 0;   --vp: 1; }
  46%  { --vx: 176px; --vy: 60px;  --vs: 100; --vp: .8; }
  50%  { --vx: 72px;  --vy: 124px; --vs: 100; --vp: .75; }
  57%  { --vx: 72px;  --vy: 124px; --vs: 0;   --vp: 1.12; }
  61%  { --vp: 1; }
  68%  { --vx: 72px;  --vy: 124px; --vs: 0;   --vp: 1; }
  71%  { --vx: 72px;  --vy: 124px; --vs: 100; --vp: .8; }
  75%  { --vx: 150px; --vy: 172px; --vs: 100; --vp: .75; }
  82%  { --vx: 150px; --vy: 172px; --vs: 0;   --vp: 1.12; }
  86%  { --vp: 1; }
  93%  { --vx: 150px; --vy: 172px; --vs: 0;   --vp: 1; }
  96%  { --vx: 150px; --vy: 172px; --vs: 100; --vp: .8; }
  100% { --vx: 74px;  --vy: 32px;  --vs: 100; --vp: .75; }
}

@media (max-width: 620px) { [data-usp] { grid-template-columns: minmax(0, 1fr) !important; } }
@media (min-width: 1180px) { [data-usp] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }

/* Hero */
#top { position: relative; z-index: 2; min-height: 100vh; box-sizing: border-box; padding: 132px clamp(24px, 6vw, 245px) 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; text-align: center; }
#av-hero-h { max-width: 950px; font-size: clamp(38px, 6.6vw, 96px); line-height: 1; letter-spacing: -.05em; }
#av-hero-sub { margin: 0; max-width: 586px; font-family: var(--av-font-heading); font-weight: 700; font-size: clamp(17px, 2vw, 26px); line-height: 1.2; }
#av-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 9px; }
#av-hero-grad { position: relative; z-index: 1; width: 100%; height: 43vh; margin-top: -38vh; overflow: hidden; background: var(--av-black) url(../images/noise-gradient.jpg) center top / 100% auto no-repeat; }

/* Artemis product stage */
#av-app-stage { position: relative; width: 100%; margin-top: 110px; perspective: 2400px; perspective-origin: 50% 22%; }
#av-app-tilt { position: relative; width: 100%; aspect-ratio: 1440 / 900; border-radius: calc(22px * var(--axd-scale, 1)); overflow: hidden; transform-origin: 50% 108%; will-change: transform, opacity; opacity: 0; }
#av-app-sheen { position: absolute; inset: -30%; z-index: 3; pointer-events: none; opacity: 0; background: linear-gradient(112deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.13) 47%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.13) 53%, rgba(255,255,255,0) 62%); mix-blend-mode: screen; }
#av-app-edge { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.07); }
#av-app-floor { position: absolute; left: 8%; right: 8%; bottom: -6%; height: 22%; z-index: -1; pointer-events: none; opacity: 0; background: radial-gradient(50% 100% at 50% 0%, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 42%, transparent 78%); filter: blur(22px); }

/* Illustration cards */
.av-illo-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 32px 24px; box-sizing: border-box; border-radius: 24px; background: var(--av-n950); }
.av-illo-card h3 { font-size: 20px; line-height: 1; text-align: center; color: var(--av-white); }
.av-illo-card p { margin: 0; font-size: 16px; line-height: 1.8; text-align: center; color: var(--av-n400); }

/* How it works */
#av-hw { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: clamp(48px, 6vw, 96px); max-width: 1440px; margin: 0 auto; align-items: start; }
#av-hw-intro { position: sticky; top: 128px; }
#av-hw-list { display: flex; flex-direction: column; }
.av-step { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 44px 0 48px; border-top: 1px solid var(--av-n300); }
.av-step__rule { position: absolute; left: 0; top: -1px; height: 1px; width: 0%; background: var(--av-black); transition: width .9s var(--av-ease); }
.av-step__row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: baseline; }
.av-step__num { font-family: var(--av-font-heading); font-weight: 700; font-size: clamp(36px, 4vw, 55px); line-height: 1; letter-spacing: -.05em; color: var(--av-n300); transition: color .5s ease; }
.av-step__title { margin: 0; font-family: var(--av-font-heading); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); line-height: 1; letter-spacing: -.05em; color: var(--av-n300); transition: color .5s ease; }
.av-step__body { margin: 0; max-width: 640px; font-size: 16px; line-height: 1.8; color: var(--av-n300); transition: color .5s ease; text-wrap: pretty; }

/* Hero unscramble: home.js splits the headline into one <span> per letter
   (each gets an inline white-space style already) and marks them with this
   class purely as a hook — it must stay a plain inline element. Giving it
   display:inline-block would make every letter its own atomic box, free to
   wrap onto a new line between any two of them and split words mid-word. */