@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");

:root {
    --contact-ink: #1e1a17;
    --contact-surface: rgba(255, 248, 238, 0.93);
    --contact-accent: #d36045;
    --contact-border: rgba(57, 37, 25, 0.25);
    --contact-soft: #f1dbca;
}

:root {
    /*
        網頁原始設計尺寸。
        JavaScript 會依照瀏覽器尺寸更新 --page-scale。
    */
    --design-width: 1920px;
    --design-height: 1080px;
    --design-scroll-height: 3240px;
    --page-scale: 1;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
    background: #020817;
}

body {
    min-height: 100vh;

    background-image: url("./images/background/background.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

    font-family: Arial, "Noto Sans TC", sans-serif;
    overflow-x: hidden;

    --menu-scale: 1;
    --menu-fixed-scale: 1;
    --menu-opacity: 1;
    --content-fade: 0;
}

body.about-page-active {
    height: 100vh;
    overflow: hidden;
}

body.contact-page-active {
    height: 100vh;
    overflow: hidden;
}

body.partner-page-active {
    height: 100vh;
    overflow: hidden;
}

/* =========================================================
   等比例縮放畫布
========================================================= */

/* Header 永遠固定在瀏覽器視窗上 */
.header-viewport {
    position: fixed;
    inset: 0;

    overflow: visible;
    pointer-events: none;

    z-index: 1000;
}

/* Header 的原始設計畫布固定為 1920 × 1080 */
.header-stage {
    position: absolute;
    top: 0;
    left: 50%;

    width: var(--design-width);
    height: var(--design-height);

    transform:
        translateX(-50%)
        scale(var(--page-scale));

    transform-origin: top center;
    will-change: transform;

    pointer-events: none;
}

/* 內容外層的實際高度由 JavaScript 設定 */
.content-viewport {
    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;
}

/* 內容同樣使用 1920px 寬度的設計畫布 */
.content-stage {
    position: absolute;
    top: 0;
    left: 50%;

    width: var(--design-width);
    min-height: var(--design-scroll-height);

    transform:
        translateX(-50%)
        scale(var(--page-scale));

    transform-origin: top center;
    will-change: transform;
}

/* =========================================================
   Logo 與選單
========================================================= */

.site-header {
    position: absolute;
    inset: 0;

    width: var(--design-width);
    height: var(--design-height);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    pointer-events: none;
}

.logo-container {
    transform: translateY(0) scale(1);
    transform-origin: center center;

    transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
}

.logo-link {
    display: block;

    pointer-events: auto;
    cursor: pointer;
    text-decoration: none;
}

.logo-link .studio-logo {
    transition: opacity 0.3s ease;
}

.logo-link:hover .studio-logo {
    opacity: 0.7;
}

.studio-logo {
    display: block;
    width: 500px;
    height: auto;
    object-fit: contain;
}

.main-menu {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 70px;
    margin-top: 0;

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(20px)
        scale(var(--menu-fixed-scale));
    transform-origin: center top;

    transition:
        opacity 0.8s ease 0.4s,
        transform 1.2s cubic-bezier(0.65, 0, 0.35, 1),
        visibility 0.8s ease 0.4s;

    will-change: opacity, transform;
    pointer-events: auto;
}

.main-menu a {
    color: #ffffff;
    text-decoration: none;

    font-size: 14px;
    letter-spacing: 1px;
}

.main-menu a:hover {
    opacity: 0.5;
}

/*
    原本使用 vh 的位置改成以 1080px 設計高度計算：
    40% = 432px
    45% = 486px
*/
body.ready .logo-container,
html[data-intro="seen"] body .logo-container {
    transform:
        translateY(-432px)
        scale(0.3);
}

body.ready .main-menu,
html[data-intro="seen"] body .main-menu {
    opacity: var(--menu-opacity);
    visibility: visible;

    transform:
        translateY(-486px)
    scale(calc(var(--menu-scale) * var(--menu-fixed-scale)));
}

/* =========================================================
   頁面內容
========================================================= */

.page-content {
    position: relative;

    width: var(--design-width);
    min-height: var(--design-scroll-height);
    padding-top: 500px;

    opacity: 0;
    transform: translateY(30px);

    transition:
        opacity 3.8s ease 0.5s,
        transform 3.8s ease 0.5s;
}

body.ready .page-content,
html[data-intro="seen"] body .page-content {
    opacity: 1;
    transform: translateY(0);
}

.page-view {
    position: absolute;
    inset: 0;

    width: var(--design-width);
    min-height: var(--design-scroll-height);

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding-top: 240px;

    opacity: 0;
    visibility: visible;
    pointer-events: none;

    transition: opacity 1s ease;
}

.page-view.is-active {
    opacity: calc(1 - var(--content-fade));
    visibility: visible;
    pointer-events: auto;
}

.page-view.is-enter {
    opacity: 0;
    visibility: visible;
    pointer-events: auto;
}

.page-view.is-exit {
    opacity: 0;
    visibility: visible;
    pointer-events: none;
}

.page-view:not(.is-active):not(.is-enter):not(.is-exit) {
    visibility: hidden;
}

.page-content h1 {
    color: #000000;
    font-size: 50px;
    letter-spacing: 15px;
}

/* =========================================================
   ABOUT
========================================================= */

.about-heading-layer {
    justify-content: center;
    align-items: flex-start;

    padding-top: 240px;
    z-index: 2;
}

.about-heading {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    flex-shrink: 0;
}

.about-heading h1 {
    margin: 0;
    line-height: 1;
}

.about-image-layer {
    justify-content: center;
    align-items: flex-start;

    padding-top: 250px;
    z-index: 1;
}

html[data-intro="first"] .about-image-layer.is-active,
html[data-intro="first"] .about-image-layer.is-enter {
    transition-delay: 1s;
}

.about-image-layer.is-exit,
.about-image-layer:not(.is-active):not(.is-enter) {
    transition-delay: 0s;
}

.about-single-image {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
}

.about-single-image img {
    display: block;
    width: 820px;
    max-width: none;
    height: auto;
    object-fit: contain;
    image-rendering: auto;
}

.page-view[data-view="about"] {
    height: 1030px;
    min-height: 0;
    overflow: hidden;
}

/* =========================================================
   PARTNER 標題圖層
========================================================= */

.partner-heading-layer {
    justify-content: center;
    align-items: flex-start;

    padding-top: 240px;
    z-index: 2;
}

.partner-heading-layer.is-active {
    opacity: calc(1 - var(--partner-heading-fade, 0));
    visibility: visible;
    pointer-events: none;
}

.partner-heading {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    flex-shrink: 0;
}

.partner-heading h1 {
    margin: 0;
    line-height: 1;
}

/* =========================================================
   PARTNER 圖片圖層
========================================================= */

.partner-image-layer {
    justify-content: center;
    align-items: flex-start;

    padding-top: 300px;
    z-index: 1;
}

.partner-image-layer.is-active {
    opacity: calc(1 - var(--partner-image-fade, 0));
    visibility: visible;
    pointer-events: auto;
}

.partner-heading-layer.is-exit,
.partner-image-layer.is-exit {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* =========================================================
   PARTNER 卡片輪播
========================================================= */

.partner-carousel {
    position: relative;

    width: 100%;
    height: 580px;

    overflow: hidden;

    perspective: 1500px;
    perspective-origin: center center;

    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.partner-carousel.is-dragging {
    cursor: grabbing;
}

.partner-track {
    position: relative;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;
}

.partner-slide {
    position: absolute;

    left: 50%;
    top: 0;

    width: 820px;
    height: auto;

    opacity: 0;
    visibility: hidden;

    /*
        初始狀態只負責水平置中
        實際位置與大小由 JS 控制
    */
    transform: translateX(-50%);
    transform-origin: center center;
    transform-style: preserve-3d;

    backface-visibility: visible;
    -webkit-backface-visibility: visible;

    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.45s ease;

    pointer-events: none;
}

.partner-slide img {
    display: block;

    width: 100%;
    max-width: none;
    height: auto;

    object-fit: contain;
    image-rendering: auto;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /*
        避免圖片本身再套用額外效果
    */
    transform: translateZ(0);
    filter: none;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.partner-carousel.is-dragging .partner-slide {
    transition: none;
}

/* 左右按鈕 */
.partner-carousel-button {
    position: absolute;
    top: 42%;

    width: 48px;
    height: 48px;

    display: flex;
    justify-content: center;
    align-items: center;

    border: 1px solid rgba(100, 90, 80, 0.25);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);

    font-size: 34px;
    line-height: 1;

    cursor: pointer;

    z-index: 200;
    pointer-events: auto;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.partner-carousel-button:hover {
    transform: scale(1.08);
}

.partner-prev {
    left: 30px;
}

.partner-next {
    right: 30px;
}

/*
    不再使用依視窗寬度改版的手機 media query。
    現在所有物件都交給整個 1920 × 1080 畫布等比例縮放，
    才不會有部分物件縮小、部分物件重新排版的情況。
*/

/* 進場動畫完成後直接跟隨滾動位置 */
body.scroll-linked .logo-container,
body.scroll-linked .main-menu,
body.scroll-linked .page-content {
    transition: none;
}

/* =========================================================
   CONTACT
========================================================= */

.page-view[data-view="contact"] {
    justify-content: center;
    align-items: flex-start;

    padding-top: 250px;

    height: 1020px;
    min-height: 0;
    overflow: hidden;

    z-index: 6;
}

.contact-board {
    position: relative;
    z-index: 7;
    pointer-events: auto;
    width: 1216px;
    height: 754px;
}

.contact-board-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.contact-overlay {
    position: absolute;
    inset: 0;

    z-index: 1;
}

.contact-form,
.contact-aside,
.contact-form * {
    pointer-events: auto;
}

.contact-form {
    position: absolute;
    inset: 0;

    z-index: 2;
    pointer-events: none;
}

.contact-field,
.contact-submit {
    pointer-events: auto;
}

.contact-field {
    position: absolute;
    display: block;
}

.field-name {
    left: 6.8%;
    top: 24.5%;
    width: 26.4%;
    height: 5.9%;
}

.field-email {
    left: 34.5%;
    top: 24.5%;
    width: 25.6%;
    height: 5.9%;
}

.field-phone {
    left: 6.8%;
    top: 36.5%;
    width: 26.4%;
    height: 5.9%;
}

.field-company {
    left: 34.5%;
    top: 36.5%;
    width: 25.6%;
    height: 5.9%;
}

.field-other {
    left: 6.8%;
    top: 48.6%;
    width: 26.4%;
    height: 5.9%;
}

.field-budget {
    left: 34.5%;
    top: 48.6%;
    width: 25.6%;
    height: 5.9%;
}

.field-detail {
    left: 7%;
    top: 60.4%;
    width: 53%;
    height: 22.9%;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    height: 100%;

    border: none;
    outline: none;
    border-radius: 14px;

    background: rgba(9, 20, 37, 0.08);
    color: #f8d59d;

    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;

    padding: 0 16px;

    cursor: text;

    transition:
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

.contact-field textarea {
    resize: none;
    padding-top: 12px;
    padding-bottom: 12px;
}

.contact-field select {
    appearance: none;
    cursor: pointer;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
    color: rgba(248, 213, 158, 0.52);
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    background: rgba(11, 24, 45, 0.48);
    box-shadow: 0 0 0 2px rgba(255, 189, 103, 0.85), 0 0 0 8px rgba(255, 189, 103, 0.12);
}

.contact-submit {
    position: absolute;
    left: 6%;
    top: 85%;
    width: 54.8%;
    height: 5.9%;

    border: none;
    border-radius: 14px;
    background: transparent;
    color: rgba(249, 216, 161, 0.9);

    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 4px;

    cursor: pointer;
    transition:
        background-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;
}

.contact-submit:hover {
    background: rgba(11, 24, 45, 0.38);
    box-shadow: 0 0 0 2px rgba(255, 189, 103, 0.85), 0 0 0 8px rgba(255, 189, 103, 0.12);
    color: #ffe4b8;
}

.contact-aside {
    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;
}

.contact-aside * {
    pointer-events: auto;
}

.sns-links {
    position: absolute;
    left: 66.3%;
    top: 31%;
    width: 31%;
    height: 5.4%;
}

.sns-link {
    position: absolute;

    text-decoration: none;

    display: flex;
    justify-content: center;
    align-items: center;

    height: 100%;
    width: 23.5%;
    border-radius: 999px;
    border: none;

    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;

    color: rgba(248, 213, 158, 0.86);
    background: transparent;

    transition:
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

.sns-link-ig {
    left: 0;
    top: 0;
}

.sns-link-fb {
    left: 31.3%;
    top: 0;
}

.sns-link-x {
    left: 62.6%;
    top: 0;
}

.sns-link:hover {
    background: rgba(11, 24, 45, 0.38);
    box-shadow: 0 0 0 2px rgba(255, 189, 103, 0.85), 0 0 0 8px rgba(255, 189, 103, 0.12);
}

.contact-direct-list {
    position: absolute;
    left: 65%;
    top: 42.3%;
    width: 27.1%;
    height: 8.5%;

    margin: 0;
    padding: 0;
}

.contact-direct-item {
    position: absolute;
    right: 0;

    margin: 0;
    width: 100%;
    text-align: right;

    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.2px;

    color: rgba(248, 213, 158, 0.92);
}

.contact-direct-item span {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-align: right;

    color: rgba(248, 213, 158, 0.78);
}

.contact-direct-discord {
    top: -0.5rem;
}

.contact-direct-mail {
    top: 3.8rem;
}

.contact-direct-line {
    top: 8.6rem;
}

.contact-note {
    position: absolute;
    left: 66.7%;
    top: 83%;
    width: 27.1%;
    height: 5.9%;

    display: flex;
    align-items: center;

    margin: 0;
    padding: 0 14px;

    font-family: "Zen Kaku Gothic New", "Noto Sans TC", sans-serif;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.5px;
    color: rgba(248, 213, 158, 0.88);
}

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

@keyframes contactRise {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =========================================================
   手機版響應式調整
========================================================= */

/* 小型手機（寬度小於 480px） */
@media (max-width: 479px) {
    .main-menu {
        gap: 8px !important;
    }

    .main-menu a {
        font-size: 8px !important;
        letter-spacing: -0.5px !important;
        padding: 0 1px;
        white-space: nowrap;
    }

    .studio-logo {
        width: 280px;
    }
}

/* 手機屏幕（480px ~ 768px） */
@media (min-width: 480px) and (max-width: 767px) {
    .main-menu {
        gap: 12px !important;
    }

    .main-menu a {
        font-size: 9px !important;
        letter-spacing: -0.3px !important;
        padding: 0 2px;
    }

    .studio-logo {
        width: 320px;
    }
}

/* 平板屏幕（768px ~ 1024px） */
@media (min-width: 768px) and (max-width: 1023px) {
    .main-menu {
        gap: 40px !important;
    }

    .main-menu a {
        font-size: 12px !important;
        letter-spacing: 0px !important;
    }
}