.hero-bg {
  background-color: var(--deep);
  background-image: url("assets/hero-world-clean.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transform: none;
}

.hero-shade {
  background:
    linear-gradient(90deg, rgba(0,20,40,1) 0%, rgba(0,25,48,.98) 27%, rgba(0,29,55,.72) 48%, rgba(0,31,57,.12) 76%),
    linear-gradient(0deg, rgba(0,20,40,.55), transparent 38%);
}

h1 .responsibility { color: #69cfff; }

@media (max-width: 900px) {
  .hero-bg {
    background-size: auto 100%;
    background-position: 57% center;
  }
}

.machining-intro {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(7,64,101,.97), rgba(0,18,34,.99) 62%);
  animation: intro-fade 4.6s cubic-bezier(.7,0,.2,1) forwards;
}

.machining-stage {
  position: relative;
  width: min(1180px, 96vw);
  aspect-ratio: 2 / 1;
  display: grid;
  place-items: center;
  perspective: 900px;
}

.machining-stage img {
  position: relative;
  z-index: 4;
  width: min(1080px, 92vw);
  max-height: 72vh;
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.8));
  animation: logo-turned 4.2s cubic-bezier(.2,.8,.2,1) .25s forwards;
}

.turning-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(211,230,242,.6);
  box-shadow: inset 0 0 28px rgba(130,211,255,.25), 0 0 30px rgba(43,185,255,.18);
  transform: rotateX(72deg);
  animation: ring-spin 1.15s linear 3;
}

.ring-outer { width: 620px; height: 620px; }
.ring-inner { width: 490px; height: 490px; border-style: dashed; animation-direction: reverse; }

.cutting-tool {
  position: absolute;
  z-index: 3;
  top: 8%;
  left: 48%;
  width: 5px;
  height: 42%;
  background: linear-gradient(#dff6ff, #45bde9 65%, transparent);
  filter: drop-shadow(0 0 9px #83ddff);
  transform-origin: top;
  animation: tool-cut 2.4s ease-in-out .2s forwards;
}

.metal-sweep {
  position: absolute;
  z-index: 5;
  inset: 22% 0;
  background: linear-gradient(100deg, transparent 38%, rgba(255,255,255,.85) 49%, rgba(102,211,255,.6) 52%, transparent 62%);
  transform: translateX(-70%);
  mix-blend-mode: screen;
  animation: sweep 1.25s ease-in-out 2.2s forwards;
}

@keyframes ring-spin {
  to { transform: rotateX(72deg) rotateZ(360deg); }
}

@keyframes tool-cut {
  0% { transform: translate(-420px,-40px) rotate(18deg); opacity: 0; }
  20% { opacity: 1; }
  75% { transform: translate(390px,20px) rotate(18deg); opacity: 1; }
  100% { transform: translate(440px,35px) rotate(18deg); opacity: 0; }
}

@keyframes logo-turned {
  0%,12% { opacity: 0; transform: rotateY(88deg) scale(.62); filter: brightness(.55) blur(6px); }
  45% { opacity: .55; transform: rotateY(320deg) scale(.94); }
  70%,86% { opacity: 1; transform: rotateY(360deg) scale(1); filter: brightness(1.1) contrast(1.08) drop-shadow(0 12px 22px rgba(0,0,0,.8)); }
  100% { opacity: 0; transform: rotateY(360deg) scale(1.035); }
}

@keyframes sweep { to { transform: translateX(70%); } }

@keyframes intro-fade {
  0%,82% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .machining-intro { display: none; }
}

@media (max-width: 560px) {
  .ring-outer { width: 280px; height: 280px; }
  .ring-inner { width: 210px; height: 210px; }
  .cutting-tool { height: 36%; }
}