/* Shared motion language, October refinement. */
@property --border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.shine-control { isolation:isolate; }
.shine-control > .border-light { position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; background:conic-gradient(from var(--border-angle), transparent 0% 66%, #9ed0ff30 76%, #d9f0ff 85%, #9ed0ff70 90%, transparent 96%); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; -webkit-mask-composite:xor; animation:border-orbit 3.8s linear infinite; }
.shine-control:hover > .border-light { filter:brightness(1.4); }
.menu-toggle,.case-menu-toggle,.menu-close,.case-menu-close {border-radius:30px;padding:10px 14px;}
@keyframes border-orbit { to {--border-angle:360deg;} }
.glitch-label { position:relative;display:inline-block; }
.glitch-label::before,.glitch-label::after { content:attr(data-label); position:absolute;inset:0;pointer-events:none;opacity:0; }
.glitch-label::before { color:#d9f5ff;animation:pixel-signal 5.7s infinite; }
.glitch-label::after { color:#4ba8e8;animation:pixel-signal 5.7s .09s infinite reverse; }
.tapir-question .glitch-label::before,.tapir-question .glitch-label::after {animation-delay:1.8s;}
@keyframes pixel-signal {0%,83%,92%,100%{opacity:0;transform:none;clip-path:inset(0);}84%{opacity:.8;transform:translateX(2px);clip-path:inset(10% 0 65%);}86%{opacity:.7;transform:translateX(-2px);clip-path:inset(55% 0 20%);}88%{opacity:.8;transform:translateX(1px);clip-path:inset(30% 0 45%);}90%{opacity:0;transform:none;} }
.hero {z-index:20;}
.header.scroll-header,.case-header.scroll-header {position:fixed;inset:0 0 auto;z-index:100;width:100%;max-width:none;margin:0;height:76px;padding:14px max(24px,calc((100vw - 1280px)/2));background:#090f18b3;backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%);border-bottom:1px solid #9ed0ff22;animation:none;transition:translate .45s cubic-bezier(.22,1,.36,1),opacity .3s;opacity:1;translate:0 0;}
.header.scroll-header.is-away,.case-header.scroll-header.is-away {translate:0 -110%;opacity:0;pointer-events:none;}
.menu-scenery,.menu-light,.case-menu-bg {display:none!important;}
#navigation.menu-screen,#case-menu {background:#090f18ed;backdrop-filter:blur(24px);}
.menu-links {gap:clamp(22px,4vh,48px);}
.menu-links a:last-child {white-space:normal;}
.marquee:hover .marquee-track {animation-play-state:running;}
.gallery.motion-gallery {padding-block:50px 60px;}
.gallery.motion-gallery img {flex-basis:clamp(155px,13.5vw,220px);width:clamp(155px,13.5vw,220px);border-radius:18px;}
.gallery.motion-gallery .gallery-group {gap:clamp(10px,1.2vw,20px);padding-right:clamp(10px,1.2vw,20px);}
.supplied-arrow {display:block;width:100%;height:100%;object-fit:contain;}
.scroll-cue img {rotate:-90deg;}
footer a img[src$="arrow-scroll.svg"],.to-top img {rotate:90deg;}
.back:has(img),.next-arrow:has(img),.work-open:has(img) {border:0;background:none;}
.next-arrow:has(img),.work-open:has(img) {transform:none!important;}
.work-open img {width:64px;height:64px;}
.to-top img {width:32px;height:32px;}
.scroll-blur {filter:blur(var(--reveal-blur,0px));opacity:var(--reveal-opacity,1);will-change:filter,opacity;}
.motion .reveal.scroll-blur.visible,.motion-enabled .reveal.scroll-blur.visible {filter:blur(var(--reveal-blur,0px));opacity:var(--reveal-opacity,1);}
#navigation[open] .menu-links a:nth-child(4) span{animation-delay:.3s;}
@media(max-width:700px){#navigation .menu-links{padding-top:0!important;margin-top:70px;gap:18px;}#navigation .menu-links a{font-size:27px;height:auto;min-height:60px;gap:12px;}#navigation .menu-links a.is-highlighted{transform:translateX(5px) scale(1.05);}}
@media(max-width:700px){.gallery.motion-gallery img{width:150px;flex-basis:150px;border-radius:16px}.gallery.motion-gallery{padding-block:40px 45px}.header.scroll-header,.case-header.scroll-header{height:68px;padding:12px 24px}.scroll-header .logo{width:38px;height:auto}.menu-links a{font-size:clamp(27px,7vw,40px);}.menu-links{padding-top:16vh!important;}}
@media(prefers-reduced-motion:reduce){.shine-control>.border-light,.glitch-label::before,.glitch-label::after{animation:none}.glitch-label::before,.glitch-label::after{display:none}.scroll-blur{filter:none!important;opacity:1!important;will-change:auto}.scroll-header{transition:none!important}.marquee:hover .marquee-track{animation:none;}}
/* A tapered light on a masked CSS pill: no SVG fill can cross the button. */
[data-border-glow]{border-color:#9ed0ff45;background:transparent;box-shadow:inset 0 0 16px #87bdff05;}
[data-border-glow]:hover{background:#9ed0ff08;color:var(--blue);box-shadow:inset 0 0 20px #87bdff0d,0 0 20px #87bdff0c;}
.shine-control>.border-light,.shine-control>.border-halo{position:absolute;inset:-1px;padding:1px;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--border-angle),transparent 0deg 210deg,#78b6ff08 240deg,#9acaff38 265deg,#c8e6ffb3 282deg,#f0f8ff 286deg,#b8d9ff59 292deg,transparent 310deg 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:border-orbit 7s linear infinite;opacity:.9;}
.shine-control>.border-halo{inset:-2px;padding:3px;filter:blur(2px);opacity:.45;}
.shine-control:hover>.border-light{filter:none;opacity:1;}
.work-card .work-open,.work-card:hover .work-open,.work-card:focus-visible .work-open{background:transparent;color:inherit;transform:none;border:0;}
.work-card .work-open{width:48px;height:48px;}
.work-card .work-open img{width:100%;height:100%;object-fit:contain;transition:filter .3s,translate .3s;}
.work-card:hover .work-open img,.work-card:focus-visible .work-open img{filter:brightness(1.25);translate:2px -2px;}
@media(prefers-reduced-motion:reduce){.shine-control>.border-light,.shine-control>.border-halo{animation:none;}.work-card .work-open img{transition:none;}}
/* Curved fill rises from the lower edge and reverses smoothly on exit. */
[data-border-glow]{transition:color .3s ease .12s,box-shadow .6s ease,translate .4s ease;}
[data-border-glow]>.cta-fill{position:absolute;inset:0;border-radius:inherit;background:var(--blue,#9ed0ff);pointer-events:none;z-index:0;clip-path:ellipse(75% 0% at 50% 100%);transition:clip-path .75s cubic-bezier(.22,1,.36,1);}
[data-border-glow]>.cta-label{position:relative;z-index:1;}
[data-border-glow]>.border-light,[data-border-glow]>.border-halo{z-index:2;}
[data-border-glow]:hover,[data-border-glow]:focus-visible{background:transparent;color:var(--bg,#090f18);box-shadow:0 0 24px #9ed0ff20;}
[data-border-glow]:hover>.cta-fill,[data-border-glow]:focus-visible>.cta-fill{clip-path:ellipse(110% 150% at 50% 100%);}
@media(prefers-reduced-motion:reduce){[data-border-glow],[data-border-glow]>.cta-fill{transition:none;}}
/* Quote CTAs: the inner label panel contracts to reveal WhatsApp. */
[data-quote-cta]{background:transparent;isolation:isolate;transition:background-color .45s,color .35s,box-shadow .45s;}
[data-quote-cta]::before{content:none;}
[data-quote-cta]>.cta-fill{position:absolute;inset:0;display:block;border-radius:inherit;background:var(--blue,#9ed0ff);pointer-events:none;z-index:0;clip-path:inset(0 50% round 40px);transition:clip-path .6s cubic-bezier(.65,0,.35,1);}
[data-quote-cta]>.cta-label{position:relative;z-index:1;white-space:nowrap;clip-path:inset(0);opacity:1;transition:clip-path .5s cubic-bezier(.65,0,.35,1),opacity .25s ease .12s;}
[data-quote-cta]>.cta-whatsapp{position:absolute;inset:0;display:grid;place-items:center;z-index:1;color:var(--bg,#090f18);pointer-events:none;opacity:0;transform:translateY(6px) scale(.8);transition:opacity .25s ease,transform .4s cubic-bezier(.22,1,.36,1);}
[data-quote-cta]:hover,[data-quote-cta]:focus-visible{background:transparent;color:var(--blue,#9ed0ff);box-shadow:0 0 24px #9ed0ff20;}
[data-quote-cta]:hover>.cta-fill,[data-quote-cta]:focus-visible>.cta-fill{clip-path:inset(0 0 round 40px);}
[data-quote-cta]:hover>.cta-label,[data-quote-cta]:focus-visible>.cta-label{clip-path:inset(0 50%);opacity:0;transition-delay:0s;}
[data-quote-cta]:hover>.cta-whatsapp,[data-quote-cta]:focus-visible>.cta-whatsapp{opacity:1;transform:none;transition-delay:.22s;}
@media(prefers-reduced-motion:reduce){[data-quote-cta],[data-quote-cta]::before,[data-quote-cta]>.cta-label,[data-quote-cta]>.cta-whatsapp{transition:none;}}

/* Original Figma artwork, exported with its transparency and 35% halftone opacity. */
.hero-art .hero-halftone{position:absolute;left:calc(50% - 195 * var(--u));top:calc(223 * var(--u));width:calc(497 * var(--u));height:calc(439 * var(--u));max-width:none;pointer-events:none;}
.hero-glow{inset:0 auto auto 50%;width:calc(1909 * var(--u));height:calc(990 * var(--u));transform:translateX(calc(-960 * var(--u)));background:url('assets/hero-glow.webp') left top/100% 100% no-repeat;pointer-events:none;}
@media(max-width:1000px){.hero-art .hero-halftone{left:calc(50% - 136px);top:474px;width:265px;height:248px;}.hero-glow{width:1100px;height:570px;left:50%;transform:translateX(-50%);}}

/* Image exports already include Figma's layer opacity; do not dim them again. */
.hero-art{opacity:1;}
.portfolio-home::after{mix-blend-mode:soft-light;}
[data-quote-cta]>.cta-whatsapp svg{width:clamp(16px,1.1vw,20px);height:clamp(16px,1.1vw,20px);max-height:none;display:block;}

/* Welcome arrow: source points left; turn it down and right. */
.hero-copy .eyebrow img{rotate:-135deg;}

/* Original Figma badges accompanying the hero labels. */
.nickname>.hero-label-icon,.tapir-question>.hero-label-icon{position:absolute;left:calc(-24 * var(--u));top:0;width:calc(19 * var(--u));height:calc(19 * var(--u));object-fit:contain;pointer-events:none;}
.tapir-question>.hero-label-icon{width:calc(20 * var(--u));height:calc(21 * var(--u));}
@media(max-width:1000px){.nickname>.hero-label-icon{left:-20px;width:16px;height:16px;}.tapir-question>.hero-label-icon{left:-20px;width:16px;height:17px;}}

.tapir-question{padding-left:calc(24 * var(--u));margin-left:calc(-24 * var(--u));}
.tapir-question>.hero-label-icon{left:0;}
@media(max-width:1000px){.tapir-question{padding-left:20px;margin-left:-20px;}}

/* Keep the medal close to the label; the tapir question is text only. */
.nickname>.hero-label-icon{left:calc(-13 * var(--u));}
.tapir-question{padding-left:0;margin-left:0;}
@media(max-width:1000px){.nickname>.hero-label-icon{left:-13px;}}

/* A quiet, accessible notice matching the portfolio's blue visual identity. */
#detail-dialog{width:460px;max-width:calc(100% - 40px);padding:38px;border:1px solid #9ed0ff40;border-radius:26px;background:radial-gradient(ellipse at top left,#183957 0%,#0c1928 60%,#090f18 100%);box-shadow:0 30px 100px #0009,inset 0 1px #c5e7ff15;}
#detail-dialog[open]{animation:detail-enter .45s cubic-bezier(.22,1,.36,1) both;}
#detail-dialog::backdrop{background:#020710a6;backdrop-filter:blur(8px);animation:detail-backdrop .4s ease both;}
#detail-dialog .dialog-emblem{width:64px;height:64px;display:grid;place-items:center;border:1px solid #9ed0ff28;border-radius:18px;background:#9ed0ff08;margin-bottom:26px;}
#detail-dialog .eyebrow{font:11px 'Pixelify Sans',monospace;letter-spacing:.08em;color:#89a9c7;}
#detail-dialog h2{font-size:clamp(25px,6vw,32px);line-height:1.2;letter-spacing:-.04em;margin:16px 0;text-shadow:0 0 24px #9ed0ff20;}
#detail-dialog #dialog-body{font-size:14px;line-height:1.75;color:#aac0d5;}
#detail-dialog .button{width:100%;height:48px;margin-top:28px;}
#detail-dialog .dialog-close{top:14px;right:14px;border:1px solid #9ed0ff20;border-radius:50%;font-size:24px;line-height:1;transition:background .2s,rotate .3s;}
#detail-dialog .dialog-close:hover{background:#9ed0ff12;rotate:90deg;}
#detail-dialog.is-closing{animation:detail-exit .22s ease both;}
#detail-dialog.is-closing::backdrop{animation:detail-backdrop .22s ease reverse both;}
@keyframes detail-enter{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@keyframes detail-exit{to{opacity:0;transform:translateY(8px) scale(.985)}}
@keyframes detail-backdrop{from{opacity:0}to{opacity:1}}
@media(max-width:480px){#detail-dialog{padding:30px 24px;}}
@media(prefers-reduced-motion:reduce){#detail-dialog[open],#detail-dialog::backdrop{animation:none;}}