/* The homepage is one viewport. Other WordPress pages keep ordinary scrolling. */
html:has(body.home){height:100%;overflow:hidden;scroll-behavior:auto;overscroll-behavior:none}
body.home{height:100svh;overflow:hidden;overscroll-behavior:none;background:var(--musou-page);color:var(--musou-ink)}
.home .portfolio-home,.home .portfolio-story,.home.is-enhanced .portfolio-story{height:100svh;min-height:0;position:relative;margin:0}
.home .portfolio-stage,.home.is-enhanced .portfolio-stage{position:relative;top:0;height:100svh;min-height:0;overflow:hidden;touch-action:none;perspective:none}
.home .hero-introduction{padding:40px 5vw;inset:0}
.home .hero-introduction h1{font-family:var(--musou-font-body);font-size:clamp(72px,8.3vw,160px);max-width:90vw;line-height:.96;font-weight:700;letter-spacing:-.03em;text-transform:uppercase}
.home .hero-introduction h1>em{font-size:1em;line-height:inherit;font-weight:inherit;margin-top:.025em}
.home .hero-introduction h1 .heading-word{display:inline-block;font:inherit;white-space:nowrap}
.home .hero-introduction p{margin-top:32px;font-size:clamp(12px,1vw,15px);line-height:1.5;letter-spacing:.12em;text-transform:uppercase;opacity:var(--support-opacity,1)}
.home .hero-introduction .entry-hint{position:absolute;left:50%;bottom:max(6svh,calc(env(safe-area-inset-bottom) + 24px));transform:translateX(-50%);margin:0;display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:10px;letter-spacing:.14em}
.home .entry-hint svg{flex:none;width:14px;height:18px;opacity:.8}
.home.is-enhanced .hero-introduction{pointer-events:none;transform:none;opacity:1}
.home .hero-introduction h1>span,.home .hero-introduction h1>em{will-change:transform,opacity;opacity:var(--title-opacity,1)}
.home .hero-introduction h1>span{transform:translateY(calc(-1 * var(--portal-distance,55svh) * var(--portal-progress,0))) scale(var(--line-scale,1));transform-origin:50% 100%}
.home .hero-introduction h1>em{font-style:normal;transform:translateY(calc(var(--portal-distance,55svh) * var(--portal-progress,0))) scale(var(--line-scale,1));transform-origin:50% 0}
.home.is-enhanced .portfolio-field{transform:scale(var(--field-scale,.72));transform-style:preserve-3d;pointer-events:none}
.home .field-tile{pointer-events:auto;opacity:var(--orb-opacity,1);filter:brightness(var(--project-tone,1))}
[data-theme="light"] .home .field-tile{opacity:calc(var(--orb-opacity,1) * var(--project-tone,1));filter:none}
.home .field-veil{background:linear-gradient(to top,color-mix(in srgb,var(--musou-backdrop) 88%,transparent),transparent 18%);opacity:var(--veil,1)}
.home .field-tile,.home .field-tile a,.home .field-tile img{-webkit-user-drag:none;user-select:none}
.home .field-tile figure,.home .field-tile .work-card:hover figure{position:relative;aspect-ratio:4/5;box-shadow:none;transform:none}
/* Uniform portrait covers, including projects without a featured image. */
.home .field-tile img,.home .field-tile .image-missing{width:100%;height:100%;min-height:0;aspect-ratio:4/5;object-fit:cover}
.home .field-tile img{transition:transform .55s cubic-bezier(.16,1,.3,1),filter .3s}
.home .field-tile .work-card:hover img{transform:scale(1.035)}
.home .field-tile figcaption{display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:5px 12px;opacity:0;transition:opacity .18s ease;pointer-events:none;padding:56px 18px 18px;background:linear-gradient(to top,rgb(0 0 0 / .88),rgb(0 0 0 / .55) 48%,transparent);color:var(--musou-color-cream);text-align:left}
.home .field-tile figcaption span{transform:translateY(8px);transition:transform .32s cubic-bezier(.16,1,.3,1)}
.home .field-tile figcaption span:first-child{grid-column:1;grid-row:1;font-size:18px;font-weight:500;line-height:1.15;letter-spacing:-.015em;overflow-wrap:anywhere}
.home .field-tile figcaption span:last-child{grid-column:1;grid-row:2;font-size:10px;line-height:1.4;text-align:left;opacity:.8}
.home .field-tile figcaption::after{content:"";grid-column:2;grid-row:1 / 3;align-self:end;justify-self:end;width:32px;height:32px;border-radius:50%;background:var(--musou-color-white) url('../icons/arrow-up-right.svg') center / 16px 16px no-repeat;transform:translateY(8px);transition:transform .32s cubic-bezier(.16,1,.3,1)}
.home.is-exploring .field-tile .work-card:is(:hover,:focus-visible) figcaption{display:grid;opacity:1}
.home.is-exploring .field-tile .work-card:is(:hover,:focus-visible) figcaption span,.home.is-exploring .field-tile .work-card:is(:hover,:focus-visible) figcaption::after{transform:translate(0)}
.home.is-dragging .field-tile figcaption{opacity:0!important;transition:none}
.home.is-dragging .field-tile img{transform:none!important}
@media(prefers-reduced-motion:reduce){.home .field-tile figcaption,.home .field-tile figcaption span,.home .field-tile figcaption::after{transition:none;transform:none}}
.home .keyboard-entry{pointer-events:auto}
.home.is-exploring .hero-introduction{visibility:hidden;pointer-events:none}
.home .keyboard-entry{position:absolute;left:50%;bottom:14vh;transform:translateX(-50%);width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.home:not(.is-enhanced) .keyboard-entry{display:none}
.home .keyboard-entry:focus-visible{width:auto;height:auto;padding:12px 16px;clip-path:none;background:var(--musou-page);font-size:13px}
.home .gallery-mark{display:block;position:absolute;left:4vw;top:42px;z-index:6;background:transparent;padding:10px}
.home.is-exploring .gallery-mark{display:block}
.home .gallery-mark .brand-lockup{width:154px;filter:brightness(0) invert(1)}
.home .empty-gallery{display:none;position:absolute;inset:0;place-content:center;text-align:center;padding:30px;font-family:var(--musou-font-heading);font-size:clamp(35px,5vw,70px)}
.home.is-exploring .empty-gallery{display:grid}
.home.is-reduced .portfolio-field,.home.is-reduced .field-veil{display:none!important}
.home.is-reduced .hero-introduction{transform:none!important;opacity:1!important}
.home.is-reduced.is-exploring .hero-introduction{visibility:hidden!important}
.home.intro-active .portfolio-field{transform:scale(2.4)}
.home.intro-active .hero-introduction{opacity:0}
.home.intro-landing .hero-introduction h1{opacity:0}
.home.intro-landing .hero-introduction .hero-description{animation:opening-support .8s .7s both}
.home.intro-landing .hero-introduction .entry-hint{animation:opening-cue .5s .9s both}
.home.intro-landing .field-veil{animation:orb-veil-arrive 1.1s .25s both}
.home.intro-reveal .portfolio-field{transition:none}
@keyframes opening-support{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes opening-cue{from{opacity:0}to{opacity:1}}
@keyframes orb-veil-arrive{from{opacity:0}to{opacity:var(--veil,1)}}


@media(max-width:900px){.home .hero-introduction h1{font-size:clamp(60px,9.4vw,112px)}}
@media(max-width:600px){
 .home .hero-introduction h1{font-size:clamp(40px,13.5vw,80px)}.home .hero-introduction p{font-size:11px;margin-top:26px;letter-spacing:.08em}

 .home .gallery-mark{left:5vw;top:28px}.home .gallery-mark .brand-lockup{width:128px}

}
@media(prefers-reduced-motion:reduce){.home .portfolio-field{display:none!important}.home .hero-introduction{transform:none!important;opacity:1!important}.home .hero-introduction h1>span,.home .hero-introduction h1>em{transform:none!important;opacity:1!important}.home .hero-introduction p{opacity:1!important}}

/* Returning visitors enter the work immediately, before the portfolio module paints. */
html[data-portfolio-resume] .home .hero-introduction{visibility:hidden;pointer-events:none}