/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — ARVELLI LANDING
   Namespace: .av-  (Arvelli landing) · shared .wr-* · state .is-*
   Built on Signal Core tokens (assets/css/tokens.css).
   A single dark Ink-Navy stage: masthead wordmark, a switchable home / contact
   panel, the art-deco "A" arch drawing itself along the right gutter, and a
   drifting showroom backdrop. Bilingual EN / NL.
   ============================================================================ */

/* --- reset / base ------------------------------------------------------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ background:var(--wr-hero); }
body{
  background:var(--wr-hero);
  color:var(--wr-white);
  font-family:var(--wr-font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:var(--wr-white); text-decoration:none; }
a:hover{ color:var(--wr-orange); }
::selection{ background:var(--wr-orange); color:var(--wr-hero); }

/* --- stage -------------------------------------------------------------- */
.av-stage{
  /* right-hand visual gutter the arch lives in; the panel keeps clear of it  */
  --av-vis: clamp(56px, 100vw - 640px, 21.72vh);
  --av-ease-in:   cubic-bezier(0.16, 0.68, 0.12, 1);
  --av-ease-arch: cubic-bezier(0.30, 0.45, 0.10, 1);
  position:relative;
  min-height:100dvh;
  display:flex;
  align-items:stretch;
  overflow:hidden;
  background:var(--wr-hero);
}

/* --- drifting backdrop -------------------------------------------------- */
.av-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  animation:av-fade 2400ms ease both;
}
.av-bg__img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:center 30%;
  opacity:0.14; filter:saturate(0.55);
  transform:scale(1.06); will-change:transform;
}
.av-bg__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--wr-hero) 72%, transparent) 0%,
    color-mix(in srgb, var(--wr-hero) 25%, transparent) 60%,
    color-mix(in srgb, var(--wr-hero) 60%, transparent) 100%);
}

/* --- content shell ------------------------------------------------------ */
.av-shell{
  position:relative; z-index:2;
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column;
  gap:clamp(16px, 3.4vh, 40px);
  padding:clamp(20px,3.4vh,48px)
          calc(var(--av-vis) + clamp(28px,3vw,64px))
          clamp(20px,3.4vh,48px)
          clamp(24px,5vw,88px);
}

/* --- masthead ----------------------------------------------------------- */
.av-masthead{ animation:av-fade 1100ms ease 150ms both; }
.av-wordmark{ display:block; height:clamp(22px,2.2vw,30px); width:auto; }
.av-masthead__link{ display:inline-block; }

/* --- panels ------------------------------------------------------------- */
.av-panel{ margin-top:auto; width:100%; }
.av-home{ max-width:600px; padding:clamp(0px,2vh,32px) 0 clamp(6px,2vh,24px); }
.av-contact{ max-width:560px; padding:clamp(0px,1.4vh,24px) 0 clamp(6px,2vh,24px); }

/* --- eyebrow ------------------------------------------------------------ */
.av-eyebrow{
  display:flex; align-items:center; gap:14px;
  margin-bottom:clamp(16px,2.6vh,32px);
  animation:av-rise 1200ms var(--av-ease-in) 500ms both;
}
.av-eyebrow__rule{ display:block; width:26px; height:1px; background:var(--wr-orange); }
.av-eyebrow__text{
  font-size:11px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--wr-orange); font-weight:500;
}

/* --- hero --------------------------------------------------------------- */
.av-title{
  margin:0; font-weight:300;
  font-size:min(clamp(32px,4.4vw,64px), 11.5vh);
  line-height:1.12; letter-spacing:0.005em; text-wrap:balance;
  animation:av-hero 1500ms var(--av-ease-in) 700ms both;
}
.av-rule{
  height:1px; background:color-mix(in srgb, var(--wr-white) 16%, transparent);
  margin:clamp(18px,3.2vh,42px) 0; transform-origin:left;
  animation:av-ruleline 1600ms var(--av-ease-in) 1150ms both;
}
.av-lede-group{ display:grid; gap:clamp(18px,3vh,30px); }
.av-lede-lines{ display:grid; gap:10px; }
.av-lede{
  margin:0; font-size:clamp(16px,1.2vw,18px); line-height:1.6; font-weight:400;
  color:color-mix(in srgb, var(--wr-white) 82%, transparent);
  animation:av-rise 1300ms var(--av-ease-in) 1300ms both;
}
.av-lede--soft{
  font-weight:300;
  color:color-mix(in srgb, var(--wr-white) 55%, transparent);
  animation-delay:1480ms;
}
.av-cta-wrap{ animation:av-rise 1300ms var(--av-ease-in) 1700ms both; }

