/* Premium Developers — Cinematic Architectural Motion
   Lightweight: CSS + tiny JS, no animation framework. */
:root{
  --motion-gold:rgba(221,194,156,.74);
  --motion-green:rgba(29,89,69,.28);
  --motion-paper:rgba(247,243,237,.72);
}

/* Hero art direction */
.motion-hero{isolation:isolate}
.motion-hero>.wrap,
.motion-hero>.inner-hero-content,
.motion-hero>.hero-grid{position:relative;z-index:3}
.motion-hero img{will-change:transform}
.motion-hero.motion-live>img,
.motion-hero.motion-live>.hero-media img,
.motion-hero.motion-live>.hero-media picture>img,
.motion-hero.motion-live>picture>img{
  transform:translate3d(var(--motion-x,0),var(--motion-y,0),0) scale(1.055);
  transition:transform .12s linear;
}
.motion-plan{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;color:var(--motion-gold);opacity:.62}
.motion-plan svg{width:100%;height:100%;display:block}
.motion-plan .trace{fill:none;stroke:currentColor;stroke-width:.72;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;pathLength:1;stroke-dasharray:1;stroke-dashoffset:1}
.motion-plan .trace.faint{opacity:.36;stroke-width:.52}
.motion-plan .node{fill:var(--sand-2);opacity:0;transform-box:fill-box;transform-origin:center}
.motion-in .motion-plan .trace,.motion-plan.motion-in .trace{animation:motionTrace 2.2s var(--ease) forwards}
.motion-in .motion-plan .trace:nth-child(2),.motion-plan.motion-in .trace:nth-child(2){animation-delay:.22s}
.motion-in .motion-plan .trace:nth-child(3),.motion-plan.motion-in .trace:nth-child(3){animation-delay:.44s}
.motion-in .motion-plan .node,.motion-plan.motion-in .node{animation:motionNode .65s 1.35s var(--ease) forwards}
.motion-glow{position:absolute;z-index:1;width:38vw;height:38vw;max-width:620px;max-height:620px;border-radius:50%;left:calc(var(--glow-x,70%) - 19vw);top:calc(var(--glow-y,30%) - 19vw);pointer-events:none;background:radial-gradient(circle,rgba(221,194,156,.15),rgba(198,155,98,.05) 38%,transparent 70%);filter:blur(5px);mix-blend-mode:screen;opacity:.7;transition:opacity .3s}
.motion-hero:not(:hover) .motion-glow{opacity:.38}

/* Architectural section ornaments */
.motion-art-host{position:relative;isolation:isolate;overflow:hidden}
.motion-art-host>.wrap,.motion-art-host>.narrow,.motion-art-host>.editorial-grid,.motion-art-host>.plan-grid{position:relative;z-index:2}
.motion-orbit{position:absolute;z-index:0;right:-150px;top:8%;width:520px;height:520px;border:1px solid rgba(198,155,98,.14);border-radius:50%;pointer-events:none}
.motion-orbit:before,.motion-orbit:after{content:"";position:absolute;border:1px solid rgba(198,155,98,.1);border-radius:50%;inset:54px}
.motion-orbit:after{inset:118px}
.section.dark .motion-orbit,.flagship .motion-orbit{border-color:rgba(221,194,156,.12)}
.section.dark .motion-orbit:before,.section.dark .motion-orbit:after,.flagship .motion-orbit:before,.flagship .motion-orbit:after{border-color:rgba(221,194,156,.08)}
.motion-gridmark{position:absolute;left:-8vw;bottom:-110px;width:440px;height:360px;z-index:0;pointer-events:none;opacity:.25;background-image:linear-gradient(rgba(29,89,69,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(29,89,69,.16) 1px,transparent 1px);background-size:42px 42px;transform:rotate(-8deg);mask-image:linear-gradient(135deg,#000,transparent 72%)}
.section.dark .motion-gridmark,.flagship .motion-gridmark{background-image:linear-gradient(rgba(221,194,156,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(221,194,156,.13) 1px,transparent 1px)}

/* Headings get a drawn bronze datum line */
.motion-heading{position:relative;padding-bottom:18px}
.motion-heading:after{content:"";position:absolute;left:0;bottom:0;height:1px;width:min(210px,42%);background:linear-gradient(90deg,var(--sand),rgba(198,155,98,0));transform:scaleX(0);transform-origin:left;transition:transform 1.15s .16s var(--ease)}
[dir="rtl"] .motion-heading:after{left:auto;right:0;transform-origin:right}
.motion-heading.motion-in:after,.motion-in .motion-heading:after{transform:scaleX(1)}
.motion-heading:before{content:"";position:absolute;bottom:-3px;left:min(205px,40%);width:7px;height:7px;border:1px solid var(--sand);border-radius:50%;opacity:0;transform:scale(.2);transition:.6s .9s var(--ease)}
[dir="rtl"] .motion-heading:before{left:auto;right:min(205px,40%)}
.motion-heading.motion-in:before,.motion-in .motion-heading:before{opacity:.8;transform:scale(1)}

/* Image reveal frame */
.motion-image-frame{position:relative;overflow:hidden}
.motion-image-frame:after{content:"";position:absolute;z-index:4;inset:0;background:linear-gradient(115deg,var(--pine),#164c3b 56%,var(--sand));transform:translateX(0);transition:transform 1.1s .08s var(--ease);pointer-events:none}
[dir="rtl"] .motion-image-frame:after{transform:translateX(0)}
.motion-image-frame.motion-in:after{transform:translateX(103%)}
[dir="rtl"] .motion-image-frame.motion-in:after{transform:translateX(-103%)}
.motion-image-frame img{transition:transform 1.15s var(--ease),filter 1s var(--ease);transform:scale(1.035);filter:saturate(.88) contrast(.96)}
.motion-image-frame.motion-in img{transform:scale(1);filter:saturate(1) contrast(1)}
.motion-parallax img{transform:translate3d(0,var(--parallax-y,0),0) scale(1.04);will-change:transform}

/* Cards: subtle architectural tilt, not gimmicky */
.motion-card{--rx:0deg;--ry:0deg;--lift:0px;--shine-x:50%;position:relative;transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));transform-style:preserve-3d;transition:transform .22s ease,box-shadow .3s ease,border-color .3s ease}
.motion-card:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--shine-x) 18%,rgba(221,194,156,.14),transparent 34%);opacity:0;transition:opacity .28s}
.motion-card:hover{--lift:-5px;box-shadow:0 25px 65px rgba(11,43,33,.11)}
.motion-card:hover:before{opacity:1}

/* Buttons gain a refined bronze sweep */
.motion-art-active .btn{position:relative;overflow:hidden}
.motion-art-active .btn:after{content:"";position:absolute;top:-80%;left:-34%;width:26%;height:260%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);transform:rotate(18deg) translateX(-220%);transition:transform .7s var(--ease);pointer-events:none}
.motion-art-active .btn:hover:after{transform:rotate(18deg) translateX(620%)}

