/* TRIARCH / motion plus — lines that draw themselves, rolling numerals, photo reveals,
   a drafting cursor and page transitions. Everything runs only while html[data-motion="running"]
   (the site's own pause button and prefers-reduced-motion switch it off). */

/* ---------------------------------------------------------------- 1. drawn rules
   motion-plus.js paints each structural border as a gradient line (same colour and width)
   and grows it from left to right when it scrolls into view. */
.tri-draw{background-repeat:no-repeat;background-origin:border-box;background-clip:border-box;--tri-p:0;
  transition:background-size 1.15s cubic-bezier(.65,0,.35,1) var(--tri-delay,0ms)}
.tri-draw.tri-drawn,
html[data-motion="paused"] .tri-draw{--tri-p:1}
html[data-motion="paused"] .tri-draw{transition:none}

/* ---------------------------------------------------------------- 2. photo reveal + drawing grid */
.tri-photo{clip-path:inset(0)}
html[data-motion="running"] .tri-photo.tri-photo-ready:not(.tri-photo-in){clip-path:inset(100% 0 0 0)}
html[data-motion="running"] .tri-photo.tri-photo-in{transition:clip-path 1.25s cubic-bezier(.76,0,.24,1)}
html[data-motion="running"] .tri-photo.tri-photo-ready img{scale:1.14;transition:scale 1.9s cubic-bezier(.16,1,.3,1)}
html[data-motion="running"] .tri-photo.tri-photo-in img{scale:1}
html[data-motion="running"] .tri-photo.tri-photo-ready .door-lines i{transform:scaleY(0);transform-origin:50% 0;
  transition:transform 1.1s cubic-bezier(.65,0,.35,1)}
html[data-motion="running"] .tri-photo.tri-photo-in .door-lines i{transform:scaleY(1)}
html[data-motion="running"] .tri-photo.tri-photo-in .door-lines i:nth-child(1){transition-delay:.75s}
html[data-motion="running"] .tri-photo.tri-photo-in .door-lines i:nth-child(2){transition-delay:.87s}
html[data-motion="running"] .tri-photo.tri-photo-in .door-lines i:nth-child(3){transition-delay:.99s}
html[data-motion="running"] .tri-photo.tri-photo-in .door-lines i:nth-child(4){transition-delay:1.11s}

/* ---------------------------------------------------------------- 3. rolling numerals */
.tri-roll{display:inline-flex;vertical-align:top}
.tri-roll-d{display:inline-block;height:1em;line-height:1;overflow:hidden}
.tri-roll-s{display:block;transform:translateY(0);transition:transform 1.25s cubic-bezier(.16,1,.3,1) var(--tri-delay,0ms)}
.tri-roll-s span{display:block;height:1em;line-height:1}
.tri-roll.tri-rolled .tri-roll-s,
html[data-motion="paused"] .tri-roll .tri-roll-s{transform:translateY(calc(var(--tri-to) * -1em))}
html[data-motion="paused"] .tri-roll .tri-roll-s{transition:none}
.tri-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- 4. arrow squares */
.contact-action,.door-arrow{overflow:hidden}
html[data-motion="running"] .tri-square.tri-square-ready:not(.tri-square-in){clip-path:inset(100% 100% 0 0)}
html[data-motion="running"] .tri-square.tri-square-in{transition:clip-path .9s cubic-bezier(.76,0,.24,1),background .25s ease,color .25s ease,translate .35s cubic-bezier(.2,.7,.3,1)}
html[data-motion="running"] .tri-square.tri-square-ready .ui-arrow path{stroke-dasharray:1;stroke-dashoffset:1}
html[data-motion="running"] .tri-square.tri-square-in .ui-arrow path{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.65,0,.35,1) .55s}
html[data-motion="running"] .contact-action:hover .ui-arrow,
html[data-motion="running"] .reference-door:hover .door-arrow .ui-arrow,
html[data-motion="running"] .build-reference-door:hover .door-arrow .ui-arrow{animation:tri-arrow-loop .62s cubic-bezier(.65,0,.35,1)}
@keyframes tri-arrow-loop{0%{translate:0 0;opacity:1}44%{translate:70% -70%;opacity:0}45%{translate:-70% 70%;opacity:0}100%{translate:0 0;opacity:1}}

/* ---------------------------------------------------------------- 5. the plus */
html[data-motion="running"] .supervision-plus{display:inline-block;rotate:var(--tri-turn,0deg);will-change:rotate}
html[data-motion="running"] .supervision{overflow-x:clip}
html[data-motion="running"] .bridge-plus,
html[data-motion="running"] .art-cross{display:inline-block;animation:tri-plus-tick 7s cubic-bezier(.65,0,.35,1) infinite}
html[data-motion="running"] .art-cross{animation-delay:-3.5s}
@keyframes tri-plus-tick{0%,72%{rotate:0deg}86%,100%{rotate:90deg}}
html[data-motion="paused"] .bridge-plus,html[data-motion="paused"] .art-cross{animation-play-state:paused}

