/* =========================================================
   BYTECLIC HERO - FINAL CSS WITHOUT HEADER
   File: public/css/byteclic-hero-final.css

   说明：
   1. 本文件只控制首页 Hero
   2. 不控制头部菜单
   3. Header / Nav 请放在 public/css/home.css
   ========================================================= */


/* =========================================================
   00. Variables
   ========================================================= */

:root {
    /* 原来 1160px，现在上下各减少 50px，总共减少 100px */
    --bc-red-height: 900px;
}


/* =========================================================
   01. Hero Base
   红色 Hero 背景区域
   ========================================================= */

.bc-hero {
    position: relative !important;
    isolation: isolate !important;

    height: var(--bc-red-height) !important;
    min-height: var(--bc-red-height) !important;

    padding-top: 0 !important;
    box-sizing: border-box !important;

    overflow: hidden !important;

    color: #ffffff !important;

    background:
        radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.16), transparent 30%),
        radial-gradient(circle at 72% 30%, rgba(255, 177, 74, 0.14), transparent 32%),
        radial-gradient(circle at 76% 78%, rgba(90, 0, 0, 0.24), transparent 36%),
        linear-gradient(135deg, #f35a4a 0%, #e8342f 44%, #bd1630 100%) !important;
}

.bc-hero-diagonal {
    position: absolute;
    left: -18%;
    top: 39%;
    z-index: 0;

    width: 145%;
    height: 400px;

    background: linear-gradient(
        90deg,
        rgba(255, 116, 88, 0.58),
        rgba(255, 74, 58, 0.30)
    );

    transform: rotate(-13deg);
    box-shadow: 0 40px 90px rgba(120, 0, 0, 0.16);

    animation: bcHeroDiagonalIn 0.95s cubic-bezier(.2,.8,.2,1) both;
}

.bc-hero-inner {
    position: relative !important;
    z-index: 10 !important;

    width: 100% !important;
    height: 100% !important;
    min-height: var(--bc-red-height) !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   02. Plant Layer
   绿植层
   ========================================================= */

.bc-plant {
    position: absolute !important;
    display: block !important;

    z-index: 1 !important;

    pointer-events: none !important;
    user-select: none !important;

    object-fit: contain !important;

    opacity: 0;
    filter: blur(3px) !important;

    will-change: transform, opacity;
}

.bc-plant-left {
    left: -230px !important;
    bottom: -175px !important;
    right: auto !important;
    top: auto !important;

    width: clamp(620px, 48vw, 920px) !important;

    transform-origin: left bottom !important;

    animation:
        bcPlantLeftIn 1.2s ease-out 0.35s forwards,
        bcPlantLeftFloat 7s ease-in-out 1.7s infinite !important;
}

.bc-plant-right {
    right: -270px !important;
    bottom: -195px !important;
    left: auto !important;
    top: auto !important;

    width: clamp(640px, 50vw, 960px) !important;

    transform-origin: right bottom !important;

    animation:
        bcPlantRightIn 1.2s ease-out 0.55s forwards,
        bcPlantRightFloat 7.5s ease-in-out 1.9s infinite !important;
}


/* =========================================================
   03. Hero Visual Stage
   白色方框舞台
   ========================================================= */

.bc-hero-visual {
    position: absolute !important;

    left: 52vw !important;
    top: 50% !important;

    z-index: 20 !important;

    width: min(1040px, 68vw) !important;
    height: min(680px, 64vh) !important;

    transform: translate(-50%, -50%) !important;

    overflow: visible !important;
    perspective: 1400px;
}

.bc-frame {
    position: absolute !important;
    inset: 0 !important;

    z-index: 21 !important;

    border: 10px solid rgba(255, 255, 255, 0.96) !important;

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 22px 50px rgba(120, 0, 0, 0.16),
        0 70px 150px rgba(80, 0, 0, 0.20),
        inset 0 0 44px rgba(255, 255, 255, 0.06);

    animation: bcHeroFrameIn 0.9s cubic-bezier(.2,.8,.2,1) 0.45s both;
}

.bc-frame::before {
    content: "";
    position: absolute;
    inset: 28px;

    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.07),
        rgba(255, 177, 74, 0.05),
        rgba(255, 255, 255, 0.015)
    );

    pointer-events: none;
}

.bc-frame::after,
.bc-hero-visual::before,
.bc-hero-visual::after {
    display: none !important;
}


