/* ===== Reset / Base ===== */
*{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
margin: 0;
background: #0e0e0e;
color: #ffffff;
font-family: -apple-system, BlinkMacSystemFont, "Inter",
            "PingFang TC", "Noto Sans TC", sans-serif;
letter-spacing: .04em;
}

/* ===== 選取顏色（Selection） ===== */
::selection{
background: rgba(255, 204, 116, 0.35);
color: #fff;
}

/* ===== 進場：由黑慢慢亮起 ===== */
.fade-overlay{
position: fixed;
inset: 0;
background: #000;
opacity: 1;
pointer-events: none;
z-index: 9999;

will-change: opacity;
animation: screenBrighten 1600ms ease forwards;
}

@keyframes screenBrighten{
to{ opacity: 0; }
}

/* ===== 中央置中區塊 ===== */
.center{
min-height: 100vh;
padding: 40px 24px;

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

text-align: center;
}

/* ===== Logo ===== */
.brand-logo{
width: min(550px, 75vw);
height: auto;

opacity: 0;
transform: translateY(0);
will-change: opacity, transform;

  /*  淡入 */
animation: logoFadeIn 1800ms ease forwards;

  /* ✅ 游標細節：不要變 I-beam */
cursor: default;
user-select: none;
-webkit-user-drag: none;
}

/* ===== 文字 ===== */
.text-group{
margin-top: 0;
opacity: 0;
transform: translateY(8px);
pointer-events: none;
will-change: opacity, transform;
}

/* 兩行文字要近 */
.contact{ margin: 0 0 2px 0; font-size: 20px; opacity: .85; }
.subtitle{ margin: 0; font-size: 20px; opacity: .65; }

/* email：不要底線 + cursor + hover 微亮 */
.mail{
color: inherit;
text-decoration: none;
opacity: .9;
cursor: pointer;
}

.mail:hover{
opacity: 1;
}

/* （focus） */
.mail:focus-visible{
outline: 2px solid rgba(255, 204, 116, 0.55);
outline-offset: 6px;
border-radius: 8px;
}

/* ===== 第二段：logo 上移，文字彈出 ===== */
body.is-reveal .brand-logo{
transform: translateY(-34px);
transition: transform 900ms cubic-bezier(.22,.61,.36,1);
margin-bottom: 20px;
}

body.is-reveal .text-group{
opacity: 1;
transform: translateY(0);
transition:
    opacity 700ms ease,
    transform 1100ms ease;
pointer-events: auto;
}

/* =====  呼吸感 ===== */
body.is-breathing .brand-logo{
animation: logoBreath 7.5s ease-in-out infinite;
}

@keyframes logoBreath{
0%, 100%{
    opacity: .95;
    transform: translateY(-34px);
}
50%{
    opacity: .985;
    transform: translateY(calc(-34px - 1px));
}
}

/* ===== Footer ===== */
.footer{
position: fixed;
left: 0;
right: 0;
bottom: 70px;

text-align: center;
font-size: 12px;

opacity: 0;
transform: translateY(6px);
will-change: opacity, transform;

transition:
    opacity 700ms ease,
    transform 700ms ease;
}

body.is-footer-visible .footer{
opacity: .45;
transform: translateY(0);
}

/* ===== Keyframes ===== */
@keyframes logoFadeIn{
to{ opacity: .95; }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce){
.fade-overlay{ animation: none; opacity: 0; }

.brand-logo{
    animation: none;
    opacity: .95;
    transform: translateY(-34px);
}

.text-group{
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.footer{
    opacity: .45;
    transform: none;
    transition: none;
}

.mail:focus-visible{ outline: none; }
}