/* Separate image, text and decorative lines without changing the source artwork. */
.hero-motion{--hero-parallax:0px;background:#050505}
.hero-motion .hero-art{background:none;border:0;box-shadow:none}
.hero-image-window{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 3%);mask-image:linear-gradient(#000 0% 66%,transparent 71%);-webkit-mask-image:linear-gradient(#000 0% 66%,transparent 71%)}
.hero-image{position:absolute;inset:0;background:url("./homepage-assets/hero-desktop-v3.png") center/100% 100% no-repeat;clip-path:inset(0 0 29%);transform:translate3d(0,var(--hero-parallax),0);will-change:transform;animation:hero-image-enter 5s cubic-bezier(.18,.32,.32,1) both}
.hero-edge{position:absolute;z-index:2;top:0;bottom:0;width:1px;background:linear-gradient(#ba7853,#f1c3a0 45%,#b57653);transform-origin:top;animation:hero-line-enter 6s cubic-bezier(.22,.28,.3,1) .05s both;pointer-events:none}
.hero-edge-left{left:2.4%}
.hero-edge-right{right:2.4%;animation-delay:.2s}
.hero-mobile-brand{display:none}
.hero-contacts{position:absolute;z-index:4;top:71.6%;left:50%;width:30%;height:15%;transform:translateX(-32%)}
.hero-contacts a{display:flex;align-items:center;gap:6%;height:33.333%;border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,#b7805f80,transparent) 1;color:#edb18f;font:300 clamp(12px,1vw,17px)/1.2 Manrope,Arial,sans-serif;letter-spacing:.015em;white-space:nowrap}
.hero-contacts a:last-child{border-bottom:1px solid transparent}
.hero-contact-icon{display:flex;flex:none;align-items:center;justify-content:center;width:clamp(20px,2vw,32px);height:clamp(20px,2vw,32px);border:1px solid #edb18f;border-radius:50%}
.hero-contact-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round}
.hero-motion .hero-scroll{bottom:5.7%;width:36px;height:36px;color:#edb18f;border:1px solid #edb18f}
.hero-scroll span{display:block;font:24px/1 Arial,sans-serif;transform:translateY(-3px);animation:hero-arrow-hint 5.5s ease-in-out 2.8s infinite}
.hero-motion .tagline-veil{display:none}
.hero-mobile-brand,.hero-motion .hero-tagline,.hero-motion .hero-contacts,.site-header .header-brand,.site-header .menu-button{animation:hero-image-enter 4.5s cubic-bezier(.18,.32,.32,1) .05s both}
.hero-motion .hero-tagline{transform:translate(-50%,-50%) translate3d(0,var(--hero-text-parallax,0px),0)}
.hero-motion.has-scrolled .hero-scroll span{animation:none}
@keyframes hero-image-enter{from{opacity:0}to{opacity:1}}
@keyframes hero-line-enter{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes hero-arrow-hint{0%,100%{transform:translateY(-3px)}50%{transform:translateY(2px)}}
@media(max-width:900px){
  .hero-motion{min-height:0;aspect-ratio:auto;height:calc(100vw * 1536 / 709 - 8vw)}
  .hero-motion .hero-art{inset:0;width:100%;transform:none}
  .hero-image-window{clip-path:inset(0 6.2%);mask-image:linear-gradient(transparent 0% 15%,#000 19% 71%,transparent 74%);-webkit-mask-image:linear-gradient(transparent 0% 15%,#000 19% 71%,transparent 74%)}
  .hero-image{inset:-8vw 0 auto;height:calc(100% + 8vw);background-image:url("./homepage-assets/hero-reference.jpeg");clip-path:inset(19% 0 26%)}
  .hero-edge-left{left:6.2%}
  .hero-edge-right{right:6.2%}
  .hero-mobile-brand{position:absolute;z-index:3;top:2.5%;left:15.8%;display:block;width:53%;line-height:0}
  .hero-mobile-brand img{display:block;width:100%;height:auto}
  .hero-contacts{top:74.2%;left:21.7%;width:61%;height:auto;transform:none}
  .hero-contacts a{height:10.45vw;min-height:40px;font-size:3.5vw;gap:7%}
  .hero-contact-icon{width:6.6vw;height:6.6vw}
  .hero-contact-icon svg{width:3.6vw;height:3.6vw}
  .hero-motion .hero-scroll{bottom:2.6%;width:6.3vw;height:6.3vw}
  .hero-scroll span{font-size:5vw}
  .site-header:not(.is-compact){height:20vw;background:none}
  .site-header:not(.is-compact):after{display:none}
  .site-header:not(.is-compact){pointer-events:none}
  .site-header:not(.is-compact) .menu-button{top:calc(15vw - 22px);right:12.4vw;pointer-events:auto}
}
/* A slightly more pronounced entrance and scroll hint on desktop only. */
@media(min-width:901px){
  .hero-edge{width:1.5px;box-shadow:0 0 8px #edb18f55}
  .hero-tagline{transform:translate(-50%,-50%) translate3d(0,var(--hero-text-parallax,0px),0)}
  .hero-scroll span{animation-name:hero-arrow-hint-desktop}
}
@keyframes hero-arrow-hint-desktop{0%,100%{transform:translateY(-6px)}50%{transform:translateY(1px)}}
/* Light follows the existing ribbon; both overlays share its image/parallax coordinates. */
.hero-ribbon-light{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-ribbon-mobile{display:none}
.ribbon-flow{opacity:0;animation:ribbon-light-flow 9.2s linear .65s infinite}
.ribbon-glint{opacity:0;animation:ribbon-discreet-glint-desktop 9.2s ease-in-out .65s infinite}
@keyframes ribbon-light-flow{
  0%{opacity:0}
  15%{opacity:.52}
  88%{opacity:.52}
  100%{opacity:0}
}
/* Peaks match the measured travel distance to the brightest ribbon point. */
@keyframes ribbon-discreet-glint-desktop{
  0%,80.2%,86.2%,100%{opacity:0}
  82.7%{opacity:.6}
}
@keyframes ribbon-discreet-glint-mobile{
  0%,69.9%,75.9%,100%{opacity:0}
  72.4%{opacity:.6}
}
@media(max-width:900px){
  .hero-ribbon-desktop{display:none}
  .hero-ribbon-mobile{display:block}
  .hero-ribbon-mobile .ribbon-glint{animation-name:ribbon-discreet-glint-mobile}
}
@media(prefers-reduced-motion:reduce){
  .hero-ribbon-light{display:none}
  .ribbon-flow,.ribbon-glint{animation:none}
  .hero-image{animation:none;transform:none;will-change:auto}
  .hero-edge,.hero-scroll span,.hero-mobile-brand,.hero-motion .hero-tagline,.hero-motion .hero-contacts,.site-header .header-brand,.site-header .menu-button{animation:none}
  .hero-motion .hero-tagline{transform:translate(-50%,-50%)}
}