/*
 * Editorial motion layer inspired by the strengths of nakata.design:
 * oversized typography, confident rhythm, and work presented as a stage.
 * The site's own underwater palette, 3D room, and content remain the identity.
 */
:root{
  --pulse:#ff4fc8;
  --electric:#5d7cff;
}

.hero-signature{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  opacity:.72;
  -webkit-mask-image:linear-gradient(180deg,transparent 2%,#000 16%,#000 84%,transparent 98%);
  mask-image:linear-gradient(180deg,transparent 2%,#000 16%,#000 84%,transparent 98%);
}
.hero-signature__line{
  position:absolute;
  left:0;
  display:flex;
  width:max-content;
  white-space:nowrap;
  font-family:var(--sans);
  font-size:clamp(7.5rem,17vw,19rem);
  font-weight:900;
  line-height:.72;
  letter-spacing:-.075em;
  text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1px rgba(188,255,245,.22);
  text-shadow:0 0 70px rgba(70,230,211,.09);
  animation:signature-drift 26s linear infinite;
  will-change:transform;
}
.hero-signature__line span{display:block;padding-right:.22em}
.hero-signature.is-motion-paused .hero-signature__line{animation-play-state:paused}
.hero-signature__line--one{top:24%}
.hero-signature__line--two{
  right:0;
  bottom:12%;
  left:auto;
  color:rgba(255,79,200,.055);
  -webkit-text-stroke:1px rgba(255,79,200,.2);
  animation-name:signature-drift-reverse;
  animation-duration:31s;
}
.hero-signature__stamp{
  position:absolute;
  right:clamp(18px,3.5vw,64px);
  top:50%;
  display:flex;
  align-items:center;
  gap:10px;
  transform:rotate(90deg) translateX(50%);
  transform-origin:right center;
  color:rgba(235,251,249,.55);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.28em;
  white-space:nowrap;
}
.hero-signature__stamp::before{content:"";width:48px;height:1px;background:var(--pulse)}
@keyframes signature-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes signature-drift-reverse{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}

#house{z-index:1}
.heroscrim{z-index:2}
.herotext{z-index:3}
.heroedge{z-index:4}

/* One clear electric accent, used sparingly over the established teal. */
.herotext .k{background:linear-gradient(90deg,var(--teal),#f2f7ff,var(--pulse));background-clip:text;-webkit-background-clip:text;color:transparent}
.hero-focus i{background:linear-gradient(90deg,transparent,var(--pulse),transparent)}

#works{isolation:isolate;overflow:hidden}
#works>.wrap{position:relative;z-index:2}
.works-mast{
  position:absolute;
  z-index:0;
  top:5%;
  left:-.04em;
  width:100%;
  overflow:hidden;
  color:transparent;
  -webkit-text-stroke:1px rgba(93,124,255,.2);
  font-family:var(--sans);
  font-size:clamp(8rem,19vw,21rem);
  font-weight:900;
  line-height:.8;
  letter-spacing:-.09em;
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
}
.award-row::before{background:linear-gradient(90deg,rgba(70,230,211,.14),rgba(93,124,255,.12),rgba(255,79,200,.08),transparent)}
.award-arrow{font-size:.58rem;font-weight:800;letter-spacing:.16em;color:var(--teal)}

@media(min-width:900px){
  .award-row:first-child{
    min-height:230px;
    grid-template-columns:90px minmax(0,1fr) minmax(260px,330px) 56px;
    background:linear-gradient(110deg,rgba(70,230,211,.06),rgba(93,124,255,.04) 55%,rgba(255,79,200,.035));
  }
  .award-row:first-child .award-copy b{font-size:clamp(2rem,3vw,3.7rem);line-height:1.03}
  .award-row:first-child figure{width:100%;height:176px}
}

/* Site-specific angular controls; labels and non-interactive decoration stay distinct. */
.more,.profile-socials a,.nbmore,.ndet a.open,.openlink,.cform button,.flinks a{
  border-radius:2px!important;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
}
.chip{border-radius:2px!important}

@media(max-width:680px){
  .hero-signature{opacity:.48}
  .hero-signature__line{font-size:34vw;line-height:.78}
  .hero-signature__line--one{top:29%}
  .hero-signature__line--two{bottom:19%}
  .hero-signature__stamp{right:15px;font-size:.48rem}
  .works-mast{top:8%;font-size:34vw}
}

@media(prefers-reduced-motion:reduce){
  .hero-signature__line{animation:none!important;transform:translateX(-8%)!important}
  .hero-signature__line--two{transform:translateX(-32%)!important}
}