/* ==========================================================================
   波音 787 原型机开场动画（仅首页，每次会话播放一次）
   结构由 public/assets/js/jx787-intro.js 注入，本文件只负责样式与动画。

   时间轴（与 jx787-intro.js 中的 HOLD_MS 一一对应）：
     0.08s - 0.26s   撕口与纸面就位
     0.10s - 1.35s   787 线条简笔画自左下向右上掠过
     0.28s - 1.20s   机头沿途把纸面划开锯齿裂口（自绘）
     1.25s - 2.05s   裂口两侧纸面上下拉开，露出首页（序幕拉开）
     1.90s - 2.60s   天空氛围层淡出
     1.70s - 2.50s   「欢迎来到 Jxphotos」浮出
     2.05s - 2.85s   文字下方分隔线展开
     3.20s           整体淡出，节点随后移除
   ========================================================================== */
.jx787-intro {
    position: fixed;
    inset: 0;
    z-index: 9998;
    overflow: hidden;
    pointer-events: none;
    --jx-ink: var(--text, #37352f);
    --jx-paper: var(--surface-primary, #ffffff);
    color: var(--jx-ink);
}

/* 天空氛围层：藏在纸面之后，撕开时短暂露出，随后让位给首页 */
.jx787-intro__sky {
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(120% 80% at 18% 92%, rgba(56, 132, 255, 0.2), transparent 62%),
        radial-gradient(90% 70% at 84% 10%, rgba(255, 168, 76, 0.16), transparent 60%);
    animation: jx787-sky 2.6s ease-out both;
}

/* 两层“纸”：撕口两侧的幕布 */
.jx787-intro__leaf {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(0deg, rgba(120, 119, 116, 0.045) 0 1px, transparent 1px 3px),
        var(--jx-paper);
    will-change: transform;
}

.jx787-intro__leaf--top {
    animation: jx787-tear-up 0.8s cubic-bezier(0.66, 0, 0.34, 1) 1.25s both;
}

.jx787-intro__leaf--bottom {
    animation: jx787-tear-down 0.8s cubic-bezier(0.66, 0, 0.34, 1) 1.25s both;
}

/* 裂口：一条随航迹推进的自绘锯齿线，外加一层低透明度的切痕阴影 */
.jx787-intro__seam {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: jx787-seam-in 0.18s linear 0.08s both, jx787-seam-out 0.5s ease-in 1.7s both;
}

.jx787-intro__seam polyline {
    fill: none;
    stroke: var(--jx-ink);
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.jx787-intro__seam-cut {
    stroke-width: 11px;
    opacity: 0.1;
}

.jx787-intro__seam-line {
    stroke-width: 1.6px;
}

/* 飞机容器：垂直中心线与机身轴线重合，航迹沿撕口剖面（左 5vh → 右 0） */
.jx787-intro__plane {
    position: absolute;
    top: 50%;
    left: 0;
    width: clamp(180px, 24vw, 420px);
    will-change: transform, opacity;
    animation: jx787-fly 1.25s cubic-bezier(0.36, 0.05, 0.66, 0.45) 0.1s both;
}

.jx787-intro__plane svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.jx787-intro__plane svg text {
    font-family: inherit;
    font-weight: 600;
}

/* 舷窗带自带虚线，只用淡入跟上前面的自绘节奏 */
.jx787-intro__win {
    opacity: 0;
    animation: jx787-win-in 0.4s ease-out 0.7s both;
}

/* 序幕文字 */
.jx787-intro__welcome {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    padding: 0;
    font-size: clamp(20px, 3.1vw, 40px);
    font-weight: 600;
    letter-spacing: 0.08em;
    white-space: nowrap;
    opacity: 0;
    animation: jx787-welcome-in 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) 1.7s both;
}

.jx787-intro__welcome::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 0.85em;
    background: currentColor;
    opacity: 0.34;
    transform: scaleX(0);
    transform-origin: 50% 50%;
    animation: jx787-rule-in 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) 2.05s both;
}

/* 线条自绘：仅在支持 pathLength 时由 JS 加上 --sketch 开启，否则保持静态线条 */
.jx787-intro--sketch .jx787-intro__plane svg .jx787-ink {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: jx787-sketch 0.85s ease-out 0.1s forwards;
}

.jx787-intro--sketch .jx787-intro__seam polyline {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: jx787-sketch 0.92s cubic-bezier(0.4, 0, 0.6, 1) 0.28s forwards;
}

@keyframes jx787-sketch {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@keyframes jx787-sky {
    0% { opacity: 0; }
    13% { opacity: 1; }
    73% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes jx787-seam-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes jx787-seam-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes jx787-tear-up {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -101%, 0); }
}

@keyframes jx787-tear-down {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, 101%, 0); }
}

@keyframes jx787-fly {
    0% {
        transform: translate3d(-32vw, calc(-50% + 5vh), 0) rotate(-3.4deg) scale(0.96);
        opacity: 0;
    }
    9% {
        opacity: 1;
    }
    86% {
        opacity: 1;
    }
    100% {
        transform: translate3d(104vw, calc(-50% + 0vh), 0) rotate(-6.4deg) scale(1);
        opacity: 0.92;
    }
}

@keyframes jx787-win-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes jx787-welcome-in {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 14px));
        letter-spacing: 0.18em;
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
        letter-spacing: 0.08em;
    }
}

@keyframes jx787-rule-in {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* 结束态：整体淡出 */
.jx787-intro--leaving {
    animation: jx787-out 0.46s ease-in both;
}

@keyframes jx787-out {
    to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .jx787-intro {
        display: none !important;
    }
}