/* --- primary CTA (outlined brass; fills on hover) ----------------------- */
.av-cta{
  display:flex; width:100%; justify-content:space-between; align-items:center;
  gap:14px; white-space:nowrap; padding:16px 26px;
  border:1px solid var(--wr-orange); color:var(--wr-orange);
  font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase;
  transition:background 260ms ease, color 260ms ease;
}
.av-cta:hover{ background:var(--wr-orange); color:var(--wr-hero); }
.av-cta__arrow{ font-size:14px; }

/* --- contact panel ------------------------------------------------------ */
.av-back{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:color-mix(in srgb, var(--wr-white) 50%, transparent);
  margin-bottom:clamp(10px,1.8vh,26px);
  animation:av-fade 900ms ease 100ms both;
}
.av-back:hover{ color:var(--wr-orange); }
.av-contact__title{
  margin:0 0 12px; font-weight:300;
  font-size:min(clamp(26px,3.2vw,44px), 8.2vh); line-height:1.14;
  animation:av-hero 1300ms var(--av-ease-in) 250ms both;
}
.av-contact__intro{
  margin:0 0 clamp(16px,2.8vh,34px); max-width:46ch;
  font-size:15px; line-height:1.55; font-weight:300;
  color:color-mix(in srgb, var(--wr-white) 62%, transparent);
  animation:av-rise 1200ms var(--av-ease-in) 500ms both;
}

/* --- form --------------------------------------------------------------- */
.av-form{
  display:grid; gap:clamp(10px,1.8vh,20px);
  animation:av-rise 1200ms var(--av-ease-in) 750ms both;
}
.av-field-row{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(10px,1.8vh,20px);
}
.av-field{ display:grid; gap:6px; }
.av-field__label{
  font-size:10px; letter-spacing:0.2em; text-transform:uppercase;
  color:color-mix(in srgb, var(--wr-white) 45%, transparent);
}
.av-input,.av-textarea{
  background:transparent; border:none; color:inherit;
  border-bottom:1px solid color-mix(in srgb, var(--wr-white) 22%, transparent);
  padding:6px 0; font-family:inherit; font-size:16px; font-weight:300;
  transition:border-color 220ms ease;
}
.av-textarea{ resize:none; line-height:1.6; }
.av-input:focus,.av-textarea:focus{ outline:none; border-bottom-color:var(--wr-orange); }
.av-input::placeholder,.av-textarea::placeholder{
  color:color-mix(in srgb, var(--wr-white) 32%, transparent);
}

/* consent */
.av-consent{
  display:flex; align-items:flex-start; gap:10px; margin-top:4px;
  font-size:12px; line-height:1.5; font-weight:300;
  color:color-mix(in srgb, var(--wr-white) 55%, transparent);
}
.av-consent__box{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto; width:15px; height:15px; margin-top:2px;
  border:1px solid color-mix(in srgb, var(--wr-white) 32%, transparent);
  background:transparent; cursor:pointer; position:relative;
  transition:border-color 200ms ease, background 200ms ease;
}
.av-consent__box:checked{ background:var(--wr-orange); border-color:var(--wr-orange); }
.av-consent__box:checked::after{
  content:''; position:absolute; left:4px; top:1px;
  width:4px; height:8px; border:solid var(--wr-hero);
  border-width:0 2px 2px 0; transform:rotate(45deg);
}
.av-consent__box:focus-visible{ outline:2px solid var(--wr-orange); outline-offset:2px; }
.av-consent a{ color:color-mix(in srgb, var(--wr-white) 78%, transparent); text-decoration:underline; text-underline-offset:2px; }
.av-consent a:hover{ color:var(--wr-orange); }

/* honeypot — kept in the layout flow for bots, hidden from people + AT */
.av-hp{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}

