/* Three.js-inspired depth, recast in the blog's quiet sky-and-sea palette. */
.hero { isolation: isolate }

.hero-orbits {
  position: absolute;
  z-index: 0;
  right: clamp(3%, 10vw, 14%);
  top: 50%;
  width: min(46vw, 550px);
  aspect-ratio: 1;
  transform: translateY(-48%) rotate(-18deg);
  border: 1px solid rgba(91, 158, 173, .38);
  border-radius: 50%;
  box-shadow: inset 0 0 72px rgba(168, 223, 230, .34), 0 0 68px rgba(167, 220, 228, .24);
  pointer-events: none;
  animation: orbit-drift 15s ease-in-out infinite;
}

.hero-orbits::before,
.hero-orbits::after,
.hero-orbits i {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 50%;
}

.hero-orbits::before { transform: rotateX(66deg) scaleX(1.12) }
.hero-orbits::after { inset: 28%; border-color: rgba(70, 139, 155, .3); transform: rotate(48deg) }
.hero-orbits i:nth-child(1) { inset: -8%; border-color: rgba(109, 181, 195, .28); transform: rotateX(64deg) }
.hero-orbits i:nth-child(2) { inset: 43%; background: rgba(255, 255, 255, .86); border: 0; box-shadow: 0 0 20px 6px rgba(255, 255, 255, .58) }
.hero-orbits i:nth-child(3) { inset: 5% 74% 75% 16%; background: #79b7c4; border: 0; box-shadow: 0 0 18px 5px rgba(121, 183, 196, .35) }

.hero-orbits b {
  position: absolute;
  right: 9%;
  bottom: 10%;
  color: rgba(40, 82, 95, .65);
  font: 10px "DM Mono", monospace;
  letter-spacing: .12em;
  transform: rotate(18deg)
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(92, 157, 171, .065) 1px, transparent 1px), linear-gradient(90deg, rgba(92, 157, 171, .065) 1px, transparent 1px);
  background-size: 78px 78px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 50%, rgba(0, 0, 0, .45) 75%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0 50%, rgba(0, 0, 0, .45) 75%, transparent 100%);
}

.hero-copy { z-index: 2 }

/* Clearly visible, wind-like movement behind the hero title. */
.hero-breeze { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }

.breeze-streak {
  position: absolute;
  width: min(62vw, 980px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05) 12%, rgba(255, 255, 255, .82) 50%, rgba(122, 191, 202, .5) 72%, transparent);
  box-shadow: 0 0 15px rgba(244, 255, 253, .38);
  transform: rotate(-25deg) translateX(-120%);
  animation: breeze-sweep 7s cubic-bezier(.26, .62, .34, 1) infinite;
}

.breeze-streak--one { top: 39%; animation-delay: -1s; }
.breeze-streak--two { top: 55%; width: min(48vw, 770px); opacity: .7; animation-delay: -4s; animation-duration: 8.5s; }
.breeze-streak--three { top: 69%; width: min(37vw, 600px); opacity: .55; animation-delay: -6s; animation-duration: 6.5s; }

.breeze-sun {
  position: absolute;
  width: clamp(75px, 8vw, 142px);
  aspect-ratio: 1;
  right: clamp(17%, 22vw, 30%);
  top: 35%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .94) 0 25%, rgba(255, 246, 203, .45) 27% 45%, transparent 68%);
  animation: sun-pulse 4.8s ease-in-out infinite;
}

.breeze-dot { position: absolute; width: 9px; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px rgba(255, 255, 255, .42); animation: dot-drift 5s ease-in-out infinite alternate; }
.breeze-dot--one { left: 61%; top: 24%; }
.breeze-dot--two { left: 72%; top: 63%; width: 6px; animation-delay: -2s; }

/* Let the city remain present beneath the calm interface layers. */
.hero-image {
  background: linear-gradient(90deg, rgba(22, 45, 51, .42), rgba(22, 45, 51, .06)), url("/api/media/tokyo-hero") center 54%/cover no-repeat;
  filter: saturate(.9) contrast(1.06) brightness(1.08);
}

.hero-art { opacity: .7 }

.work {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}

.work::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: radial-gradient(circle at var(--glow-x, 70%) var(--glow-y, 20%), rgba(255, 255, 255, .34), transparent 31%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.work:hover {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-7px) scale(1.01);
  box-shadow: 0 20px 35px rgba(20, 57, 66, .22);
}

.work:hover::before { opacity: 1 }

@keyframes orbit-drift {
  50% { transform: translateY(-52%) rotate(10deg) scale(1.035) }
}

@keyframes breeze-sweep {
  0% { transform: rotate(-25deg) translateX(-130%); opacity: 0; }
  16% { opacity: .9; }
  68% { opacity: .72; }
  100% { transform: rotate(-25deg) translateX(195%); opacity: 0; }
}

@keyframes sun-pulse {
  0%, 100% { transform: scale(.88); opacity: .56; }
  50% { transform: scale(1.18); opacity: 1; }
}

@keyframes dot-drift {
  from { transform: translate3d(-14px, 10px, 0) scale(.75); opacity: .35; }
  to { transform: translate3d(18px, -14px, 0) scale(1.2); opacity: 1; }
}

@media (max-width: 760px) {
  .hero-orbits { width: 63vw; right: -14%; top: 24%; opacity: .7 }
  .breeze-streak { width: 95vw; }
  .breeze-sun { right: 19%; top: 28%; }
  .hero::after { background-size: 40px 40px }
  .work:hover { transform: translateY(-3px) scale(1.005) }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orbits { animation: none }
  .work { transition: none }
}