/* --- Base and White Theme --- */
html, body {
    margin: 0; padding: 0;
    background: radial-gradient(circle, #fffde7 0%, #ffffff 60%);
    font-family: 'Cinzel', serif;
    text-align: center;
    overflow: hidden;
    height: 100%;
    /*
       UPDATED CURSOR CODE:
       This specifies the "tip" of your cursor is at the center (16px from left, 16px from top).
       This often fixes loading issues.
    */
    cursor: url('img.png') 16 16, auto;
}
/* Custom Cursor Style */
body {
    /* Set your custom image file and provide a fallback cursor */
    /* Note: 'auto' is usually a good fallback to ensure the cursor remains visible/functional if the image fails to load. */
    cursor: url('img.png'), auto;
}

/* --- Stage 1: Video Intro --- */
#video-container {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1000; opacity: 1; transition: opacity 1s ease-out;
    background-color: #000; overflow: hidden;
}
#video-bg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    min-width: 100%; min-height: 100%; object-fit: cover;
    filter: blur(20px) brightness(0.7); z-index: 1;
}
#intro-video {
    position: relative; z-index: 2; width: 100%; height: 100%;
    object-fit: contain;
    -webkit-mask-image: radial-gradient(ellipse 70% 85%, black 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 85%, black 40%, transparent 100%);
}

/* --- Splash Screen --- */
#splash-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: white; z-index: 900; opacity: 0; pointer-events: none;
}
.play-sequence #splash-screen { animation: flash 1s ease-out; }
@keyframes flash { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

/* --- Main Page Content --- */
#page-content {
    min-height: 100vh; display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.5s ease-in;
}
.play-sequence #page-content { opacity: 1; }

/* --- Header & Animations --- */
.main-header {
    display: flex; align-items: center; justify-content: center;
    position: relative; height: 150px; width: 100%;
    margin-bottom: 50px;
}

/* --- Vel GIF Keyframe Animation --- */
#vel-gif {

    width: 100%;
    height: auto;
    position: absolute;
    opacity: 0;
}
.play-sequence #vel-gif {
    animation: vel-intro-move 2.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.3s;
}
@keyframes vel-intro-move {
    0% { opacity: 0; width: 200px; transform: scale(0.5) translateX(0); }
    40% { opacity: 1; width: 200px; transform: scale(1) translateX(0); }
    100% { opacity: 1; width: 80px; transform: scale(1) translateX(-380px); }
}

/* --- Title Slides Left-to-Right --- */
.title-container {
    position: absolute;
    left: calc(50% - 380px + 80px + 2px);
    overflow: hidden;
}
.title {
    font-size: 3em;
    font-weight: 700; color: #423b0b;
    white-space: nowrap; margin: 0;
    transform: translateX(-101%);
    opacity: 0;
    transition: transform 1.2s ease-out, opacity 1s ease-out;
}
.play-sequence .title {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 1.5s;
}

/* --- Branch Cards & Animations --- */
.branch-container {
    display: flex; justify-content: center; gap: 40px;
    opacity: 0; transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
    perspective: 1000px;
}
.play-sequence .branch-container {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 2.5s;
}

.branch-link {
    text-decoration: none;
}

.branch-card {
    background: rgba(255, 255, 255, 0.7); border: 1px solid #eee;
    backdrop-filter: blur(5px); border-radius: 15px; width: 220px;
    padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transform-style: preserve-3d;
    transition: all 0.4s ease-out;
}

.play-sequence .branch-card {
    animation: subtle-glow 4s ease-in-out infinite;
}
.play-sequence .branch-link:nth-of-type(2) .branch-card { animation-delay: 1s; }
.play-sequence .branch-link:nth-of-type(3) .branch-card { animation-delay: 2s; }
.play-sequence .branch-link:nth-of-type(4) .branch-card { animation-delay: 3s; }

@keyframes subtle-glow {
    0%, 100% { box-shadow: 0 4px 15px rgba(0,0,0,0.05), 0 0 5px rgba(255, 215, 0, 0); }
    50% { box-shadow: 0 6px 20px rgba(0,0,0,0.08), 0 0 15px rgba(255, 215, 0, 0.7); }
}

.branch-link:hover .branch-card {
    transform: translateY(-15px) rotateX(10deg) scale(1.05);
    box-shadow: 0 25px 40px rgba(0,0,0,0.15), 0 0 30px rgba(255, 215, 0, 1);
    animation-play-state: paused;
}

.logo { width: 380px; height: 380px;  object-fit: contain; }
.branch-card h2 { font-size: 1.5em; color: #555; margin: 0; }
.branch-link {
    text-decoration: none; /* Removes the underline from the link */
    color: inherit;      /* Ensures the text color is inherited, not blue */
    display: block;      /* Makes the link take up the full space needed for the card */

    /* Ensure any hover effects you have on .branch-card remain active */
    transition: transform 0.3s, box-shadow 0.3s;
}

/* If you have hover styles on the DIV, move them to the A tag or A > DIV */
.branch-link:hover .branch-card {
    /* For example, apply the lift/glow effect on hover */
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}