/* TIANNΛI — scroll-led exhibition and tactile interactions. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.motion-progress{position:fixed;inset:0 auto auto 0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--pink),var(--accent),var(--ink));box-shadow:0 0 16px #e9ac3e88;z-index:95;pointer-events:none}
.motion-cursor{position:fixed;top:0;left:0;width:18px;height:18px;border:1px solid var(--pink);border-radius:50%;z-index:85;pointer-events:none;opacity:0;transition:width .25s,height .25s,background .25s;mix-blend-mode:difference}.motion-cursor.hovering{width:48px;height:48px;background:#e9ac3e15}.motion-cursor.pressed{background:var(--pink)}
.motion-ready .hero{overflow:visible}.motion-ready .hero-heading{will-change:transform}.motion-ready .hero-heading .motion-glyph{display:inline-block;white-space:pre;will-change:transform}.motion-ready .hero-heading>.outline{font-size:.77em}.motion-ready .sculpture{pointer-events:auto;cursor:grab;touch-action:pan-y;inset:110px -8% -50px 19%;will-change:transform}.motion-ready .sculpture:active{cursor:grabbing}.motion-ready .hero-aside{z-index:5}.motion-ready .hero-heading>span:not(.sr-only){overflow:clip;padding-block:.04em;margin-block:-.04em}.motion-ready .hero-heading>.outline{margin-top:32px}.hero-interaction-hint{position:absolute;bottom:155px;left:52%;z-index:5;font-size:8px;letter-spacing:1.3px;color:var(--muted);pointer-events:none;display:flex;gap:10px;align-items:center}.hero-interaction-hint:before{content:'+';font-size:16px;color:var(--pink)}.motion-ready .orbit-badge{animation:badge-drift 7s ease-in-out infinite}.motion-ready .hero-meta .status-dot{animation:status-breathe 2.5s ease-in-out infinite}.motion-ready .pill-link,.motion-ready .header-cta{transition:translate .35s var(--motion-ease),background .25s,transform .25s;will-change:translate}
.shutter-intro{position:fixed;inset:0;z-index:100;pointer-events:none;display:grid;grid-template-columns:repeat(5,1fr)}.shutter-intro>i{background:#1c1912;transform-origin:top}.shutter-intro>i:nth-child(odd){transform-origin:bottom}
.motion-manifesto{height:92svh;min-height:580px;position:relative;display:flex;align-items:center;padding:90px var(--pad);background:var(--bg);isolation:isolate}.motion-manifesto:before{content:'';position:absolute;inset:5% 5%;border:1px solid var(--line);border-radius:50%;transform:rotate(-17deg);opacity:.4;z-index:-1}.motion-manifesto .eyebrow{position:absolute;top:75px;left:var(--pad)}.motion-manifesto h2{font-size:clamp(48px,8.8vw,144px);letter-spacing:-.06em;line-height:1.23;font-weight:500;margin:0}.motion-manifesto .reel-char{opacity:.12;transition:none}.motion-manifesto .reel-accent{color:var(--pink)}.motion-manifesto .reel-foot{position:absolute;right:var(--pad);bottom:60px;font-size:9px;letter-spacing:2px;color:var(--muted)}
.particle-stage{position:relative;width:100%;height:340px;border:0;background:none;color:var(--pink);padding:0;text-align:center;cursor:crosshair;touch-action:pan-y}.particle-stage canvas{display:block;width:100%;height:100%}.particle-stage .particle-hint{position:absolute;bottom:10px;left:0;right:0;font-size:8px;letter-spacing:1.5px;color:var(--muted);pointer-events:none}.particle-stage:after{content:'';position:absolute;inset:20px 5%;border:1px solid #cda25a30;border-radius:50%;transform:rotate(-25deg);pointer-events:none}
.scratch-exhibit{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:70px;margin-top:65px;padding:30px 0;border-top:1px solid var(--line)}.scratch-intro .eyebrow{font-size:8px}.scratch-intro h3{font-size:27px;font-weight:500;line-height:1.5;letter-spacing:-1px;margin:20px 0}.scratch-intro>p{font-size:11px;line-height:1.9;color:var(--muted)}.scratch-surface{height:180px;position:relative;overflow:hidden;background:var(--pink);border-radius:6px;border:1px solid #f1d68b77;isolation:isolate}.scratch-underlay{position:absolute;inset:0;padding:30px;display:flex;flex-direction:column;justify-content:center;color:#352715}.scratch-underlay>strong{font-size:26px;font-weight:500;letter-spacing:-1px}.scratch-underlay>small{font-size:9px;margin-top:15px;line-height:1.8}.scratch-surface canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:pan-y;transition:opacity .7s}.scratch-surface.revealed canvas{opacity:0;pointer-events:none}.scratch-reveal{background:none;padding:12px 0;border-bottom:1px solid var(--line);font-size:10px;float:right;margin-top:8px;color:var(--muted)}
/* Three full-viewport panels. Vertical scrolling advances a horizontally pinned stage. */
.motion-ready #services>.service-foot{margin-top:30px}.motion-ready #services>.service-tabs{margin-bottom:24px}.service-exhibition{position:relative;width:calc(100% + 2 * var(--pad));margin-left:calc(-1 * var(--pad));height:340svh;background:#19170f}.exhibition-stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}.exhibition-track{height:100%;display:flex;width:300%;will-change:transform}.exhibit-panel{position:relative;flex:0 0 33.333333%;height:100%;overflow:hidden;background:radial-gradient(ellipse at 55% 55%,#77602877,transparent 63%),#19190f;isolation:isolate}.exhibit-panel:nth-child(2){background:radial-gradient(ellipse at 55% 50%,#792b214f,transparent 67%),#1e1412}.exhibit-panel:nth-child(3){background:radial-gradient(ellipse at 52% 50%,#544e3e88,transparent 65%),#171916}.exhibit-panel:before{content:'';position:absolute;inset:8% 3% 3%;border:1px solid #ddc08021;border-radius:50%;transform:rotate(-22deg);z-index:-1}.exhibition-hud{position:absolute;top:30px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:1px;color:#b7a88d;z-index:4;pointer-events:none}.exhibition-hud>span:last-child{display:flex;align-items:center;gap:25px}.exhibit-word{position:absolute;top:16%;left:var(--pad);right:2%;font-family:var(--display);font-size:clamp(95px,16vw,260px);font-weight:900;line-height:.9;letter-spacing:-.075em;color:#f0dfac21;white-space:pre-line;z-index:-1}.exhibit-panel:nth-child(2) .exhibit-word{color:#dc866728}.exhibit-panel:nth-child(3) .exhibit-word{color:#bac3a326}.exhibit-art{position:absolute;inset:17% 33% 12% 17%;perspective:1000px;display:flex;align-items:center;justify-content:center}.exhibit-photo{height:100%;width:78%;max-height:570px;max-width:440px;object-fit:cover;object-position:center 30%;padding:9px 9px 35px;background:#f4eddb;box-shadow:25px 30px 70px #05040280;transform:rotate(-9deg);will-change:transform}.exhibit-panel:nth-child(2) .exhibit-photo{transform:rotate(9deg);object-position:center 18%}.exhibit-panel:nth-child(3) .exhibit-photo{transform:rotate(-6deg)}.exhibit-orbit{position:absolute;inset:10% -12%;border:1px solid #e6be6e55;border-radius:50%;transform:rotate(30deg);pointer-events:none}.exhibit-orbit:nth-child(3){inset:-2% 7%;transform:rotate(-38deg);border-color:#e6be6e22}.exhibit-satellite{position:absolute;width:60px;height:60px;border-radius:50%;right:-4%;top:12%;background:radial-gradient(circle at 33% 22%,#fff9db,#a2926c 24%,#181912 49%,#d0c3a4 76%,#706848);box-shadow:0 15px 35px #0005}.exhibit-copy{position:absolute;left:68%;right:var(--pad);top:27%;max-width:350px}.exhibit-copy .eyebrow{font-size:8px;color:#c8b68f}.exhibit-copy h3{font-size:clamp(32px,3.8vw,62px);font-weight:500;letter-spacing:-2px;white-space:pre-line;line-height:1.35;margin:25px 0}.exhibit-copy p{font-size:11px;line-height:2.05;color:#bbac8e}.exhibit-copy ul{padding:0;list-style:none;margin:25px 0}.exhibit-copy li{padding:10px 0;border-bottom:1px solid #b7a38033;font-size:10px;color:#d2c4aa}.exhibit-copy li:before{content:'↗';margin-right:12px;color:var(--pink)}.exhibit-copy a{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin-top:22px;gap:20px}.exhibit-copy a>span:last-child{display:grid;place-items:center;border:1px solid #b7a38088;width:43px;height:43px;border-radius:50%;font-size:22px}.exhibit-caption{position:absolute;left:var(--pad);bottom:14%;font-size:8px;letter-spacing:1.5px;color:#baa98b;writing-mode:vertical-rl;transform:rotate(180deg)}.exhibition-footer{position:absolute;bottom:25px;left:var(--pad);right:var(--pad);display:flex;gap:28px;align-items:center;z-index:5}.exhibition-step{display:flex;align-items:center;gap:12px;flex:1;background:none;color:#a59475;font-size:9px;padding:12px 0;text-align:left;white-space:nowrap}.exhibition-step>i{height:1px;background:#70634a;flex:1;position:relative;overflow:hidden}.exhibition-step>i:before{content:'';position:absolute;inset:0;background:var(--pink);transform:scaleX(var(--step-progress,0));transform-origin:left}.exhibition-step.active{color:#f3d28a}.exhibition-step>span{font-size:8px;letter-spacing:.7px}.exhibition-counter{position:absolute;bottom:75px;right:var(--pad);font-size:9px;letter-spacing:2px;color:#d5bc83}
/* Portal becomes a true scroll-through scene, not a static banner. */
.portal-scroll{height:210svh;position:relative;background:#18150e;isolation:isolate}.motion-ready .portal-scroll>.portal{position:sticky;top:0;height:100svh;min-height:0;margin:0;padding:80px var(--pad);background:radial-gradient(ellipse at center,#9b671f44,transparent 60%),#18150e;will-change:transform}.motion-ready .portal-rings{will-change:transform}.motion-ready .portal-rings>i{border-color:#e7c27b60;box-shadow:0 0 30px #a16c1710,inset 0 0 30px #a16c1710}.portal-halo{position:absolute;left:50%;top:50%;width:40vmin;height:40vmin;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 120px #e3a84428,inset 0 0 65px #e3a84422;border:1px solid #d7b36a22;z-index:-1}.portal-scroll .portal h2{will-change:transform,opacity}.motion-ready .portal-foot{position:absolute;bottom:45px;margin:0}.portal-progress{position:absolute;bottom:25px;left:calc(50% - 70px);width:140px;height:1px;background:#6e542d}.portal-progress:before{content:'';display:block;width:100%;height:100%;background:var(--pink);transform:scaleX(var(--portal-progress,0));transform-origin:left}
/* Desktop: inertia, a draggable window, magnifying dock and spring-like transitions. */
.project-desktop{perspective:1400px}.motion-ready .project-window{transform:translate3d(var(--window-x,0px),var(--window-y,0px),0) rotateX(var(--window-rx,0deg));transform-origin:50% 105%;transition:opacity .5s,transform .7s var(--motion-ease),margin .5s var(--motion-ease);will-change:transform}.motion-ready .project-window.minimized{opacity:0;transform:translate3d(0,270px,-300px) rotateX(50deg) scale(.18);pointer-events:none}.motion-ready .project-window.dragging{transition:none}.motion-ready .window-bar{cursor:grab;touch-action:none;user-select:none}.motion-ready .window-bar:active{cursor:grabbing}.window-bar:focus-visible{outline-offset:-4px}.motion-ready .dock-project{transform-origin:50% 100%;transition:transform .22s var(--motion-ease);will-change:transform}.motion-ready .desktop-dock{overflow:visible;gap:14px;padding-inline:18px}.motion-ready .project-detail{overflow:hidden}.motion-ready .project-detail>*,.motion-ready .window-project-tab{will-change:transform}.motion-ready .project-main-icon{transition:transform .5s var(--motion-ease)}.motion-ready .project-main-icon:hover{transform:rotate(-8deg) scale(1.1)}.motion-ready .boarding-pass{transform:perspective(1000px) rotateY(var(--tilt-y,0deg)) rotateX(var(--tilt-x,0deg)) rotate(3deg);transition:transform .6s var(--motion-ease);will-change:transform}.motion-ready .event-photo{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .5s var(--motion-ease)}.motion-ready .event-card{perspective:1000px}.motion-ready .event-card h3{transition:color .3s}.motion-ready .event-card:hover h3{color:var(--pink)}.motion-ready .contact h2{will-change:transform}.motion-ready details{overflow:hidden}.motion-ready .stats .stat>div{font-variant-numeric:tabular-nums}
@keyframes badge-drift{0%,100%{translate:0 0;rotate:8deg}50%{translate:7px -12px;rotate:-4deg}}@keyframes status-breathe{50%{box-shadow:0 0 16px #e9ac3ebb;opacity:.55}}
@media(min-width:761px) and (max-height:720px){.exhibit-copy{top:22%}.exhibit-copy h3{font-size:36px;margin:18px 0}.exhibit-copy p{font-size:10px}.exhibit-copy ul{margin:15px 0}.exhibit-copy li{padding:7px 0}.exhibit-art{top:14%;bottom:15%}}
@media(max-width:900px){.exhibit-copy{left:63%;right:30px}.exhibit-art{right:38%;left:10%}.exhibit-copy h3{font-size:35px}.exhibition-footer{gap:18px}.scratch-exhibit{gap:35px}.exhibit-copy p{font-size:10px}}
@media(max-width:760px){.motion-cursor,.shutter-intro{display:none}.motion-ready .hero-heading>.outline{font-size:.60em;margin-top:20px}.motion-ready .sculpture{inset:305px 9% 115px -15%}.hero-interaction-hint{left:24px;bottom:190px;font-size:7px;letter-spacing:.5px;max-width:160px}.motion-manifesto{height:75svh;min-height:480px;padding-block:65px}.motion-manifesto .eyebrow{top:55px;font-size:7px}.motion-manifesto h2{font-size:clamp(37px,9.5vw,65px);line-height:1.4;letter-spacing:-2px}.motion-manifesto .reel-foot{font-size:7px;bottom:40px;letter-spacing:1px}.scratch-exhibit{display:block;margin-top:40px;padding-top:30px}.scratch-intro h3{font-size:24px;margin:15px 0}.scratch-intro>p{font-size:10px}.scratch-surface{height:160px;margin-top:25px}.scratch-underlay{padding:25px}.scratch-underlay>strong{font-size:23px}.scratch-underlay>small{font-size:8px}.scratch-exhibit:after{content:'';display:block;clear:both}.service-exhibition{height:auto}.exhibition-stage{position:relative;height:auto;padding:65px 0 75px;overflow:hidden}.exhibition-track{width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;transform:none!important;overscroll-behavior-x:contain;height:auto}.exhibition-track::-webkit-scrollbar{display:none}.exhibit-panel{flex:0 0 100%;min-height:760px;scroll-snap-align:start;padding:0 var(--pad)}.exhibit-word{top:5%;font-size:22vw;line-height:.95;left:var(--pad)}.exhibit-art{inset:12% 12% 45% 13%;max-height:310px}.exhibit-photo{width:75%;padding:6px 6px 23px}.exhibit-copy{left:var(--pad);right:var(--pad);top:auto;bottom:35px;max-width:none}.exhibit-copy .eyebrow{font-size:7px}.exhibit-copy h3{font-size:31px;line-height:1.3;margin:16px 0}.exhibit-copy p{font-size:10px;line-height:1.85}.exhibit-copy ul{margin:12px 0}.exhibit-copy li{font-size:9px;padding:8px 0}.exhibit-copy a{font-size:10px;margin-top:15px}.exhibit-copy a>span:last-child{width:35px;height:35px}.exhibit-caption{font-size:6px;left:14px;bottom:50%}.exhibition-hud{top:24px;left:var(--pad);right:var(--pad);font-size:6px;letter-spacing:.3px;gap:20px}.exhibition-hud>span:last-child{gap:7px;text-align:right;max-width:145px}.exhibition-footer{bottom:18px;gap:14px;left:var(--pad);right:var(--pad)}.exhibition-step{gap:7px}.exhibition-step>span{font-size:7px;max-width:65px;overflow:hidden;text-overflow:ellipsis}.exhibition-counter{bottom:58px;font-size:7px}.portal-scroll{height:165svh}.motion-ready .portal-scroll>.portal{padding:60px 24px}.motion-ready .portal-scroll .portal h2{font-size:48px}.portal-scroll .portal .eyebrow{font-size:6px}.portal-scroll .portal-foot{font-size:6px}.motion-ready .desktop-dock{gap:12px;max-width:calc(100% - 30px);overflow-x:auto;overflow-y:hidden;padding-block:15px}.motion-ready .project-window{transform:translate3d(var(--window-x,0px),var(--window-y,0px),0)}.motion-ready .project-window.minimized{transform:translateY(200px) scale(.25)}.particle-stage{height:250px}.motion-ready .hero-bottom{z-index:6}.motion-ready .hero-aside{z-index:6}}
html.motion-reduced .motion-progress,html.motion-reduced .motion-cursor,html.motion-reduced .hero-interaction-hint,html.motion-reduced .shutter-intro{display:none}
html.motion-reduced .motion-manifesto{height:auto;min-height:400px}html.motion-reduced .reel-char{opacity:1!important}
html.motion-reduced .service-exhibition{height:auto!important}html.motion-reduced .exhibition-stage{position:relative;height:auto;padding-block:65px}html.motion-reduced .exhibition-track{width:100%;display:block;transform:none!important}html.motion-reduced .exhibit-panel{height:760px}html.motion-reduced .exhibition-footer,html.motion-reduced .exhibition-counter{display:none}html.motion-reduced .portal-scroll{height:auto}html.motion-reduced .portal-scroll>.portal{position:relative;height:650px}html.motion-reduced .portal-rings,html.motion-reduced .portal h2{transform:none!important;opacity:1!important}
body{overflow-x:clip;overflow-y:visible}
.motion-preference{position:fixed;bottom:20px;right:20px;z-index:70;background:#211d16cc;border:1px solid #a98b4a77;color:#e4cf9e;padding:10px 14px;font-size:9px;letter-spacing:.5px;border-radius:25px;backdrop-filter:blur(15px)}.motion-preference:hover{background:#4b3920}
html.motion-full .hero-heading{animation:none}html.motion-full .sculpture{animation:none}
@media(prefers-reduced-motion:reduce){html.motion-full{scroll-behavior:smooth}html.motion-full .marquee>div{animation:marquee 30s linear infinite!important}html.motion-full .hero-corner{animation:rotate 24s linear infinite!important}html.motion-full .orbit-badge{animation:badge-drift 7s ease-in-out infinite!important}html.motion-full .status-dot{animation:status-breathe 2.5s ease-in-out infinite!important}html.motion-full .project-window{transition:opacity .5s,transform .7s var(--motion-ease),margin .5s var(--motion-ease)!important}html.motion-full .project-window.dragging{transition:none!important}html.motion-full .dock-project{transition:transform .22s var(--motion-ease)!important}html.motion-full .boarding-pass{transition:transform .5s var(--motion-ease)!important}html.motion-full .scratch-surface canvas{transition:opacity .7s!important}}
@media(max-width:760px){.motion-preference{bottom:12px;right:12px;font-size:8px;padding:8px 11px}}

.scratch-intro h3{white-space:pre-line}.exhibit-copy h3{overflow-wrap:anywhere}.motion-full .hero-heading .outline .motion-glyph{-webkit-text-stroke:inherit}.motion-reduced .hero-heading .motion-glyph{transform:none!important;opacity:1!important}.motion-reduced .event-photo,.motion-reduced .boarding-pass{transform:none!important}