:root{--mad-world-ink:#101011;--mad-world-gold:#d8b878;--mad-world-line:#d8b87844;--mad-depth-ease:cubic-bezier(.19,1,.22,1)}
.mad-handover{border-top:1px solid var(--mad-world-line)}
.mad-handover-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
.mad-handover-grid article{padding-top:24px;border-top:1px solid #d8b87866}
.mad-handover-grid span{font:500 11px/1.4 system-ui;letter-spacing:.12em;color:#d8b878}
.mad-handover-grid h3{font-size:20px;line-height:1.3;margin:18px 0 12px}
.mad-handover-grid p{font-size:14px;line-height:1.65;color:#c5c0b8}
.mad-enquiry-dock{position:fixed;right:20px;bottom:20px;z-index:890;display:flex;gap:16px;align-items:center;min-height:44px;padding:12px 20px;background:#ead09d;color:#181510;border:1px solid #f9e7bd;font:700 12px/1.4 system-ui;border-radius:25px;box-shadow:0 6px 25px #0004}
.mad-enquiry-dock[hidden]{display:none}.mad-enquiry-dock:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media(max-width:900px){.mad-handover-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.mad-handover-grid{grid-template-columns:1fr;gap:20px}.mad-enquiry-dock{right:12px;bottom:12px;font-size:11px;padding:11px 15px}}
/* One explicit camera bridge owns cross-page motion; avoid two overlapping transitions. */
@view-transition{navigation:none}
html[data-mad-motion=on] #image-viewer[open]{animation:mad-viewer-enter .35s var(--mad-depth-ease) both}
@keyframes mad-viewer-enter{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.mad-world-entry{max-width:1480px;margin:80px auto 120px;padding:clamp(24px,5vw,72px);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,80px);align-items:center;border-block:1px solid var(--mad-world-line);background:radial-gradient(ellipse at 90% 40%,#8f633c20,transparent 65%);perspective:1400px}
.mad-entry-copy h2{font-size:clamp(38px,5vw,76px);line-height:1.04;letter-spacing:-.05em;margin:24px 0;color:#f5ebd7;text-wrap:balance}
.mad-entry-copy>p{max-width:40ch;color:#c5c0b8;line-height:1.7}.mad-entry-copy .eyebrow{color:var(--mad-world-gold)}
.mad-entry-copy .mad-tamil{font-size:13px;margin-top:22px}.mad-chapter{display:block;margin-top:28px;font:600 10px/1.6 system-ui;letter-spacing:.17em;color:#b6aa98}
.mad-portal-visual{position:relative;display:block;isolation:isolate;overflow:hidden;border:1px solid #c6996344;border-radius:4px;transform-style:preserve-3d;aspect-ratio:1.22;color:#fff;box-shadow:0 45px 80px #0007;transition:transform .7s var(--mad-depth-ease),box-shadow .7s}
.mad-portal-visual img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);transition:transform 1s var(--mad-depth-ease)}
.mad-portal-visual:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#0a0808e8,transparent 60%)}
.mad-portal-frame{position:absolute;inset:18px;border:1px solid #ffe6b94d;pointer-events:none;z-index:1}
.mad-portal-label{position:absolute;bottom:35px;left:35px;right:35px;z-index:2;display:flex;justify-content:space-between;gap:15px;font:700 12px/1.5 system-ui;letter-spacing:.18em}.mad-portal-label>span{font-size:28px}
.mad-portal-visual:focus-visible,.mad-portal-link:focus-visible{outline:3px solid #f2d49a;outline-offset:6px}
.mad-return-bar{display:flex;justify-content:space-between;gap:15px;align-items:center;background:#101011;color:#d4bf9e;padding:10px max(18px,calc((100vw - 1440px)/2));font:600 11px/1.5 system-ui;letter-spacing:.06em}
.mad-return-bar a{color:#f5e8cf;min-height:32px;display:inline-flex;align-items:center;text-decoration:none}.mad-return-bar a:focus-visible{outline:2px solid #e4c487;outline-offset:4px}
.mad-return-bar span{font-size:9px;text-align:right}
.mad-motion-control{position:fixed;bottom:20px;left:20px;z-index:900;min-height:44px;padding:10px 16px;border:1px solid #d8b87866;background:#151310e8;color:#f7e9cd;border-radius:24px;font:600 11px/1.4 system-ui;cursor:pointer;box-shadow:0 6px 20px #0003}
.mad-motion-control:focus-visible{outline:3px solid #e4c487;outline-offset:4px}
.mad-progress{position:fixed;top:0;left:0;right:0;height:3px;background:#d7b97b;transform:scaleX(0);transform-origin:left;pointer-events:none;z-index:999}
.mad-cinema{position:fixed;inset:0;z-index:2147483000;overflow:hidden;background:#111;display:grid;place-items:center;pointer-events:none;perspective:1200px;color:#f7ead4;opacity:0}
.mad-cinema-art{position:absolute;inset:-5%;background-position:center;background-size:cover;opacity:.6;transform:translateZ(-180px) scale(1.25)}
.mad-cinema:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#080706df,#100e0b30 60%,#08070688);pointer-events:none}
.mad-cinema-frame{position:absolute;inset:clamp(25px,7vw,100px);border:1px solid #e5c99766;z-index:1;transform:translateZ(80px)}
.mad-cinema-copy{position:relative;z-index:2;text-align:center;padding:30px;max-width:900px}
.mad-cinema-copy small{font:600 10px/1.5 system-ui;letter-spacing:.3em;display:block;margin-bottom:22px}
.mad-cinema-copy strong{display:block;font:500 clamp(36px,7vw,98px)/1.05 Georgia,serif;letter-spacing:-.045em;text-wrap:balance}
.mad-cinema-copy span{display:block;font:500 12px/1.6 system-ui;letter-spacing:.12em;margin-top:24px;color:#e3d0b6}
.mad-cinema.products .mad-cinema-art{background-image:url('/assets/jungle-empty.webp')}.mad-cinema.proteins .mad-cinema-art{background-image:url('/assets/mad-proteins-cinematic.png')}.mad-cinema.design .mad-cinema-art{background-image:url('/portfolio-assets/development-grid.svg');background-size:cover;opacity:.25}
html[data-mad-motion=on] .mad-cinema.outgoing{animation:mad-gate-appear .65s ease both}
html[data-mad-motion=on] .mad-cinema.outgoing .mad-cinema-art{animation:mad-camera-push .78s var(--mad-depth-ease) both}
html[data-mad-motion=on] .mad-cinema.outgoing .mad-cinema-frame{animation:mad-frame-push .78s var(--mad-depth-ease) both}
html[data-mad-motion=on] .mad-cinema.incoming{animation:mad-gate-away .85s var(--mad-depth-ease) both}
html[data-mad-motion=on] .mad-cinema.incoming .mad-cinema-art{animation:mad-camera-arrive .85s var(--mad-depth-ease) both}
@keyframes mad-gate-appear{from{opacity:0;clip-path:inset(45% 35% 45% 35%)}to{opacity:1;clip-path:inset(0)}}
@keyframes mad-camera-push{from{transform:translateZ(-240px) scale(1.15)}to{transform:translateZ(180px) scale(1.12)}}
@keyframes mad-frame-push{from{transform:translateZ(-150px) rotateY(-6deg);opacity:0}to{transform:translateZ(220px) rotateY(0);opacity:1}}
@keyframes mad-gate-away{0%{opacity:1}60%{opacity:.8}100%{opacity:0;transform:scale(1.16)}}
@keyframes mad-camera-arrive{from{transform:translateZ(0) scale(1.1)}to{transform:translateZ(250px) scale(1.2)}}
@keyframes mad-section-arrive{from{opacity:.4;transform:perspective(1200px) translateY(38px) rotateX(3deg)}to{opacity:1;transform:none}}
@keyframes mad-progress-line{to{transform:scaleX(1)}}
@keyframes mad-portal-scroll{from{transform:perspective(1400px) rotateY(-9deg) translateY(30px)}to{transform:perspective(1400px) rotateY(2deg) translateY(-20px)}}
html[data-mad-motion=on] .mad-reveal{animation:mad-section-arrive .9s var(--mad-depth-ease) both}
@supports(animation-timeline:scroll()){
 html[data-mad-motion=on] .mad-progress{animation:mad-progress-line linear both;animation-timeline:scroll()}
 html[data-mad-motion=on] .mad-portal-visual{animation:mad-portal-scroll linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
}
@media(hover:hover) and (pointer:fine){html[data-mad-motion=on] .mad-portal-visual:hover img{transform:scale(1.14)}html[data-mad-motion=on] .project-visual{transition:transform .4s var(--mad-depth-ease);transform:perspective(1400px) rotateX(var(--mad-rx,0deg)) rotateY(var(--mad-ry,0deg))}}
@media(max-width:800px){.mad-world-entry{grid-template-columns:1fr;margin:35px 0 60px;padding:40px 24px}.mad-portal-visual{aspect-ratio:1.3}.mad-motion-control{left:12px;bottom:12px;padding:9px 12px}.mad-portal-label{left:26px;right:26px;bottom:27px;font-size:10px}.mad-cinema-copy strong{font-size:clamp(36px,9vw,64px)}body[data-mad-world=design] .wordmark{font-size:18px;letter-spacing:-.035em}}
/* Motion remains optional on every page, including existing store animations. */
html[data-mad-tier=compact] .mad-cinema{perspective:none}
html[data-mad-tier=compact] .mad-cinema-frame{display:none}
html[data-mad-tier=compact] .mad-cinema-art{inset:0;transform:none;animation:none!important}
html[data-mad-tier=compact][data-mad-motion=on] .mad-cinema.outgoing{animation:mad-compact-in .38s ease both}
html[data-mad-tier=compact][data-mad-motion=on] .mad-cinema.incoming{animation:mad-compact-out .45s ease both}
html[data-mad-tier=compact] .mad-portal-visual{animation:none!important;transform:none!important;box-shadow:0 12px 28px #0004}
html[data-mad-tier=compact] .mad-portal-visual img{transform:none!important;transition:none}
html[data-mad-tier=compact] .project-visual{transform:none!important}
html[data-mad-tier=compact][data-mad-motion=on] .mad-reveal{animation:mad-compact-reveal .45s ease both}
html[data-mad-tier=compact] .mad-cinema.products .mad-cinema-art{background-image:url('/assets/jungle-showroom-mobile.webp')}
@keyframes mad-compact-in{from{opacity:0}to{opacity:1}}
@keyframes mad-compact-out{from{opacity:1}to{opacity:0}}
@keyframes mad-compact-reveal{from{opacity:.55;transform:translateY(12px)}to{opacity:1;transform:none}}
html[data-mad-motion=off] *,html[data-mad-motion=off] *:before,html[data-mad-motion=off] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-mad-motion=off] .mad-cinema{display:none}html[data-mad-motion=off] .mad-portal-visual,html[data-mad-motion=off] .project-visual{transform:none!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.mad-cinema{display:none}.mad-portal-visual,.project-visual{transform:none!important}}
/* Existing anime artwork forms three independently moving depth layers. */
.mad-portal-visual .mad-anime-backdrop{object-position:65% center}
.mad-portal-visual .mad-anime-character{position:absolute;inset:auto auto 10% -7%;width:79%;height:86%;object-fit:contain;transform:none;filter:drop-shadow(0 18px 18px #0008);z-index:1;pointer-events:none}
.mad-portal-visual .mad-anime-products{position:absolute;inset:auto 0 12% auto;width:43%;height:48%;object-fit:contain;transform:none;filter:drop-shadow(0 10px 12px #0009);z-index:2;pointer-events:none}
.mad-portal-visual .mad-portal-label{z-index:4;text-shadow:0 2px 10px #000}
.mad-portal-visual:after{z-index:3}
html[data-mad-motion=on] .mad-anime-character{animation:mad-anime-float 6s ease-in-out infinite}
html[data-mad-motion=on] .mad-anime-products{animation:mad-products-float 7.5s ease-in-out infinite}
@keyframes mad-anime-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-16px) rotate(1deg)}}
@keyframes mad-products-float{0%,100%{transform:translateY(0) rotate(1deg)}50%{transform:translateY(-10px) rotate(-1deg)}}
html[data-mad-tier=compact] .mad-anime-character{animation-duration:8s}
html[data-mad-tier=compact] .mad-anime-products{animation:none}
html[data-mad-motion=off] .mad-anime-character,html[data-mad-motion=off] .mad-anime-products{animation:none;transform:none}
@media(prefers-reduced-motion:reduce){.mad-portal-visual .mad-anime-character,.mad-portal-visual .mad-anime-products{animation:none!important;transform:none!important}}
.gallery-navigation{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:#151310;border-top:1px solid #54452e;font-size:12px;color:#e6d1ad}
.gallery-navigation button{border:1px solid #76613c;background:transparent;color:#f5ebd7;border-radius:20px;min-height:44px;padding:8px 13px;white-space:nowrap}
.gallery-navigation button:disabled{opacity:.35;cursor:default}.gallery-navigation span{text-align:center;overflow-wrap:anywhere}
.gallery-thumbnails{display:flex;gap:10px;overflow-x:auto;padding:12px 18px;background:#151310;scrollbar-width:thin}
.gallery-thumbnails button{flex:0 0 106px;min-height:90px;padding:4px 4px 8px;border:1px solid #54452e;background:#1b1711;color:#d9c6a4;border-radius:5px;font:11px/1.4 system-ui}
.gallery-thumbnails button[aria-pressed=true]{border:2px solid #e2c184;color:#fff1d4}.gallery-thumbnails img{width:100%;height:58px;object-fit:cover;object-position:top;margin-bottom:5px}
.campaign{flex-wrap:wrap}.campaign .button{max-width:100%}.actions .button{font-size:13px}.mad-portal-visual .mad-portal-label{z-index:4}
@media(max-width:600px){.gallery-navigation{gap:7px;padding:12px 10px;font-size:11px}.gallery-navigation button{font-size:11px;padding:8px 9px}}