/* first view hero (fluid width) */

.fv-message-wrapper {
    --fv-slide-color-1: var(--bg-hero-bluegreen);
    --fv-slide-color-2: var(--bg-hero-greige);
    --fv-slide-color-3: var(--bg-hero-dustypink);
    --fv-slide-color-4: var(--bg-hero-green);
    --fv-slide-color-5: var(--bg-hero-dustyblue);
    --fv-slide-color-6: var(--bg-hero-beige);
    --fv-slide-radius-1: 5rem;
    --fv-slide-radius-2: 31.25rem;
    --fv-slide-radius-3: 15.625rem;
    --fv-slide-radius-4: 5rem;
    --fv-slide-radius-5: 31.25rem;
    --fv-slide-radius-6: 15.625rem;
    --fv-mask-progress: 0;
    --fv-body-progress: 0;
    --fv-bg-opacity: 1;
    --fv-message-opacity: 0;
    --fv-message-shift-progress: 0;
    --fv-message-shift-distance: 9rem;

    /* Mobile scroll-trigger tuning: adjust these values first. */
    /* Increase above 1 to make the whole sequence consume more scroll distance. */
    --fv-scene-distance-scale: 10;
    --fv-message-section-height: 60rem;
    --fv-message-frame-height: 60rem;

    /* Hero opening / body fade */
    --fv-scroll-trigger-hero-mask-start: 0rem;
    --fv-scroll-trigger-hero-mask-end: clamp(10rem, 34vh, 18rem);
    --fv-scroll-trigger-hero-body-start: clamp(3.5rem, 10vh, 6rem);
    --fv-scroll-trigger-hero-body-end: clamp(8rem, 18vh, 12rem);
    --fv-scroll-trigger-hero-logo-pre-fade-start: var(--fv-scroll-trigger-hero-body-start);
    --fv-scroll-trigger-hero-logo-pre-fade-end: var(--fv-scroll-trigger-hero-body-end);

    /* Message paragraph reveal */
    --fv-scroll-trigger-message-paragraph-1-start: 10rem;
    --fv-scroll-trigger-message-paragraph-1-end: 15rem;
    --fv-scroll-trigger-message-paragraph-2-start: 18rem;
    --fv-scroll-trigger-message-paragraph-2-end: 23rem;
    --fv-scroll-trigger-message-paragraph-3-start: 26rem;
    --fv-scroll-trigger-message-paragraph-3-end: 31rem;

    /* Message fade / exit */
    --fv-scroll-trigger-message-fade-start: 40rem;
    --fv-scroll-trigger-message-fade-end: 45rem;
    --fv-scroll-trigger-message-exit-start: 48rem;
    --fv-scroll-trigger-message-exit-end: 50rem;
    --fv-scroll-trigger-hero-background-fade-start: 50rem;
    --fv-scroll-trigger-hero-background-fade-end: 55rem;
    --fv-scroll-trigger-hero-logo-return-start: 55rem;
    --fv-scroll-trigger-hero-logo-return-end: 60rem;

    /* Logo transition / about exit */
    --fv-scroll-trigger-hero-logo-transition-start: 42rem;
    --fv-scroll-trigger-hero-logo-transition-end: 48rem;
    --fv-scroll-trigger-about-logo-exit-start: 0rem;
    --fv-scroll-trigger-about-logo-exit-end: 5rem;

    /* Viewport / mask sizing */
    --fv-mask-closed-width: calc(100vw - 2rem);
    --fv-mask-closed-height: calc(var(--fv-mobile-viewport-height) - 2rem);
    --fv-open-height: var(--fv-mobile-viewport-height);
    --fv-mask-open-bleed: 2px;
    --fv-mask-closed-inset-block: calc((var(--fv-open-height) - var(--fv-mask-closed-height)) / 2);
    position: relative;
}