/* ---------------------------------------------------------------- 6. hero: the period lands, the mark assembles */
html[data-motion="running"] .hero h1 .orange{display:inline-block;transform-origin:50% 85%;
  animation:tri-dot-land .75s cubic-bezier(.34,1.56,.64,1) 1.15s both}
@keyframes tri-dot-land{from{transform:translateY(-.55em) scale(0)}to{transform:none}}
html[data-motion="running"] #living-mark .mark-band{
  animation-name:tri-band-in,tri-band-rhythm;animation-duration:1s,9s;
  animation-timing-function:cubic-bezier(.16,1,.3,1),cubic-bezier(.45,0,.2,1);
  animation-iteration-count:1,infinite;animation-fill-mode:both,none}
html[data-motion="running"] #living-mark .mark-band[data-band="0"]{animation-delay:.3s,-1.8s}
html[data-motion="running"] #living-mark .mark-band[data-band="1"]{animation-delay:.44s,-1s}
html[data-motion="running"] #living-mark .mark-band[data-band="2"]{animation-delay:.58s,-.2s}
@keyframes tri-band-in{from{transform:translateX(-46%);opacity:0}to{transform:none;opacity:1}}
html[data-motion="running"] .hero-baseline .ui-arrow-s{animation:tri-nudge 2.6s cubic-bezier(.45,0,.2,1) infinite}
@keyframes tri-nudge{0%,55%,100%{translate:0 0}75%{translate:0 4px}}

/* ---------------------------------------------------------------- 7. drafting cursor in the hero */
.tri-cursor{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .25s ease}
.tri-cursor.on{opacity:1}
.tri-cursor i{position:absolute;display:block;background:rgba(23,25,24,.16)}
.tri-cursor .h{left:0;right:0;top:0;height:1px;transform:translateY(var(--y,0px))}
.tri-cursor .v{top:0;bottom:0;left:0;width:1px;transform:translateX(var(--x,0px))}
.tri-cursor b{position:absolute;left:0;top:0;transform:translate(calc(var(--x,0px) + 12px),calc(var(--y,0px) + 10px));
  font:400 8px/1.4 Arial,Helvetica,sans-serif;letter-spacing:.1em;color:#5b605b;white-space:nowrap;font-variant-numeric:tabular-nums;
  background:rgba(242,240,233,.92);padding:3px 6px}
.tri-cursor b em{font-style:normal;color:#fb5607}
html[data-motion="paused"] .tri-cursor{display:none}

/* ---------------------------------------------------------------- 8. magnetic buttons */
.tri-magnet{translate:var(--tri-mx,0px) var(--tri-my,0px);transition:translate .35s cubic-bezier(.2,.7,.3,1),background .25s,color .25s}
html[data-motion="paused"] .tri-magnet{translate:0 0}

/* ---------------------------------------------------------------- 9. calculator result ticks */
html[data-motion="running"] .tri-tick{animation:tri-tick .32s cubic-bezier(.16,1,.3,1)}
@keyframes tri-tick{from{opacity:.3;transform:translateY(.16em)}}
#calc-total,#calc-supervision-total{display:inline-block}

/* ---------------------------------------------------------------- 10. services open smoothly */
@supports selector(::details-content){
  html[data-motion="running"] .service{interpolate-size:allow-keywords}
  html[data-motion="running"] .service::details-content{height:0;overflow:clip;
    transition:height .55s cubic-bezier(.16,1,.3,1),content-visibility .55s allow-discrete}
  html[data-motion="running"] .service[open]::details-content{height:auto}
}
html[data-motion="running"] .service[open] .service-body > *{animation:tri-rise .7s cubic-bezier(.16,1,.3,1) both}
html[data-motion="running"] .service[open] .service-body > :nth-child(2){animation-delay:.08s}
html[data-motion="running"] .service[open] .service-body > :nth-child(3){animation-delay:.16s}
@keyframes tri-rise{from{opacity:0;transform:translateY(14px)}}

/* ---------------------------------------------------------------- 11. page transitions */
@view-transition{navigation:auto}
.site-header{view-transition-name:tri-header}
::view-transition-old(root){animation:tri-vt-out .3s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:tri-vt-in .6s cubic-bezier(.16,1,.3,1) both}
@keyframes tri-vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes tri-vt-in{from{opacity:0;transform:translateY(16px)}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .tri-draw{--tri-p:1!important;transition:none!important}
  .tri-roll .tri-roll-s{transform:translateY(calc(var(--tri-to) * -1em))!important;transition:none!important}
  .tri-cursor{display:none}
  .tri-magnet{translate:0 0!important}
}