/* Mascar motion: oversized identity, curtain exit, sequenced editorial reveals. */
:root{--motion-ease:cubic-bezier(.22,1,.36,1)}
.brand-intro{display:none}
.intro-enabled .brand-intro{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;justify-content:space-between;background:#0a0a0a;color:var(--lime);padding:32px 4vw;overflow:hidden;animation:intro-curtain .9s 2s cubic-bezier(.76,0,.24,1) both}
.intro-meta,.intro-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;letter-spacing:.13em}
.intro-meta{animation:intro-detail .7s .2s both}
.intro-logo-window{width:100%;overflow:hidden;padding:4vw 0}
.intro-wordmark{display:block;width:100%;height:auto;filter:grayscale(1) contrast(5) invert(1);mix-blend-mode:screen;animation:intro-logo 1.45s var(--motion-ease) both}
.intro-bottom{color:#bdbdb7}
.intro-skip{background:none;color:inherit;border:0;padding:14px 0;min-height:44px;font-size:14px;cursor:pointer;letter-spacing:0}
.intro-skip:hover{color:var(--lime)}
.intro-skip:focus-visible{outline-color:var(--lime)}
.intro-line{position:absolute;bottom:0;left:0;width:100%;height:4px;background:var(--lime);transform-origin:left;animation:intro-line 2s cubic-bezier(.4,0,.2,1) both}
@keyframes intro-logo{0%{opacity:0;transform:translateY(115%) rotate(5deg) scale(1.12)}65%{opacity:1}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes intro-detail{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes intro-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes intro-curtain{0%{transform:translateY(0);visibility:visible}99%{visibility:visible}100%{transform:translateY(-101%);visibility:hidden}}
@keyframes hero-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:translateY(0)}}
@keyframes mark-arrive{0%{opacity:0;transform:translateY(48px) rotate(-22deg) scale(.62)}65%{opacity:1;transform:translateY(-8px) rotate(4deg) scale(1.035)}100%{opacity:1;transform:none}}
@keyframes lime-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes menu-enter{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:no-preference){
  .motion-ready:not(.hero-entered) .hero-copy>*,.motion-ready:not(.hero-entered) .poster-mark{opacity:0}
  .hero-entered .hero-copy>*{animation:hero-rise .9s var(--motion-ease) both}
  .hero-entered .hero-copy>:nth-child(2){animation-delay:.08s}
  .hero-entered .hero-copy>:nth-child(3){animation-delay:.16s}
  .hero-entered .hero-copy>:nth-child(4){animation-delay:.24s}
  .hero-entered .hero-copy>:nth-child(5){animation-delay:.32s}
  .hero-entered .poster-mark{animation:mark-arrive 1.4s .18s var(--motion-ease) both;transform-origin:center}
  .hero-entered .highlight:after{transform-origin:left;animation:lime-draw .8s .55s var(--motion-ease) both}
  .motion-item{transition:opacity .75s var(--motion-ease),transform .9s var(--motion-ease);transition-delay:var(--reveal-delay,0ms)}
  .motion-item.motion-away{opacity:0;transform:translateY(44px) scale(.98);transition-delay:0ms;transition-duration:.35s}
  .motion-item.motion-away.motion-above{transform:translateY(-24px) scale(.98)}
  .motion-item:focus-within{opacity:1;transform:none;transition-delay:0ms}
  .motion-item.is-visible .underlined{animation:hero-rise .8s .12s var(--motion-ease) both}
  .brand-poster{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .55s var(--motion-ease);will-change:auto}
  .poster-mark image{transform:translate(var(--mark-x,0px),var(--mark-y,0px));transition:transform .7s var(--motion-ease)}
  .mini-asterisk{transition:transform .8s var(--motion-ease)}
  .hero-visual:hover .mini-asterisk{transform:rotate(180deg)}
  .service-icon{transition:transform .65s var(--motion-ease)}
  .service:hover .service-icon{transform:translateY(-7px) rotate(-8deg)}
  .project-preview .project-canvas strong,.project-canvas:after,.project-faux-button{transition:transform .8s var(--motion-ease)}
  .project-preview:hover .project-canvas strong{transform:translateY(-7px)}
  .project-preview:hover .project-canvas:after{transform:rotate(12deg) scale(1.12)}
  .project-preview:hover .project-faux-button{transform:translateX(8px)}
  .button{transition:background .25s,transform .45s var(--motion-ease),box-shadow .45s var(--motion-ease)}
  .button:hover{transform:translateY(-4px);box-shadow:0 10px 24px #1010101a}
  .button:active{transform:translateY(-1px) scale(.98)}
  .contact-circle{transition:transform .65s var(--motion-ease)}
  .contact-circle:hover{transform:rotate(12deg) scale(1.06)}
  .footer-wordmark{transition:transform 1s var(--motion-ease)}
  .footer-wordmark:hover{transform:scale(.97)}
  .mobile-nav:not([hidden]){animation:menu-enter .3s var(--motion-ease) both}
}
@media(max-width:640px){.intro-enabled .brand-intro{padding:24px 5vw}.intro-meta,.intro-bottom{font-size:12px;letter-spacing:.07em}.intro-skip{font-size:14px}.intro-logo-window{padding-block:12vw}}
@media(prefers-reduced-motion:reduce){.brand-intro,.intro-enabled .brand-intro{display:none!important}.motion-item,.motion-item.motion-away,.motion-ready .hero-copy>*,.motion-ready .poster-mark{opacity:1!important;transform:none!important}.brand-poster,.poster-mark image{transform:none!important}}