@media (min-width: 768px) {
    .fv-message-wrapper {
        /* Desktop scroll-trigger tuning overrides */
        /* Unspecified trigger values inherit from the mobile defaults above. */
        --fv-message-shift-distance: 11rem;
        --fv-scene-distance-scale: 8;
        --fv-message-section-height: 60rem;
        --fv-message-frame-height: 60rem;

        --fv-scroll-trigger-about-logo-exit-end: 4rem;

        /* Viewport / mask sizing */
        --fv-mask-closed-width: min(calc(100vw - 2rem), 1391px);
        --fv-mask-closed-height: calc(var(--fv-desktop-viewport-height) - 2rem);
        --fv-open-height: var(--fv-desktop-viewport-height);
    }
}

:root {
    --fv-mobile-viewport-height: 100svh;
    --fv-desktop-viewport-height: 100svh;
    --fv-logo-scale: 1;
    --fv-logo-opacity: 1;
    --fv-header-logo-filter-progress: 0;
}

@supports (height: 100dvh) {
    :root {
        --fv-mobile-viewport-height: 100dvh;
        --fv-desktop-viewport-height: 100dvh;
    }
}

.fv-message-wrapper {
    background-color: transparent;
}

.fv-hero {
    position: relative;
    min-height: var(--fv-mobile-viewport-height);
    padding-inline: var(--layout-inline-padding);
}

.fv-hero__frame {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    width: 100%;
    padding-inline: 1.5rem;
    min-height: var(--fv-mobile-viewport-height);
}

.fv-hero__bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    overflow: clip;
    opacity: var(--fv-bg-opacity);
    pointer-events: none;
    contain: paint;
}

.fv-hero__slide {
    --fv-slide-color: var(--fv-slide-color-1);
    --fv-slide-radius: var(--fv-slide-radius-1);
    position: absolute;
    inset: 0;
    display: block;
    background-color: var(--fv-slide-color);
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
    opacity: 0;
    animation: fv-hero-slideshow 18s linear infinite;
    will-change: opacity;
}

.fv-hero__slide::before {
    content: "";
    position: absolute;
    top: calc((var(--fv-mask-closed-inset-block) * (1 - var(--fv-mask-progress))) - (var(--fv-mask-open-bleed) * var(--fv-mask-progress)));
    bottom: calc((var(--fv-mask-closed-inset-block) * (1 - var(--fv-mask-progress))) - (var(--fv-mask-open-bleed) * var(--fv-mask-progress)));
    left: 50%;
    width: calc(var(--fv-mask-closed-width) + ((100vw + (var(--fv-mask-open-bleed) * 2)) - var(--fv-mask-closed-width)) * var(--fv-mask-progress));
    border-radius: calc(var(--fv-slide-radius) * (1 - var(--fv-mask-progress)));
    box-shadow: 0 0 0 100vmax var(--fv-slide-color);
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
}

.fv-hero__slide:nth-child(1) {
    --fv-slide-color: var(--fv-slide-color-1);
    --fv-slide-radius: var(--fv-slide-radius-1);
    animation-delay: 0s;
}

.fv-hero__slide:nth-child(2) {
    --fv-slide-color: var(--fv-slide-color-2);
    --fv-slide-radius: var(--fv-slide-radius-2);
    animation-delay: 3s;
}

.fv-hero__slide:nth-child(3) {
    --fv-slide-color: var(--fv-slide-color-3);
    --fv-slide-radius: var(--fv-slide-radius-3);
    animation-delay: 6s;
}

.fv-hero__slide:nth-child(4) {
    --fv-slide-color: var(--fv-slide-color-4);
    --fv-slide-radius: var(--fv-slide-radius-4);
    animation-delay: 9s;
}

.fv-hero__slide:nth-child(5) {
    --fv-slide-color: var(--fv-slide-color-5);
    --fv-slide-radius: var(--fv-slide-radius-5);
    animation-delay: 12s;
}

.fv-hero__slide:nth-child(6) {
    --fv-slide-color: var(--fv-slide-color-6);
    --fv-slide-radius: var(--fv-slide-radius-6);
    animation-delay: 15s;
}

/* overlay for slides 2-4 */
.fv-hero__slide--overlay {
    isolation: isolate;
}
.fv-hero__slide--overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--bg-hero-overlay);
    mix-blend-mode: multiply;
    z-index: 1;
    pointer-events: none;
}

