/* One name, from a quiet centre stage to its real place in the page. */
.hero h1{animation:none}
.hero-name,.name-ink{display:inline-block;white-space:nowrap;vertical-align:top}
.hero-name{position:relative;transform-origin:0 0}
.intro-curtain{display:none;position:fixed;inset:0;background:var(--paper);z-index:90;touch-action:pinch-zoom}
.intro-locked{overflow:hidden;overscroll-behavior:none;scroll-behavior:auto!important}
.intro-locked body{position:fixed;top:var(--intro-scroll-top,0px);left:0;width:var(--intro-page-width,100%);height:100%;overflow:hidden;overscroll-behavior:none;touch-action:pinch-zoom}
.intro-pending .intro-curtain,.intro-active .intro-curtain{display:block}
.intro-pending .hero-name{visibility:hidden}
.intro-active #hero-title{min-height:var(--intro-title-height)}
.intro-active .hero-name{position:fixed;left:0;top:0;visibility:visible;z-index:91;will-change:transform;touch-action:pinch-zoom}
.intro-active main{z-index:auto}
.intro-pending .footer-reveal,.intro-active .footer-reveal{visibility:hidden;pointer-events:none}
.intro-typed{display:none;position:absolute;left:0;top:0;white-space:nowrap}
.intro-active .name-ink{visibility:hidden}
.intro-active .intro-typed{display:block}
.intro-active.intro-written .name-ink{visibility:visible}
.intro-active.intro-written .intro-typed{display:none}
.intro-cursor{display:none;position:absolute;left:var(--typed-width,0px);top:.2em;width:.34em;height:.72em;margin-left:.025em;background:var(--blue);transform-origin:center bottom}
.intro-active .intro-cursor{display:block}
.intro-docking .intro-curtain{opacity:0;transition:opacity .7s cubic-bezier(.22,.68,.24,1)}
.intro-docking .intro-cursor{animation:none;opacity:0;transform:scaleY(.15);transition:opacity .12s,transform .2s}
.intro-active .header,.intro-active .hero-overline,.intro-active .hero-bottom,.intro-active .hero-star,.intro-active .work{opacity:0;transform:translateY(22px)}
.intro-docking .header,.intro-docking .hero-overline,.intro-docking .hero-bottom,.intro-docking .hero-star,.intro-docking .work{opacity:1;transform:translateY(0);transition:opacity .65s,transform .85s cubic-bezier(.16,1,.3,1)}
.intro-docking .header{transition-delay:.27s}
.intro-docking .hero-overline{transition-delay:.32s}
.intro-docking .hero-bottom{transition-delay:.39s}
.intro-docking .hero-star{transition-delay:.45s}
.intro-docking .work{transition-delay:.48s}

