/**
 * =========================================================
 * SUNIVA Experience Engine
 * Core Styles v1.0.0
 *
 * 配置先
 * /html/assets/css/suniva/core.css
 * =========================================================
 */


/* =========================================================
   共通デザイントークン
   ========================================================= */

:root {
    --suniva-white: #ffffff;
    --suniva-pearl: #fffdf9;
    --suniva-ivory: #faf7f1;
    --suniva-beige: #eee5d8;
    --suniva-gold: #c7a36a;
    --suniva-gold-light: #e6d3ad;
    --suniva-gold-dark: #8b6a37;
    --suniva-pink: #f2d9df;
    --suniva-blue: #dcebf5;
    --suniva-text: #352f2b;
    --suniva-text-soft: #756d67;
    --suniva-border: rgba(139, 106, 55, 0.16);
    --suniva-shadow: 0 24px 70px rgba(64, 48, 35, 0.12);
    --suniva-shadow-soft: 0 12px 36px rgba(64, 48, 35, 0.08);

    --suniva-radius-small: 12px;
    --suniva-radius-medium: 22px;
    --suniva-radius-large: 36px;
    --suniva-radius-pill: 999px;

    --suniva-ease:
        cubic-bezier(0.22, 1, 0.36, 1);

    --suniva-duration-fast: 220ms;
    --suniva-duration: 600ms;
    --suniva-duration-slow: 1000ms;

    --suniva-header-height: 76px;
    --suniva-content-width: 1200px;
    --suniva-side-space: clamp(20px, 5vw, 72px);
}


/* =========================================================
   Engineルート
   ========================================================= */