.fv-hero__slide img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
    mix-blend-mode: multiply;
    outline: 1px solid transparent;
    display: block;
}

@keyframes fv-hero-slideshow {
    0% {
        opacity: 0;
    }
    6.6667% {
        opacity: 1;
    }
    16.6667% {
        opacity: 1;
    }
    23.3334% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.fv-hero__logo-grid {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: var(--fv-mobile-viewport-height);
    z-index: 9999;
    pointer-events: none;
}
.fv-hero__logo {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    justify-self: center;
    width: min(12rem + 1.5vw, 13rem);
    height: auto;
    transform: translate3d(0, 0, 0) scale(var(--fv-logo-scale));
    transform-origin: center center;
    opacity: var(--fv-logo-opacity);
    backface-visibility: hidden;
    transform-box: fill-box;
    will-change: transform, opacity;
}

.fv-hero__body {
    position: fixed;
    inset-inline: calc(var(--layout-inline-padding) + 1.5rem);
    bottom: max(2.5rem, calc(env(safe-area-inset-bottom, 0px) + 2rem));
    z-index: 2;
    opacity: calc(1 - var(--fv-body-progress));
    pointer-events: none;
    will-change: opacity;
}

.fv-hero__description {
    align-self: start;
    font-family: var(--font-family-eng), sans-serif;
    font-size: var(--font-size-10);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-160);
    letter-spacing: var(--letter-spacing-3);
    color: var(--text-white);
}

.fv-hero__copy+.fv-hero__description {
    margin-block-start: 1rem;
}

/* message section */
.message {
    position: relative;
    z-index: 1;
    min-height: calc(var(--fv-message-section-height) * var(--fv-scene-distance-scale));
}

.message__frame {
    position: relative;
    width: var(--width-100per);
    min-height: calc(var(--fv-message-frame-height) * var(--fv-scene-distance-scale));
    isolation: isolate;
}

.message__content {
    position: fixed;
    inset-inline: 0;
    top: 50%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 4rem;
    width: var(--width-100per);
    max-width: min(100vw, 1391px);
    margin-inline: auto;
    padding-inline: 2.5rem;
    opacity: var(--fv-message-opacity);
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, calc(-50% - (var(--fv-message-shift-distance) * var(--fv-message-shift-progress))), 0);
    backface-visibility: hidden;
    contain: paint;
    will-change: transform, opacity;
}

.message__paragraph {
    --message-paragraph-progress: 0;
    margin: 0;
    font-family: var(--font-family-jp), sans-serif;
    font-size: var(--font-size-15);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-200);
    letter-spacing: 0;
    color: var(--text-white);
    opacity: calc(var(--message-paragraph-progress) * var(--fv-message-opacity));
    clip-path: inset(0 calc((1 - var(--message-paragraph-progress)) * 100%) 0 0);
    backface-visibility: hidden;
    will-change: clip-path, opacity;
}

/* Animation-only DOM elements used by ScrollTrigger. */
.fv-scroll-trigger {
    position: absolute;
    inset-inline: 0;
    top: calc(var(--fv-scroll-trigger-top, 0rem) * var(--fv-scene-distance-scale));
    width: 100%;
    height: 1px;
    pointer-events: none;
}

/* Hero intro */
[data-fv-scroll-trigger="hero-mask-start"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-hero-mask-start);
}

[data-fv-scroll-trigger="hero-mask-end"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-hero-mask-end);
}

[data-fv-scroll-trigger="hero-body-start"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-hero-body-start);
}

[data-fv-scroll-trigger="hero-body-end"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-hero-body-end);
}

[data-fv-scroll-trigger="hero-logo-pre-fade-start"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-hero-logo-pre-fade-start);
}

[data-fv-scroll-trigger="hero-logo-pre-fade-end"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-hero-logo-pre-fade-end);
}

[data-fv-scroll-trigger="hero-logo-transition-start"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-hero-logo-transition-start);
}

/* Message paragraph reveal */
[data-fv-scroll-trigger="message-paragraph-1-start"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-message-paragraph-1-start);
}

