/* ==========================================================================
   WebbotX — motion + rhythm system
   Loaded after site.css. Everything here is opt-in via a class or data
   attribute, so any page built later inherits it without extra work.
   ========================================================================== */

:root{
  /* one vertical rhythm scale for the whole site */
  --sec-y:      clamp(72px, 8.5vw, 132px);
  --sec-y-lg:   clamp(96px, 11vw, 172px);
  --sec-y-sm:   clamp(52px, 6vw, 88px);
  --stack:      clamp(28px, 3.4vw, 52px);   /* gap inside a section */
  --ease:       cubic-bezier(.22,.68,.32,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
}

/* ---------- 1. section rhythm ------------------------------------------- */
.sec{ padding-block: var(--sec-y); }
.sec--lg{ padding-block: var(--sec-y-lg); }
.sec--sm{ padding-block: var(--sec-y-sm); }

/* two sections on the same background were colliding — give them a seam */
.sec + .sec{ padding-top: var(--sec-y-sm); }
.sec + .sec::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(1240px,100% - var(--gut)*2);height:1px;
  background:linear-gradient(90deg,transparent,rgba(18,20,26,.10) 20%,rgba(18,20,26,.10) 80%,transparent);
}
.sec.cmp + .sec.cmp::before{ background:linear-gradient(90deg,transparent,rgba(18,20,26,.12) 20%,rgba(18,20,26,.12) 80%,transparent); }
.tst + .sec::before, .sec.dark + .sec::before{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 20%,rgba(255,255,255,.12) 80%,transparent);
}

/* a hero should breathe before the first section under it */
.phero{ padding-bottom: clamp(56px, 7vw, 104px); }
.phero + .sec{ padding-top: var(--sec-y); }

/* consistent gap between a section heading and its content */
.sec-h{ margin-bottom: var(--stack); }

/* ---------- 2. breadcrumb ------------------------------------------------ */
.crumb{
  font-family:'Instrument Serif', Georgia, serif;
  font-style:italic;
  font-size:clamp(15px,1.35vw,19px);
  letter-spacing:.005em;
  text-transform:none;
  color:rgba(232,238,247,.62);
  display:flex;align-items:center;gap:.55em;flex-wrap:wrap;
  margin:0 0 18px;
}
.crumb a{
  color:rgba(255,255,255,.9);
  position:relative;
  padding-bottom:1px;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .35s var(--ease), color .25s ease;
}
.crumb a:hover{ color:#fff; background-size:100% 1px; }
.crumb .sep{
  font-style:normal;
  color:var(--red);
  opacity:.85;
  font-size:.8em;
  transform:translateY(-1px);
}
.crumb .here{ color:rgba(232,238,247,.55); }
/* breadcrumbs on a light background */
.crumb--dark{ color:rgba(18,20,26,.5); }
.crumb--dark a{ color:var(--ink); }
.crumb--dark .here{ color:rgba(18,20,26,.45); }

/* ---------- 3. reveal system -------------------------------------------- */
/* base: still works for any existing .rv markup */
[data-rv]{ opacity:0; will-change:transform,opacity; }
[data-rv].in{ opacity:1; }

[data-rv="up"]     { transform:translateY(26px); }
[data-rv="left"]   { transform:translateX(-38px); }
[data-rv="right"]  { transform:translateX(38px); }
[data-rv="zoom"]   { transform:scale(.94); }
[data-rv="tilt"]   { transform:translateY(28px) rotate(-1.2deg); }
[data-rv="up"].in, [data-rv="left"].in, [data-rv="right"].in,
[data-rv="zoom"].in, [data-rv="tilt"].in{ transform:none; }

[data-rv]{ transition:opacity .7s var(--ease-out), transform .8s var(--ease-out); }
[data-rv].in{ transition-delay: var(--d, 0ms); }

/* headline that wipes up from behind a mask — the signature move */
[data-rv="mask"]{ opacity:1; }
[data-rv="mask"] > span,
.mask-line{ display:block; overflow:hidden; }
.mask-line > *{
  display:block;
  transform:translateY(110%);
  transition:transform .9s var(--ease-out);
  transition-delay:var(--d,0ms);
}
[data-rv="mask"].in .mask-line > *{ transform:none; }

/* stagger children automatically: no per-element delay markup needed */
[data-stagger] > *{ opacity:0; transform:translateY(22px);
  transition:opacity .6s var(--ease-out), transform .7s var(--ease-out); }
[data-stagger].in > *{ opacity:1; transform:none; }
[data-stagger].in > *:nth-child(1){ transition-delay:0ms }
[data-stagger].in > *:nth-child(2){ transition-delay:70ms }
[data-stagger].in > *:nth-child(3){ transition-delay:140ms }
[data-stagger].in > *:nth-child(4){ transition-delay:210ms }
[data-stagger].in > *:nth-child(5){ transition-delay:280ms }
[data-stagger].in > *:nth-child(6){ transition-delay:350ms }
[data-stagger].in > *:nth-child(7){ transition-delay:420ms }
[data-stagger].in > *:nth-child(8){ transition-delay:490ms }
[data-stagger].in > *:nth-child(n+9){ transition-delay:560ms }

/* ---------- 4. section heading accent ----------------------------------- */
.sec-h .lab{ position:relative; }
.sec-h h2{ position:relative; display:block; width:fit-content; max-width:100%; }
.sec-h h2::after{
  content:"";position:absolute;left:0;bottom:-.14em;height:3px;width:100%;
  background:linear-gradient(90deg,var(--red),var(--orange));
  border-radius:3px;transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease-out) .15s;
}
.sec-h.in h2::after, .rv.in .sec-h h2::after{ transform:scaleX(1); }

