:root { --projects-bg: #050505; --projects-line: rgba(255,255,255,.14); --projects-muted: rgba(255,255,255,.55); }
.projects-page { background: var(--projects-bg); color: #fff; font-family: "Space Grotesk", Arial, sans-serif; overflow-x: hidden; }
.projects-page .header__link.is-current { color: #fff; }
.projects-page .header__link.is-current::after { width: 100%; }
.projects-intro { position: fixed; z-index: 3000; inset: 0; display: grid; place-content: center; gap: 7px; color: #fff; background: rgba(5,5,5,.76); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); text-align: center; transition: opacity .8s ease, visibility .8s ease; }
.projects-intro span,.projects-intro strong { opacity:0; transform:translateY(18px); transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1); }
.projects-intro span { font-size: clamp(26px, 5vw, 72px); letter-spacing: -.07em; }
.projects-intro strong { color: rgba(255,255,255,.55); font-size: clamp(12px, 1.2vw, 16px); font-weight: 400; letter-spacing: .28em; text-transform: uppercase; transition-delay:.14s; }
.projects-page.is-intro-visible .projects-intro span,.projects-page.is-intro-visible .projects-intro strong { opacity:1; transform:translateY(0); }
.projects-page.is-ready .projects-intro { opacity: 0; visibility: hidden; pointer-events: none; }
.projects-hero { position: relative; min-height: 100svh; padding: 132px clamp(20px, 5vw, 90px) 38px; display: flex; flex-direction: column; overflow: hidden; }
.projects-hero__video { position:absolute; z-index:0; top:18%; right:8%; width:min(70vw,900px); height:auto; aspect-ratio:1; border-radius:50%; object-fit:cover; opacity:.58; filter:saturate(.72) contrast(1.12) brightness(.62); pointer-events:none; }
.projects-hero__video::cue { display:none; }
.projects-hero__grid { position: absolute; z-index:1; inset: 0; background: linear-gradient(var(--projects-line) 1px, transparent 1px), linear-gradient(90deg, var(--projects-line) 1px, transparent 1px); background-size: 7vw 7vw; mask-image: linear-gradient(to bottom, #000 25%, transparent 95%); opacity: .38; }
.line-robot { --robot-x:17vw; --robot-y:22vh; --robot-look:0px; position:fixed; z-index:1002; top:0; left:0; width:34px; height:52px; cursor:pointer; transform:translate3d(var(--robot-x),var(--robot-y),0); transition:transform 2.65s cubic-bezier(.22,1,.36,1); }
.line-robot__cable { display:none; }
.line-robot__antenna { position:absolute; top:2px; left:16px; width:2px; height:9px; background:#fff; }.line-robot__antenna::after{content:"";position:absolute;top:-4px;left:-2px;width:6px;aspect-ratio:1;border-radius:50%;background:#b9a7ff;box-shadow:0 0 14px #b9a7ff}
.line-robot__head { position:absolute; top:10px; left:4px; display:flex; align-items:center; justify-content:space-around; width:26px; height:18px; padding:0 5px; border:1px solid rgba(255,255,255,.85); border-radius:7px; background:#111; box-shadow:0 5px 14px rgba(0,0,0,.35); }.line-robot__head i{width:4px;aspect-ratio:1;margin-left:var(--robot-look);border-radius:50%;background:#b9a7ff;box-shadow:0 0 7px #b9a7ff;animation:robot-blink 2.8s infinite}
.line-robot__body { position:absolute; top:29px; left:8px; width:18px; height:14px; border:1px solid rgba(255,255,255,.78); border-radius:5px; background:linear-gradient(145deg,#27252c,#0e0e10); }.line-robot__body::after{content:"";position:absolute;top:5px;left:7px;width:3px;aspect-ratio:1;border-radius:50%;background:#b9a7ff}
.line-robot__arm,.line-robot__leg { position:absolute; width:2px; background:rgba(255,255,255,.8); transform-origin:top; }.line-robot__arm{top:31px;height:14px}.line-robot__arm--left{left:7px;transform:rotate(38deg);animation:robot-arm-left .5s infinite alternate}.line-robot__arm--right{right:7px;transform:rotate(-38deg);animation:robot-arm-right .5s infinite alternate}.line-robot__leg{top:42px;height:12px}.line-robot__leg--left{left:12px;transform:rotate(20deg);animation:robot-leg-left .45s infinite alternate}.line-robot__leg--right{right:12px;transform:rotate(-20deg);animation:robot-leg-right .45s infinite alternate}
@keyframes robot-route { 0%,100%{transform:translate(0,0) rotate(-4deg)} 18%{transform:translate(14vw,8vh) rotate(8deg)} 32%{transform:translate(28vw,1vh) rotate(-5deg)} 50%{transform:translate(43vw,18vh) rotate(7deg)} 67%{transform:translate(58vw,7vh) rotate(-6deg)} 82%{transform:translate(70vw,23vh) rotate(5deg)} }
@keyframes robot-cable{to{transform:rotate(11deg)}}@keyframes robot-arm-left{to{transform:rotate(62deg)}}@keyframes robot-arm-right{to{transform:rotate(-62deg)}}@keyframes robot-leg-left{to{transform:rotate(-16deg)}}@keyframes robot-leg-right{to{transform:rotate(16deg)}}@keyframes robot-blink{0%,45%,47%,100%{transform:scaleY(1)}46%{transform:scaleY(.12)}}
.line-robot.robot--seated .line-robot__cable{opacity:0}.line-robot.robot--seated .line-robot__leg--left{transform:rotate(58deg);animation:none}.line-robot.robot--seated .line-robot__leg--right{transform:rotate(-58deg);animation:none}.line-robot.robot--seated .line-robot__arm{animation:none}.line-robot.robot--seated .line-robot__arm--left{transform:rotate(72deg)}.line-robot.robot--seated .line-robot__arm--right{transform:rotate(-72deg)}
.line-robot.robot--attacking{transition-duration:.22s}.line-robot.robot--attacking .line-robot__leg{animation-duration:.18s}.line-robot.robot--peeking .line-robot__cable{opacity:0}.line-robot.robot--peeking{clip-path:inset(0 0 0 0)}.line-robot--clone{z-index:1003}
.line-robot.robot--hanging{transition-duration:.45s}.line-robot.robot--hanging .line-robot__cable{animation:robot-cable 1.55s ease-in-out infinite alternate}.line-robot.robot--hanging .line-robot__head,.line-robot.robot--hanging .line-robot__body{animation:robot-sway 1.55s ease-in-out infinite alternate}.line-robot.robot--hanging .line-robot__leg{animation:none}.line-robot.robot--hanging .line-robot__leg--left{transform:rotate(54deg)}.line-robot.robot--hanging .line-robot__leg--right{transform:rotate(-54deg)}
@keyframes robot-sway{from{transform:translateX(-7px) rotate(-8deg)}to{transform:translateX(7px) rotate(8deg)}}
.line-robot.robot--attacking .line-robot__head,.line-robot.robot--attacking .line-robot__body{animation:robot-jump .24s cubic-bezier(.2,.8,.3,1) 4 alternate}.line-robot.robot--attacking .line-robot__arm{animation-duration:.16s}.line-robot.robot--dancing .line-robot__head,.line-robot.robot--dancing .line-robot__body{animation:robot-dance .42s ease-in-out 6 alternate}.line-robot.robot--dancing .line-robot__arm{animation:robot-dance-arm .24s ease-in-out 10 alternate}.line-robot.robot--dancing .line-robot__leg{animation:robot-dance-leg .2s ease-in-out 12 alternate}
@keyframes robot-jump{from{transform:translateY(0)}to{transform:translateY(-17px) rotate(5deg)}}@keyframes robot-dance{from{transform:translateX(-7px) rotate(-8deg)}to{transform:translateX(7px) rotate(8deg)}}@keyframes robot-dance-arm{from{transform:rotate(-75deg)}to{transform:rotate(75deg)}}@keyframes robot-dance-leg{from{transform:rotate(-34deg)}to{transform:rotate(34deg)}}
.projects-hero::after { content:""; position:absolute; z-index:2; width:min(70vw,900px); aspect-ratio:1; top:18%; right:8%; border:1px solid rgba(255,255,255,.16); border-radius:50%; box-shadow:0 0 0 80px rgba(255,255,255,.025), 0 0 0 180px rgba(255,255,255,.018); pointer-events:none; }
.projects-hero__top,.projects-hero__heading,.projects-hero__scroll { position: relative; z-index: 3; }
.projects-hero__top { display:flex; justify-content:space-between; color:var(--projects-muted); font-size:11px; letter-spacing:.15em; text-transform:uppercase; }
.projects-hero__heading { margin:auto 0; max-width:1200px; }
.projects-hero__heading > p:first-child { margin-bottom:20px; color:var(--projects-muted); font-size:clamp(15px,1.4vw,20px); }
.projects-hero h1 { margin:0; max-width:1000px; font-size:clamp(57px,9.5vw,164px); font-weight:400; line-height:.84; letter-spacing:-.085em; }
.projects-hero h1 i,.projects-showcase h2 i,.project-details h3 i { color:rgba(255,255,255,.46); font-weight:400; }
.projects-hero__lead { max-width:440px;  color:var(--projects-muted); font-size:15px; line-height:1.6; }
.projects-hero__scroll { display:flex; gap:14px; align-items:center; color:var(--projects-muted); font-size:11px; letter-spacing:.17em; text-transform:uppercase; }.projects-hero__scroll b{font-size:18px;color:#fff;animation:projects-scroll 1.6s infinite ease-in-out}@keyframes projects-scroll{50%{transform:translateY(7px)}}
.projects-showcase { min-height:100svh; padding:110px clamp(20px,5vw,90px) 130px; border-top:1px solid var(--projects-line); background:radial-gradient(circle at 20% 42%,rgba(115,84,255,.13),transparent 28%),#070707; }
.projects-showcase__intro { display:grid; grid-template-columns:20% 1fr 260px; gap:20px; align-items:end; }.projects-showcase__intro>span{color:var(--projects-muted);font-size:11px;letter-spacing:.16em;text-transform:uppercase}.projects-showcase__intro h2{margin:0;font-size:clamp(44px,6vw,104px);font-weight:400;line-height:.88;letter-spacing:-.075em}.projects-showcase__intro p{margin:0;color:var(--projects-muted);font-size:14px;line-height:1.55}
.projects-stage { display:grid; grid-template-columns:minmax(420px,1.2fr) minmax(300px,.8fr); gap:clamp(30px,7vw,130px); align-items:center; max-width:1580px; min-height:790px; margin:40px auto 0; }
.projects-orbit { position:relative; width:min(100%,960px); height:790px; margin:auto; perspective:1100px; }.projects-orbit::before{content:"";position:absolute;inset:13%;border:1px solid rgba(255,255,255,.14);border-radius:50%;transform:rotateX(65deg)}
.project-orbit__card { position:absolute; top:50%; left:50%; width:clamp(170px,20vw,290px); aspect-ratio:1/.68; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.22); border-radius:3px; color:#fff; cursor:pointer; background:#151515; transform:translate(-50%,-50%); transition:transform .7s cubic-bezier(.16,1,.3,1),filter .55s ease,opacity .55s ease,box-shadow .55s ease; }.project-orbit__card video{width:100%;height:100%;object-fit:cover;opacity:.76;transition:opacity .4s ease,transform .8s ease}.project-orbit__card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.8));}.project-orbit__card span,.project-orbit__card strong{position:absolute;z-index:1;bottom:12px}.project-orbit__card span{left:13px;color:rgba(255,255,255,.58);font-size:10px}.project-orbit__card strong{right:13px;font-size:13px;font-weight:400}.project-orbit__card:hover video,.project-orbit__card.is-active video{opacity:1;transform:scale(1.05)}.project-orbit__card.is-active{border-color:#fff;box-shadow:0 28px 70px rgba(0,0,0,.65)}
.projects-orbit__core { position:absolute; top:50%; left:50%; z-index:0; width:112px; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(255,255,255,.42); border-radius:50%; color:rgba(255,255,255,.68); transform:translate(-50%,-50%); }.projects-orbit__core span{font-size:24px;letter-spacing:-.1em}.projects-orbit__core i{position:absolute;border:1px solid rgba(255,255,255,.14);border-radius:50%;inset:-38px}.projects-orbit__core i:last-child{inset:-92px}
.project-details { max-width:430px; padding:12px 0 12px 36px; border-left:1px solid var(--projects-line); animation:project-details-in .45s ease both; }@keyframes project-details-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.project-details__index,.project-details__type{color:var(--projects-muted);font-size:11px;letter-spacing:.16em;text-transform:uppercase}.project-details__index{display:inline-block;animation:project-counter .45s cubic-bezier(.16,1,.3,1) both}.project-details__type{margin:42px 0 14px;letter-spacing:.11em}.project-details h3{margin:0;font-size:clamp(52px,5vw,82px);font-weight:400;line-height:.83;letter-spacing:-.08em}.project-details__text{margin:30px 0;color:var(--projects-muted);font-size:15px;line-height:1.62}.project-details__meta{display:grid;gap:14px;margin:0}.project-details__meta div{display:grid;grid-template-columns:100px 1fr;padding-top:12px;border-top:1px solid var(--projects-line)}.project-details dt{color:var(--projects-muted);font-size:11px;text-transform:uppercase;letter-spacing:.11em}.project-details dd{margin:0;font-size:13px}.project-details__next{display:flex;justify-content:space-between;width:100%;margin-top:38px;padding:16px 0;border:0;border-top:1px solid var(--projects-line);background:transparent;color:#fff;text-align:left;font:inherit;cursor:pointer}.project-details__next b{font-size:20px;font-weight:400}
@keyframes project-counter{from{opacity:0;transform:translateY(-7px);letter-spacing:.35em}to{opacity:1;transform:translateY(0);letter-spacing:.16em}}
.projects-page .footer { display:block; min-height:0; padding:90px 6vw 30px; background:#070707; border-top:1px solid var(--projects-line); }.projects-page .footer__top{display:flex;justify-content:space-between;gap:80px;max-width:1400px;margin:auto}.projects-page .footer__brand h2{margin:0;font-size:clamp(45px,6vw,69px);font-weight:400;line-height:.95;letter-spacing:-.05em}.projects-page .footer__brand h2 span{font-style:italic;opacity:.5}.projects-page .footer__navigation{display:flex;gap:80px}.projects-page .footer__column{display:flex;flex-direction:column;align-items:flex-start;gap:14px}.projects-page .footer__title{margin-bottom:10px;color:rgba(255,255,255,.4);font-size:11px;letter-spacing:.12em}.projects-page .footer__column a,.projects-page .footer__bottom a{color:rgba(255,255,255,.72);font-size:15px;text-decoration:none}.projects-page .footer__bottom{display:flex;justify-content:space-between;gap:18px;max-width:1400px;margin:72px auto 0;padding-top:22px;border-top:1px solid var(--projects-line);color:rgba(255,255,255,.42);font-size:12px}
@media(max-width:1000px){.projects-stage{grid-template-columns:1fr;gap:8px;min-height:0}.projects-orbit{height:560px}.project-details{max-width:none;margin:0 5vw;padding:28px 0 0;border-left:0;border-top:1px solid var(--projects-line)}.projects-showcase__intro{grid-template-columns:1fr 1fr}.projects-showcase__intro p{grid-column:2}.projects-page .footer__top{flex-direction:column;gap:48px}.projects-page .footer__navigation{width:100%;gap:32px}}
@media(max-width:700px){.projects-page .header__actions{display:none}.projects-page .header__nav{z-index:1001}.projects-hero{min-height:760px;padding-top:110px}.projects-hero__top{font-size:9px}.projects-hero__heading{margin:auto 0}.projects-hero h1{font-size:clamp(48px,15vw,76px)}.projects-hero__lead{margin:30px 0 0;max-width:360px}.line-robot{transform:scale(.72);transform-origin:top left}.projects-showcase{padding:80px 20px}.projects-showcase__intro{display:block}.projects-showcase__intro h2{margin:20px 0}.projects-showcase__intro p{max-width:330px}.projects-stage{margin-top:24px}.projects-orbit{height:470px;width:100%}.project-orbit__card{width:158px}.projects-orbit__core{width:74px}.projects-orbit__core i{inset:-23px}.projects-orbit__core i:last-child{inset:-52px}.project-details{margin:0;padding-top:24px}.project-details__type{margin-top:26px}.projects-page .footer{padding:60px 20px 24px}.projects-page .footer__navigation{display:grid;grid-template-columns:1fr;gap:34px}.projects-page .footer__bottom{flex-direction:column;align-items:flex-start;margin-top:46px}}
@media(prefers-reduced-motion:reduce){.projects-intro,.projects-hero__scroll b,.project-orbit__card,.project-orbit__card video,.line-robot,.line-robot *{animation:none;transition:none}}

@media (max-width: 700px) {
    .projects-orbit {
        height: 202px;
    }

    .projects-showcase {
        padding: 27px 20px;
    }

    .projects-page .footer {
        padding: 24px 20px;
    }
}

@media(prefers-reduced-motion:reduce){.projects-hero__video{display:none}}

/* Footer styling is scoped to the projects page only. */
.projects-page .footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 0%, rgba(137, 105, 255, .2), transparent 28%),
        radial-gradient(circle at 88% 100%, rgba(255, 255, 255, .08), transparent 24%),
        #070707;
}

.projects-page .footer::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    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: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .7), transparent 78%);
}

.projects-page .footer__top,
.projects-page .footer__bottom {
    position: relative;
    z-index: 1;
}

.projects-page .footer__brand h2 {
    text-shadow: 0 18px 50px rgba(137, 105, 255, .18);
}

.projects-page .footer__column a {
    position: relative;
    transition: color .3s ease, transform .3s ease;
}

.projects-page .footer__column a::after {
    content: "↗";
    display: inline-block;
    margin-left: 7px;
    color: #b9a7ff;
    opacity: 0;
    transform: translate(-5px, 5px);
    transition: opacity .3s ease, transform .3s ease;
}

.projects-page .footer__column a:hover {
    color: #fff;
    transform: translateX(4px);
}

.projects-page .footer__column a:hover::after {
    opacity: 1;
    transform: translate(0, 0);
}

.projects-page .footer__up {
    display: grid;
    place-items: center;
    width: 42px;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

.projects-page .footer__up:hover {
    color: #080808;
    background: #fff;
    transform: translateY(-4px);
}

/* Higher specificity: protects the projects footer from global footer rules. */
body.projects-page footer.footer {
    padding-top: 110px !important;
    background: #070707 !important;
    border-top: 1px solid rgba(255, 255, 255, .16) !important;
    box-shadow: none;
}

body.projects-page footer.footer .footer__label::after {
    content: "BEAUTIFUL-WORLDS / PROJECTS";
    display: block;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, .5);
    font-size: 11px;
    letter-spacing: .2em;
}

body.projects-page footer.footer .footer__bottom {
    border-top-color: rgba(255, 255, 255, .16);
}

.projects-page .footer::before {
    display: none;
}


@media (max-width: 700px) {
    body.projects-page footer.footer {
        padding: 56px 20px 24px !important;
    }
}