[data-fv-scroll-trigger="message-paragraph-1-end"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-message-paragraph-1-end);
}

[data-fv-scroll-trigger="message-paragraph-2-start"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-message-paragraph-2-start);
}

[data-fv-scroll-trigger="message-paragraph-2-end"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-message-paragraph-2-end);
}

[data-fv-scroll-trigger="message-paragraph-3-start"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-message-paragraph-3-start);
}

[data-fv-scroll-trigger="message-paragraph-3-end"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-message-paragraph-3-end);
}

/* Message outro */
[data-fv-scroll-trigger="message-fade-start"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-message-fade-start);
}

[data-fv-scroll-trigger="message-fade-end"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-message-fade-end);
}

[data-fv-scroll-trigger="message-exit-start"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-message-exit-start);
}

[data-fv-scroll-trigger="message-exit-end"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-message-exit-end);
}

/* Hero outro */
[data-fv-scroll-trigger="hero-background-fade-start"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-hero-background-fade-start);
}

[data-fv-scroll-trigger="hero-background-fade-end"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-hero-background-fade-end);
}

[data-fv-scroll-trigger="hero-logo-return-start"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-hero-logo-return-start);
}

[data-fv-scroll-trigger="hero-logo-return-end"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-hero-logo-return-end);
}

[data-fv-scroll-trigger="hero-logo-transition-end"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-hero-logo-transition-end);
}

/* About logo exit */
[data-fv-scroll-trigger="about-logo-exit-start"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-about-logo-exit-start);
}

[data-fv-scroll-trigger="about-logo-exit-end"] {
    --fv-scroll-trigger-top: var(--fv-scroll-trigger-about-logo-exit-end);
}

.about-placeholder {
    position: relative;
    z-index: 0;
    min-height: 1000px;
    padding-block: 6rem;
    background: #ddd;
}

.about-placeholder__container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-placeholder__title {
    margin: 0;
    font-family: var(--font-family-eng), sans-serif;
    font-size: clamp(2rem, 7vw, 4.5rem);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-100);
    letter-spacing: var(--letter-spacing-2);
    color: rgba(75, 75, 75, 0.75);
}

.about-placeholder__text {
    margin: 0;
    font-family: var(--font-family-jp), sans-serif;
    font-size: var(--font-size-16);
    line-height: var(--line-height-170);
    color: rgba(75, 75, 75, 0.72);
}

/* NEWS section */
.news__section {
    padding-block: 5rem 7.5rem;
    background-color: var(--bg-news-surface);
}

.news__container {
    max-width: 1091px;
}

.news__heading {
    margin-block-end: 3rem;
    font-family: var(--font-family-eng), sans-serif;
    font-size: var(--font-size-32);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-140);
    letter-spacing: var(--letter-spacing-2);
    color: var(--ichi-guu_1);
}

.news__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 2.5rem;
}

.news__link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--text-black);
    text-decoration: none;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-170);
    letter-spacing: var(--letter-spacing-6);
    font-feature-settings: "palt";
}

.news__link:focus-visible {
    outline: 0.125rem solid var(--gray2);
    outline-offset: 0.2rem;
    border-radius: var(--radius-small);
}

@supports not selector(:focus-visible) {
    .news__link:focus {
        outline: 0.125rem solid var(--gray2);
        outline-offset: 0.2rem;
        border-radius: var(--radius-small);
    }
}

.news__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.news__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.news__date {
    min-width: 5.75rem;
    font-family: var(--font-family-eng), sans-serif;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-170);
    letter-spacing: var(--letter-spacing-6);
    color: var(--gray2);
}

.news__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 7.5rem;
    padding-block: 0.1rem;
    padding-inline: 0.375rem;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--radius-round);
    font-size: var(--font-size-13);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-170);
    letter-spacing: var(--letter-spacing-4);
    text-align: center;
}

.news__tag--and-series {
    border-color: var(--and-series);
    color: var(--and-series);
}

.news__tag--other-hotels {
    border-color: var(--other-hotels);
    color: var(--other-hotels);
}

.news__tag--default {
    border-color: var(--black);
    color: var(--black);
}

