/* Corner details are independent of the Japanese catch, while sharing the
   existing hero fade and visibility lifecycle. */
body.service-website-page #website-hero-design-showcase .website-hero-corner-label,
body.service-website-page #website-hero-design-showcase .website-hero-scroll-line {
  display:none;
}
@media (min-width:769px) {
  body.service-website-page #website-hero-design-showcase .website-hero-corner-label,
  body.service-website-page #website-hero-design-showcase .website-hero-scroll-line {
    display:block;
    position:absolute;
    bottom:clamp(28px,4svh,48px);
    z-index:3;
    opacity:var(--hero-film-copy,1);
    pointer-events:none;
  }
  body.service-website-page #website-hero-design-showcase .website-hero-corner-label {
    /* Match the global brand edge. */
    left:clamp(22px,3.25vw,52px);
  }
  body.service-website-page #website-hero-design-showcase .website-hero-corner-label > .service-hero__opening-copy-en {
    display:block;
    margin:0;
  }
  body.service-website-page #website-hero-design-showcase .website-hero-scroll-line {
    /* The 34px menu strokes sit 4px inside their 42px icon. */
    right:calc(clamp(22px,3.25vw,52px) + 4px);
    width:1px;
    height:56px;
    overflow:hidden;
  }
  body.service-website-page #website-hero-design-showcase .website-hero-scroll-line::before {
    content:"";
    position:absolute;
    inset:0;
    background:rgb(36 58 70 / 65%);
    transform-origin:center top;
    animation:website-hero-scroll-line-reveal 2.8s cubic-bezier(.65,0,.35,1) infinite;
    animation-play-state:paused;
  }
  body.service-website-page #website-hero-design-showcase.is-reference-float-active .website-hero-scroll-line::before {
    animation-play-state:running;
  }
}
/* The header switches its horizontal padding at 820px. */
@media (min-width:769px) and (max-width:820px) {
  body.service-website-page #website-hero-design-showcase .website-hero-corner-label {
    left:20px;
  }
  body.service-website-page #website-hero-design-showcase .website-hero-scroll-line {
    right:22px;
  }
}
@keyframes website-hero-scroll-line-reveal {
  0% { transform-origin:center top; transform:scaleY(0); }
  40%,55% { transform-origin:center top; transform:scaleY(1); }
  56% { transform-origin:center bottom; transform:scaleY(1); }
  90%,100% { transform-origin:center bottom; transform:scaleY(0); }
}
@media (min-width:769px) and (prefers-reduced-motion:reduce) {
  body.service-website-page #website-hero-design-showcase .website-hero-scroll-line::before {
    animation:none;
    transform:none;
  }
}