/* The sculpture belongs to the opening scene; the rest of the page stays quiet. */
.hero:first-of-type {
    isolation: isolate;
    overflow: hidden;
    min-height: 100svh;
}

.hero #canvas-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 28% 40%, rgba(225, 170, 143, 0.10), transparent 43%),
        radial-gradient(ellipse at 76% 64%, rgba(133, 176, 176, 0.09), transparent 42%),
        #f8fafc;
}

#canvas-container canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-content::before {
    content: '';
    position: absolute;
    inset: -22% -15%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(248, 250, 252, 0.96) 10%, rgba(248, 250, 252, 0.76) 38%, rgba(248, 250, 252, 0) 70%);
}

.hero .hero-content h1 {
    font-size: clamp(3rem, 6.3vw, 5.7rem);
    letter-spacing: 0.045em;
}

.hero .hero-content h1 span.jp-name {
    font-size: clamp(0.95rem, 1.45vw, 1.2rem);
    letter-spacing: 0.24em;
    margin-top: 1.35rem;
}

.hero .hero-content p {
    margin: 1.8rem 0 2.3rem;
    font-size: clamp(0.85rem, 1.4vw, 1.1rem);
    letter-spacing: 0.11em;
}

.hero .cta-button:not(.secondary) {
    border-color: rgba(103, 119, 135, 0.28);
    background: rgba(248, 250, 252, 0.5);
    color: #475569;
    border-radius: 0;
}

.hero .cta-button:not(.secondary):hover {
    border-color: #ad747b;
    background: #ad747b;
    color: #fff;
}

.emergence-caption {
    position: absolute;
    left: max(2.5rem, calc((100vw - 1136px) / 2));
    bottom: 2.2rem;
    color: #6d7c89;
    pointer-events: none;
    isolation: isolate;
}

.emergence-caption::before {
    content: '';
    position: absolute;
    inset: -1.5rem -2rem;
    z-index: -1;
    background: radial-gradient(ellipse, rgba(248, 250, 252, 0.95) 25%, rgba(248, 250, 252, 0) 75%);
}

.emergence-caption span {
    display: block;
    font-size: 0.63rem;
    font-weight: 500;
    letter-spacing: 0.24em;
}

.emergence-caption p {
    margin: 0.55rem 0 0;
    font-size: 0.7rem;
    letter-spacing: 0.09em;
}

.emergence-caption .emergence-hint {
    margin-top: 0.45rem;
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    opacity: 0.8;
}

.motion-toggle {
    position: absolute;
    right: max(2.5rem, calc((100vw - 1136px) / 2));
    bottom: 2.35rem;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    color: #64748b;
    background: rgba(248, 250, 252, 0.65);
    border: 1px solid rgba(103, 119, 135, 0.25);
    border-radius: 50%;
    cursor: pointer;
    transition: color 180ms, border-color 180ms;
}

.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { color: #a86570; border-color: #a86570; }
.motion-toggle:focus-visible { outline: 2px solid #a86570; outline-offset: 4px; }
.motion-toggle svg { width: 12px; height: 12px; fill: currentColor; }
.motion-toggle .play-icon { display: none; }
.motion-toggle[aria-pressed="true"] .play-icon { display: block; }
.motion-toggle[aria-pressed="true"] .pause-icon { display: none; }

@media (max-width: 768px) {
    .hero { padding: 7rem 1.5rem 8rem; }
    .hero .hero-content h1 { font-size: clamp(2.4rem, 10vw, 3.5rem); }
    .hero .hero-content p { max-width: 23rem; margin: 1.5rem auto 2rem; line-height: 1.9; }
    .emergence-caption { left: 1.5rem; bottom: 1.7rem; max-width: calc(100% - 6rem); }
    .emergence-caption p { font-size: 0.63rem; letter-spacing: 0.025em; }
    .motion-toggle { right: 1.5rem; bottom: 1.8rem; width: 40px; height: 40px; }
}

@media (max-height: 600px) and (min-width: 769px) {
    .hero:first-of-type { min-height: 650px; }
}

@media (prefers-reduced-motion: reduce) {
    .logo { animation: none; }
    .fade-in { opacity: 1; transform: none; transition: none; }
    .hero a, .motion-toggle { transition: none; }
}