/* ============ HEADING MOTIFS — each section heading carries a hidden program motif ============
   courses=AutoCAD crosshair · about=Revit level datum · works=V-Ray render buckets
   reviews=Photoshop marching-ants · faq=Pen-tool bezier · inquiry=3ds Max gizmo
   Driven by `.is-in` (added by app.js IntersectionObserver to each [data-reveal]).
   Motifs sit at z-index:-1 behind the text — readable decor with insider meaning. */

.courses h2,.about h2,.works h2,.reviews h2,.faq h2,.inquiry h2{position:relative}
.hx{position:absolute;pointer-events:none;z-index:-1}
@media (prefers-reduced-motion:reduce){.hx,.hx *{animation:none!important;transition:none!important}}

/* ---------- 1 · #courses — AutoCAD crosshair + pickbox + polar ticks ---------- */
.hx--ac{inset:-22% -6% -30% -6%}
.hx--ac .ac-h,.hx--ac .ac-v{position:absolute;background:linear-gradient(90deg,transparent,rgba(224,164,49,.5),transparent)}
.hx--ac .ac-h{left:0;right:0;top:62%;height:1px;transform:scaleX(0);transform-origin:62% 50%;
  transition:transform 1s cubic-bezier(.16,1,.3,1)}
.hx--ac .ac-v{top:0;bottom:0;left:62%;width:1px;transform:scaleY(0);transform-origin:50% 62%;
  background:linear-gradient(180deg,transparent,rgba(224,164,49,.5),transparent);
  transition:transform 1s .08s cubic-bezier(.16,1,.3,1)}
.hx--ac .ac-box{position:absolute;left:62%;top:62%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border:1.5px solid rgba(224,164,49,.85);box-shadow:0 0 12px rgba(224,164,49,.4);
  opacity:0;transform:scale(2.2) rotate(8deg);transition:opacity .35s .5s ease,transform .5s .5s cubic-bezier(.2,1.5,.4,1)}
.hx--ac .ac-polar{position:absolute;left:62%;top:62%;width:120px;height:120px;margin:-60px 0 0 -60px;
  opacity:0;transition:opacity .6s .55s ease}
.hx--ac .ac-polar line{stroke:rgba(224,164,49,.45);stroke-width:1;stroke-dasharray:2 4}
.courses h2.is-in .hx--ac .ac-h{transform:scaleX(1)}
.courses h2.is-in .hx--ac .ac-v{transform:scaleY(1)}
.courses h2.is-in .hx--ac .ac-box{opacity:1;transform:scale(1) rotate(0)}
.courses h2.is-in .hx--ac .ac-polar{opacity:1}
/* command-line whisper under the heading */
.courses__head .cmdline{display:block;margin-top:14px;font:600 11.5px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.04em;color:rgba(127,227,218,.65)}
.courses__head .cmdline b{color:var(--gold);font-weight:700}
.courses__head .cmdline .cur{display:inline-block;width:7px;height:1.05em;vertical-align:-2px;
  background:var(--gold);margin-left:3px;animation:hx-blink 1.05s steps(1) infinite}