/* =========================================================
   04. Hero Copy
   中间主标题文字
   ========================================================= */

.bc-hero-copy {
    position: absolute !important;

    left: 52vw !important;
    top: 53.2% !important;

    z-index: 40 !important;

    width: min(700px, 90vw) !important;

    text-align: center !important;

    transform: translate(-50%, -50%) !important;

    pointer-events: auto !important;
}

.bc-eyebrow {
    margin: 0 0 18px !important;

    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.18em !important;

    text-transform: uppercase !important;

    opacity: 0;
    animation: bcHeroTextIn 0.75s ease-out 0.2s both;
}

.bc-hero-title {
    margin: 0 !important;

    font-size: clamp(86px, 7.4vw, 126px) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.065em !important;
    font-weight: 900 !important;

    text-shadow: 0 18px 36px rgba(80, 0, 0, 0.12);

    opacity: 0;
    animation: bcHeroTitleIn 0.9s ease-out 0.38s both;
}

.bc-hero-title span {
    color: #171717 !important;
}

.bc-hero-text {
    max-width: 560px !important;
    margin: 24px auto 0 !important;

    font-size: 20px !important;
    line-height: 1.45 !important;

    color: rgba(255, 255, 255, 0.92) !important;

    opacity: 0;
    animation: bcHeroTextIn 0.75s ease-out 0.75s both;
}

.bc-hero-actions {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;

    margin-top: 30px !important;

    opacity: 0;
    animation: bcHeroButtonIn 0.75s ease-out 0.98s both;
}


/* =========================================================
   05. Hero Buttons
   ========================================================= */

