/* Temporary preview-only motion layer. Keeps the original homepage colors. */
.home-preview-page {
    --preview-motion-distance: 46px;
    --preview-motion-scale: .94;
    --preview-motion-delay: 0ms;
    --preview-glow: rgba(198, 164, 110, .26);
    --preview-line: rgba(198, 164, 110, .34);
    --preview-sheen: rgba(255, 248, 232, .46);
}

.home-preview-page .wrapper {
    overflow: hidden;
}

/* Scroll reveal: card bounce without changing layout or colors. */
.home-preview-page .story-detail-card.reveal,
.home-preview-page .brand-card.reveal,
.home-preview-page .culture-list > li.reveal,
.home-preview-page .shops-list.reveal > li,
.home-preview-page .news-list.reveal > li,
.home-preview-page .recruit-item.reveal {
    opacity: 0;
    transform: translate3d(0, var(--preview-motion-distance), 0) scale(var(--preview-motion-scale));
    transform-origin: 50% 82%;
    will-change: transform, opacity;
}

.home-preview-page .story-detail-card.reveal.is-active,
.home-preview-page .brand-card.reveal.is-active,
.home-preview-page .culture-list > li.reveal.is-active,
.home-preview-page .shops-list.reveal.is-active > li,
.home-preview-page .news-list.reveal.is-active > li,
.home-preview-page .recruit-item.reveal.is-active {
    animation: previewCardJump 1s cubic-bezier(.18, .92, .2, 1.24) both;
    animation-delay: var(--preview-motion-delay);
}

.home-preview-page .story-detail-card.reveal:nth-child(2),
.home-preview-page .brand-card.reveal:nth-child(2),
.home-preview-page .culture-list > li.reveal:nth-child(2),
.home-preview-page .shops-list.reveal > li:nth-child(2),
.home-preview-page .news-list.reveal > li:nth-child(2) {
    --preview-motion-delay: 70ms;
}

.home-preview-page .story-detail-card.reveal:nth-child(3),
.home-preview-page .brand-card.reveal:nth-child(3),
.home-preview-page .culture-list > li.reveal:nth-child(3),
.home-preview-page .shops-list.reveal > li:nth-child(3),
.home-preview-page .news-list.reveal > li:nth-child(3) {
    --preview-motion-delay: 140ms;
}

.home-preview-page .brand-card.reveal:nth-child(4),
.home-preview-page .culture-list > li.reveal:nth-child(4),
.home-preview-page .shops-list.reveal > li:nth-child(4) {
    --preview-motion-delay: 210ms;
}

.home-preview-page .culture-list > li.reveal:nth-child(5) {
    --preview-motion-delay: 280ms;
}

.home-preview-page .culture-list > li.reveal:nth-child(6) {
    --preview-motion-delay: 350ms;
}