@keyframes hx-blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* ---------- 2 · #about — Revit level datum lines + counting bubble ---------- */
.hx--revit{inset:-30% -4% -34% -4%}
.hx--revit .rv-line{position:absolute;left:0;right:14%;height:1px;background:rgba(224,164,49,.32);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.hx--revit .rv-line:nth-child(1){top:14%}
.hx--revit .rv-line:nth-child(2){top:88%;transition-delay:.12s}
.hx--revit .rv-bub{position:absolute;top:14%;right:14%;width:38px;height:24px;margin:-12px -38px 0 0;
  display:flex;align-items:center;justify-content:center;border-radius:13px;
  border:1px solid rgba(224,164,49,.6);background:rgba(8,12,20,.7);
  font:800 11px/1 'Unbounded',sans-serif;color:#f2d79a;
  opacity:0;transform:translateX(-12px);transition:opacity .4s .7s ease,transform .5s .7s cubic-bezier(.16,1,.3,1)}
.hx--revit .rv-bub::before{content:"";position:absolute;left:-7px;top:50%;width:7px;height:1px;background:rgba(224,164,49,.6)}
.about h2.is-in .hx--revit .rv-line{transform:scaleX(1)}
.about h2.is-in .hx--revit .rv-bub{opacity:1;transform:translateX(0)}

/* ---------- 3 · #works — V-Ray render buckets sweeping noise→clean ---------- */
.hx--vray{inset:6% -2% -18% -2%;overflow:hidden}
.hx--vray .vr-buckets{position:absolute;left:0;top:64%;width:100%;height:30px;margin-top:-15px}
.hx--vray .vr-b{position:absolute;top:0;width:22px;height:14px;border:1px solid rgba(224,164,49,.8);
  box-shadow:inset 0 0 8px rgba(224,164,49,.25),0 0 10px rgba(224,164,49,.3);
  opacity:0;animation:none}
.works h2.is-in .hx--vray .vr-b{animation:hx-bucket 1.5s cubic-bezier(.5,0,.5,1) forwards}
.works h2.is-in .hx--vray .vr-b:nth-child(1){animation-delay:.05s;top:2px}
.works h2.is-in .hx--vray .vr-b:nth-child(2){animation-delay:.18s;top:-6px}
.works h2.is-in .hx--vray .vr-b:nth-child(3){animation-delay:.31s;top:8px}
.works h2.is-in .hx--vray .vr-b:nth-child(4){animation-delay:.44s;top:0}
@keyframes hx-bucket{0%{opacity:0;left:-4%}10%{opacity:1}90%{opacity:1}100%{opacity:0;left:104%}}
/* gold "rendered" sweep wash that the buckets reveal */
.hx--vray .vr-wash{position:absolute;left:0;right:0;top:60%;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(224,164,49,.55),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform 1.5s cubic-bezier(.4,0,.2,1)}
.works h2.is-in .hx--vray .vr-wash{transform:scaleX(1)}

/* ---------- 4 · #reviews — Photoshop marching-ants selection marquee ---------- */
.hx--ps{inset:-26% -5%;width:auto;height:auto}
.hx--ps rect{fill:none;stroke:rgba(224,164,49,.75);stroke-width:1.4;stroke-dasharray:5 4;
  stroke-dashoffset:0;rx:6}
.reviews h2.is-in .hx--ps rect{animation:hx-ants 22s linear infinite}
@keyframes hx-ants{to{stroke-dashoffset:-180}}
.hx--ps .ps-corner{fill:rgba(224,164,49,.9)}
.hx--ps{opacity:0;transform:scale(1.04);transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.reviews h2.is-in .hx--ps{opacity:1;transform:scale(1)}

/* ---------- 5 · #faq — Pen-tool bezier question-mark curve + nodes ---------- */
.hx--pen{inset:-40% -8% -40% auto;left:auto;right:-2%;width:90px}
.hx--pen .pen-path{fill:none;stroke:rgba(224,164,49,.7);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:160;stroke-dashoffset:160;transition:stroke-dashoffset 1.3s .1s cubic-bezier(.6,0,.3,1)}
.faq h2.is-in .hx--pen .pen-path{stroke-dashoffset:0}
.hx--pen .pen-node{fill:#0b0f17;stroke:rgba(224,164,49,.95);stroke-width:1.4;
  opacity:0;transform:scale(.2);transform-box:fill-box;transform-origin:center;
  transition:opacity .3s ease,transform .4s cubic-bezier(.2,1.6,.4,1)}
.faq h2.is-in .hx--pen .pen-node{opacity:1;transform:scale(1)}
.faq h2.is-in .hx--pen .pen-node:nth-of-type(2){transition-delay:.6s}
.faq h2.is-in .hx--pen .pen-node:nth-of-type(3){transition-delay:.85s}
.hx--pen .pen-handle{stroke:rgba(127,227,218,.5);stroke-width:1;stroke-dasharray:2 2;
  opacity:0;transition:opacity .4s .9s ease}
.faq h2.is-in .hx--pen .pen-handle{opacity:1}

/* ---------- 6 · #inquiry — 3ds Max transform gizmo (X/Y/Z) + wireframe plane ---------- */
.hx--max{inset:-44% auto -30% auto;left:auto;right:-4%;top:50%;width:140px;height:140px;margin-top:-70px}
.hx--max .gz-plane{stroke:rgba(127,227,218,.28);stroke-width:1;fill:none;
  opacity:0;transform-box:view-box;transform-origin:70px 70px;transform:rotateX(60deg) scale(.6);
  transition:opacity .6s ease,transform 1s cubic-bezier(.16,1,.3,1)}
.inquiry h2.is-in .hx--max .gz-plane{opacity:1;transform:rotateX(0) scale(1)}
.hx--max .gz-axis{stroke-width:2;stroke-linecap:round;
  stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .7s cubic-bezier(.16,1,.3,1)}
.hx--max .gz-x{stroke:#e2503b}.hx--max .gz-y{stroke:#3bbf57}.hx--max .gz-z{stroke:#3b7fe2}
.inquiry h2.is-in .hx--max .gz-x{stroke-dashoffset:0;transition-delay:.35s}
.inquiry h2.is-in .hx--max .gz-y{stroke-dashoffset:0;transition-delay:.5s}
.inquiry h2.is-in .hx--max .gz-z{stroke-dashoffset:0;transition-delay:.65s}
.hx--max .gz-tip{fill:currentColor;opacity:0;transition:opacity .3s .9s ease}
.inquiry h2.is-in .hx--max .gz-tip{opacity:1}
.hx--max .gz-c{fill:rgba(224,164,49,.9);opacity:0;transition:opacity .3s .25s ease}
.inquiry h2.is-in .hx--max .gz-c{opacity:1}

/* keep motifs from overflowing into neighbours on small screens */
@media (max-width:680px){
  .hx--pen,.hx--max{display:none}
  .hx--revit .rv-bub{right:2%}
}