/* style.css */

@font-face {
    font-family: "DingTalk-JinBuTi";
    font-weight: 400;
    src: url("/fonts/3aayrSAZb1IK.woff2") format("woff2"),
         url("/fonts/3aayrSAZb1IK.woff") format("woff");
    font-display: swap;
}

body {
    font-family: "DingTalk-JinBuTi", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* Initial white screen */
    overflow: hidden; /* Prevent scrollbars during animations */
    transition: background-color 1s ease-in-out;

    /* --- CRITICAL LAYOUT FIXES FOR BODY --- */
    display: flex;
    flex-direction: column; /* Arrange children (main-content, page-footer) vertically */
    min-height: 100vh;    /* Ensure body takes at least full viewport height */
    align-items: center;   /* Center .main-content and .page-footer horizontally if they don't have width: 100% */
}

.preload-assets {
    display: none;
}

/* Phase 1: Icon Animation Container */
.icon-animation-container {
    position: fixed; /* This is OK - it's an overlay animation */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    opacity: 0;
}

#animatedIcon {
    width: 100px;
    height: 100px;
    object-fit: contain;
    transform: scale(0);
    opacity: 0;
}

/* Phase 2: Main Content Container */
.main-content {
    /* --- CRITICAL LAYOUT FIXES FOR MAIN-CONTENT --- */
    /* position: fixed; */ /* REMOVE THIS - It should be in normal flow */
    width: 100%;
    max-width: 700px; /* Set a max-width for content readability on wide screens */
                      /* Body's align-items: center will center this block */
    flex-grow: 1;     /* THIS IS KEY to make it take available space and push footer down */
    
    display: flex;         /* Use flex for its children's layout */
    flex-direction: column;  /* Arrange title-block and info-box vertically */
    justify-content: center; /* Vertically center its children (title-block, info-box) */
    align-items: center;   /* Horizontally center its children */
                           /* If title-block and info-box need to be left-aligned within this centered block, change to 'flex-start' */
                           /* and give title-block/info-box appropriate widths/max-widths. */
    
    opacity: 0; /* JS controls display */
    z-index: 50;
    padding: 20px;
    box-sizing: border-box;
}

.title-block {
    text-align: left;
    opacity: 0;
    min-height: 200px; /* Reduced default min-height, adjust based on new font sizes */
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%; /* Ensure it takes width of parent if parent uses align-items: flex-start */
}

.main-title {
    font-family: "DingTalk-JinBuTi", sans-serif;
    font-size: clamp(30px, 8vw, 40px); /* Responsive font size for narrow screens */
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 20px 0;
    paint-order: stroke fill;
}

.main-title .line1 { color: #f39c12; }
.main-title .line2 { color: #ffc53d; }

@media (min-width: 768px) {
    .main-title {
        font-size: 70px; /* Wide screen font size */
    }
    .title-block {
        min-height: 350px; /* Restore or adjust min-height for wider screens */
    }
}

.subtitle {
    font-size: clamp(0.85rem, 3vw, 1rem); /* Responsive font size */
    color: #222222;
    opacity: 0;
    margin: 0;
    width: 100%; /* Ensure it takes width of parent if using align-items: flex-start on title-block */
}

/* Phase 3: Info Box */
.info-box {
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    background-color: transparent;
    padding: 10px 20px;
    display: inline-flex; /* Width adjusts to content */
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    max-width: 90%; /* Max width relative to its container */
    opacity: 0;
    visibility: hidden;
    /* align-self: flex-start; /* Uncomment if .main-content uses align-items: center but you want this box left-aligned */
                               /* If .main-content is align-items: flex-start, this is not needed */
}

/* ... (rest of .info-box .border-segment, .icon-wrapper, .info-text, .typing-effect, @keyframes blinkCursor styles remain the same) ... */
.info-box .border-segment {
    position: absolute;
    background-color: #555555;
}
.info-box .border-top    { top: 0; left: 0; width: 0; height: 2px; }
.info-box .border-right  { top: 0; right: 0; width: 2px; height: 0; }
.info-box .border-bottom { bottom: 0; right: 0; width: 0; height: 2px; }
.info-box .border-left   { bottom: 0; left: 0; width: 2px; height: 0; }

.info-box .icon-wrapper {
    opacity: 0;
    transform: scale(0);
    flex-shrink: 0;
}

.info-box .icon-wrapper svg {
    width: 20px;
    height: 20px;
    stroke: #555555;
}

.info-box .info-text {
    font-size: clamp(0.8rem, 2.5vw, 0.9rem); /* Responsive font size */
    line-height: 1.5;
    color: #000000;
    white-space: pre-wrap;
}

.typing-effect::after {
    content: '_';
    display: inline-block;
    margin-left: 1px;
    animation: blinkCursor 0.7s step-end infinite;
}

@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Page Footer */
.page-footer {
    width: 100%;
    max-width: 700px; /* Match .main-content's max-width if body uses align-items: center */
    padding: 20px 15px;
    text-align: center;
    font-size: clamp(0.75rem, 2.2vw, 0.85rem);
    color: #777777;
    box-sizing: border-box;
    flex-shrink: 0; /* KEY: Prevent footer from shrinking */
    opacity: 0;
    transition: opacity 4s ease-in-out;
}