/* Motion layer: transform/opacity only; every effect turns off for reduced motion. */
:root { --targ-gold: #c5a880; }
[data-motion-header] { transform: translateZ(0); transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease; }
[data-motion-header].site-header-scrolled { position: fixed; background: color-mix(in srgb, white 88%, transparent); backdrop-filter: blur(18px); box-shadow: 0 10px 30px rgba(26, 28, 30, .07); }
[data-motion-hero] { isolation: isolate; }
[data-motion-hero] > :not(.targ-motion-grid):not(.targ-motion-line) { position: relative; z-index: 1; }
.targ-motion-grid { position: absolute; inset: 0; z-index: 0; opacity: .22; pointer-events: none; background-image: linear-gradient(rgba(197,168,128,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(197,168,128,.18) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 76%); animation: targGridDrift 16s linear infinite; }
.targ-motion-line { position: absolute; bottom: 5%; left: 0; width: 100%; height: 28%; z-index: 0; pointer-events: none; overflow: visible; opacity: .68; }
.targ-motion-line path { fill: none; stroke: var(--targ-gold); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 12 10; stroke-dashoffset: 48; animation: targPath 7s linear infinite; }
[data-motion-hero-media] { transform: perspective(1300px) translate3d(0, calc(var(--hero-parallax, 0px) * -.18), 0) rotateX(var(--hero-tilt-x, 0deg)) rotateY(var(--hero-tilt-y, 0deg)); transform-style: preserve-3d; will-change: transform; transition: transform .32s cubic-bezier(.22,1,.36,1); }
.motion-ready [data-motion-reveal], .motion-ready [data-motion-card] { will-change: transform, opacity; }
.motion-ready [data-motion-card] { transition: box-shadow .35s ease, border-color .35s ease; }
.motion-ready [data-motion-card]:hover { box-shadow: 0 18px 42px rgba(26,28,30,.12); border-color: rgba(197,168,128,.75); }
[data-motion-metrics] .h-0\.5 { transform-origin: left center; animation: targRule 2.4s cubic-bezier(.16,1,.3,1) both; }
@keyframes targGridDrift { from { background-position: 0 0, 0 0; } to { background-position: 42px 42px, 42px 42px; } }
@keyframes targPath { to { stroke-dashoffset: 0; } }
@keyframes targRule { from { transform: scaleX(.15); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } .targ-motion-grid, .targ-motion-line { display: none; } }

/* Scroll narrative: the composition transforms as each stage of the project is reached. */
.targ-story { --story-progress: 0; --gold: #c5a880; background: #111315; color: #f8f5f0; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); min-height: 360vh; position: relative; overflow: clip; }
.targ-story__visual { align-items: center; display: flex; height: 100vh; justify-content: center; overflow: hidden; padding: clamp(1.5rem, 4vw, 4.5rem); position: sticky; top: 0; }
.targ-story__eyebrow { align-items: center; color: #e4d2b5; display: flex; font: 700 10px/1 "Space Mono", monospace; gap: 9px; letter-spacing: .22em; left: clamp(1.5rem, 4vw, 4.5rem); position: absolute; top: clamp(1.5rem, 4vw, 3rem); z-index: 4; }
.targ-story__eyebrow span { animation: targBeacon 1.8s ease-in-out infinite; background: var(--gold); border-radius: 50%; box-shadow: 0 0 0 0 rgba(197,168,128,.42); height: 8px; width: 8px; }
.targ-story__viewport { background: radial-gradient(circle at 60% 40%, rgba(197,168,128,.2), transparent 37%), linear-gradient(145deg, #1c2023, #08090a); border: 1px solid rgba(197,168,128,.55); box-shadow: 0 32px 80px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.03); height: min(68vh, 660px); isolation: isolate; overflow: hidden; position: relative; width: min(100%, 760px); }
.targ-story__viewport::before, .targ-story__viewport::after { border: 1px solid rgba(197,168,128,.45); content: ""; height: 16px; position: absolute; width: 16px; z-index: 5; }
.targ-story__viewport::before { border-bottom: 0; border-right: 0; left: 14px; top: 14px; }.targ-story__viewport::after { border-left: 0; border-top: 0; bottom: 14px; right: 14px; }
.targ-story__grid { background-image: linear-gradient(rgba(197,168,128,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(197,168,128,.1) 1px, transparent 1px); background-size: 36px 36px; inset: -15%; opacity: .9; position: absolute; transform: perspective(600px) rotateX(62deg) scale(1.32) translateY(17%); transform-origin: center bottom; }
.targ-story__scan { animation: targScan 4.8s ease-in-out infinite; background: linear-gradient(90deg, transparent, rgba(240,221,189,.65), transparent); height: 1px; left: 0; opacity: .68; position: absolute; right: 0; top: 14%; z-index: 2; }
.targ-story__model { --x: 0px; --y: 0px; height: 300px; left: 50%; position: absolute; top: 51%; transform: translate(-50%, -50%) perspective(1000px) rotateX(61deg) rotateZ(-38deg) translate(var(--x), var(--y)) scale(.9); transform-style: preserve-3d; transition: transform 1s cubic-bezier(.22,1,.36,1); width: 420px; z-index: 3; }
.targ-story__floor, .targ-story__volume, .targ-story__core { border: 1px solid rgba(241,225,198,.8); left: 50%; position: absolute; top: 50%; transform-style: preserve-3d; transition: opacity .7s ease, transform 1s cubic-bezier(.22,1,.36,1), background .8s ease; }
.targ-story__floor { background: linear-gradient(135deg, rgba(197,168,128,.18), rgba(255,255,255,.025)); height: 145px; transform: translate(-50%, -50%); width: 250px; }
.targ-story__floor--base { box-shadow: 0 0 0 23px rgba(197,168,128,.05), 0 20px 70px rgba(0,0,0,.4); }
.targ-story__floor--one { opacity: 0; transform: translate(-50%, -50%) translateZ(30px) scale(.82); }.targ-story__floor--two { opacity: 0; transform: translate(-50%, -50%) translateZ(60px) scale(.63); }.targ-story__floor--three { opacity: 0; transform: translate(-50%, -50%) translateZ(90px) scale(.43); }
.targ-story__core { background: rgba(230,207,173,.28); box-shadow: 0 0 38px rgba(197,168,128,.28); height: 52px; opacity: 0; transform: translate(-50%, -50%) translateZ(100px); width: 52px; }
.targ-story__volume { background: linear-gradient(135deg, rgba(238,225,201,.5), rgba(197,168,128,.08)); height: 80px; opacity: 0; width: 80px; }
.targ-story__volume--a { transform: translate(-128px, -83px) translateZ(44px); }.targ-story__volume--b { transform: translate(33px, -11px) translateZ(72px); }
.targ-story__drawing { height: 100%; inset: 0; overflow: visible; position: absolute; width: 100%; }.targ-story__drawing path, .targ-story__drawing circle { stroke: #ead6b5; stroke-width: 1.1; }.targ-story__drawing-path { stroke-dasharray: 9 9; stroke-dashoffset: 36; animation: targDrawing 3.4s linear infinite; }
.targ-story__hud { font-family: "Space Mono", monospace; position: absolute; z-index: 4; }.targ-story__hud span { color: #9d9d9d; display: block; font-size: 8px; letter-spacing: .18em; }.targ-story__hud strong { color: #f6ebda; display: block; font-size: clamp(1.2rem, 2vw, 1.8rem); font-weight: 400; letter-spacing: .08em; margin-top: 5px; }.targ-story__hud small { color: #d5ba91; display: block; font-size: 9px; letter-spacing: .14em; margin-top: 5px; max-width: 145px; }.targ-story__hud--left { bottom: 44px; left: 38px; }.targ-story__hud--right { right: 38px; top: 42px; text-align: right; }.targ-story__hud--right div { background: rgba(255,255,255,.13); height: 2px; margin-top: 10px; overflow: hidden; width: 120px; }.targ-story__hud--right i { background: var(--gold); display: block; height: 100%; transform: scaleX(var(--story-progress)); transform-origin: left; }
.targ-story__caption { bottom: 42px; color: #eee3d2; font: 300 clamp(1rem, 1.45vw, 1.3rem)/1.5 "Cormorant Garamond", serif; margin: 0; max-width: 280px; position: absolute; right: 38px; z-index: 4; }
.targ-story__steps { align-self: stretch; padding: 20vh clamp(1.7rem, 5vw, 6rem) 15vh clamp(1.5rem, 4vw, 5rem); position: relative; z-index: 5; }.targ-story__intro { margin-bottom: 8vh; }.targ-story__intro > span, .targ-story__step > span { color: #c5a880; font: 700 10px/1.2 "Space Mono", monospace; letter-spacing: .2em; }.targ-story__intro h2 { font: 400 clamp(2.6rem, 4vw, 5rem)/.92 "Cormorant Garamond", serif; letter-spacing: -.035em; margin: 18px 0; }.targ-story__intro p { color: #aeb1b3; font-size: .95rem; line-height: 1.7; max-width: 420px; }.targ-story__step { border-left: 1px solid rgba(197,168,128,.33); margin: 0 0 22vh; min-height: 44vh; opacity: .32; padding: 0 0 0 28px; position: relative; transform: translateX(0); transition: opacity .5s ease, transform .7s cubic-bezier(.22,1,.36,1); }.targ-story__step::before { background: #383a3c; border: 3px solid #111315; border-radius: 50%; content: ""; height: 12px; left: -7px; position: absolute; top: 0; transition: background .5s ease, box-shadow .5s ease; width: 12px; }.targ-story__step.is-active { opacity: 1; transform: translateX(10px); }.targ-story__step.is-active::before { background: var(--gold); box-shadow: 0 0 0 8px rgba(197,168,128,.12); }.targ-story__step h3 { font: 400 clamp(2rem, 3.2vw, 3.7rem)/.98 "Cormorant Garamond", serif; letter-spacing: -.025em; margin: 15px 0; }.targ-story__step p { color: #b2b5b7; font-size: .98rem; line-height: 1.75; max-width: 370px; }
[data-targ-story][data-stage="1"] .targ-story__model { --x: -10px; --y: 0px; transform: translate(-50%, -50%) perspective(1000px) rotateX(58deg) rotateZ(-20deg) scale(1); }.targ-story[data-stage="1"] .targ-story__floor--one { opacity: 1; transform: translate(-50%, -50%) translateZ(30px) scale(.82); }.targ-story[data-stage="1"] .targ-story__volume--a { opacity: 1; }
[data-targ-story][data-stage="2"] .targ-story__model { transform: translate(-50%, -50%) perspective(1000px) rotateX(58deg) rotateZ(4deg) scale(1.03); }.targ-story[data-stage="2"] .targ-story__floor--one, .targ-story[data-stage="2"] .targ-story__floor--two, .targ-story[data-stage="2"] .targ-story__floor--three { opacity: 1; }.targ-story[data-stage="2"] .targ-story__floor--two { transform: translate(-50%, -50%) translateZ(60px) scale(.63); }.targ-story[data-stage="2"] .targ-story__floor--three { transform: translate(-50%, -50%) translateZ(90px) scale(.43); }.targ-story[data-stage="2"] .targ-story__volume { opacity: 1; }.targ-story[data-stage="2"] .targ-story__core { opacity: 1; }
[data-targ-story][data-stage="3"] .targ-story__model { transform: translate(-50%, -50%) perspective(1000px) rotateX(55deg) rotateZ(28deg) scale(1.08); }.targ-story[data-stage="3"] .targ-story__floor { background: linear-gradient(135deg, rgba(250,241,226,.62), rgba(197,168,128,.24)); }.targ-story[data-stage="3"] .targ-story__core { background: rgba(255,244,218,.82); box-shadow: 0 0 62px rgba(197,168,128,.72); }
@keyframes targBeacon { 50% { box-shadow: 0 0 0 8px rgba(197,168,128,0); transform: scale(1.22); } } @keyframes targScan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(440px); } } @keyframes targDrawing { to { stroke-dashoffset: 0; } }
@media (max-width: 900px) { .targ-story { display: block; min-height: auto; }.targ-story__visual { height: min(82vh, 700px); position: relative; }.targ-story__viewport { height: min(62vh, 560px); }.targ-story__steps { padding-top: 14vh; }.targ-story__step { margin-bottom: 15vh; min-height: 0; }.targ-story__caption { display: none; } }
@media (prefers-reduced-motion: reduce) { .targ-story { min-height: auto; }.targ-story__visual { position: relative; }.targ-story__model { transform: translate(-50%, -50%) perspective(1000px) rotateX(58deg) rotateZ(-12deg) scale(.9); }.targ-story__scan { display: none; } }

/* First-fold motion: the initial composition is visibly alive before the visitor scrolls. */
[data-motion-hero-media] { isolation: isolate; }
.targ-hero-kinetic { inset: 0; overflow: hidden; pointer-events: none; position: absolute; z-index: 4; }
.targ-hero-kinetic__grid { background-image: linear-gradient(rgba(235,216,184,.2) 1px, transparent 1px), linear-gradient(90deg, rgba(235,216,184,.2) 1px, transparent 1px); background-size: 46px 46px; inset: -24%; mask-image: radial-gradient(ellipse at 72% 54%, black, transparent 58%); opacity: .45; position: absolute; transform: perspective(700px) rotateX(63deg) scale(1.35) translateY(20%); transform-origin: center bottom; animation: targHeroGrid 15s linear infinite; }
.targ-hero-kinetic__aura { background: radial-gradient(circle, rgba(224,194,148,.36) 0%, rgba(197,168,128,.16) 23%, transparent 64%); border-radius: 50%; filter: blur(3px); height: min(70vw, 750px); position: absolute; right: -15%; top: 3%; transform: scale(.72); width: min(70vw, 750px); animation: targHeroAura 7s ease-in-out infinite; }
.targ-hero-kinetic__model { height: min(36vw, 450px); position: absolute; right: clamp(7%, 15vw, 22%); top: 46%; transform: translateY(-50%) perspective(1100px) rotateX(60deg) rotateZ(-31deg); transform-style: preserve-3d; width: min(36vw, 450px); animation: targHeroModel 12s cubic-bezier(.45,.05,.55,.95) infinite alternate; }
.targ-hero-kinetic__slab { background: linear-gradient(135deg, rgba(248,238,220,.5), rgba(197,168,128,.08)); border: 1px solid rgba(249,235,211,.86); box-shadow: 0 12px 42px rgba(0,0,0,.22), inset 0 0 20px rgba(255,255,255,.08); display: block; height: 46%; left: 18%; position: absolute; top: 28%; transform: translateZ(var(--z)) scale(var(--scale)); transform-style: preserve-3d; transition: transform .6s ease; width: 64%; }
.targ-hero-kinetic__slab--one { --scale: 1; --z: 0px; }
.targ-hero-kinetic__slab--two { --scale: .78; --z: 42px; animation: targHeroSlabTwo 4.8s ease-in-out infinite; }
.targ-hero-kinetic__slab--three { --scale: .56; --z: 84px; animation: targHeroSlabThree 4.8s ease-in-out .45s infinite; }
.targ-hero-kinetic__axis { background: rgba(248,228,195,.9); box-shadow: 0 0 18px rgba(230,199,153,.7); display: block; left: 50%; position: absolute; top: 50%; transform-origin: center; }
.targ-hero-kinetic__axis--x { height: 1px; transform: translate(-50%, -50%) rotate(33deg); width: 150%; }.targ-hero-kinetic__axis--y { height: 150%; transform: translate(-50%, -50%) rotate(33deg); width: 1px; }
.targ-hero-kinetic__drawing { inset: 0; opacity: .86; position: absolute; z-index: 2; }.targ-hero-kinetic__drawing path { stroke: #f0d7ad; stroke-dasharray: 15 13; stroke-dashoffset: 120; stroke-width: 1.6; animation: targHeroRoute 8s linear infinite; }.targ-hero-kinetic__drawing circle { fill: #f7e1bd; filter: drop-shadow(0 0 8px #d7b47e); animation: targHeroPoint 2.5s ease-in-out infinite; }
.targ-hero-kinetic__tag { backdrop-filter: blur(8px); background: rgba(9,10,10,.5); border: 1px solid rgba(247,224,189,.52); color: #f7e4c5; font: 700 clamp(8px, .68vw, 11px)/1 "Space Mono", monospace; letter-spacing: .16em; padding: 10px 13px; position: absolute; z-index: 3; }.targ-hero-kinetic__tag span { background: #ead3ae; border-radius: 50%; box-shadow: 0 0 0 0 rgba(234,211,174,.5); display: inline-block; height: 6px; margin-right: 7px; width: 6px; animation: targHeroBeacon 1.8s ease-in-out infinite; }.targ-hero-kinetic__tag--top { right: 6%; top: 22%; }.targ-hero-kinetic__tag--bottom { bottom: 10%; left: 7%; }
.targ-hero-status { align-items: center; backdrop-filter: blur(13px); background: rgba(9,10,10,.53); border: 1px solid rgba(248,228,195,.48); bottom: 6.5%; color: #fff7e9; display: flex; gap: 10px; left: 6%; padding: 11px 13px; position: absolute; z-index: 22; }.targ-hero-status__dot { background: #d9b681; border-radius: 50%; box-shadow: 0 0 0 0 rgba(217,182,129,.5); height: 8px; width: 8px; animation: targHeroBeacon 1.8s ease-in-out infinite; }.targ-hero-status small, .targ-hero-status strong { display: block; font-family: "Space Mono", monospace; }.targ-hero-status small { color: rgba(255,247,233,.68); font-size: 8px; letter-spacing: .16em; }.targ-hero-status strong { font-size: 9px; letter-spacing: .12em; margin-top: 3px; }.targ-hero-status i { background: rgba(255,255,255,.22); height: 1px; margin-left: 8px; overflow: hidden; position: relative; width: 52px; }.targ-hero-status i::after { animation: targHeroMeter 2.4s ease-in-out infinite; background: #e5c28f; content: ""; inset: 0; position: absolute; transform-origin: left; }
@keyframes targHeroGrid { to { background-position: 46px 46px, 46px 46px; } } @keyframes targHeroAura { 50% { opacity: .62; transform: scale(1.06); } } @keyframes targHeroModel { 0% { transform: translateY(-50%) perspective(1100px) rotateX(60deg) rotateZ(-34deg) scale(.94); } 100% { transform: translateY(-50%) perspective(1100px) rotateX(56deg) rotateZ(-15deg) scale(1.04); } } @keyframes targHeroSlabTwo { 50% { transform: translateZ(58px) scale(.78); } } @keyframes targHeroSlabThree { 50% { transform: translateZ(108px) scale(.56); } } @keyframes targHeroRoute { to { stroke-dashoffset: 0; } } @keyframes targHeroPoint { 50% { filter: drop-shadow(0 0 16px #fff0d1); transform: scale(1.45); } } @keyframes targHeroBeacon { 50% { box-shadow: 0 0 0 8px rgba(234,211,174,0); transform: scale(1.15); } } @keyframes targHeroMeter { 0%,100% { transform: scaleX(.18); } 50% { transform: scaleX(1); } }
@media (max-width: 760px) { .targ-hero-kinetic__model { height: 72vw; right: -3%; width: 72vw; }.targ-hero-kinetic__tag--top { right: 5%; top: 19%; }.targ-hero-kinetic__tag--bottom { bottom: 11%; left: 5%; }.targ-hero-status { bottom: 5%; left: 5%; }.targ-hero-status i { display: none; } }
@media (prefers-reduced-motion: reduce) { .targ-hero-kinetic__grid, .targ-hero-kinetic__aura, .targ-hero-kinetic__model, .targ-hero-kinetic__slab, .targ-hero-kinetic__drawing path, .targ-hero-kinetic__drawing circle, .targ-hero-kinetic__tag span, .targ-hero-status__dot, .targ-hero-status i::after { animation: none; } }

/* Building assembly: scroll reveals a legible construction sequence, from foundation to facade. */
.targ-story__building { bottom: 11%; height: min(70vh, 560px); left: 50%; position: absolute; transform: translateX(-50%) perspective(1200px) rotateY(-18deg); transform-style: preserve-3d; transition: transform 1s cubic-bezier(.22,1,.36,1); width: min(72%, 410px); z-index: 3; }
.targ-building__site { background: linear-gradient(140deg, rgba(197,168,128,.2), rgba(255,255,255,.015)); border: 1px solid rgba(237,217,186,.65); bottom: 0; box-shadow: 0 18px 45px rgba(0,0,0,.35); height: 74px; left: -12%; position: absolute; transform: perspective(700px) rotateX(65deg) rotateZ(-2deg); transform-origin: center bottom; width: 124%; }
.targ-building__foundation { background: linear-gradient(90deg, rgba(207,180,141,.8), rgba(92,78,60,.7)); border: 1px solid rgba(247,225,188,.82); bottom: 28px; box-shadow: 0 12px 22px rgba(0,0,0,.3); display: flex; gap: 9%; height: 34px; left: 14%; opacity: 1; padding: 8px 12%; position: absolute; transform: translateY(10px); transition: transform .85s cubic-bezier(.22,1,.36,1); width: 72%; }.targ-building__foundation span { background: rgba(255,240,211,.8); display: block; height: 100%; opacity: .45; width: 10%; }
.targ-building__structure { bottom: 58px; height: 360px; left: 18%; opacity: 0; position: absolute; transform: translateY(32px); transition: opacity .55s ease, transform .9s cubic-bezier(.22,1,.36,1); width: 64%; }.targ-building__structure i { background: linear-gradient(90deg, #b99b70, #f5dfba, #9c805d); box-shadow: 0 0 16px rgba(238,212,174,.35); height: 100%; position: absolute; top: 0; width: 6px; }.targ-building__structure i:nth-child(1){left:0}.targ-building__structure i:nth-child(2){left:20%}.targ-building__structure i:nth-child(3){left:40%}.targ-building__structure i:nth-child(4){left:60%}.targ-building__structure i:nth-child(5){left:80%}.targ-building__structure i:nth-child(6){right:0}
.targ-building__floor { background: linear-gradient(100deg, rgba(24,28,31,.94), rgba(115,96,69,.84)); border: 1px solid rgba(245,224,190,.82); box-shadow: 0 9px 20px rgba(0,0,0,.25); display: flex; gap: 8%; height: 64px; left: 15%; opacity: 0; padding: 13px 11%; position: absolute; transform: translateY(34px) scale(.94); transform-origin: bottom; transition: opacity .5s ease, transform .9s cubic-bezier(.22,1,.36,1); width: 70%; }.targ-building__floor b { background: linear-gradient(180deg, rgba(239,220,190,.78), rgba(113,149,161,.38)); border: 1px solid rgba(246,226,194,.28); box-shadow: inset 0 0 12px rgba(255,255,255,.14); display: block; flex: 1; }
.targ-building__floor--one{bottom:62px}.targ-building__floor--two{bottom:124px}.targ-building__floor--three{bottom:186px}.targ-building__floor--four{bottom:248px}
.targ-building__core { background: linear-gradient(180deg, rgba(248,230,197,.75), rgba(177,144,97,.55)); bottom: 62px; box-shadow: 0 0 34px rgba(224,190,142,.34); height: 251px; left: 43%; opacity: 0; position: absolute; transform: translateY(24px) scaleY(.85); transform-origin: bottom; transition: opacity .7s ease, transform 1s cubic-bezier(.22,1,.36,1); width: 16%; }
.targ-building__roof { background: linear-gradient(130deg, rgba(250,234,205,.85), rgba(184,148,101,.52)); border: 1px solid rgba(250,233,202,.8); bottom: 306px; height: 22px; left: 11%; opacity: 0; position: absolute; transform: translateY(20px); transition: opacity .6s ease, transform .8s cubic-bezier(.22,1,.36,1); width: 78%; }.targ-building__roof i { background: rgba(239,218,185,.9); display: block; height: 46px; margin: -46px auto 0; opacity: .65; width: 2px; }
.targ-building__facade { bottom: 62px; display: grid; gap: 5px; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); height: 247px; left: 15%; opacity: 0; padding: 9px; pointer-events: none; position: absolute; transform: translateY(12px); transition: opacity .9s ease .1s, transform 1.1s cubic-bezier(.22,1,.36,1); width: 70%; }.targ-building__facade i { background: linear-gradient(135deg, rgba(224,239,237,.68), rgba(75,104,111,.66)); border: 1px solid rgba(252,237,211,.55); box-shadow: inset 0 0 14px rgba(255,255,255,.17); }.targ-building__side { background: linear-gradient(90deg, rgba(112,89,58,.67), rgba(33,38,40,.92)); bottom: 62px; height: 247px; left: 85%; opacity: 0; position: absolute; transform: skewY(-30deg) translateX(-10px); transform-origin: left bottom; transition: opacity .8s ease, transform 1s cubic-bezier(.22,1,.36,1); width: 40px; }
.targ-building__drawing { height: 100%; inset: 0; overflow: visible; pointer-events: none; position: absolute; width: 100%; }.targ-building__drawing path, .targ-building__drawing circle { stroke: rgba(241,219,184,.77); stroke-width: 1; }.targ-building__drawing .targ-building__route { stroke-dasharray: 8 9; stroke-dashoffset: 34; animation: targBuildingRoute 3.6s linear infinite; }.targ-building__drawing circle { fill: #ecd0a2; filter: drop-shadow(0 0 7px rgba(236,208,162,.8)); }
[data-targ-story][data-stage="1"] .targ-story__building { transform: translateX(-50%) perspective(1200px) rotateY(-11deg) translateY(-4px); }[data-targ-story][data-stage="1"] .targ-building__structure, [data-targ-story][data-stage="1"] .targ-building__floor--one { opacity: 1; transform: translateY(0) scale(1); }
[data-targ-story][data-stage="2"] .targ-story__building { transform: translateX(-50%) perspective(1200px) rotateY(0deg) translateY(-8px) scale(1.03); }[data-targ-story][data-stage="2"] .targ-building__structure, [data-targ-story][data-stage="2"] .targ-building__floor, [data-targ-story][data-stage="2"] .targ-building__core, [data-targ-story][data-stage="2"] .targ-building__roof { opacity: 1; transform: translateY(0) scale(1); }
[data-targ-story][data-stage="3"] .targ-story__building { transform: translateX(-50%) perspective(1200px) rotateY(10deg) translateY(-8px) scale(1.06); }[data-targ-story][data-stage="3"] .targ-building__structure, [data-targ-story][data-stage="3"] .targ-building__floor, [data-targ-story][data-stage="3"] .targ-building__core, [data-targ-story][data-stage="3"] .targ-building__roof, [data-targ-story][data-stage="3"] .targ-building__facade, [data-targ-story][data-stage="3"] .targ-building__side { opacity: 1; transform: translateY(0) scale(1); }.targ-story[data-stage="3"] .targ-building__side { transform: skewY(-30deg) translateX(0); }
@keyframes targBuildingRoute { to { stroke-dashoffset: 0; } }
@media (max-width: 900px) { .targ-story__building { height: min(65vh, 510px); width: min(76%, 360px); }.targ-building__structure { height: 320px; }.targ-building__floor--four { bottom: 248px; }.targ-building__roof { bottom: 306px; } }
@media (prefers-reduced-motion: reduce) { .targ-building__drawing .targ-building__route { animation: none; }.targ-story__building { transform: translateX(-50%) perspective(1200px) rotateY(-8deg); }.targ-building__structure, .targ-building__floor, .targ-building__core, .targ-building__roof, .targ-building__facade, .targ-building__side { opacity: 1; transform: none; }.targ-building__side { transform: skewY(-30deg) !important; } }