/* ============================================
   HERO — Full Viewport Cinematic Banner
   ============================================ */

.hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 48px 100px;
    overflow: hidden;
    /* Full-bleed breakout — thoát khỏi max-width của page-wrapper */
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* hero-compact cũng full viewport — không giới hạn chiều cao */
.hero.hero-compact {
    min-height: 100vh;
}

/* === BACKGROUND OVERLAY === */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(184,24,42,0.22), transparent 55%),
        radial-gradient(ellipse at 70% 60%, rgba(201,169,97,0.08), transparent 50%),
        linear-gradient(180deg, rgba(10,10,11,0.45) 0%, rgba(18,6,8,0.55) 45%, rgba(10,10,11,0.65) 100%);
}

/* === LARGE HANZI WATERMARK === */
.hero-hanzi {
    position: absolute;
    font-family: 'Noto Serif SC', serif;
    font-weight: 900;
    font-size: clamp(280px, 48vw, 700px);
    color: rgba(184, 24, 42, 0.07);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    line-height: 1;
    user-select: none;
    pointer-events: none;
    letter-spacing: -0.1em;
    z-index: 1;
    opacity: 0;
    animation: hanziIn 2s var(--ease-out) 0.3s forwards, hanziFloat 22s ease-in-out 2.3s infinite;
    will-change: transform;
}

@keyframes hanziIn {
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes hanziFloat {
    0%,100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
    50%      { transform: translate(-48%, -52%) scale(1.02) rotate(-1deg); }
}

/* === EMBER PARTICLES === */
.hero-embers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.ember {
    position: absolute;
    bottom: -10px;
    width: 3px; height: 3px;
    background: var(--color-gold-bright);
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 8px var(--color-gold-bright), 0 0 16px var(--color-gold-primary);
    animation: emberRise linear infinite;
}

.ember.red {
    background: var(--color-blood-bright);
    box-shadow: 0 0 8px var(--color-blood-bright), 0 0 20px var(--color-blood);
}

.ember:nth-child(1)  { left: 10%; animation-duration: 9s;  animation-delay: 0s; }
.ember:nth-child(2)  { left: 20%; animation-duration: 11s; animation-delay: 1.2s; }
.ember:nth-child(3)  { left: 33%; animation-duration: 8s;  animation-delay: 2.5s; }
.ember:nth-child(4)  { left: 48%; animation-duration: 13s; animation-delay: 0.7s; }
.ember:nth-child(5)  { left: 60%; animation-duration: 10s; animation-delay: 3.1s; }
.ember:nth-child(6)  { left: 73%; animation-duration: 12s; animation-delay: 1.8s; }
.ember:nth-child(7)  { left: 85%; animation-duration: 9s;  animation-delay: 4.2s; }
.ember:nth-child(8)  { left: 42%; animation-duration: 7s;  animation-delay: 2.0s; class: red; }
.ember:nth-child(9)  { left: 15%; animation-duration: 14s; animation-delay: 5.5s; }
.ember:nth-child(10) { left: 90%; animation-duration: 11s; animation-delay: 3.7s; }

@keyframes emberRise {
    0%   { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
    10%  { opacity: 0.9; transform: translateY(-10vh) translateX(5px) scale(1); }
    50%  { opacity: 0.6; }
    90%  { opacity: 0.2; }
    100% { transform: translateY(-110vh) translateX(40px) scale(0.3); opacity: 0; }
}


/* === HERO CONTENT — centered === */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: var(--container-max);
    width: 100%;
    text-align: center;
}

/* Badge tag */
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 18px;
    border: 1px solid var(--color-gold-dark);
    background: rgba(201, 169, 97, 0.06);
    font-family: var(--font-body); /* Inter — full Vietnamese (Cinzel thiếu "Đ") */
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-gold-primary);
    margin-bottom: 32px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s var(--ease-out) 0.5s forwards;
}

.hero-tag-dot {
    width: 6px; height: 6px;
    background: var(--color-gold-primary);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--color-gold-primary);
    animation: dotPulse 2s ease-in-out infinite;
}

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

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

