/* Hareta Tabi cover page styles.
   Button look: see .client near the bottom. Picture framing: .layer img. */
:root { --ground:#1b1626; --ink:#efe6dc; --gold:#f2b84b; --sky:#8fc7e8;
  --font:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font); font-size: 1.0625rem; line-height: 1.4; overflow: hidden; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 999px; }
.hero { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.scene { position: absolute; inset: 0; z-index: 0; isolation: isolate; overflow: hidden; background: #090211; }
.layer { position: absolute; inset: 0; opacity: 0; }
.layer:first-child { opacity: 1; }
.layer img { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--posx, 60%) 100%; display: block; }
.sparkle { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; }
@media (max-aspect-ratio: 6/5) {
  .layer img { width: var(--pw, 135%); max-width: none; height: auto; left: var(--pleft, -6.08%); bottom: 0; object-fit: fill;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%); }
}
.client {
  position: absolute; z-index: 5; left: 50%; transform: translateX(-50%);
  bottom: calc(clamp(1.25rem, 5vh, 2.5rem) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.55rem 1.7rem;
  color: #fff; text-decoration: none; font-weight: 700; font-size: 1.05rem; letter-spacing: 0.01em;
  background: rgba(16, 14, 32, 0.62); border: 1px solid rgba(239, 230, 220, 0.55); border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.2s, border-color 0.2s;
}
.client:hover { background: rgba(16, 14, 32, 0.8); border-color: var(--gold); }