/* Project rows: the identity on the left, a generous window into the work. */
.project-grid{grid-template-columns:1fr;gap:22px}
.project{display:grid;grid-template-columns:.83fr 1.3fr;position:relative;isolation:isolate;border-radius:3px}
.project-copy{grid-column:1;grid-row:1;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:34px}
.project-copy .project-type{margin-bottom:0}
.project-copy .project-actions{margin-top:25px}
.project-visual{grid-column:2;grid-row:1;align-self:stretch;min-width:0}
.project-filo .project-visual,.project-savia .project-visual{aspect-ratio:auto;min-height:360px;padding:35px;display:flex;align-items:center;justify-content:center;border:0}
.project-filo .project-visual{background:#353830}
.project-savia .project-visual{background:#d3cce4}
.project-filo .project-capture,.project-savia .project-capture{height:auto;aspect-ratio:16/9;object-fit:contain;border-radius:3px;box-shadow:0 18px 30px -16px #1116;transform:rotate(-2deg)}
.project-savia .project-capture{transform:rotate(2deg)}
.project-title-line{display:block;margin:30px 0 0}
.project-title-line h3{font-size:76px;margin-bottom:16px}
.project-title-line>p{font-size:16px;line-height:1.55;opacity:.9}
.project-title-line>p br{display:none}
.project-filo .project-tags,.project-savia .project-tags{margin-top:23px}
.visual-arrow{width:48px;height:48px;right:18px;bottom:18px;overflow:hidden;box-shadow:0 2px 20px #0001}
.visual-arrow .icon{width:21px;height:21px}
.visual-arrow:after{content:'↗';position:absolute;font-size:27px;line-height:1;transform:translate(-36px,36px);opacity:0}
.project-link{position:relative}
.project-link:after{content:'';position:absolute;bottom:-5px;left:0;width:calc(100% - 34px);height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s}
@media(hover:hover){
  .project:has(.project-link:hover) .project-capture,.project:has(.preview-button:hover) .project-capture,.project .project-visual:hover .project-capture{transform:rotate(0) scale(1.015)}
  .project:has(.project-link:hover) .preview-window,.project:has(.preview-button:hover) .preview-window,.brisa-visual:hover .preview-window{transform:rotate(-1deg) translateY(-5px)}
  .project:has(a:hover) .visual-arrow .icon{transform:translate(36px,-36px);opacity:0;transition:transform .4s,opacity .25s}
  .project:has(a:hover) .visual-arrow:after{transform:translate(0,0);opacity:1;transition:transform .4s,opacity .3s}
  .project-link:hover:after{transform:scaleX(1)}
}
.project .project-capture{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.project:has(:focus-visible){outline:2px solid var(--blue);outline-offset:5px}
.reveal-ready{opacity:0;transform:translate3d(0,34px,0);transition:opacity .75s,transform 1s cubic-bezier(.16,1,.3,1)}
.reveal-ready.is-revealed{opacity:1;transform:none}
.project.reveal-ready .project-capture{transform:translate3d(0,28px,0) rotate(3deg) scale(.97)}
.project.reveal-ready.is-revealed .project-capture{transform:rotate(-2deg);transition-delay:.12s}
.project-savia.reveal-ready.is-revealed .project-capture{transform:rotate(2deg)}
@media(hover:hover){.project.is-revealed:has(a:hover) .project-capture{transform:rotate(0) scale(1.015)}}
.project-brisa.reveal-ready .project-capture,.project-brisa.reveal-ready.is-revealed .project-capture{transform:none}
.project.reveal-ready .project-copy>*{opacity:0;transform:translateY(12px);transition:opacity .7s,transform .8s cubic-bezier(.16,1,.3,1)}
.project.reveal-ready.is-revealed .project-copy>*{opacity:1;transform:none;transition-delay:.12s}
.project.reveal-ready.is-revealed .project-copy>h3,.project.reveal-ready.is-revealed .project-copy>.project-title-line{transition-delay:.19s}
.project.reveal-ready.is-revealed .project-copy>.project-tags{transition-delay:.26s}
.project.reveal-ready.is-revealed .project-copy>.project-actions{transition-delay:.32s}
.process li.reveal-ready{transition-delay:calc(var(--reveal-index,0)*80ms)}
.detail-points>div.reveal-ready{transition-delay:calc(var(--reveal-index,0)*70ms)}
.contact-star{transform-origin:50% 50%}
.contact-star.star-ready{opacity:0;transform:rotate(-100deg) scale(.45)}
.contact-star.star-arriving{animation:contact-arrive 1.2s cubic-bezier(.16,1,.3,1) both;will-change:transform,opacity}
@keyframes contact-arrive{from{opacity:0;transform:rotate(-100deg) scale(.45)}to{opacity:1;transform:rotate(0) scale(1)}}

/* Fold the display type into place as the reader scrolls, inspired by Codrops. */
.kinetic-word{display:inline-block;white-space:nowrap;vertical-align:top;perspective:500px}
.kinetic-letter{--letter-progress:clamp(0,calc((var(--type-progress,1) - var(--char-index)*.018)*1.9),1);display:inline-block;opacity:var(--letter-progress);transform:translate3d(0,calc((1 - var(--letter-progress))*.8em),0) rotateX(calc((1 - var(--letter-progress))*-88deg));transform-origin:50% 100%;backface-visibility:hidden}
.kinetic-moving .kinetic-letter{will-change:transform,opacity}
.kinetic-entry.kinetic-entered .kinetic-letter{opacity:1;transform:none}

/* The opaque page lifts off a sticky contact/footer layer. No scroll hijack. */
.header,main{position:relative;z-index:1;background:var(--paper)}
main{border-radius:0 0 22px 22px;box-shadow:0 25px 50px -25px #101b4e40}
.footer-reveal{position:relative;z-index:0;background:var(--blue);color:var(--paper)}
.footer-reveal-ready .footer-reveal{position:sticky;bottom:0}
.footer-reveal .contact-section{opacity:1;transform:none}
.footer-reveal .footer{color:var(--paper);border-top:1px solid #ffffff35}
.footer-reveal .footer>span,.footer-reveal .footer button{color:#e1e5ff}
.footer-reveal .footer a:hover,.footer-reveal .footer button:hover{color:var(--lime)}
@media(max-width:1000px){
  .project-copy{padding:27px}
  .project-filo .project-visual,.project-savia .project-visual{padding:24px;min-height:345px}
  .project-title-line h3{font-size:64px}
  .project-title-line>p{font-size:14px}
}
@media(max-width:700px){
  .hero-overline{align-items:center;gap:14px}
  .project{display:flex;flex-direction:column}
  .project-copy{padding:23px}
  .project-visual{order:-1}
  .project-filo .project-visual,.project-savia .project-visual{padding:24px;min-height:0;aspect-ratio:1.52}
  .project-title-line{margin-top:20px}
  .project-title-line h3{font-size:54px;margin-bottom:12px}
  .project-title-line>p{font-size:14px}
  .project-copy .project-actions{margin-top:20px}
  .project-filo .project-tags,.project-savia .project-tags{margin-top:17px}
  .visual-arrow{width:38px;height:38px;right:13px;bottom:13px}
  .visual-arrow .icon{width:17px;height:17px}
  .reveal-ready{transform:translate3d(0,24px,0)}
}
@media(max-width:380px){.project-copy{padding:20px}}
.no-motion .reveal-ready,.no-motion .project.reveal-ready .project-copy>*{opacity:1;transform:none}
.no-motion .intro-curtain,.no-motion .intro-cursor,.no-motion .intro-typed{display:none!important}
.no-motion .hero-name{visibility:visible!important;transform:none!important}
.no-motion .name-ink{visibility:visible!important}
.no-motion .kinetic-letter{opacity:1;transform:none}
.no-motion .contact-star{opacity:1;transform:none}
.no-motion .footer-reveal{position:relative}
@media(prefers-reduced-motion:reduce){
  .intro-curtain,.intro-cursor,.intro-typed{display:none!important}
  .hero-name{visibility:visible!important;transform:none!important}
  .name-ink{visibility:visible!important}
  .reveal-ready,.project.reveal-ready .project-copy>*{opacity:1;transform:none}
  .kinetic-letter{opacity:1;transform:none}
  .contact-star{opacity:1;transform:none}
  .footer-reveal{position:relative!important}
}