/* Smartphone first-view refinements (2026-11-05).
   Overrides legacy hero rules without affecting desktop. */
@media (max-width: 740px) {
  /* Always cover the dynamic visual viewport, including the Safari toolbar state. */
  #hero.hero {
    box-sizing: border-box;
    display: block;
    height: 100vh !important;
    min-height: 100vh !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    background: #000 !important;
    overflow: hidden !important;
  }

  #hero.hero video {
    transform: translate3d(0, -5%, 0) scale(2.1) !important;
    transform-origin: center 48% !important;
  }

  /* Keep all three lines separate; first must end at なるべくしてなる. */
  #hero .hero-copy {
    left: 22px !important;
    right: 18px !important;
    top: auto !important;
    bottom: clamp(118px, 18dvh, 165px) !important;
    max-width: none !important;
    transform: none !important;
    z-index: 24;
  }

  #hero .hero-copy h1 {
    font-size: clamp(27px, 7.2vw, 34px) !important;
    line-height: 1.6 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    margin: 0 0 16px !important;
  }

  #hero .hero-copy h1 > span {
    display: block !important;
    white-space: nowrap !important;
  }

  #hero .scroll {
    position: absolute !important;
    color: #fff !important;
    z-index: 30 !important;
    bottom: max(40px, env(safe-area-inset-bottom)) !important;
    text-shadow: 0 0 8px rgba(44, 152, 255, .55);
  }

  /* The previous white fog was occupying the lower part of the first view. */
  #hero .hero-mist {
    height: 24px !important;
    bottom: 0 !important;
    background: transparent !important;
  }
  #hero .hero-mist::before,
  #hero .hero-mist::after {
    opacity: .28 !important;
  }
}

@media (max-width: 360px) {
  #hero .hero-copy h1 {
    font-size: clamp(24px, 7vw, 27px) !important;
  }
}

/* v3: prevent Safari's next white section from peeking into the mobile first view.
   A little extra black canvas accounts for address-bar viewport resizing. */
@media (max-width: 740px) {
  #hero.hero {
    height: calc(100dvh + 88px) !important;
    min-height: calc(100dvh + 88px) !important;
    background-color: #000 !important;
  }
  /* Keep SCROLL within the original visible viewport, not the extended canvas. */
  #hero .scroll {
    bottom: max(132px, calc(114px + env(safe-area-inset-bottom))) !important;
    color: #fff !important;
  }
  /* Do not paint the white mist over the hero itself on small screens. */
  #hero .hero-mist {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}