/* =========================================================
   GJLMoTea · Create Projects · index page styles
   ========================================================= */

body {
    background-image: url("https://gjlmotea.com/assets/picture/scene/Drawall_min.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    min-height: 100vh;
    padding-top: 80px;
    color: white;
}

a {
    color: #ffc107;
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: #ee7676;
    text-decoration: none;
    transform: scale(1.05);
    display: inline-block;
}

/* ---------- Content box ---------- */

.content-box {
    background: rgba(0, 0, 0, 0.75);
    border-radius: 15px;
    padding: 50px 40px;
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    text-align: center;
    backdrop-filter: blur(5px);
}

.intro-tag {
    display: inline-block;
    font-size: 0.78rem;
    letter-spacing: 6px;
    color: rgba(255, 193, 7, 0.7);
    border: 1px solid rgba(255, 193, 7, 0.3);
    padding: 4px 14px;
    border-radius: 20px;
    margin-bottom: 18px;
}

.intro-title {
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: 4px;
    margin-bottom: 10px;
    color: #fff;
}

.intro-desc {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 40px;
    letter-spacing: 1px;
    line-height: 1.8;
}

/* ---------- Project list ---------- */

.featurette-list {
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 0;
    font-size: 2.5rem;
    padding: 15px 0;
}

.featurette-list small {
    display: block;
    font-size: 0.45em;
    letter-spacing: 4px;
    opacity: 0.4;
    margin-top: 6px;
    font-weight: 400;
}

hr.featurette-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    margin: 40px 0;
}

/* ---------- Per-project signature effects ----------
   四條副標皆有「彩字呼吸」共通色循環（起始色各異）+ 各自招牌特效：
     GEB    · 微跳 + 多圈後空翻 + 落地
     QRCube · QR 定位符閃現      + 白光斜掠（左下→右上）
     WAVE   · 音波橫向掃描        + 白光斜掠
     MVNDVS · 小地球自轉橫越      + 白光斜掠
*/

.accent-geb,
.accent-qr,
.accent-wave,
.accent-world {
    position: relative;
    display: inline-block;
    font-weight: 700;
    white-space: nowrap;
}

/* ===== 共用 keyframes ===== */
@keyframes rainbow-shift {
    0%   { background-position:   0%   0%; }
    100% { background-position: 300% 300%; }
}

@keyframes glow-breath {
    0%, 100% { filter: drop-shadow(0 0  6px rgba(180,  80, 220, 0.40)); }
    50%      { filter: drop-shadow(0 0 18px rgba(255, 100, 200, 0.75)); }
}

/* ===== 白光斜掠（只用於 GEB） — 透過 background-clip:text 只亮文字 ===== */
@keyframes light-sweep {
    0%, 88%  { background-position: 100%   0%; opacity: 0; }
    90%      { background-position: 100%   0%; opacity: 1; }
    99%      { background-position:   0% 100%; opacity: 1; }
    100%     { background-position:   0% 100%; opacity: 0; }
}

/* ===== GEB · 三詞依序後空翻 + 彩光 + 白光斜掠（招牌特效） ===== */
.accent-geb .word {
    display: inline-block;
    transform-origin: 50% 60%;
    background-image: linear-gradient(-45deg,
        #FF512F,
        #DD2476,
        #9626D3,
        #4158D0,
        #FF512F);
    background-size: 300% 300%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 6px rgba(180, 80, 220, 0.45));
    animation:
        rainbow-shift 12s linear      infinite,
        glow-breath    4s ease-in-out infinite,
        word-flip      6s ease-in-out infinite;
}
.accent-geb .word:nth-child(2) { animation-delay: 0s, 0s, 0.22s; }
.accent-geb .word:nth-child(3) { animation-delay: 0s, 0s, 0.44s; }

/* GEB · 白光斜掠（左下→右上） */
.accent-geb::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(45deg,
        transparent 38%,
        rgba(255, 255, 255, 1) 50%,
        transparent 62%);
    background-size: 250% 250%;
    background-position: 100% 0%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    text-shadow: none;
    opacity: 0;
    animation: light-sweep 6s 0.7s ease-out infinite;
}

@keyframes word-flip {
    0%, 70%, 100% { transform: perspective(700px) translateY(0)     rotateX(0deg);   }
    74%           { transform: perspective(700px) translateY(-3px)  rotateX(0deg);   }   /* 微微起跳 */
    82%           { transform: perspective(700px) translateY(-11px) rotateX(180deg); }   /* 高點 + 半圈 */
    90%           { transform: perspective(700px) translateY(-3px)  rotateX(360deg); }   /* 落地前 · 一圈完成 */
    94%           { transform: perspective(700px) translateY(0)     rotateX(360deg); }   /* 站好 */
}

/* ===== QRCube · QR 定位符號三角閃現 ===== */
.accent-qr {
    color: #00f3ff;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.55);
}

