/* The Blender sculpture leads the homepage; content remains normal HTML. */
body { overflow-x: clip; }
.hero { padding-top: 20px; }
.snail-story { margin-bottom: 56px; }
.snail-story.has-motion { height: 190svh; }
.snail-stage {
  position: sticky;
  top: 12px;
  isolation: isolate;
  height: min(820px, calc(100svh - 24px));
  min-height: 570px;
  overflow: hidden;
  border-radius: 28px 64px 32px 56px;
  background: radial-gradient(ellipse at 78% 42%, #353226 0, #181b17 33%, #101210 68%);
  color: var(--ink);
}
[data-theme="light"] .snail-stage {
  background: radial-gradient(ellipse at 78% 42%, #d4d5bc 0, #e7decb 33%, var(--ground) 68%);
}
[data-theme="light"] .snail-fallback { filter: brightness(0); }
.snail-stage::before {
  content: '';
  position: absolute;
  width: 62%; height: 85%;
  right: -4%; top: 8%;
  border: 1px solid rgba(var(--ink-rgb), .08);
  border-radius: 50%;
  transform: rotate(-24deg);
  pointer-events: none;
}
.snail-art { position: absolute; inset: 0 -7% 0 32%; z-index: -1; }
.snail-art canvas { width: 100%; height: 100%; display: block; opacity: 0; }
.snail-fallback { position: absolute; width: 53%; height: 72%; object-fit: contain; top: 14%; left: 24%; transform: rotate(12deg); opacity: .85; }
.is-3d-ready .snail-fallback { display: none; }
.is-3d-ready canvas { opacity: 1; }
.snail-eyebrow { position: absolute; top: 36px; left: 36px; font: 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(var(--ink-rgb), .65); }
.snail-stage .hero-display { position: absolute; top: 24%; left: 36px; margin: 0; color: var(--ink); font-size: clamp(3rem, 5.8vw, 5.2rem); line-height: .88; pointer-events: none; }
.snail-stage .hero-display .line { margin-left: 0; transform: none !important; }
.snail-stage .hero-display .line-e { margin-top: .2em; }
.snail-stage .hero-display .accent { color: var(--accent); }
.snail-stage .hero-display .orange { color: var(--accent-warm); }
.snail-caption { position: absolute; left: 36px; right: 36px; bottom: 62px; display: flex; justify-content: flex-end; gap: 20px; font-size: 14px; color: rgba(var(--ink-rgb), .7); }
.snail-scroll { font: 12px var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.snail-progress { position: absolute; bottom: 34px; left: 36px; right: 36px; height: 1px; background: var(--line); }
.snail-progress span { display: block; height: 100%; background: var(--accent-alt); transform: scaleX(0); transform-origin: left; }
@media (max-width: 760px) {
  .snail-stage { height: calc(100svh - 24px); min-height: 650px; max-height: 850px; border-radius: 20px 38px 24px 32px; }
  .snail-story.has-motion { height: 175svh; }
  .snail-eyebrow { left: 22px; top: 25px; font-size: 11px; }
  .snail-stage .hero-display { left: 22px; top: 12%; font-size: clamp(2.7rem, 11vw, 4.8rem); }
  .snail-art { inset: 34% 0 10% 0; }
  .snail-caption { left: 22px; right: 22px; bottom: 47px; font-size: 12px; }
  .snail-scroll { display: none; }
  .snail-progress { left: 22px; right: 22px; bottom: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .snail-story.has-motion { height: auto; }
  .snail-stage { position: relative; top: 0; }
  .snail-scroll, .snail-progress { display: none; }
  .snail-art canvas { transition: none; }
}