/* ObliqueTech page motion for About and Contact: animated hero, staggered reveals, card spotlight. Same motion language as the Services pages. */
.ot-pg__hero{--mx:0;--my:0;isolation:isolate}
.ot-pm-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.ot-pm-lines{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 25%,#000,transparent);mask-image:radial-gradient(ellipse 85% 75% at 50% 25%,#000,transparent);translate:calc(var(--mx) * -10px) calc(var(--my) * -8px);transition:translate .5s ease-out;animation:ot-pm-grid 44s linear infinite}
@keyframes ot-pm-grid{to{background-position:56px 56px,56px 56px}}
.ot-pm-orb{position:absolute;border-radius:50%;filter:blur(72px);transition:translate .7s ease-out}
.ot-pm-orb--1{top:-12rem;left:6%;width:30rem;height:30rem;background:rgba(255,255,255,.07);translate:calc(var(--mx) * 28px) calc(var(--my) * 20px);animation:ot-pm-drift 18s ease-in-out infinite alternate}
.ot-pm-orb--2{top:8%;right:-6rem;width:26rem;height:26rem;background:rgba(41,151,255,.1);translate:calc(var(--mx) * -34px) calc(var(--my) * -22px);animation:ot-pm-drift 23s ease-in-out -7s infinite alternate-reverse}
@keyframes ot-pm-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(48px,34px,0) scale(1.18)}}
.ot-pm-scan{position:absolute;left:0;right:0;top:-160px;height:160px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.045),transparent);animation:ot-pm-scan 10s linear infinite}
@keyframes ot-pm-scan{to{top:100%}}
.ot-pm-beam{position:absolute;left:-30%;width:28%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);animation:ot-pm-beam 8s linear infinite}
.ot-pm-beam--1{top:24%}
.ot-pm-beam--2{top:52%;animation-duration:11s;animation-delay:-4s}
.ot-pm-beam--3{top:76%;animation-duration:9.5s;animation-delay:-7s}
@keyframes ot-pm-beam{to{left:110%}}

/* Hero content enters in sequence */
.ot-pg__hero .ot-pg__wrap>*{opacity:0;transform:translateY(14px);animation:ot-pm-in .7s cubic-bezier(.2,.7,.2,1) forwards}
.ot-pg__hero .ot-pg__wrap>:nth-child(2){animation-delay:.08s}
.ot-pg__hero .ot-pg__wrap>:nth-child(3){animation-delay:.2s}
.ot-pg__hero .ot-pg__wrap>:nth-child(4){animation-delay:.3s}
.ot-pg__hero .ot-pg__wrap>:nth-child(5){animation-delay:.4s}
@keyframes ot-pm-in{to{opacity:1;transform:none}}
.ot-pg__hero .ot-pg__wrap>h1{opacity:1;transform:none;animation:none}
html.js .ot-pg__hero h1:not(.ot-pm-words){visibility:hidden;animation:ot-pm-vis 0s 1.2s forwards}
@keyframes ot-pm-vis{to{visibility:visible}}
.ot-pm-words .ot-pm-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.ot-pm-words .ot-pm-w>span{display:inline-block;transform:translateY(112%);animation:ot-pm-up .85s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 55ms + .1s)}
@keyframes ot-pm-up{to{transform:none}}
.ot-pg__strip span{opacity:0;animation:ot-pm-in .6s ease forwards .55s}
.ot-pg__strip span:nth-child(2){animation-delay:.7s}
.ot-pg__strip span:nth-child(3){animation-delay:.85s}
.ot-metrics strong{font-variant-numeric:tabular-nums}

/* Reading progress */
.ot-pm-progress{position:fixed;top:0;left:0;right:0;z-index:70;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.2),#fff);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* Scroll reveals */
.ot-pm-anim .ot-pm-rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.ot-pm-anim .ot-pm-rv.is-in{opacity:1;transform:none}

/* Card spotlight */
.ot-pg .ot-card{position:relative}
.ot-pg .ot-card::before{content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;background:radial-gradient(260px circle at var(--x,50%) var(--y,0%),rgba(255,255,255,.07),transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none}
.ot-pg .ot-card:hover::before{opacity:1}
.ot-pg .ot-card>*{position:relative;z-index:1}

@media(max-width:699px){.ot-pm-beam{display:none}}
@media(prefers-reduced-motion:reduce){.ot-pg__hero .ot-pg__wrap>*,.ot-pg__strip span{opacity:1;transform:none}html.js .ot-pg__hero h1{visibility:visible!important}.ot-pm-beam,.ot-pm-scan{display:none}.ot-pm-anim .ot-pm-rv{opacity:1;transform:none}}