/* Project rails and editorial micro-art */
.portfolio-item.motion-card .idx,.plot.motion-card strong,.project-fact strong,.stat strong{transition:color .28s,transform .28s}
.portfolio-item.motion-card:hover .idx,.plot.motion-card:hover strong{color:var(--pine-3);transform:translateX(4px)}
[dir="rtl"] .portfolio-item.motion-card:hover .idx,[dir="rtl"] .plot.motion-card:hover strong{transform:translateX(-4px)}
.truth-shot.motion-image-frame:after,.project-gallery figure.motion-image-frame:after,.location-gallery figure.motion-image-frame:after{background:linear-gradient(125deg,#0b2b21,#1d5945 62%,#c69b62)}
.film-feature.motion-card .play,.video-tile.motion-card .play{transition:transform .35s var(--ease),box-shadow .35s}
.film-feature.motion-card:hover .play,.video-tile.motion-card:hover .play{transform:scale(1.1);box-shadow:0 0 0 14px rgba(221,194,156,.08)}

/* Chapter rail: visual wayfinding for long story pages */
.motion-chapters{position:fixed;z-index:55;right:20px;top:50%;transform:translateY(-50%);display:grid;gap:11px;padding:13px 9px;border:1px solid rgba(255,255,255,.13);background:rgba(6,23,17,.54);backdrop-filter:blur(14px);border-radius:999px;box-shadow:0 15px 45px rgba(6,23,17,.15)}
.motion-chapters button{position:relative;width:9px;height:9px;padding:0;border:1px solid rgba(255,255,255,.55);background:transparent;border-radius:50%;cursor:pointer;transition:.3s var(--ease)}
.motion-chapters button:before{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--sand-2);transform:scale(0);transition:.3s var(--ease)}
.motion-chapters button.active{border-color:var(--sand-2);transform:scale(1.18)}
.motion-chapters button.active:before{transform:scale(1)}
.motion-chapters button span{position:absolute;right:18px;top:50%;transform:translateY(-50%) translateX(7px);white-space:nowrap;background:#071b14;color:#fff;padding:6px 9px;border-radius:6px;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;opacity:0;pointer-events:none;transition:.2s}
.motion-chapters button:hover span,.motion-chapters button:focus-visible span{opacity:1;transform:translateY(-50%) translateX(0)}

/* Ambient detail on legacy/project strip */
.motion-art-active .legacy-strip{position:relative;overflow:hidden}
.motion-art-active .legacy-strip:after{content:"";position:absolute;left:-20%;right:-20%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--sand),transparent);transform:translateX(-32%);animation:motionSweep 8s linear infinite;opacity:.45}