/* Main title */
.hero-title {
    font-family: var(--font-hero);
    font-size: var(--font-size-hero);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 28px;
    text-align: center;
    letter-spacing: 0.02em;
    color: var(--color-gold-primary);
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s var(--ease-out) 0.6s forwards;
}

.hero-title .accent {
    background: linear-gradient(180deg,
        var(--color-gold-bright) 0%,
        var(--color-gold-primary) 40%,
        var(--color-gold-dark) 70%,
        var(--color-blood) 110%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* Subtitle with side lines */
.hero-subtitle {
    font-family: var(--font-body); /* Inter — full Vietnamese (Cinzel thiếu "Đ") */
    font-size: 13px;
    letter-spacing: 4px;
    color: var(--color-gold-primary);
    text-transform: uppercase;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
    opacity: 0;
    animation: fadeUp 0.8s var(--ease-out) 1.2s forwards;
}

.hero-subtitle::before,
.hero-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 50px; height: 1px;
    background: var(--color-gold-dark);
}

.hero-subtitle::before { right: calc(100% + 16px); }
.hero-subtitle::after  { left:  calc(100% + 16px); }

/* Description */
.hero-desc {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.8;
    max-width: 560px;
    margin: 0 auto 40px;
    opacity: 0;
    animation: fadeUp 0.8s var(--ease-out) 1.4s forwards;
}

/* CTA buttons */
.hero-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    opacity: 0;
    animation: fadeUp 0.8s var(--ease-out) 1.6s forwards;
}


/* === SCROLL INDICATOR === */
.hero-scroll-hint {
    position: absolute;
    bottom: 36px; left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 2;
    opacity: 0;
    animation: fadeUp 0.8s var(--ease-out) 2s forwards;
}

.hero-scroll-line {
    width: 1px; height: 44px;
    background: linear-gradient(to bottom, var(--color-gold-primary), transparent);
    position: relative;
    overflow: hidden;
}

.hero-scroll-line::after {
    content: '';
    position: absolute;
    top: -44px; left: 0;
    width: 100%; height: 44px;
    background: linear-gradient(to bottom, transparent, var(--color-gold-bright), transparent);
    animation: scrollDrip 2.2s ease-in-out infinite;
}

@keyframes scrollDrip {
    0%   { top: -44px; }
    100% { top: 44px; }
}

/* === RESPONSIVE === */

/*
 * Lưu ý: left:X% của characters là % của CỘT TRÁI (50vw)
 * → tự scale theo viewport, KHÔNG cần override left ở breakpoint
 * Chỉ cần override height và bottom (stagger)
 */

/* 1400px */
@media (max-width: 1400px) {
    .hero-char-img { height: clamp(170px, 30vh, 280px) !important; }
    /* bottom của top row giảm theo chiều cao character */
    .hero-char-img.char-t1,
    .hero-char-img.char-t2,
    .hero-char-img.char-t3 { bottom: 155px; }
    .hero-char-sword { height: clamp(460px, 80vh, 740px); }
}

/* 1200px */
@media (max-width: 1200px) {
    .hero-char-img { height: clamp(140px, 24vh, 240px) !important; }
    .hero-char-img.char-t1,
    .hero-char-img.char-t2,
    .hero-char-img.char-t3 { bottom: 128px; }
    .hero-char-sword { height: clamp(360px, 65vh, 600px); }
}

/* 960px — ẩn characters, collapse split thành 1 cột */
@media (max-width: 960px) {
    .hero-char-img, .hero-char-sword { display: none; }
    .hero-split {
        position: relative;     /* trở về relative khi không cần overlay */
        inset: auto;
        width: 100%;
        grid-template-columns: 1fr;
        align-items: center;
    }
    .hero-split-left { display: none; }
    .hero-split-right {
        text-align: center;
        padding: 120px 24px 80px;
        justify-content: center;
    }
    .hero-split-right .hero-subtitle::before { display: none; }
    .hero-split-right .hero-cta { justify-content: center; }
    .hero-split-right .hero-desc { margin: 0 auto 40px; }
}

@media (max-width: 600px) {
    .hero { padding: 120px 24px 80px; }
    .hero-subtitle::before,
    .hero-subtitle::after { display: none; }
}