.accent-qr::before {
    content: '';
    position: absolute;
    inset: -18px -10px;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'><rect width='7' height='7' fill='%2300f3ff'/><rect x='1' y='1' width='5' height='5' fill='%23000'/><rect x='2' y='2' width='3' height='3' fill='%2300f3ff'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'><rect width='7' height='7' fill='%2300f3ff'/><rect x='1' y='1' width='5' height='5' fill='%23000'/><rect x='2' y='2' width='3' height='3' fill='%2300f3ff'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7'><rect width='7' height='7' fill='%2300f3ff'/><rect x='1' y='1' width='5' height='5' fill='%23000'/><rect x='2' y='2' width='3' height='3' fill='%2300f3ff'/></svg>");
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position: top left, top right, bottom left;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(0, 243, 255, 0.75));
    animation: qr-finder 8s ease-in-out infinite;
}

@keyframes qr-finder {
    0%, 66%   { opacity: 0; transform: scale(0.55); }
    72%       { opacity: 1; transform: scale(1); }
    86%       { opacity: 1; transform: scale(1); }
    92%       { opacity: 0; transform: scale(1.2); }
    100%      { opacity: 0; transform: scale(1.2); }
}

/* ===== WAVE · 音波橫向掃描 ===== */
.accent-wave {
    color: #00ff88;
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.55);
}

.accent-wave::after {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    width: 40%;
    left: -45%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'><path d='M0 12 Q 6 2 12 12 T 24 12 T 36 12 T 48 12 T 60 12 T 72 12 T 84 12 T 100 12' stroke='%2300ffaa' stroke-width='1.8' fill='none'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 6px #00ff88);
    animation: wave-scan 6.5s linear infinite;
}

@keyframes wave-scan {
    0%, 70%   { opacity: 0; left: -45%; }
    76%       { opacity: 0.9; }
    93%       { opacity: 0.9; left: 105%; }
    100%      { opacity: 0; left: 105%; }
}

/* ===== MVNDVS · 小地球自轉橫越 ===== */
.accent-world {
    /* 文藝復興 · 古銅 / 羊皮紙 / 金 / 焦赭 / 威尼斯紅 漸層緩慢流動 */
    background-image: linear-gradient(120deg,
        #6b5638,    /* 深褐墨水 */
        #a08862,    /* 暖羊皮紙 */
        #d4af37,    /* 金 */
        #c8553d,    /* 威尼斯紅 / venetian red — 一抹橘紅 */
        #8b4a2b,    /* 焦赭 / burnt sienna */
        #6b5638);
    background-size: 240% 240%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    filter: drop-shadow(0 0 6px rgba(200, 110, 60, 0.45));
    animation: renaissance-shift 12s ease-in-out infinite;
}

@keyframes renaissance-shift {
    0%, 100% { background-position:   0%   0%; }
    50%      { background-position: 100% 100%; }
}

.accent-world::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    left: -1.2em;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='10.5' fill='none' stroke='%23d4af37' stroke-width='1.4'/><ellipse cx='12' cy='12' rx='4.5' ry='10.5' fill='none' stroke='%23d4af37' stroke-width='1'/><ellipse cx='12' cy='12' rx='10.5' ry='4' fill='none' stroke='%23d4af37' stroke-width='0.9'/><line x1='1.5' y1='12' x2='22.5' y2='12' stroke='%23d4af37' stroke-width='0.7'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.6));
    animation: world-orbit 7s linear infinite;
}

@keyframes world-orbit {
    0%, 68%   { opacity: 0; left: -1.2em;                 transform: rotate(0deg);   }
    73%       { opacity: 1; }
    93%       { opacity: 1; left: calc(100% + 0.2em);     transform: rotate(540deg); }
    100%      { opacity: 0; left: calc(100% + 0.2em);     transform: rotate(540deg); }
}

/* hover 時招牌特效加速（彩光與呼吸維持原速） */
a:hover .accent-geb .word      { animation-duration: 12s, 4s, 3s; }
a:hover .accent-geb::after     { animation-duration: 3s; }
a:hover .accent-qr::before     { animation-duration: 4s;   }
a:hover .accent-wave::after    { animation-duration: 3.2s; }
a:hover .accent-world::before  { animation-duration: 4.5s; }


/* ---------- Footer / lang button ---------- */

footer {
    color: #ccc;
    text-shadow: 1px 1px 2px black;
    padding-bottom: 20px;
}

.btn-lang {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    letter-spacing: 1px;
    transition: border-color 0.2s, color 0.2s;
    font-family: inherit;
    margin-top: 6px;
}
.btn-lang:hover {
    border-color: #ffc107;
    color: #ffc107;
}

/* ---------- RWD ---------- */

@media (min-width: 992px) {
    .featurette-list { font-size: 3.5rem; }
    .content-box     { padding: 60px 60px; }
    hr.featurette-divider { margin: 60px 0; }
    .intro-title     { font-size: 2rem; }
}

@media (max-width: 768px) {
    .content-box          { padding: 30px 15px; }
    .featurette-list      { font-size: 1.6rem; padding: 5px 0; }
    .featurette-list small{ font-size: 0.55em; letter-spacing: 2px; }
    hr.featurette-divider { margin: 20px 0; }
    .intro-title          { font-size: 1.15rem; letter-spacing: 2px; }
    .intro-desc           { font-size: 0.82rem; }

    .navbar-nav {
        flex-direction: row;
        width: 100%;
        justify-content: space-around;
    }
    .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
}