/* Trident site motion: styles for assets/motion.js. Everything sits behind no-preference, so a
   reduce-motion setting gets the plain page; most rules also need a class the script adds. */
@media (prefers-reduced-motion: no-preference) {

/* hero: photo hidden until the shingles finish (class set in <head>, cleared by motion.js or a timeout) */
.tm-intro .hero .bg{opacity:0;animation-play-state:paused}
.tm-shingles{position:absolute;inset:-4%;z-index:-3;pointer-events:none;perspective:900px;overflow:hidden}
.tm-shingles i{position:absolute;display:block;background-repeat:no-repeat;transform-origin:50% 0;backface-visibility:hidden;box-shadow:inset 0 -3px 0 rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.12)}
.tm-ridge{position:absolute;left:0;right:0;top:0;height:2px;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,#E2B94A 18%,#F6DA8A 50%,#E2B94A 82%,transparent);box-shadow:0 0 18px rgba(226,185,74,.75)}

/* the hero's gold scan line: same sweep, moved with transform so it never counts as layout shift */
.tm-hero .hero .scan{top:0;animation-name:tmScan}
@keyframes tmScan{0%{transform:translateY(-4svh);opacity:0}8%{opacity:1}60%{opacity:1}75%{transform:translateY(100svh);opacity:0}100%{transform:translateY(100svh);opacity:0}}
/* hero copy and form come in around it (pure CSS, so it still plays if the script is slow) */
.tm-hero .hero .eyebrow{animation:tmUp .7s .15s both}
.tm-hero .hero .lede{animation:tmUp .8s .75s both}
.tm-hero .hero .stat li{animation:tmUp .6s both}
.tm-hero .hero .stat li:nth-child(1){animation-delay:.95s}
.tm-hero .hero .stat li:nth-child(2){animation-delay:1.05s}
.tm-hero .hero .stat li:nth-child(3){animation-delay:1.15s}
.tm-hero .hero .proof li{animation:tmUp .6s both}
.tm-hero .hero .proof li:nth-child(1){animation-delay:1.2s}
.tm-hero .hero .proof li:nth-child(2){animation-delay:1.3s}
.tm-hero .hero .proof li:nth-child(3){animation-delay:1.4s}
.tm-hero .hero .hero-phone{animation:tmUp .6s 1.55s both}
.tm-hero .funnel::before{animation:tmLine 1.3s .35s cubic-bezier(.3,.7,.2,1) both}
.tm-hero .funnel .cn.tl{animation:tmSnapTL .7s 1.1s cubic-bezier(.2,.9,.3,1.25) both}
.tm-hero .funnel .cn.br{animation:tmSnapBR .7s 1.1s cubic-bezier(.2,.9,.3,1.25) both}
.tm-hero .hero h1:not(.tm-split){opacity:0;animation:tmShow 0s 1.6s forwards}
@keyframes tmUp{from{opacity:0;transform:translateY(16px)}}
@keyframes tmLine{from{transform:scaleX(0)}}
@keyframes tmSnapTL{from{opacity:0;transform:translate(-12px,-12px)}}
@keyframes tmSnapBR{from{opacity:0;transform:translate(12px,12px)}}
@keyframes tmShow{to{opacity:1}}

/* headlines: each word rises out of its own line box */
.tm-split .tm-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.tm-split .tm-wi{display:inline-block;transform:translateY(110%);transition:transform .95s cubic-bezier(.2,.75,.15,1);transition-delay:calc(var(--tm-d,0ms) + var(--i,0) * 55ms)}
.tm-split.tm-in .tm-wi{transform:none}

/* "How it works": each step's rule draws in turn, then its dot lights */
.tm-steps li::after{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,#E2B94A,#F6DA8A);box-shadow:0 0 10px rgba(226,185,74,.6);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.3,.7,.2,1) calc(var(--i,0) * .35s)}
.tm-steps.tm-drawn li::after{transform:scaleX(1)}
.tm-steps li::before{transition:background .3s,border-color .3s,box-shadow .3s;transition-delay:calc(var(--i,0) * .35s + .55s)}
.tm-steps.tm-drawn li::before{background:#E2B94A;border-color:#E2B94A;box-shadow:0 0 12px rgba(226,185,74,.6)}

/* appraisal panel: the seats take their places, then the line ties them together */
.tm-tri::before{transform:scaleX(0);transition:transform 1.1s cubic-bezier(.3,.7,.2,1) .35s}
.tm-tri.tm-drawn::before{transform:scaleX(1)}
.tm-tri .dot{opacity:0;transform:scale(.6);transition:opacity .4s,transform .6s cubic-bezier(.2,.9,.3,1.3)}
.tm-tri > div:nth-child(3) .dot{transition-delay:.15s}
.tm-tri .ump .dot{transition-delay:1s}
.tm-tri.tm-drawn .dot{opacity:1;transform:none}

/* ladders: the gold spine grows with the scroll; rungs light as it reaches them */
.tm-ladder::before{transform-origin:top;transform:scaleY(var(--tm-fill,0));transition:transform .12s linear}
.tm-ladder li .n{transition:background .35s,color .35s,border-color .35s,box-shadow .35s}
.tm-on .tm-ladder li:not(.tm-lit) .n{color:#5D6B7E;border-color:rgba(255,255,255,.16);background:#070B12;box-shadow:none}
.tm-on .tm-ladder li.tm-lit:not(.end) .n{box-shadow:0 0 0 4px rgba(226,185,74,.12),0 0 16px rgba(226,185,74,.35)}

/* photos roll in like underlayment off the roll (also keeps the page's own reveal + hover moves) */
.tm-wipe{clip-path:inset(0 100% 0 0)}
.tm-on .tm-wipe{transition:clip-path 1.15s cubic-bezier(.65,.05,.25,1) calc(var(--i,0) * 90ms),transform 1s cubic-bezier(.2,.7,.2,1),opacity .7s}
.tm-wipe.tm-in{clip-path:inset(0 0 0 0)}
.tm-wipe.tm-done{clip-path:none}

/* roof layers pinned while you scroll */
.tm-hint{display:none}
.layers.tm-scrub .lay{position:sticky;top:calc(var(--head) + 10px)}
.layers.tm-scrub .iso-wrap{position:relative;top:auto}
.layers.tm-scrub .iso-n{white-space:nowrap}
.layers.tm-scrub #iso{max-height:calc(100svh - var(--head) - 190px)}
.layers.tm-scrub .lay-panel img,.layers.tm-scrub .lay-panel .need{aspect-ratio:16/8}
.layers.tm-scrub .lay-nav{display:none}
.layers.tm-scrub.tm-tight .lay-body .more{display:none}
.layers.tm-scrub.tm-tight .lay-panel img,.layers.tm-scrub.tm-tight .lay-panel .need{aspect-ratio:16/6.5}
.layers.tm-scrub .lay-panel > *{animation:tmFade .4s both}
.layers.tm-scrub .tm-hint{display:flex;align-items:center;gap:8px;position:absolute;left:18px;bottom:30px;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);transition:opacity .4s;pointer-events:none}
.layers.tm-scrub .tm-hint::after{content:"\2193";font-size:14px;animation:tmBob 1.4s ease-in-out infinite}
.layers.tm-scrub .tm-hint.tm-gone{opacity:0}
@keyframes tmFade{from{opacity:0;transform:translateY(8px)}}
@keyframes tmBob{50%{transform:translateY(4px)}}
@media (max-width:880px){
  .layers.tm-scrub .chips-lay{display:none}
  .layers.tm-scrub .lay{gap:10px}
  .layers.tm-scrub #iso{max-height:30svh}
  .layers.tm-scrub .lay-panel{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:stretch}
  .layers.tm-scrub .lay-panel img,.layers.tm-scrub .lay-panel .need{aspect-ratio:auto;width:100%;height:100%;min-height:96px;border-bottom:0}
  .layers.tm-scrub .lay-panel .need span{display:none}
  .layers.tm-scrub .lay-panel .need b{font-size:12px}
  .layers.tm-scrub .lay-body{padding:12px 14px;gap:4px}
  .layers.tm-scrub .lay-body h3{font-size:19px}
  .layers.tm-scrub .lay-body .why{font-size:14.5px}
  .layers.tm-scrub .lay-body .more,.layers.tm-scrub .lay-body .k span + span{display:none}
  .layers.tm-scrub .tm-hint{left:12px;bottom:22px;font-size:10px}
}
}