/* ── Hero entrance: brush-write reveal ── */
.hero-entrance {
  opacity: 0;
}
.hero-entrance.revealed {
  opacity: 1;
}

/* Hero child stagger with brush-write effect */
.hero-entrance .hero-label {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.hero-entrance .hero-title {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 0.8s ease-out, clip-path 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.hero-entrance .hero-subtitle {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.hero-entrance .hero-desc {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.hero-entrance.revealed .hero-label {
  opacity: 1;
  transform: none;
  transition-delay: 0.2s;
}
.hero-entrance.revealed .hero-title {
  opacity: 1;
  clip-path: inset(0 0% 0 0);
  transition-delay: 0.5s;
}
.hero-entrance.revealed .hero-subtitle {
  opacity: 1;
  transform: none;
  transition-delay: 1.4s;
}
.hero-entrance.revealed .hero-desc {
  opacity: 1;
  transform: none;
  transition-delay: 1.4s;
}

/* ── Hero flow diagram ── */
.hero-flow-diagram {
  transition: opacity 5s ease-out;
}
.hero-flow-diagram.revealed {
  opacity: 1 !important;
}

/* ── Binary glitch overlay ── */
#binary-glitch {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  height: 36px;
  margin-top: -18px;
  z-index: 60;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  font-family: 'Source Serif 4', monospace;
  font-size: 14px;
  letter-spacing: 4px;
  line-height: 36px;
  color: hsl(270 40% 45% / 0.35);
  white-space: nowrap;
  text-align: center;
  transition: none;
}
#binary-glitch.flash {
  animation: glitch-flash 0.6s ease-out forwards;
}
@keyframes glitch-flash {
  0%   { opacity: 0; transform: scaleY(0.3); }
  10%  { opacity: 1; transform: scaleY(1); }
  25%  { opacity: 0.3; transform: scaleY(1.2); }
  40%  { opacity: 0.8; transform: scaleY(1); }
  60%  { opacity: 0.4; }
  100% { opacity: 0; transform: scaleY(1); }
}

/* ── Scroll animation variants ── */
.slide-left, .slide-right, .scale-in {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.slide-left  { transform: translateX(-40px); }
.slide-right { transform: translateX(40px); }
.scale-in    { transform: scale(0.94); }
.slide-left.visible, .slide-right.visible, .scale-in.visible {
  opacity: 1;
  transform: none;
}

/* ── Staggered children ── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.stagger-children.visible > * { opacity: 1; transform: none; }

/* ── Brush stroke draw-in ── */
.brush-draw path {
  transition: stroke-dashoffset 1.2s ease-out;
}
.brush-draw.visible path {
  stroke-dashoffset: 0 !important;
}

/* ── River flow continuous animation ── */
@keyframes river-flow {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -200; }
}
.river-anim {
  stroke-dasharray: 100 50;
  animation: river-flow 8s linear infinite;
}

/* ── Scroll progress bar ── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: hsl(30 15% 15% / 0.25);
  z-index: 100;
  transition: none;
}

/* ── Hero gradient ── */
.hero-gradient {
  background:
    radial-gradient(ellipse 40% 30% at 85% 60%, hsl(30 15% 82% / 0.3) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 70% 30%, hsl(30 20% 88% / 0.5) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 30% -10%, hsl(35 25% 90%) 0%, transparent 70%);
}

/* ── Service cards ── */
.service-card {
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='0.15'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.service-card::before {
  content: attr(data-label);
  position: absolute;
  right: -8px;
  top: -12px;
  font-family: 'Noto Serif JP', serif;
  font-size: 7rem;
  font-weight: 700;
  line-height: 1;
  color: hsl(30 15% 15%);
  opacity: 0.03;
  pointer-events: none;
  user-select: none;
}
.service-card:hover {
  box-shadow: 0 12px 40px -10px rgba(60,40,20,0.12);
  border-color: hsl(35 20% 72%);
  transform: translateY(-3px);
}
.service-card .tool-tag {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid hsl(35 20% 85%);
  border-radius: 4px;
  font-size: 0.68rem;
  color: hsl(30 10% 50%);
  background: hsl(40 25% 95%);
  transition: border-color 0.2s, color 0.2s;
}
.service-card:hover .tool-tag {
  border-color: hsl(35 20% 78%);
  color: hsl(30 12% 40%);
}