/* LINEA — motion layer (scroll + pointer interactions). Visual design untouched. */
:root{--m-ease:cubic-bezier(.16,1,.3,1);--grid-y:0px;--img-y:0px;--rx:0deg;--ry:0deg;--mx:50vw;--my:30vh;--spot:0}

/* ---------- 1. Intro on page load ---------- */
@keyframes m-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0}to{opacity:1}}
@keyframes m-wipe{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes m-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes m-corner{from{opacity:0;transform:scale(2.2)}to{opacity:1;transform:none}}
@keyframes m-logo{from{opacity:0;transform:translateY(-14px) scale(.94)}to{opacity:1;transform:none}}

html.m:not(.m-off) header>img{animation:m-logo 1s var(--m-ease) .05s both}
html.m:not(.m-off) header>div{animation:m-fade .9s ease .35s both}
html.m:not(.m-off) main>div:first-child>div:first-child{animation:m-up .8s var(--m-ease) .25s both}
html.m:not(.m-off) main h1>span{animation:m-up 1s var(--m-ease) both}
html.m:not(.m-off) main h1>span:nth-child(1){animation-delay:.4s}
html.m:not(.m-off) main h1>span:nth-child(2){animation-delay:.55s}
html.m:not(.m-off) main>div:first-child>p{animation:m-up .9s var(--m-ease) .72s both}
html.m:not(.m-off) main figure .bracket-frame{animation:m-wipe 1.3s var(--m-ease) .45s both}
html.m:not(.m-off) main figcaption{animation:m-fade .8s ease 1.2s both}
html.m:not(.m-off) div[aria-hidden]>span{animation:m-corner 1s var(--m-ease) .2s both}

/* ---------- 2. Reveal on scroll (JS adds data-in) ---------- */
html.m:not(.m-off) main section,
html.m:not(.m-off) main section>p,
html.m:not(.m-off) main section li,
html.m:not(.m-off) footer>div:first-child>div,
html.m:not(.m-off) footer dl>div,
html.m:not(.m-off) footer>div:last-child{
  transition:opacity .9s var(--m-ease),transform .9s var(--m-ease),border-color 1.2s ease;
}
html.m:not(.m-off) main section:not([data-in]){border-top-color:transparent}
html.m:not(.m-off) main section>p:not([data-in]),
html.m:not(.m-off) main section li:not([data-in]),
html.m:not(.m-off) footer>div:first-child>div:not([data-in]),
html.m:not(.m-off) footer dl>div:not([data-in]),
html.m:not(.m-off) footer>div:last-child:not([data-in]){opacity:0;transform:translateY(34px)}

/* staggering */
html.m main section li:nth-child(2){transition-delay:.12s}
html.m main section li:nth-child(3){transition-delay:.24s}
html.m footer>div:first-child>div:nth-child(2){transition-delay:.12s}
html.m footer>div:first-child>div:nth-child(3){transition-delay:.24s}
html.m footer dl>div:nth-child(2){transition-delay:.18s}
html.m footer dl>div:nth-child(3){transition-delay:.26s}
html.m footer dl>div:nth-child(4){transition-delay:.34s}
html.m footer dl>div:nth-child(5){transition-delay:.42s}

/* teal rule under each service number draws in */
html.m:not(.m-off) main section li .rule-teal{transform-origin:right;transform:scaleX(0);transition:transform 1s var(--m-ease) .35s,width .5s var(--m-ease)}
[dir=ltr] main section li .rule-teal{transform-origin:left}
html.m:not(.m-off) main section li[data-in] .rule-teal{transform:scaleX(1)}

/* the footer divider sweeps across */
html.m:not(.m-off) footer{border-top-color:transparent;position:relative}
html.m:not(.m-off) footer::before{content:"";position:absolute;top:-1px;inset-inline:0;height:1px;background:linear-gradient(to left,var(--primary),var(--border) 40%);transform:scaleX(0);transform-origin:right;transition:transform 1.4s var(--m-ease)}
[dir=ltr] footer::before{transform-origin:left !important;background:linear-gradient(to right,var(--primary),var(--border) 40%) !important}
html.m:not(.m-off) footer[data-in]::before{transform:scaleX(1)}

/* QR pops in */
html.m:not(.m-off) footer img{transition:transform 1s var(--m-ease) .3s,opacity 1s ease .3s}
html.m:not(.m-off) footer>div:first-child>div:not([data-in]) img{transform:scale(.8) rotate(-4deg);opacity:0}

/* ---------- 3. Scroll-linked motion ---------- */
.sheet-grid{top:-40vh !important;bottom:-40vh !important;transform:translate3d(0,var(--grid-y),0);will-change:transform}
main figure .bracket-frame{transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--m-ease);will-change:transform}
main figure .bracket-frame>img{transform:translate3d(0,var(--img-y),0) scale(1.14);will-change:transform}
main figure .bracket-frame>div{transform:translate3d(0,calc(var(--img-y) * -.6),0) scale(1.2)}