@keyframes previewCardJump {
    0% {
        opacity: 0;
        transform: translate3d(0, 48px, 0) scale(.94);
        filter: blur(8px);
    }
    48% {
        opacity: 1;
        transform: translate3d(0, -16px, 0) scale(1.032);
        filter: blur(0);
    }
    68% {
        transform: translate3d(0, 7px, 0) scale(.988);
    }
    84% {
        transform: translate3d(0, -3px, 0) scale(1.006);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

/* Title reveal: refined type motion and a subtle line sweep. */
.home-preview-page .common-ttl-1.reveal,
.home-preview-page .brand-bounce-title.reveal,
.home-preview-page .section-lead.reveal,
.home-preview-page .factory-block .section-label.reveal,
.home-preview-page .factory-block .factory-comment.reveal,
.home-preview-page .phs-copy.reveal h2,
.home-preview-page .story-link.reveal,
.home-preview-page .shops-hero.reveal .shops-animated-title,
.home-preview-page .shops-main.reveal,
.home-preview-page .story-detail-card.reveal h2 {
    will-change: transform, opacity, filter, letter-spacing;
}

.home-preview-page .common-ttl-1.reveal.is-active,
.home-preview-page .brand-bounce-title.reveal.is-active,
.home-preview-page .section-lead.reveal.is-active,
.home-preview-page .factory-block .section-label.reveal.is-active,
.home-preview-page .factory-block .factory-comment.reveal.is-active,
.home-preview-page .phs-copy.reveal.is-active h2,
.home-preview-page .story-link.reveal.is-active,
.home-preview-page .shops-hero.reveal.is-active .shops-animated-title,
.home-preview-page .shops-main.reveal.is-active,
.home-preview-page .story-detail-card.reveal.is-active h2 {
    animation: previewTitleRise .9s cubic-bezier(.18, .82, .2, 1) both;
}

.home-preview-page .common-ttl-1,
.home-preview-page .brand-bounce-title,
.home-preview-page .shops-animated-title,
.home-preview-page .phs-copy h2,
.home-preview-page .story-detail-card h2 {
    position: relative;
}

.home-preview-page .story-link {
    position: absolute;
    left: 50%;
    bottom: 16%;
    transform: translate3d(-50%, 18px, 0);
    will-change: transform, opacity, filter;
}

.home-preview-page .story-link.reveal.is-active {
    animation: previewStoryLinkRise .9s cubic-bezier(.18, .82, .2, 1) both;
}

.home-preview-page .story-link::before {
    position: static;
    display: block;
    margin-bottom: 18px;
}

.home-preview-page .common-ttl-1::after,
.home-preview-page .brand-bounce-title::after,
.home-preview-page .story-link::after,
.home-preview-page .shops-animated-title::after,
.home-preview-page .phs-copy h2::after,
.home-preview-page .story-detail-card h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -.42em;
    width: min(92px, 42%);
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0;
    transform: translate3d(-50%, 8px, 0) scaleX(.2);
    transform-origin: 50% 50%;
}

.home-preview-page .common-ttl-1.reveal.is-active::after,
.home-preview-page .brand-bounce-title.reveal.is-active::after,
.home-preview-page .shops-hero.reveal.is-active .shops-animated-title::after,
.home-preview-page .phs-copy.reveal.is-active h2::after,
.home-preview-page .story-detail-card.reveal.is-active h2::after {
    animation: previewTitleLine .82s cubic-bezier(.2, .74, .2, 1) .2s both;
}

@keyframes previewTitleRise {
    0% {
        opacity: 0;
        letter-spacing: .34em;
        transform: translate3d(0, 18px, 0);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
}

@keyframes previewTitleLine {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 8px, 0) scaleX(.2);
    }
    45% {
        opacity: .8;
    }
    100% {
        opacity: .42;
        transform: translate3d(-50%, 0, 0) scaleX(1);
    }
}

@keyframes previewStoryLinkRise {
    0% {
        opacity: 0;
        transform: translate3d(-50%, 28px, 0) scale(.98);
        filter: blur(4px);
    }
    60% {
        opacity: 1;
        transform: translate3d(-50%, -6px, 0) scale(1.01);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translate3d(-50%, 0, 0) scale(1);
        filter: blur(0);
    }
}