.bc-btn {
    min-height: 52px !important;
    padding: 0 30px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 10px !important;

    font-size: 14px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;

    text-transform: uppercase !important;
    text-decoration: none !important;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.bc-btn:hover {
    transform: translateY(-2px);
}

.bc-btn-primary {
    color: #ffffff !important;

    background: linear-gradient(135deg, #ff4b3f 0%, #e4211d 100%) !important;

    border: 1px solid rgba(255, 255, 255, 0.28) !important;

    box-shadow:
        0 14px 28px rgba(120, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.bc-btn-primary:hover {
    background: linear-gradient(135deg, #ff675a 0%, #f02c25 100%) !important;

    transform: translateY(-3px) scale(1.03) !important;

    box-shadow:
        0 18px 36px rgba(120, 0, 0, 0.36),
        0 0 0 1px rgba(255, 255, 255, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.bc-btn-outline {
    color: #ffffff !important;

    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.52) !important;
}

.bc-btn-outline:hover {
    color: #e8342f !important;
    background: rgba(255, 255, 255, 0.96) !important;
}


/* =========================================================
   06. Icon Base
   6 个透明 PNG 图标基础样式
   ========================================================= */

.bc-hero-item {
    position: absolute !important;

    display: block !important;
    visibility: visible !important;
    opacity: 0;

    z-index: 30 !important;

    pointer-events: auto !important;
    transform-style: preserve-3d;

    animation-name: bcHeroItemIn, bcHeroItemFloat;
    animation-duration: 0.95s, var(--float-duration);
    animation-timing-function: cubic-bezier(.2,.8,.2,1), ease-in-out;
    animation-fill-mode: both, none;
    animation-iteration-count: 1, infinite;
    animation-delay: var(--enter-delay), calc(var(--enter-delay) + 0.95s);
}

.bc-hero-item > img {
    position: relative;

    display: block !important;
    visibility: visible !important;

    width: 100%;
    height: auto;

    object-fit: contain;

    z-index: 2;

    filter:
        drop-shadow(0 10px 16px rgba(70, 0, 0, 0.20))
        drop-shadow(0 34px 48px rgba(70, 0, 0, 0.16)) !important;

    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    transition: transform 0.35s ease, filter 0.35s ease;
}

.bc-hero-item:hover > img {
    transform: scale(1.045) translateZ(0) !important;

    filter:
        drop-shadow(0 14px 22px rgba(70, 0, 0, 0.24))
        drop-shadow(0 38px 54px rgba(70, 0, 0, 0.18)) !important;
}


/* =========================================================
   07. Icon Position
   单个图标位置
   ========================================================= */

/* 01 笔 */
.bc-img-pen {
    left: -3% !important;
    top: -6% !important;

    width: auto !important;
    height: clamp(165px, 9vw, 210px) !important;
    max-height: 210px !important;

    rotate: -42deg !important;
    z-index: 31 !important;

    --from-x: -70px;
    --from-y: -40px;
    --enter-delay: 0.65s;
    --float-duration: 5.3s;
    --float-distance: -18px;

    --label-x: -96px;
    --label-y: 20px;
    --line-width: 88px;
    --line-x: -80px;
    --line-y: 36px;
    --dot-x: -2px;
    --dot-y: 32px;
}

.bc-img-pen > img {
    width: auto !important;
    height: 100% !important;
}

/* 02 手机 */
.bc-img-phone {
    left: -16% !important;
    top: 20.5% !important;

    width: clamp(165px, 9.4vw, 198px) !important;
    max-width: 198px !important;

    rotate: -16deg !important;
    z-index: 33 !important;

    --from-x: -80px;
    --from-y: 20px;
    --enter-delay: 0.82s;
    --float-duration: 5.7s;
    --float-distance: -24px;

    --label-x: -150px;
    --label-y: 46px;
    --line-width: 112px;
    --line-x: -132px;
    --line-y: 64px;
    --dot-x: -20px;
    --dot-y: 60px;
}

/* 03 相机 */
.bc-img-camera {
    left: -8.5% !important;
    bottom: -4% !important;

    width: clamp(300px, 17.5vw, 390px) !important;
    max-width: 390px !important;

    rotate: -6deg !important;
    z-index: 38 !important;

    --from-x: -80px;
    --from-y: 70px;
    --enter-delay: 1.02s;
    --float-duration: 5.2s;
    --float-distance: -18px;

    --label-x: -120px;
    --label-y: 84px;
    --line-width: 94px;
    --line-x: -100px;
    --line-y: 102px;
    --dot-x: -8px;
    --dot-y: 98px;
}

.bc-img-camera > img {
    filter:
        drop-shadow(0 14px 20px rgba(50, 0, 0, 0.28))
        drop-shadow(0 46px 62px rgba(50, 0, 0, 0.22)) !important;
}

/* 04 电脑 */
.bc-img-laptop {
    right: -11% !important;
    top: -1% !important;

    width: clamp(320px, 19vw, 410px) !important;
    max-width: 410px !important;

    rotate: 8deg !important;
    z-index: 30 !important;

    --from-x: 90px;
    --from-y: -60px;
    --enter-delay: 0.78s;
    --float-duration: 6.1s;
    --float-distance: -22px;

    --label-x: calc(100% + 24px);
    --label-y: 116px;
    --line-width: 86px;
    --line-x: calc(100% + 8px);
    --line-y: 134px;
    --dot-x: calc(100% + 6px);
    --dot-y: 130px;
}

/* 05 Ads / Growth 图表 */
.bc-img-growth {
    right: -13% !important;
    top: 40% !important;

    width: clamp(220px, 13vw, 285px) !important;
    max-width: 285px !important;

    rotate: 4deg !important;
    z-index: 32 !important;

    --from-x: 90px;
    --from-y: 20px;
    --enter-delay: 1s;
    --float-duration: 4.8s;
    --float-distance: -28px;

    --label-x: calc(100% + 24px);
    --label-y: 54px;
    --line-width: 86px;
    --line-x: calc(100% + 8px);
    --line-y: 72px;
    --dot-x: calc(100% + 6px);
    --dot-y: 68px;
}

/* 06 日历 */
.bc-img-calendar {
    right: -1.5% !important;
    bottom: 1% !important;

    width: clamp(175px, 10.5vw, 230px) !important;
    max-width: 230px !important;

    rotate: -7deg !important;
    z-index: 34 !important;

    --from-x: 60px;
    --from-y: 80px;
    --enter-delay: 1.18s;
    --float-duration: 5.4s;
    --float-distance: -18px;

    --label-x: calc(100% + 22px);
    --label-y: 74px;
    --line-width: 80px;
    --line-x: calc(100% + 8px);
    --line-y: 92px;
    --dot-x: calc(100% + 6px);
    --dot-y: 88px;
}


/* =========================================================
   08. Hover Labels
   鼠标悬停显示说明标签
   ========================================================= */

.bc-hero-item::before {
    content: attr(data-label) !important;
    position: absolute !important;
    left: var(--label-x) !important;
    top: var(--label-y) !important;
    z-index: 60 !important;

    display: block !important;

    min-width: max-content;
    padding: 10px 16px;

    border-radius: 999px;

    color: #171717;
    background: rgba(255, 255, 255, 0.96);

    box-shadow:
        0 10px 24px rgba(80, 0, 0, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.55);

    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.02em;
    white-space: nowrap;

    opacity: 0;
    transform: translateY(8px) scale(0.96);

    pointer-events: none;

    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}

.bc-hero-item::after {
    content: "" !important;
    position: absolute !important;
    left: var(--dot-x) !important;
    top: var(--dot-y) !important;
    z-index: 61 !important;

    display: block !important;

    width: 9px;
    height: 9px;

    border-radius: 50%;
    background: #e8342f;

    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.92),
        0 8px 20px rgba(80, 0, 0, 0.25);

    opacity: 0;
    transform: scale(0.6);

    pointer-events: none;

    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}

.bc-label-line {
    position: absolute !important;
    left: var(--line-x) !important;
    top: var(--line-y) !important;
    z-index: 59 !important;

    display: block !important;

    width: var(--line-width);
    height: 1px;

    background: rgba(255, 255, 255, 0.78);

    opacity: 0;
    transform: scaleX(0);
    transform-origin: right center;

    pointer-events: none;

    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}

.bc-img-laptop .bc-label-line,
.bc-img-growth .bc-label-line,
.bc-img-calendar .bc-label-line {
    transform-origin: left center;
}

.bc-hero-item:hover::before,
.bc-hero-item:hover::after,
.bc-hero-item:hover .bc-label-line {
    opacity: 1 !important;
}

.bc-hero-item:hover::before {
    transform: translateY(0) scale(1) !important;
}

.bc-hero-item:hover::after {
    transform: scale(1) !important;
}

.bc-hero-item:hover .bc-label-line {
    transform: scaleX(1) !important;
}


/* =========================================================
   09. Animations
   ========================================================= */

@keyframes bcHeroTextIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bcHeroTitleIn {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.96);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes bcHeroButtonIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes bcHeroDiagonalIn {
    from {
        opacity: 0;
        transform: rotate(-13deg) scale(1.22);
    }

    to {
        opacity: 1;
        transform: rotate(-13deg) scale(1);
    }
}

@keyframes bcHeroFrameIn {
    from {
        opacity: 0;
        transform: scale(1.16) rotate(-2deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

@keyframes bcHeroItemIn {
    from {
        opacity: 0;
        transform: translate3d(var(--from-x), var(--from-y), 0) scale(0.82);
        filter: blur(7px);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes bcHeroItemFloat {
    0%, 100% {
        translate: 0 0;
    }

    50% {
        translate: 0 var(--float-distance);
    }
}

@keyframes bcPlantLeftIn {
    from {
        opacity: 0;
        transform: rotate(-10deg) translate3d(-40px, 90px, 0) scale(0.96);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: rotate(-10deg) translate3d(0, 0, 0) scale(1);
        filter: blur(3px);
    }
}

@keyframes bcPlantRightIn {
    from {
        opacity: 0;
        transform: rotate(10deg) translate3d(40px, 90px, 0) scale(0.96);
        filter: blur(6px);
    }

    to {
        opacity: 1;
        transform: rotate(10deg) translate3d(0, 0, 0) scale(1);
        filter: blur(3px);
    }
}

@keyframes bcPlantLeftFloat {
    0%, 100% {
        transform: rotate(-10deg) translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: rotate(-8deg) translate3d(0, -26px, 0) scale(1.025);
    }
}

@keyframes bcPlantRightFloat {
    0%, 100% {
        transform: rotate(10deg) translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: rotate(8deg) translate3d(0, -22px, 0) scale(1.025);
    }
}


/* =========================================================
   10. Responsive
   响应式适配
   ========================================================= */

/* 大屏 */
@media (min-width: 1700px) {
    .bc-hero-visual {
        width: min(1080px, 70vw) !important;
        height: min(700px, 64vh) !important;
    }

    .bc-hero-title {
        font-size: clamp(90px, 7.1vw, 134px) !important;
    }
}


/* 小桌面 / 窄屏 */
@media (max-width: 1200px) {
    :root {
        --bc-red-height: 1060px;
    }

    .bc-hero,
    .bc-hero-inner {
        min-height: var(--bc-red-height) !important;
        height: var(--bc-red-height) !important;
    }

    .bc-hero-visual {
        left: 50vw !important;
        top: 55% !important;

        width: min(760px, 72vw) !important;
        height: 540px !important;
    }

    .bc-frame {
        border-width: 7px !important;
    }

    .bc-hero-copy {
        left: 50vw !important;
        top: 52.8% !important;

        width: min(620px, 70vw) !important;
    }

    .bc-hero-title {
        font-size: clamp(58px, 7vw, 88px) !important;
        line-height: 0.9 !important;
    }

    .bc-eyebrow {
        font-size: 12px !important;
        letter-spacing: 4px !important;
    }

    .bc-hero-text {
        font-size: 15px !important;
        margin-top: 24px !important;
    }

    .bc-hero-actions {
        margin-top: 22px !important;
    }

    .bc-btn {
        min-height: 46px !important;
        padding: 0 26px !important;
        font-size: 13px !important;
    }

    .bc-img-pen {
        left: -4% !important;
        top: -4% !important;

        height: clamp(110px, 9vw, 145px) !important;
    }

    .bc-img-phone {
        left: -15% !important;
        top: 21% !important;

        width: clamp(125px, 11vw, 165px) !important;
        max-width: 165px !important;

        rotate: -15deg !important;
    }

    .bc-img-camera {
        left: -8% !important;
        bottom: -2% !important;

        width: clamp(220px, 20vw, 300px) !important;
        max-width: 300px !important;
    }

    .bc-img-laptop {
        right: -8% !important;
        top: 0% !important;

        width: clamp(220px, 24vw, 320px) !important;
        max-width: 320px !important;

        rotate: 8deg !important;
    }

    .bc-img-growth {
        right: -12% !important;
        top: 40% !important;

        width: clamp(170px, 18vw, 230px) !important;
        max-width: 230px !important;
    }

    .bc-img-calendar {
        right: -1% !important;
        bottom: 2% !important;

        width: clamp(125px, 13vw, 170px) !important;
        max-width: 170px !important;
    }

    .bc-plant-left {
        left: -260px !important;
        bottom: -250px !important;

        width: 680px !important;
    }

    .bc-plant-right {
        right: -300px !important;
        bottom: -260px !important;

        width: 700px !important;
    }
}


/* 平板 */
@media (max-width: 980px) {
    :root {
        --bc-red-height: 980px;
    }

    .bc-hero,
    .bc-hero-inner {
        min-height: var(--bc-red-height) !important;
        height: var(--bc-red-height) !important;
    }

    .bc-hero-visual {
        left: 50vw !important;
        top: 55% !important;

        width: 72vw !important;
        height: 500px !important;
    }

    .bc-hero-copy {
        left: 50vw !important;
        top: 52.5% !important;

        width: 68vw !important;
    }

    .bc-hero-title {
        font-size: clamp(50px, 7.4vw, 76px) !important;
    }

    .bc-img-camera {
        bottom: -1% !important;
        width: clamp(200px, 20vw, 260px) !important;
    }

    .bc-img-calendar {
        bottom: 2% !important;
        width: clamp(115px, 13vw, 155px) !important;
    }

    .bc-img-laptop {
        top: 1% !important;
        right: -7% !important;
    }

    .bc-plant-left {
        left: -280px !important;
        bottom: -280px !important;
        width: 640px !important;
    }

    .bc-plant-right {
        right: -320px !important;
        bottom: -290px !important;
        width: 660px !important;
    }
}


/* 手机端：隐藏复杂视觉，只保留文字 */
@media (max-width: 680px) {
    .bc-hero {
        min-height: auto !important;
        height: auto !important;
        padding-top: 0 !important;
    }

    .bc-hero-inner {
        min-height: auto !important;
        height: auto !important;

        padding: 90px 24px 70px !important;
    }

    .bc-hero-visual {
        display: none !important;
    }

    .bc-plant {
        display: none !important;
    }

    .bc-hero-copy {
        position: relative !important;

        left: auto !important;
        top: auto !important;

        width: 100% !important;
        margin: 0 auto !important;

        transform: none !important;
    }

    .bc-hero-title {
        font-size: 58px !important;
    }

    .bc-hero-text {
        font-size: 17px !important;
    }

    .bc-btn {
        width: 100% !important;
    }
}