/* ===========================
   全局重置 / 基础样式
   =========================== */
:root {
    --subtitle-duration: 11s;
}

@font-face {
    font-family: 'Birthstone';
    src: url('../font/Birthstone-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'EduNSWACTCursive';
    src: url('../font/EduNSWACTCursive-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PlaywriteNZ';
    src: url('../font/PlaywriteNZ-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'PlaywriteAUQLDGuides';
    src: url('../font/PlaywriteAUQLDGuides-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html, body {
    /* 去除默认外边距，避免页面出现空隙 */
    margin: 0;
    /* 去除默认内边距 */
    padding: 0;
    /* 设为 100% 以便做全屏定位 */
    height: 100%;
    /* 隐藏滚动条（loading/背景视频时通常需要） */
    overflow: hidden;
    /* 保证文本渲染顺滑 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 基本字体族，可根据需要替换 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* From Uiverse.io by kennyotsu */
.card {
    /* color used to softly clip top and bottom of the .words container */
    --bg-color: #111;
    background-color: var(--bg-color);
    padding: 1rem 2rem;
    border-radius: 1.25rem;
}
.loader {
    color: rgb(124, 124, 124);
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 25px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 40px;
    padding: 10px 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: 8px;
}

.words {
    overflow: hidden;
    position: relative;
}
.words::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            var(--bg-color) 10%,
            transparent 30%,
            transparent 70%,
            var(--bg-color) 90%
    );
    z-index: 20;
}

.word {
    display: block;
    height: 100%;
    padding-left: 6px;
    color: #956afa;
    animation: spin_4991 4s infinite;
}

@keyframes spin_4991 {
    10% {
        -webkit-transform: translateY(-102%);
        transform: translateY(-102%);
    }

    25% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    35% {
        -webkit-transform: translateY(-202%);
        transform: translateY(-202%);
    }

    50% {
        -webkit-transform: translateY(-200%);
        transform: translateY(-200%);
    }

    60% {
        -webkit-transform: translateY(-302%);
        transform: translateY(-302%);
    }

    75% {
        -webkit-transform: translateY(-300%);
        transform: translateY(-300%);
    }

    85% {
        -webkit-transform: translateY(-402%);
        transform: translateY(-402%);
    }

    100% {
        -webkit-transform: translateY(-400%);
        transform: translateY(-400%);
    }
}



/* ===========================
   开场动画遮罩层（#intro）
   =========================== */
#intro {
    /* 固定覆盖整个视口 */
    position: fixed;
    top: 0;                 /* 距离视口顶部 0 */
    left: 0;                /* 距离视口左侧 0 */
    width: 100%;            /* 宽度占满视口 */
    height: 100%;           /* 高度占满视口 */
    z-index: 1000;          /* 置于最顶层，覆盖后台内容 */
    background: #000;       /* 背景备用色（当视频加载慢时） */
    /* 禁止交互，直到遮罩移除（视频播放期间不允许点到后台） */
    pointer-events: auto;
    /* 为后续 JS 做淡出处理保留过渡（class 切换时用到） */
    transition: opacity 0.8s ease;
}

/* class 用来触发淡出（JS 会添加此类） */
#intro.intro--fadeout {
    /* 透明度过渡到 0，使遮罩平滑消失 */
    opacity: 0;
    /* 同时禁止交互，避免点击到已隐藏的元素 */
    pointer-events: none;
}

/* ===========================
   开场视频样式（位于遮罩层内）
   =========================== */
.intro-video {
    /* 绝对定位使其撑满遮罩层 */
    position: absolute;
    top: 0; left: 0;
    width: 100%;            /* 横向占满 */
    height: 100%;           /* 纵向占满 */
    object-fit: cover;      /* 保持比例且覆盖整个容器（裁剪） */
    z-index: 0;             /* 在字幕之下 */
    /* 防止被选择 */
    user-select: none;
}

/* ===========================
   正式背景视频（在 intro 之下）
   =========================== */
.bg-video {
    /* 固定到视口做背景 */
    position: fixed;
    top: 0; left: 0;
    width: 100%;            /* 横向占满 */
    height: 100%;           /* 纵向占满 */
    object-fit: cover;      /* 保持比例且铺满（裁剪不足部分） */
    z-index: -1;            /* 置于页面内容后面 */
    /* 防止被选择或拖拽影响体验 */
    user-select: none;
    -webkit-user-drag: none;
}

/* ===========================
   字幕（单个整体元素）
   要求：左侧，垂直居中；进入：透明->不透明 + 左->右微移（5s）
          退出：不透明->透明 + 右->左微移（5s）
   动画总时长使用 CSS 变量 --subtitle-duration（JS 会把 intro 视频时长写入该变量）
   如果没有 JS 设置，则默认 11s（入场 ~5s，短暂停留 ~1s，出场 ~5s）
   =========================== */
.intro-subtitle {
    /* 绝对定位，放在遮罩层内的左侧并垂直居中 */
    font-family: "EduNSWACTCursive", serif;
    position: absolute;
    left: 5vw;               /* 距离左侧 5vw（视口宽度的 5%） */
    top: 50%;                /* 顶部到 50% 实现垂直居中基线 */
    /* 先把 Y 轴向上偏移 50% 实现真正的垂直居中 */
    transform: translateY(-50%) translateX(-20px);
    /* 字体大小：使用 clamp 保证在不同屏幕上既大又自适应 */
    font-size: clamp(28px, 5vw, 72px); /* 最小 28px，首选 5vw，最大 72px */
    /* 字体加粗，强调视觉 */
    font-weight: 700;
    /* 颜色：白色（一般背景视频用白字） */
    color: #ffffff;
    /* 防止文本换行，保持为一行整体 */
    white-space: nowrap;
    /* 文字阴影，提升在复杂视频上的可读性 */
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
    /* 禁止用户选择字幕文本 */
    user-select: none;
    /* 不响应鼠标（只是视觉元素） */
    pointer-events: none;
    /* 动画：名称、时长（取自 CSS 变量）、缓动、只执行一次、保留最终状态 */
    animation-name: subtitle-anim;               /* 使用下面定义的 keyframes */
    animation-duration: var(--subtitle-duration, 11s); /* 从 JS 或回退值获取总时长 */
    animation-timing-function: ease;             /* 缓动函数 */
    animation-fill-mode: forwards;               /* 动画结束保持最终状态 */
    animation-iteration-count: 1;                /* 只播放一次 */
    /* 性能提示，提前告诉浏览器将要改变的属性 */
    will-change: transform, opacity;
}

/* ===========================
   字幕关键帧：整体控制入场 / 停留 / 出场
   设计思路（百分比分配）：
     0%   -> 45%   : 入场（透明 -> 不透明，微微从左移到正位）
     45%  -> 55%   : 停留（完全可见）
     55%  -> 100%  : 出场（不透明 -> 透明，整体向左微移）
   因为动画时长是可变的（CSS 变量），百分比保证动画按比例缩放
   =========================== */
@keyframes subtitle-anim {
    /* 开始：完全透明，并向左偏移（入场从左到右） */
    0% {
        opacity: 0;
        transform: translateX(-20px) translateY(-50%);
    }

    /* 入场结束：完全不透明，回到位置（短暂停留准备出场） */
    45% {
        opacity: 1;
        transform: translateX(0) translateY(-50%);
    }

    /* 稍微停留（保持在可见状态） */
    55% {
        opacity: 1;
        transform: translateX(0) translateY(-50%);
    }

    /* 结束：再次向左微移并变透明（右到左的淡出效果） */
    100% {
        opacity: 0;
        transform: translateX(-20px) translateY(-50%);
    }
}

/* ===========================
   正式内容容器（仅作示例）
   初始时用 aria-hidden 隐藏（JS 会在 intro 移除后改为可见）
   =========================== */
.content {
    /* 内容放在正常文档流内，z-index 高于背景视频 */
    position: relative;
    z-index: 1;
    /* 基础内边距，避免内容紧贴边缘 */
    padding: 2rem;
    /* 文本颜色默认白色（根据背景视频调节） */
    color: #fff;
}


/* From Uiverse.io by adamgiebl */
.cssbuttons-io-button {
    background: #000000;
    color: white;
    font-family: "PlaywriteAUQLDGuides";
    padding: 0.35em;
    padding-left: 1.2em;
    font-size: 17px;
    font-weight: 500;
    border-radius: 0.9em;
    border: none;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    box-shadow: inset 0 0 1.6em -0.6em #000000;
    overflow: hidden;
    position: relative;
    height: 2.8em;
    padding-right: 3.3em;
    cursor: pointer;
}

.cssbuttons-io-button .icon {
    background: white;
    margin-left: 1em;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.2em;
    width: 2.2em;
    border-radius: 0.7em;
    box-shadow: 0.1em 0.1em 0.6em 0.2em #000000;
    right: 0.3em;
    transition: all 0.3s;
}

.cssbuttons-io-button:hover .icon {
    width: calc(100% - 0.6em);
}

.cssbuttons-io-button .icon svg {
    width: 1.1em;
    transition: transform 0.3s;
    color: #000000;
}

.cssbuttons-io-button:hover .icon svg {
    transform: translateX(0.1em);
}

.cssbuttons-io-button:active .icon {
    transform: scale(0.95);
}