.hero { height: min(700px, calc(100svh - 190px)); min-height: 450px; }
#fish-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; filter: drop-shadow(0 0 3px rgba(207,255,94,.08)); }
.hero h1, .hero h1 span, .hero-bottom p { transition: transform .8s cubic-bezier(.22,1,.36,1), text-shadow .8s ease, opacity .8s ease; }
.hero.fish-near-title h1 { transform: translateX(-5px); }
.hero.fish-near-title h1 span { display: inline-block; transform: translateX(9px); text-shadow: 7px 0 0 rgba(207,255,94,.12); }
.hero.fish-near-title .hero-bottom p { transform: translateX(-3px); opacity: .86; }
.works { padding-top: 65px; }
.work-item.live { position: relative; overflow: hidden; transition: background .35s ease; }
.work-item.live::before { content: ''; position: absolute; left: 0; top: 32%; bottom: 32%; width: 3px; background: #709f27; transform: scaleY(0); transition: transform .45s cubic-bezier(.22,1,.36,1); }
.work-item.live::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #9ac936; transform: scaleX(0); transform-origin: left; transition: transform .55s cubic-bezier(.22,1,.36,1); }
.work-item.live:hover { background: #edf2ec; color: #17271e; padding: 24px 18px; }
.work-item.live:hover::before, .work-item.live:hover::after { transform: scale(1); }
.work-item.live .work-name { transition: transform .45s cubic-bezier(.22,1,.36,1); }
.work-item.live:hover .work-name { transform: translateX(8px); }
.work-item.live:hover .work-arrow { color: #477100; transform: translate(3px,-3px); }
.work-arrow { transition: transform .35s,color .35s; }
@media (prefers-reduced-motion: reduce) { .work-item.live::before, .work-item.live::after { transition: none; } }
@media (max-width: 600px) {
  .hero { height: min(680px, calc(100svh - 92px)); min-height: 520px; }
  .hero-content { top: 43%; transform: translateY(-50%); }
  .hero-overline { margin-bottom: 14px; }
  .hero-bottom { margin-top: 205px; }
  .works { padding-top: 55px; }
  .work-item.live:hover { padding: 15px 0; }
  .hero.fish-near-title h1, .hero.fish-near-title h1 span, .hero.fish-near-title .hero-bottom p { transform: none; text-shadow: none; opacity: 1; }
}