/* Motion adapted to Danilo's portfolio from the observed Ally Films interactions. */
:root{--ease-out:cubic-bezier(.22,1,.36,1)}
.hero-line{display:block;white-space:nowrap;line-height:1.12;overflow:visible}
.hero-line+.hero-line{margin-top:.035em}
.word-window{display:inline-block;height:1.12em;width:4.65em;overflow:hidden;vertical-align:bottom;color:var(--accent)}
.word-track{display:flex;flex-direction:column;animation:word-cycle 6.6s var(--ease-out) 1.2s infinite}
.word-track>span{display:block;height:1.12em;flex:none}
@keyframes word-cycle{0%,24.24%{transform:translateY(0)}33.33%,57.57%{transform:translateY(-25%)}66.67%,90.91%{transform:translateY(-50%)}100%{transform:translateY(-75%)}}
@keyframes enter-up{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes image-settle{from{transform:scale(1.045)}to{transform:scale(1)}}
@keyframes veil-open{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes veil-close{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes ticker{to{transform:translateX(-50%)}}
.motion-ready .hero-photo img{animation:image-settle 1.6s var(--ease-out) both}
.motion-ready .hero-copy .eyebrow{animation:enter-up .8s var(--ease-out) .15s both}
.motion-ready .hero-line{animation:enter-up 1s var(--ease-out) .28s both}
.motion-ready .hero-line+.hero-line{animation-delay:.4s}
.motion-ready .hero-explore{animation:enter-up .8s var(--ease-out) .6s both}
.motion-ready .hero-categories a{animation:enter-up .7s var(--ease-out) .45s both}
.motion-ready .hero-categories a:nth-child(2){animation-delay:.53s}
.motion-ready .hero-categories a:nth-child(3){animation-delay:.61s}
.motion-ready .hero-feature{animation:enter-up 1s var(--ease-out) .7s both}
.motion-ready [data-reveal]{opacity:0;filter:blur(10px);transform:translateY(10px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),filter .6s var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.motion-ready [data-reveal].is-visible{opacity:1;filter:blur(0);transform:translateY(0)}
.roll-label{display:inline-grid;overflow:hidden;vertical-align:middle}
.roll-label>span{grid-area:1/1;transition:transform .45s var(--ease-out);white-space:nowrap}
.roll-label>span+span{transform:translateY(115%)}
a:hover .roll-label>span:first-child,button:hover .roll-label>span:first-child{transform:translateY(-115%)}
a:hover .roll-label>span+span,button:hover .roll-label>span+span{transform:translateY(0)}
.hero-explore svg,.hero-categories svg,.outline-button svg,.contact-cta svg{transition:transform .45s var(--ease-out)}
.hero-explore:hover svg,.hero-categories a:hover svg,.outline-button:hover svg{transform:translateX(5px)}
.contact-cta:hover svg{transform:translate(4px,-4px)}
.film-image img,.archive-image img{transition:transform .8s var(--ease-out),filter .8s var(--ease-out)}
.film-card:hover .film-image img,.archive-card:hover .archive-image img{transform:scale(1.055)}
.film-play,.archive-open{transition:background .35s,transform .45s var(--ease-out),color .35s}
.film-card:hover .film-play{transform:scale(1.12);background:var(--accent);color:var(--bg)}
.menu-dialog{padding:24px 0 32px;overflow-x:hidden;background:#06151b;max-width:100vw}
.menu-dialog[open]{animation:veil-open .6s var(--ease-out) both}
.menu-dialog.is-closing{animation:veil-close .35s var(--ease-out) both}
.menu-top{padding:0 40px}.menu-top>span{font-size:12px;color:var(--muted)}
.menu-top button{background:var(--accent);color:var(--bg);border:0;padding:13px 18px;font-size:11px}
.menu-dialog nav{margin:65px 0 0;display:block}
.menu-dialog nav>a{position:relative;display:flex;align-items:center;justify-content:center;gap:15px;min-height:81px;padding:10px 30px;border-bottom:1px solid var(--line);overflow:hidden;font-size:38px;line-height:1.4;font-weight:400;transition:background .3s,color .3s}
.menu-dialog nav>a .menu-number{font-size:10px;color:var(--muted);align-self:center}
.menu-dialog nav>a .menu-label{transition:opacity .2s}
.menu-dialog nav>a .menu-ticker{display:flex;position:absolute;left:0;top:0;height:100%;width:max-content;align-items:center;gap:48px;font-size:40px;opacity:0;pointer-events:none;animation:ticker 12s linear infinite;animation-play-state:paused}
.menu-ticker>b{font-weight:400;color:#779da9}
.menu-dialog nav>a:hover{background:var(--accent);color:var(--bg)}
.menu-dialog nav>a:hover .menu-label,.menu-dialog nav>a:hover .menu-number{opacity:0}
.menu-dialog nav>a:hover .menu-ticker{opacity:1;animation-play-state:running}
.menu-dialog[open] nav>a{animation:enter-up .65s var(--ease-out) both}
.menu-dialog[open] nav>a:nth-child(1){animation-delay:.12s}.menu-dialog[open] nav>a:nth-child(2){animation-delay:.18s}.menu-dialog[open] nav>a:nth-child(3){animation-delay:.24s}.menu-dialog[open] nav>a:nth-child(4){animation-delay:.30s}.menu-dialog[open] nav>a:nth-child(5){animation-delay:.36s}
.menu-socials{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;padding:32px 24px 0;margin-top:auto}.menu-socials>a{font-size:12px}.menu-socials>a svg{width:15px;height:15px}.menu-email{overflow-wrap:anywhere}
.contact-details{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:25px}.contact-email a{overflow-wrap:anywhere}
.motion-toggle{border:0;background:none;color:var(--muted);padding:0;font:inherit}
.motion-toggle:hover{color:var(--ink)}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation:none!important;transition:none!important}
.motion-paused [data-reveal]{opacity:1!important;filter:none!important;transform:none!important}
.motion-paused .word-track{transform:translateY(0)!important}
.motion-paused .menu-dialog nav>a:hover .menu-label,.motion-paused .menu-dialog nav>a:hover .menu-number{opacity:1}
.motion-paused .menu-dialog nav>a .menu-ticker{display:none}
@media(max-width:1050px){.contact-details{grid-template-columns:1.5fr 1fr;row-gap:28px}}
@media(max-width:700px){h1{font-size:clamp(34px,10.7vw,68px)}.word-window{width:4.65em}.menu-top{padding:0 20px}.menu-dialog nav{margin-top:40px}.menu-dialog nav>a{font-size:30px;min-height:65px}.menu-dialog nav>a .menu-ticker{font-size:32px;gap:28px}.menu-socials{gap:20px;padding-top:25px}.menu-socials>a{font-size:10px}.menu-socials .menu-email{flex-basis:100%;justify-content:center}.contact-details{grid-template-columns:1fr 1fr}.contact-email{grid-column:1/-1}.site-footer>div{flex-wrap:wrap;row-gap:12px}}
@media(prefers-reduced-motion:reduce){.word-track{animation:none}.motion-ready [data-reveal]{opacity:1;filter:none;transform:none}.menu-dialog[open],.menu-dialog.is-closing{animation:none}.menu-dialog nav>a:hover .menu-label,.menu-dialog nav>a:hover .menu-number{opacity:1}.menu-dialog nav>a .menu-ticker{display:none}}

.filter-bar{position:sticky;top:0;z-index:6;background:#06151bf2;backdrop-filter:blur(12px)}
.hero-line{color:var(--ink)}
.menu-dialog[open]{display:flex;flex-direction:column}
.menu-dialog nav{width:100%;max-width:none}
.menu-dialog nav>a .menu-label{font-size:inherit;color:inherit;letter-spacing:inherit}
/* Scroll scene: the work stays in view while its layers move at different depths. */
.hero-full{height:170svh;min-height:1100px;max-height:none;overflow:visible;background:var(--bg)}
.hero-stage{position:sticky;top:0;height:100svh;min-height:680px;max-height:1150px;overflow:hidden;isolation:isolate}
.hero-artworks{position:absolute;inset:-13% -7% -13% 26%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;transform:rotate(-7deg);transform-origin:50% 50%;will-change:transform}
.hero-artwork{position:relative;overflow:hidden;transform:translate3d(0,var(--drift,0px),0);will-change:transform;background:#102a34}
.hero-artwork:nth-child(odd){margin-top:110px;margin-bottom:0}.hero-artwork:nth-child(even){margin-top:0;margin-bottom:110px}
.hero-artwork img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.8);transform:scale(1.06)}
.hero-artwork::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#06151b22,transparent 35%,#06151bbd)}
.hero-artwork>span{position:absolute;bottom:65px;left:20px;right:15px;z-index:1;font-size:10px;letter-spacing:.07em;text-transform:uppercase;line-height:1.5;color:#e3eef1}
.hero-shade{background:linear-gradient(90deg,#06151b 0%,#06151bf0 18%,#06151b8c 44%,#06151b0d 72%),linear-gradient(0deg,#06151b 0%,#06151b33 36%,#06151b29 100%)}
.hero-copy{will-change:transform,opacity}
.hero-categories{z-index:1}.hero-feature{z-index:1;background:#06151b88}
.about-portrait{position:relative;height:clamp(380px,48vw,650px);overflow:hidden;margin:28px 0 60px;background:var(--panel)}
.about-portrait picture{display:block;height:100%}
.about-portrait img{height:120%;position:relative;top:-10%;object-fit:cover;object-position:75% 45%;transform:translate3d(0,var(--portrait-drift,0px),0);will-change:transform}
.about-portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#06151b99,transparent 55%)}
.about-portrait>span{position:absolute;z-index:1;bottom:30px;left:32px;font-size:27px;line-height:1.4;letter-spacing:-.035em}.about-portrait small{font-size:10px;letter-spacing:.06em;color:var(--accent)}
.motion-paused .hero-full{height:100svh;min-height:680px}
.motion-paused .hero-artwork,.motion-paused .hero-copy,.motion-paused .about-portrait img{transform:none!important;opacity:1!important}
@media(max-width:1050px) and (min-width:701px){.hero-artworks{left:18%;right:-22%}}
@media(max-width:700px){.hero-full{height:145svh;min-height:1040px}.hero-stage{min-height:740px;max-height:none}.hero-artworks{inset:-2% -27% 25% -22%;gap:10px;transform:rotate(-7deg);grid-template-columns:repeat(4,minmax(0,1fr))}.hero-artwork:nth-child(odd){margin-top:40px}.hero-artwork:nth-child(even){margin-bottom:40px}.hero-artwork>span{display:none}.hero-shade{background:linear-gradient(0deg,#06151b 0%,#06151b 17%,#06151bde 35%,#06151b14 65%,#06151b45 100%)}.about-portrait{height:500px;margin:25px 0 30px}.about-portrait img{object-position:50% 40%}.about-portrait>span{left:20px;bottom:22px;font-size:22px}.about-portrait small{font-size:8px}.motion-paused .hero-full{min-height:740px}}
@media(prefers-reduced-motion:reduce){.hero-full{height:100svh;min-height:740px}.hero-artwork,.hero-copy,.about-portrait img{transform:none!important;opacity:1!important}}