.news__cta {
    margin-block-start: 3rem;
}

/* desktop first view */
@media (min-width: 768px) {
    .fv-hero {
        padding: 0.9375rem 1.5rem 0;
    }

    .fv-hero__frame {
        grid-template-rows: 1fr 1fr;
        padding-inline: 0;
        min-height: var(--fv-mask-closed-height);
    }

    .fv-hero__slide img {
        mix-blend-mode: normal;
    }

    .fv-hero__logo-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto 1fr;
        height: var(--fv-desktop-viewport-height);
    }

    .fv-hero__logo {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        justify-self: center;
        width: 21.25rem;
        max-width: none;
        margin: 0;
    }

    .fv-hero__body {
        inset-inline: 0;
        width: min(calc(100vw - 3rem), 1391px);
        margin-inline: auto;
        padding-inline-start: var(--index-panel-padding);
        bottom: 4rem;
    }

    .fv-hero__copy {
        width: 19rem;
        height: auto;
    }

    .fv-hero__copy+.fv-hero__description {
        margin-block-start: 1.659rem;
    }

    .fv-hero__description {
        max-width: 27.5rem;
        font-size: var(--font-size-12);
        line-height: var(--line-height-160);
        letter-spacing: var(--letter-spacing-3);
    }

    /* desktop message section */
    .message__image {
        left: 0;
        width: var(--width-100per);
        height: var(--width-100per);
        object-fit: cover;
        max-width: none;
    }

    .message__content {
        display: grid;
        width: min(100%, 1391px);
        gap: 3rem;
        margin-inline: auto;
        padding-inline-start: var(--index-panel-padding);
        padding-inline-end: var(--index-panel-padding);
    }

    .message__paragraph {
        font-size: var(--font-size-18);
        line-height: var(--line-height-170);
    }

    .about-placeholder {
        padding-block: 8rem;
    }

    .about-placeholder__container {
        width: min(100%, 1391px);
    }

    /* desktop NEWS section */
    .news__section {
        padding-block: 7.5rem;
    }

    .news__container {
        max-width: 68.1875rem;
        display: grid;
        grid-template-columns: minmax(13rem, 15rem) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas:
            "title list"
            "cta list";
        column-gap: clamp(2rem, 5vw, 6.5rem);
        row-gap: 2rem;
        align-items: start;
    }

    .news__heading {
        grid-area: title;
        margin: 0;
        font-size: 4.5rem;
        letter-spacing: var(--letter-spacing-2);
        line-height: var(--line-height-140);
    }

    .news__list {
        grid-area: list;
        gap: 1rem;
        width: 100%;
    }

    .news__meta {
        gap: 2rem;
        flex-shrink: 0;
    }

    .news__date {
        font-family: var(--font-family-jp), sans-serif;
        font-size: var(--font-size-16);
    }

    .news__tag {
        font-size: var(--font-size-14);
        letter-spacing: var(--letter-spacing-2);
        padding-block: 0.2rem;
        padding-inline: 1rem;
    }

    .news__link {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 2.5rem;
        font-size: var(--font-size-15);
        letter-spacing: var(--letter-spacing-6);
        width: fit-content;
        padding-block: 0.5rem;
        padding-inline: 1.5rem;
        border-radius: var(--radius-round);
    }

    .news__title {
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }

    .news__cta {
        grid-area: cta;
        margin-block-start: 0;
        align-self: start;
    }

    .news__link:hover {
        background-color: rgba(235, 231, 229, 1);
    }

    .news__link:hover .news__tag--and-series {
        background-color: var(--and-series);
        color: var(--text-white);
    }

    .news__link:hover .news__tag--other-hotels {
        background-color: var(--other-hotels);
        color: var(--text-white);
    }

    .news__link:hover .news__tag--default {
        background-color: var(--black);
        color: var(--text-white);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fv-hero__slide {
        animation: none;
        opacity: 0;
    }

    .fv-hero__slide:first-child {
        opacity: 1;
    }

    .message__paragraph {
        transition: none;
        opacity: 1;
        clip-path: none;
    }
}