/* pointer spotlight on the drafting grid (desktop) */
@media (hover:hover) and (pointer:fine){
  body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:var(--spot);transition:opacity .6s ease;
    background:radial-gradient(420px circle at var(--mx) var(--my),oklch(63.35% .108 195.57/.10),transparent 70%)}
}

/* ---------- 4. Hover micro-interactions ---------- */
main section li{transition:transform .5s var(--m-ease)}
@media (hover:hover){
  html.m main section li[data-in]:hover{transform:translateY(-6px)}
  main section li:hover .rule-teal{width:3.5rem}
  footer dl>div a{display:inline-block;transition:transform .35s var(--m-ease)}
  footer dl>div:hover a{transform:translateX(-5px)}
  [dir=ltr] footer dl>div:hover a{transform:translateX(5px)}
  footer a[download]{transition:background-color .25s,color .25s,transform .35s var(--m-ease),box-shadow .35s}
  footer a[download]:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px var(--primary)}
  header>img{transition:transform .6s var(--m-ease)}
  header>img:hover{transform:rotate(-4deg) scale(1.03)}
}

/* ---------- 5. Language switch transition ---------- */
@keyframes m-swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.m-swap main>div:first-child,html.m-swap footer>div:first-child,html.m-swap figcaption{animation:m-swap .6s var(--m-ease) both}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .sheet-grid,main figure .bracket-frame,main figure .bracket-frame>img,main figure .bracket-frame>div{transform:none !important}
}

/* figure below the fold (mobile): wait until scrolled into view */
html.m main figure[data-wait] .bracket-frame,html.m main figure[data-wait] figcaption{animation-play-state:paused}

/* ---------- 6. Requested tweaks ---------- */
/* remove the top ruler ticks */
div[aria-hidden]>div.absolute.inset-x-6{display:none !important}

/* Arabic typography: solid, clear Cairo instead of thin fallback / mono */
[dir=rtl] body{font-family:Cairo,"IBM Plex Sans Arabic",sans-serif;font-weight:500}
[dir=rtl] main p,[dir=rtl] footer p{font-family:Cairo,sans-serif}
[dir=rtl] .font-mono:not(.latin-only){font-family:Cairo,sans-serif}
[dir=rtl] .font-mono [dir=ltr],[dir=rtl] footer>div:last-child>span:last-child,[dir=rtl] figcaption>span:last-child{font-family:"JetBrains Mono",monospace;letter-spacing:.06em !important}
[dir=rtl] .font-mono:not(.latin-only){letter-spacing:0 !important}
[dir=rtl] dt.font-mono,
[dir=rtl] main section>p.font-mono,
[dir=rtl] footer p.font-mono,
[dir=rtl] figcaption>span:first-child,
[dir=rtl] footer a[download]{font-size:13px;font-weight:600}
[dir=rtl] main section li p,[dir=rtl] main>div:first-child>p{font-weight:500}
[dir=rtl] main section li p{font-size:14px}
[dir=rtl] footer>div:last-child>span:first-child{font-size:12.5px;font-weight:500}