/* IITECH interactive layer (preview v16-ix). Cursor reveal, scroll fades, parallax, hover lifts.
   Everything here is progressive: without JS the "before" photo shows with a static revealed ellipse. */

/* ---------- cursor reveal ---------- */
.ix-reveal{--ix-x:66%;--ix-y:46%;--ix-rx:300px;--ix-ry:220px;--ix-f:.55;--ix-op:1;--ix-py:0px;
  position:absolute;inset:0;overflow:hidden;contain:paint;background:#05080d}
.ix-reveal .ix-layer{position:absolute;inset:-4% 0;transform:translate3d(0,var(--ix-py),0) scale(1.03);will-change:transform}
.ix-reveal .ix-layer picture,.ix-reveal .ix-layer img,.ix-reveal .ix-layer video{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-media.ix-reveal img,.ix-reveal img,.ix-reveal video{object-fit:cover;object-position:var(--ix-pos,68% 50%);animation:none;transform:none}
.ix-reveal .ix-top{
  -webkit-mask-image:radial-gradient(var(--ix-rx) var(--ix-ry) at var(--ix-x) var(--ix-y),rgba(0,0,0,var(--ix-op)) 0,rgba(0,0,0,var(--ix-op)) calc((1 - var(--ix-f))*100%),transparent 100%);
          mask-image:radial-gradient(var(--ix-rx) var(--ix-ry) at var(--ix-x) var(--ix-y),rgba(0,0,0,var(--ix-op)) 0,rgba(0,0,0,var(--ix-op)) calc((1 - var(--ix-f))*100%),transparent 100%)}
.ix-reveal.ix-invert .ix-top{
  -webkit-mask-image:radial-gradient(var(--ix-rx) var(--ix-ry) at var(--ix-x) var(--ix-y),transparent 0,transparent calc((1 - var(--ix-f))*100%),rgba(0,0,0,var(--ix-op)) 100%);
          mask-image:radial-gradient(var(--ix-rx) var(--ix-ry) at var(--ix-x) var(--ix-y),transparent 0,transparent calc((1 - var(--ix-f))*100%),rgba(0,0,0,var(--ix-op)) 100%)}
.ix-reveal video{opacity:0;transition:opacity .8s ease}
.ix-reveal video.is-playing{opacity:1}
/* soft ring that hints where the reveal is (decorative) */
.ix-reveal .ix-ring{position:absolute;left:var(--ix-x);top:var(--ix-y);width:calc(var(--ix-rx)*2*(1 - var(--ix-f)*.55));height:calc(var(--ix-ry)*2*(1 - var(--ix-f)*.55));
  transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(32,213,196,.22);box-shadow:0 0 60px rgba(32,213,196,.12) inset;pointer-events:none;opacity:.0;transition:opacity .6s ease}
.ix-reveal.is-live .ix-ring{opacity:1}

/* homepage hero: the reveal sits where .hero-media was */
.hero .hero-media.ix-reveal{z-index:-2}
.hero.ix-hero{touch-action:pan-y}
.hero .ix-reveal{--ix-pos:44% 50%}
/* lighter scrim on the photo side so the revealed rack reads; copy side keeps the original contrast */
.hero.ix-hero::before{background:linear-gradient(90deg,rgba(4,11,22,.94) 0%,rgba(4,11,22,.82) 34%,rgba(4,11,22,.28) 60%,rgba(4,11,22,.12) 100%),linear-gradient(0deg,rgba(4,11,22,1) 0%,rgba(4,11,22,0) 34%)}
@media (max-width:767px){.hero .ix-reveal{--ix-pos:68% 30%}
  .hero.ix-hero::before{background:linear-gradient(180deg,rgba(4,11,22,.22) 0%,rgba(4,11,22,.62) 40%,rgba(4,11,22,.96) 100%)}}

/* SI page: before/after stage under the hero */
.ix-si-stage{padding:0 0 clamp(48px,7vw,96px)}
.ix-si-frame{position:relative;width:min(1180px,100% - 2.5rem);margin-inline:auto;aspect-ratio:16/9;border-radius:clamp(18px,2.4vw,28px);overflow:hidden;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 80px -30px rgba(124,58,237,.45),0 0 0 1px rgba(255,212,0,.06);touch-action:pan-y;isolation:isolate}
.ix-si-frame .ix-reveal{--ix-pos:50% 50%;--ix-x:58%;--ix-y:50%}
.ix-si-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.35));z-index:1}
.ix-si-frame .ix-ring{border-color:rgba(255,212,0,.28);box-shadow:0 0 60px rgba(124,58,237,.18) inset}
.ix-hint{position:absolute;right:clamp(12px,2vw,22px);bottom:clamp(12px,2vw,22px);z-index:2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(10,10,14,.55);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;pointer-events:none;transition:opacity .5s}
.ix-hint svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ix-si-frame.is-touched .ix-hint{opacity:0}
@media (max-width:640px){.ix-si-frame{aspect-ratio:4/3}.ix-si-frame .ix-reveal{--ix-pos:56% 50%}}

/* ---------- scroll fades for elements that were not already tagged ---------- */
.ix-on .ix-fade{opacity:0;transform:translate3d(0,22px,0);transition:opacity .8s var(--ease,cubic-bezier(.2,.7,.2,1)),transform .8s var(--ease,cubic-bezier(.2,.7,.2,1));transition-delay:var(--ixd,0s)}
.ix-on .ix-fade.is-in{opacity:1;transform:none}

/* ---------- hover lifts + gentle tilt (pointer devices only; uses individual transform properties so it
   composes with the existing [data-reveal] and :hover transforms instead of replacing them) ---------- */
@media (hover:hover) and (pointer:fine){
  .ix-persp{perspective:1100px}
  .ix-lift{rotate:var(--ix-rv,0 0 1 0deg);translate:0 var(--ix-ly,0px)}
  .ix-lift:not(.svc-card):not(.tile):not(.contact-card):not([data-reveal]):not(.ix-fade){transition:translate .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1)}
  .ix-lift:not(.svc-card):not(.tile):not(.contact-card):hover{--ix-ly:-5px;box-shadow:0 18px 50px -18px rgba(32,213,196,.35),0 0 0 1px rgba(32,213,196,.28)}
  .page-si .ix-lift:not(.svc-card):not(.tile):not(.contact-card):hover{box-shadow:0 18px 50px -18px rgba(124,58,237,.45),0 0 0 1px rgba(255,212,0,.22)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .ix-reveal .ix-layer{transform:none;will-change:auto}
  .ix-reveal video{display:none}
  .ix-on .ix-fade{opacity:1;transform:none;transition:none}
  .ix-lift,.ix-lift:hover{rotate:none;translate:none}
}
@media print{.ix-reveal .ix-top,.ix-hint,.ix-ring{display:none}}

/* "Day & night" stat (replaces the old round-the-clock counter); smaller so longer translations fit the stat grid */
.stat-dn{display:inline-block;font-size:.6em;line-height:1.08;letter-spacing:-.02em;max-width:100%;overflow-wrap:anywhere}