/* submit */
.av-submit-wrap{ margin-top:6px; }
.av-submit{
  display:inline-flex; align-items:center; gap:16px; white-space:nowrap;
  padding:16px 30px; cursor:pointer;
  background:var(--wr-orange); border:1px solid var(--wr-orange); color:var(--wr-hero);
  font-family:inherit; font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase;
  transition:background 260ms ease, color 260ms ease;
}
.av-submit:hover{ background:transparent; color:var(--wr-orange); }
.av-submit[disabled]{ opacity:0.55; cursor:default; }
.av-submit__arrow{ font-size:14px; }

/* error note */
.av-formnote{
  margin:2px 0 0; font-size:12px; line-height:1.5; font-weight:300;
  color:color-mix(in srgb, var(--wr-white) 62%, transparent);
}
.av-formnote a{ color:var(--wr-orange); text-decoration:underline; text-underline-offset:2px; }

/* sent state */
.av-sent{
  display:flex; align-items:flex-start; gap:16px;
  padding:26px 0; border-top:1px solid color-mix(in srgb, var(--wr-white) 16%, transparent);
  animation:av-rise 700ms ease both;
}
.av-sent__rule{ display:block; flex:0 0 auto; width:26px; height:1px; background:var(--wr-orange); margin-top:12px; }
.av-sent__text{ margin:0; max-width:40ch; font-size:16px; line-height:1.55; font-weight:300; }

/* --- language switcher -------------------------------------------------- */
.av-lang{
  position:absolute; z-index:3;
  top:max(22px, env(safe-area-inset-top), 3.4vh);
  right:calc(var(--av-vis) + clamp(20px,3vw,64px));
  display:flex; align-items:center; gap:9px;
  font-size:11px; letter-spacing:0.16em;
  animation:av-fade 1100ms ease 150ms both;
}
.av-lang__btn{
  background:transparent; border:none; cursor:pointer;
  padding:12px 10px; margin:-12px -10px;
  font-family:inherit; font-size:11px; letter-spacing:0.16em; font-weight:400;
  color:color-mix(in srgb, var(--wr-white) 42%, transparent);
  transition:color 220ms ease;
}
.av-lang__btn.is-active{ color:var(--wr-orange); font-weight:500; }
.av-lang__sep{ opacity:0.34; }

/* --- art-deco "A" arch -------------------------------------------------- */
.av-arch{
  position:absolute; z-index:1; right:0; top:0; bottom:0;
  width:100%; overflow:hidden; pointer-events:none;
}
.av-arch__svg{
  position:absolute; right:calc(var(--av-vis) - 21.72vh); top:-22.7%;
  height:132%; width:auto; aspect-ratio:233.3 / 1418; display:block;
  animation:av-fade 1800ms ease 400ms both,
            av-breathe 22s ease-in-out 2200ms infinite;
}
.av-arch__fill{ fill:var(--wr-orange); }
.av-arch__stroke{
  stroke-dasharray:1000 1020;
  animation:av-draw 3600ms var(--av-ease-arch) var(--av-d,0ms) both;
}

/* --- page / sent visibility --------------------------------------------- */
[data-page="home"] .av-contact{ display:none; }
[data-page="contact"] .av-home{ display:none; }
.av-sent{ display:none; }
.av-contact.is-sent .av-form{ display:none; }
.av-contact.is-sent .av-sent{ display:flex; }

/* --- keyframes ---------------------------------------------------------- */
@keyframes av-fade{ from{opacity:0} to{opacity:1} }
@keyframes av-rise{ from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }
@keyframes av-hero{ from{opacity:0; transform:translateY(30px); filter:blur(10px)} to{opacity:1; transform:none; filter:blur(0)} }
@keyframes av-ruleline{ from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes av-breathe{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
@keyframes av-draw{ from{stroke-dashoffset:1000} to{stroke-dashoffset:0} }
@keyframes av-erase{ from{stroke-dashoffset:0} to{stroke-dashoffset:-1002} }

/* --- reduced motion: settle everything to its resting state ------------- */
@media (prefers-reduced-motion: reduce){
  .av-bg,.av-masthead,.av-eyebrow,.av-title,.av-rule,.av-lede,.av-cta-wrap,
  .av-back,.av-contact__title,.av-contact__intro,.av-form,.av-lang,
  .av-arch__svg,.av-sent{ animation:none !important; }
  .av-bg__img{ transform:scale(1.06); }
  .av-rule{ transform:none; }
  .av-arch__stroke{ animation:none !important; stroke-dashoffset:0; }
}