/* ---------- 5. card behaviour ------------------------------------------- */
.pc, .card, .tcard, .pcard, .stop, .wk-card, .cbox{
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s ease;
}
.pc:hover, .cbox:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 44px -26px rgba(18,20,26,.34);
  border-color:rgba(224,27,36,.35);
}
/* numbered cards get a ghost numeral that slides in */
.pc{ position:relative; overflow:hidden; }
.pc::after{
  content:"";position:absolute;right:-30%;top:-40%;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,27,36,.10),transparent 70%);
  opacity:0;transition:opacity .45s ease, transform .6s var(--ease);
  transform:scale(.6);pointer-events:none;
}
.pc:hover::after{ opacity:1; transform:scale(1); }

/* ---------- 6. timeline draws itself ------------------------------------ */
.tl{ position:relative; }
.tl::before{
  content:"";position:absolute;left:-2px;top:0;width:2px;height:100%;
  background:linear-gradient(180deg,var(--red),var(--orange));
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.2s var(--ease-out);
}
.tl.in::before{ transform:scaleY(1); }
.tl-item::before{ transition:transform .5s var(--ease-out) var(--d,0ms), opacity .4s ease var(--d,0ms); transform:scale(0); }
.tl.in .tl-item::before{ transform:scale(1); }

/* ---------- 7. counters -------------------------------------------------- */
/* a counter sits inside <b>, but generic "span" rules in site.css would
   restyle it — force it to inherit from its parent instead */
[data-count]{
  font:inherit !important; color:inherit !important;
  letter-spacing:inherit !important; text-transform:none !important;
  display:inline !important; margin:0 !important;
}
.numbers div{ transition:background .3s ease; }
.numbers div:hover{ background:#FBFCFD; }

/* ---------- 8. hero flourish -------------------------------------------- */
.phero h1{ position:relative; }
.phero::before{
  content:"";position:absolute;left:-6%;top:-30%;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,27,36,.16),transparent 68%);
  pointer-events:none;animation:heroDrift 18s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  from{ transform:translate3d(0,0,0) scale(1) }
  to  { transform:translate3d(60px,40px,0) scale(1.15) }
}

/* ---------- 9. quiet down for people who ask ---------------------------- */
@media (prefers-reduced-motion: reduce){
  [data-rv], [data-stagger] > *, .mask-line > *{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  .sec-h h2::after, .tl::before{ transform:none !important; }
  .phero::before{ animation:none }
}