/* Final CTA gets slow cinema crop */
.motion-art-active .final-cta>img{transform:scale(1.055) translate3d(0,var(--cta-y,0),0);will-change:transform}

/* Keep touch/mobile elegant rather than busy */
@media(max-width:1180px){.motion-chapters{display:none}}
@media(max-width:880px){
  .motion-orbit{width:340px;height:340px;right:-190px;top:5%}
  .motion-gridmark{width:300px;height:260px;opacity:.18}
  .motion-glow{display:none}
  .motion-card{transform:none!important}
  .motion-image-frame:after{transition-duration:.8s}
}
@media(prefers-reduced-motion:reduce){
  .motion-plan .trace{stroke-dashoffset:0!important;animation:none!important}
  .motion-plan .node{opacity:.65!important;animation:none!important}
  .motion-orbit,.motion-gridmark,.motion-chapters{animation:none!important}
  .motion-image-frame:after{display:none!important}
  .motion-image-frame img,.motion-parallax img,.motion-hero img,.final-cta>img{transform:none!important;filter:none!important}
  .motion-heading:after{transform:scaleX(1)!important}
  .motion-heading:before{opacity:.8!important;transform:scale(1)!important}
  .legacy-strip:after{animation:none!important}
}

/* Keyframes */
@keyframes motionTrace{to{stroke-dashoffset:0}}
@keyframes motionNode{0%{opacity:0;transform:scale(.2)}100%{opacity:.9;transform:scale(1)}}
@keyframes motionSweep{to{transform:translateX(32%)}}

/* Editorial datum ribbon — architectural, not advertising */
.motion-ribbon{position:relative;z-index:4;overflow:hidden;background:#071b14;color:#d9c4a8;border-top:1px solid rgba(221,194,156,.18);border-bottom:1px solid rgba(221,194,156,.18);height:42px;display:flex;align-items:center;white-space:nowrap}
.motion-ribbon-track{display:inline-flex;align-items:center;gap:34px;min-width:max-content;padding-left:34px;animation:motionRibbon 28s linear infinite}
.motion-ribbon span{font-size:.58rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.86}
.motion-ribbon i{width:5px;height:5px;border:1px solid var(--sand-2);transform:rotate(45deg);opacity:.75}

/* Compass / master-plan seal */
.motion-compass{position:absolute;z-index:2;right:5vw;bottom:5vw;width:128px;height:128px;border:1px solid rgba(221,194,156,.3);border-radius:50%;pointer-events:none;color:var(--sand-2);opacity:.7}
.motion-compass:before,.motion-compass:after{content:"";position:absolute;left:50%;top:50%;background:currentColor;opacity:.45;transform:translate(-50%,-50%)}
.motion-compass:before{width:1px;height:154px}.motion-compass:after{width:154px;height:1px}
.motion-compass .ring{position:absolute;inset:13px;border:1px dashed rgba(221,194,156,.28);border-radius:50%;animation:motionRotate 30s linear infinite}
.motion-compass .core{position:absolute;left:50%;top:50%;width:9px;height:9px;border:1px solid currentColor;background:#0b2b21;transform:translate(-50%,-50%) rotate(45deg)}
.motion-compass .north{position:absolute;top:-22px;left:50%;transform:translateX(-50%);font:700 .52rem/1 var(--sans);letter-spacing:.16em}

/* More sculptural treatment on hero logo card */
.motion-art-active .hero-logo-card{transition:box-shadow .5s var(--ease),transform .5s var(--ease);box-shadow:0 24px 80px rgba(4,18,12,.22),0 0 0 1px rgba(221,194,156,.28)}
.motion-art-active .hero-logo-card:before,.motion-art-active .hero-logo-card:after{content:"";position:absolute;width:34px;height:34px;border-color:var(--sand);opacity:.55}
.motion-art-active .hero-logo-card:before{left:-8px;top:-8px;border-left:1px solid;border-top:1px solid}
.motion-art-active .hero-logo-card:after{right:-8px;bottom:-8px;border-right:1px solid;border-bottom:1px solid}

@keyframes motionRibbon{to{transform:translateX(-50%)}}
@keyframes motionRotate{to{transform:rotate(360deg)}}
@media(max-width:880px){.motion-compass{width:92px;height:92px;right:22px;bottom:22px;opacity:.5}.motion-compass:before{height:112px}.motion-compass:after{width:112px}.motion-ribbon{height:38px}.motion-ribbon-track{animation-duration:34s}}
@media(prefers-reduced-motion:reduce){.motion-ribbon-track,.motion-compass .ring{animation:none!important}}

/* Preserve tilt where older component hover rules already set transform */
.update-card.motion-card,.guide-link-card.motion-card,.project-feature.motion-card,.location-proof-card.motion-card,.source-card.motion-card,.asset-card.motion-card,.film-feature.motion-card,.video-tile.motion-card{
  transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
}