/* The original composition scrolls naturally; only its boundary bends. */
.edge-defs { position: absolute; pointer-events: none; }
.hero-scroll { height: 100svh; z-index: 2; background: var(--paper); }
.hero-scroll::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: url('assets/service-grain.png') left bottom / 50px 50px repeat;
  opacity: .9; pointer-events: none;
}
.hero-scroll .hero-sticky {
  position: absolute; inset: 0 0 -80px; height: auto;
  overflow: hidden; background: var(--ink); clip-path: inset(0 0 80px);
}
.hero-scroll[data-edge-ready='true'] .hero-sticky { clip-path: url(#home-hero-edge); }
.hero-scroll .hero-visual { inset: 0 0 80px; overflow: visible; }
.hero-scroll.hero-scroll .hero-art-stage {
  inset: auto; left: 50%; top: 50%; width: 1440px; height: 900px;
  transform: translate3d(calc(-50% + var(--hero-pointer-x, 0px)), calc(-50% + var(--hero-pointer-y, 0px)), 0) scale(var(--hero-bg-scale, 1));
  transform-origin: center; filter: none; will-change: auto;
}
.hero-scroll[data-motion-state='active'] .hero-art-stage { will-change: transform; }
.hero-scroll .hero-background {
  inset: auto; left: -94.8px; top: -625px; width: 1850.5px; height: 1720px;
  object-fit: initial; pointer-events: none;
}
.hero-scroll .hero-stage { opacity: 1; }
.hero-edge-mascot {
  left: 87.05%; top: 100%; width: 19.0972vw; height: auto; aspect-ratio: 1;
  padding: 0; border: 0; background: transparent; pointer-events: auto;
  transform: translate(-50%, calc(-89.2% + var(--mascot-edge-y, 0px))) rotate(var(--mascot-edge-angle, 0deg));
}
.hero-edge-mascot img { display: block; width: 100%; height: auto; }
.floating-chat { transition: opacity 180ms ease; }
.floating-chat[data-hero-visible='true'] { opacity: 0; visibility: hidden; }

/* A single clipped surface bends at both ends. Its artwork keeps its size. */
.works.elastic-section { overflow: visible; z-index: 3; background: transparent; }
.works.elastic-section::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(var(--paper) 50%, var(--ink) 50%);
}
.works.elastic-section::after {
  content: ''; display: block; position: absolute; inset: 0 0 50%; z-index: -1;
  /* Continue Service's grain only through the exposed upper paper area.
     The phase is the negative preceding Service height, modulo its 50px tile. */
  background: url('assets/service-grain.png') left var(--service-grain-phase, 0px) / 50px 50px repeat;
  opacity: .9; box-shadow: none; pointer-events: none;
}
.works-elastic-surface {
  position: absolute; inset: -80px 0; overflow: hidden;
  background: var(--paper); clip-path: inset(80px 0);
}
.works[data-edge-ready='true'] .works-elastic-surface { clip-path: url(#works-edges); }
.works-elastic-surface .works-art { top: 80px; }
.works-elastic-surface::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 13px 10px 45px rgba(103, 103, 103, .25);
}

@media (max-width: 767px) {
  .hero-scroll .hero-stage { height: calc(100% - 80px) !important; }
  .hero-scroll .hero-title {
    left: 5%; top: 36%; width: 90%; text-align: center;
    font-size: clamp(48px, 14.8vw, 78px); line-height: .98; letter-spacing: -.035em;
  }
  .hero-scroll .hero-title > span { display: block; white-space: normal; }
  .hero-scroll .hero-copy {
    left: 5%; top: 66%; width: 90%; text-align: center;
    font-size: clamp(17px, 4.8vw, 24px); line-height: 1.9;
  }
  .hero-edge-mascot { left: 80%; width: 144px; max-width: 38vw; }
}
@media (max-width: 767px) and (max-height: 700px) {
  .hero-scroll .hero-title { top: 29%; font-size: clamp(44px, 13.7vw, 58px); }
  .hero-scroll .hero-copy { top: 63%; line-height: 1.7; }
  .hero-edge-mascot { width: 112px; }
}
@media (prefers-reduced-motion: reduce) { .floating-chat { transition: none; } }
html[data-motion-paused='true'] .floating-chat { transition: none; }