[data-suniva-page],
[data-suniva-config] {
    position: relative;
    width: 100%;
    color: var(--suniva-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

[data-suniva-page] *,
[data-suniva-page] *::before,
[data-suniva-page] *::after,
[data-suniva-config] *,
[data-suniva-config] *::before,
[data-suniva-config] *::after {
    box-sizing: border-box;
}

[data-suniva-page] img,
[data-suniva-config] img {
    max-width: 100%;
}

[data-suniva-page] button,
[data-suniva-page] input,
[data-suniva-page] textarea,
[data-suniva-config] button,
[data-suniva-config] input,
[data-suniva-config] textarea {
    font: inherit;
}

[data-suniva-page] button,
[data-suniva-config] button {
    -webkit-tap-highlight-color: transparent;
}

[data-suniva-page].suniva-engine-ready,
[data-suniva-config].suniva-engine-ready {
    opacity: 1;
}

[data-suniva-page].is-suniva-config-error,
[data-suniva-config].is-suniva-config-error {
    opacity: 1;
}


/* =========================================================
   共通コンテナ
   ========================================================= */

.suniva-container {
    width: min(
        calc(100% - var(--suniva-side-space) * 2),
        var(--suniva-content-width)
    );
    margin-inline: auto;
}

.suniva-section {
    position: relative;
    padding-block:
        clamp(80px, 10vw, 160px);
    overflow: clip;
}

.suniva-section--compact {
    padding-block:
        clamp(56px, 7vw, 100px);
}

.suniva-section--pearl {
    background:
        linear-gradient(
            180deg,
            var(--suniva-pearl),
            var(--suniva-white)
        );
}

.suniva-section--dark {
    color: var(--suniva-white);
    background: #181513;
}

.suniva-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: var(--suniva-gold-dark);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.suniva-eyebrow::before {
    width: 28px;
    height: 1px;
    content: "";
    background: currentColor;
}

.suniva-title {
    margin: 0;
    color: inherit;
    font-size:
        clamp(32px, 5vw, 68px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.suniva-description {
    max-width: 680px;
    margin: 28px 0 0;
    color: var(--suniva-text-soft);
    font-size:
        clamp(15px, 1.5vw, 18px);
    line-height: 2;
}


/* =========================================================
   Header
   ========================================================= */

[data-suniva-header] {
    transition:
        color var(--suniva-duration-fast) ease,
        background-color var(--suniva-duration-fast) ease,
        border-color var(--suniva-duration-fast) ease,
        box-shadow var(--suniva-duration-fast) ease,
        opacity var(--suniva-duration-fast) ease,
        transform var(--suniva-duration-fast) ease,
        backdrop-filter var(--suniva-duration-fast) ease;
}

[data-suniva-header].is-suniva-fixed {
    position: fixed;
    z-index: 800;
    top: 0;
    right: 0;
    left: 0;
}

[data-suniva-header].is-scrolled {
    border-bottom:
        1px solid rgba(139, 106, 55, 0.1);
    background:
        rgba(255, 253, 249, 0.86);
    box-shadow:
        0 10px 35px rgba(41, 32, 24, 0.06);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

[data-suniva-header].is-hidden {
    pointer-events: none;
    opacity: 0;
    transform: translateY(-110%);
}


/* =========================================================
   Menu
   ========================================================= */

[data-suniva-menu-button] {
    position: relative;
    z-index: 3;
    cursor: pointer;
}

[data-suniva-navigation] {
    transition:
        opacity var(--suniva-duration-fast) ease,
        visibility var(--suniva-duration-fast) ease,
        transform var(--suniva-duration) var(--suniva-ease);
}

body.is-suniva-menu-locked {
    overflow: hidden;
    touch-action: none;
}

[data-suniva-menu-button]
    [data-suniva-menu-line] {
    transition:
        opacity var(--suniva-duration-fast) ease,
        transform var(--suniva-duration-fast) ease;
}

[data-suniva-menu-button].is-active
    [data-suniva-menu-line]:first-child {
    transform:
        translateY(6px) rotate(45deg);
}

[data-suniva-menu-button].is-active
    [data-suniva-menu-line]:nth-child(2) {
    opacity: 0;
}

[data-suniva-menu-button].is-active
    [data-suniva-menu-line]:last-child {
    transform:
        translateY(-6px) rotate(-45deg);
}


/* =========================================================
   Reveal Animation
   ========================================================= */

[data-suniva-reveal] {
    opacity: 0;
    transform: translateY(38px);
    transition:
        opacity var(--suniva-duration-slow)
            var(--suniva-ease),
        transform var(--suniva-duration-slow)
            var(--suniva-ease);
    transition-delay:
        var(--suniva-reveal-delay, 0ms);
    will-change: opacity, transform;
}

[data-suniva-reveal="fade"] {
    transform: none;
}

[data-suniva-reveal="left"] {
    transform: translateX(-42px);
}

[data-suniva-reveal="right"] {
    transform: translateX(42px);
}

[data-suniva-reveal="scale"] {
    transform: scale(0.96);
}

[data-suniva-reveal].is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
}


/* =========================================================
   Guide対象セクション強調
   ========================================================= */

.is-suniva-guide-highlighted {
    position: relative;
    z-index: 2;
    border-radius:
        var(--suniva-radius-medium);
    outline:
        2px solid rgba(199, 163, 106, 0.72);
    outline-offset: 10px;
    box-shadow:
        0 0 0 14px
        rgba(199, 163, 106, 0.08);
    transition:
        outline-color var(--suniva-duration) ease,
        box-shadow var(--suniva-duration) ease;
    animation:
        sunivaGuideHighlight 2.2s ease-in-out infinite;
}

@keyframes sunivaGuideHighlight {
    0%,
    100% {
        outline-color:
            rgba(199, 163, 106, 0.44);
        box-shadow:
            0 0 0 8px
            rgba(199, 163, 106, 0.04);
    }

    50% {
        outline-color:
            rgba(199, 163, 106, 0.88);
        box-shadow:
            0 0 0 18px
            rgba(199, 163, 106, 0.1);
    }
}


/* =========================================================
   画像状態
   ========================================================= */

[data-suniva-image-frame] {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            var(--suniva-ivory),
            var(--suniva-beige)
        );
}

[data-suniva-image-frame] img {
    opacity: 0;
    transition:
        opacity var(--suniva-duration) ease,
        transform var(--suniva-duration-slow)
            var(--suniva-ease);
}

[data-suniva-image-frame]
    img.is-loaded {
    opacity: 1;
}

[data-suniva-image-frame]
    img.is-error {
    visibility: hidden;
}

[data-suniva-image-frame]
    .suniva-image-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--suniva-text-soft);
    font-size: 13px;
    letter-spacing: 0.08em;
}

[data-suniva-image-frame]:not(
    .has-image-error
) .suniva-image-placeholder {
    pointer-events: none;
    opacity: 0;
}


/* =========================================================
   Experience起動ボタン
   ========================================================= */

.suniva-experience-actions {
    position: fixed;
    z-index: 760;
    top:
        max(18px, env(safe-area-inset-top));
    right:
        max(18px, env(safe-area-inset-right));
    display: flex;
    align-items: center;
    gap: 10px;
}

.suniva-experience-actions button {
    min-height: 44px;
    padding: 10px 17px;
    border:
        1px solid rgba(255, 255, 255, 0.38);
    border-radius:
        var(--suniva-radius-pill);
    color: var(--suniva-white);
    background:
        rgba(24, 21, 19, 0.7);
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.15);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition:
        color var(--suniva-duration-fast) ease,
        background-color var(--suniva-duration-fast) ease,
        border-color var(--suniva-duration-fast) ease,
        transform var(--suniva-duration-fast) ease,
        box-shadow var(--suniva-duration-fast) ease;
}