/* Image and visual-card effects: light sweep, depth, and hover lift. */
.home-preview-page .phs-image,
.home-preview-page .split-card-img,
.home-preview-page .story-photo,
.home-preview-page .brand-img,
.home-preview-page .culture-img,
.home-preview-page .shop-thumb,
.home-preview-page .shops-hero,
.home-preview-page .recruit-item {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.home-preview-page .phs-image::before,
.home-preview-page .split-card-img::before,
.home-preview-page .brand-img::after,
.home-preview-page .culture-img::after,
.home-preview-page .shop-thumb::after,
.home-preview-page .shops-hero::before,
.home-preview-page .recruit-item::after {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(112deg, transparent 0%, transparent 26%, var(--preview-sheen) 42%, rgba(255, 255, 255, .08) 48%, transparent 64%, transparent 100%);
    opacity: 0;
    transform: translateX(-120%) skewX(-12deg);
    mix-blend-mode: screen;
}

.home-preview-page .phs-image.is-on::before,
.home-preview-page .split-card-img.is-on::before,
.home-preview-page .brand-card.reveal.is-active .brand-img::after,
.home-preview-page .culture-list > li.reveal.is-active .culture-img::after,
.home-preview-page .shops-list.reveal.is-active .shop-thumb::after,
.home-preview-page .shops-hero.reveal.is-active::before,
.home-preview-page .recruit-item.reveal.is-active::after {
    animation: previewImageSweep 1.45s cubic-bezier(.18, .72, .18, 1) var(--preview-motion-delay) both;
}

@keyframes previewImageSweep {
    0% {
        opacity: 0;
        transform: translateX(-120%) skewX(-12deg);
    }
    18%, 62% {
        opacity: .72;
    }
    100% {
        opacity: 0;
        transform: translateX(120%) skewX(-12deg);
    }
}

.home-preview-page .phs-image::after,
.home-preview-page .split-card-img::after,
.home-preview-page .brand-img::before,
.home-preview-page .culture-img::before,
.home-preview-page .shop-thumb::before {
    z-index: 3;
}

.home-preview-page .story-photo img,
.home-preview-page .culture-img img {
    transition: transform .9s cubic-bezier(.2, .78, .2, 1), filter .6s ease;
    will-change: transform;
}

.home-preview-page .brand-card a,
.home-preview-page .culture-card,
.home-preview-page .shops-list li,
.home-preview-page .news-list li a,
.home-preview-page .recruit-item,
.home-preview-page .phs-image,
.home-preview-page .split-card-img {
    transition: transform .45s cubic-bezier(.2, .78, .2, 1), box-shadow .45s ease, filter .45s ease, border-color .45s ease;
}

.home-preview-page .brand-card a:hover,
.home-preview-page .culture-card:hover,
.home-preview-page .shops-list li:hover,
.home-preview-page .news-list li a:hover,
.home-preview-page .recruit-item:hover,
.home-preview-page .phs-image:hover,
.home-preview-page .split-card-img:hover {
    transform: translate3d(0, -8px, 0) scale(1.012);
    box-shadow: 0 28px 70px rgba(30, 20, 12, .22), 0 0 0 1px var(--preview-line) !important;
}

.home-preview-page .brand-card a:hover .brand-img::after,
.home-preview-page .culture-card:hover .culture-img::after,
.home-preview-page .shops-list li:hover .shop-thumb::after,
.home-preview-page .recruit-item:hover::after,
.home-preview-page .phs-image:hover::before,
.home-preview-page .split-card-img:hover::before {
    animation: previewImageSweep 1.05s cubic-bezier(.18, .72, .18, 1) both;
}

.home-preview-page .phs-image:hover img,
.home-preview-page .split-card-img:hover img,
.home-preview-page .culture-card:hover .culture-img img {
    transform: scale(1.055);
    filter: saturate(1.04) contrast(1.03);
}

/* Subtle live feeling for the hero while preserving its original palette. */
.home-preview-page .toppage-mv-visual {
    will-change: transform, filter;
    filter: drop-shadow(0 30px 56px rgba(0, 0, 0, .24));
}

.home-preview-page .mv-frame {
    transition: transform .08s linear, filter .45s ease, box-shadow .45s ease;
}

.home-preview-page .mv-frame:hover {
    filter: brightness(1.06) saturate(1.04);
    box-shadow: 0 34px 92px rgba(0, 0, 0, .4), 0 0 0 1px var(--preview-line) !important;
}

.home-preview-page .toppage-mv-scroll span::after {
    animation: previewScrollArrow 1.8s ease-in-out infinite;
}

@keyframes previewScrollArrow {
    0%, 100% {
        opacity: .5;
        transform: translateY(0) rotate(45deg);
    }
    50% {
        opacity: 1;
        transform: translateY(8px) rotate(45deg);
    }
}

@media (max-width: 900px) {
    .home-preview-page {
        --preview-motion-distance: 24px;
        --preview-motion-scale: .98;
    }

    .home-preview-page .brand-card a:hover,
    .home-preview-page .culture-card:hover,
    .home-preview-page .shops-list li:hover,
    .home-preview-page .news-list li a:hover,
    .home-preview-page .recruit-item:hover,
    .home-preview-page .phs-image:hover,
    .home-preview-page .split-card-img:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-preview-page *,
    .home-preview-page *::before,
    .home-preview-page *::after {
        animation: none !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}