.suniva-experience-actions
    button:hover {
    color: var(--suniva-text);
    border-color:
        rgba(199, 163, 106, 0.5);
    background: var(--suniva-white);
    box-shadow:
        0 12px 32px
        rgba(64, 48, 35, 0.16);
    transform: translateY(-2px);
}

.suniva-experience-actions
    button:focus-visible {
    outline:
        3px solid rgba(199, 163, 106, 0.42);
    outline-offset: 3px;
}


/* =========================================================
   共通ボタン
   ========================================================= */

.suniva-button {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 26px;
    border:
        1px solid transparent;
    border-radius:
        var(--suniva-radius-pill);
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    transition:
        color var(--suniva-duration-fast) ease,
        background-color var(--suniva-duration-fast) ease,
        border-color var(--suniva-duration-fast) ease,
        box-shadow var(--suniva-duration-fast) ease,
        transform var(--suniva-duration-fast) ease;
}

.suniva-button--primary {
    color: var(--suniva-white);
    background:
        linear-gradient(
            135deg,
            var(--suniva-gold-dark),
            var(--suniva-gold)
        );
    box-shadow:
        0 12px 30px
        rgba(139, 106, 55, 0.22);
}

.suniva-button--secondary {
    color: var(--suniva-text);
    border-color:
        var(--suniva-border);
    background:
        rgba(255, 255, 255, 0.82);
}

.suniva-button:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

.suniva-button:focus-visible {
    outline:
        3px solid rgba(199, 163, 106, 0.4);
    outline-offset: 3px;
}


/* =========================================================
   アクセシビリティ
   ========================================================= */

.suniva-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

[data-suniva-page] :focus-visible,
[data-suniva-config] :focus-visible {
    outline:
        3px solid rgba(199, 163, 106, 0.48);
    outline-offset: 3px;
}


/* =========================================================
   Gallery・Presentation・Cinema表示時
   ========================================================= */

html.is-suniva-gallery-open,
html.is-suniva-presentation-open,
html.is-suniva-cinema-open,
body.is-suniva-gallery-open,
body.is-suniva-presentation-open,
body.is-suniva-cinema-open {
    overflow: hidden;
    overscroll-behavior: none;
}

body.is-suniva-gallery-open
    .suniva-experience-actions,
body.is-suniva-presentation-open
    .suniva-experience-actions,
body.is-suniva-cinema-open
    .suniva-experience-actions {
    pointer-events: none;
    opacity: 0;
}


/* =========================================================
   スマートフォン
   ========================================================= */

@media (max-width: 767px) {
    :root {
        --suniva-header-height: 64px;
        --suniva-side-space: 20px;
        --suniva-radius-large: 26px;
    }

    .suniva-section {
        padding-block:
            clamp(64px, 20vw, 104px);
    }

    .suniva-description {
        margin-top: 20px;
        line-height: 1.9;
    }

    .suniva-experience-actions {
        top:
            max(
                10px,
                env(safe-area-inset-top)
            );
        right:
            max(
                10px,
                env(safe-area-inset-right)
            );
        gap: 6px;
    }

    .suniva-experience-actions button {
        min-height: 40px;
        padding: 8px 12px;
        font-size: 11px;
    }

    .is-suniva-guide-highlighted {
        outline-offset: 5px;
        box-shadow:
            0 0 0 7px
            rgba(199, 163, 106, 0.07);
    }
}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {
    [data-suniva-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .is-suniva-guide-highlighted {
        animation: none;
    }

    [data-suniva-header],
    [data-suniva-navigation],
    .suniva-button,
    .suniva-experience-actions button {
        scroll-behavior: auto;
        transition-duration: 0.01ms;
    }
}


/* =========================================================
   印刷
   ========================================================= */

@media print {
    .suniva-experience-actions,
    .suniva-guide-widget,
    [data-suniva-menu-button] {
        display: none !important;
    }

    [data-suniva-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    [data-suniva-header].is-suniva-fixed {
        position: static;
    }
}