/* shared.css — Reusable components used across multiple pages */

/* ─── Shared Hero Kanji Watermark ────────────────────────── */
.hero-kanji-watermark {
    position: absolute;
    right: -5%;
    top: 5%;
    height: 90%;
    width: auto;
    opacity: 0.35;
    z-index: 1;
    pointer-events: none;
}

/* ─── Shared Hero 3-Column Layout ────────────────────────── */
.hero-layout {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    flex-grow: 1;
}

.hero-col-left {
    width: 15%;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 5%;
}

.hero-col-center {
    width: 70%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-col-right {
    width: 15%;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-bottom: 10%;
}

/* Ramas de cerezo decorativas */
.hero-branch-left {
    width: 360px;
    max-width: none;
    height: auto;
    will-change: transform;
    transform: translate3d(0px, 0px, 0px);
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.hero-branch-right {
    width: 360px;
    max-width: none;
    height: auto;
    will-change: transform;
    transform: translate3d(0px, 0px, 0px);
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Subtitle Section */
.subtitle-section {
    padding: 80px 0;
    background-color: var(--color-white);
    background-image: url('../images/Background-image.png');
    background-repeat: repeat;
    text-align: center;
}

.section-title {
    font-family: var(--font-primary);
    font-size: 3rem;
    margin-bottom: 30px;
    color: var(--color-dark);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.subtitle-decoration {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
}

.katana {
    width: 97px;
    height: auto;
    display: block;
    flex: 0 0 auto;
    padding: 0 5px;
}

.subtitle-text {
    font-family: var(--font-primary);
    font-style: normal;
    color: var(--color-primary);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0;
    margin: 0;
    line-height: 1;
    flex: 0 0 max-content;
    text-align: center;
}

/* Red CTA Section (parallax) */
.red-cta-section {
    position: relative;
    min-height: 280px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.red-cta-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 1;
}

.red-cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(180, 30, 10, 0.85);
    z-index: 2;
}

.red-cta-content {
    position: relative;
    z-index: 3;
    padding: 60px 8%;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.red-cta-heading {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-style: italic;
    font-size: 2rem;
    font-weight: 400;
    color: var(--color-white);
    margin-bottom: 15px;
    line-height: 1.4;
    overflow-wrap: break-word;
}

.red-cta-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.red-cta-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: var(--color-white);
    color: var(--color-primary);
    text-decoration: none;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 2px solid var(--color-white);
    transition: all 0.3s ease;
}

.red-cta-button:hover {
    background-color: transparent;
    color: var(--color-white);
}

/* Footer */
.site-footer {
    background-color: #0a0a0a;
    color: var(--color-white);
    padding: 60px 0 20px;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    margin-bottom: 30px;
}

.footer-logo img {
    width: 180px;
    height: auto;
}

.footer-info {
    text-align: center;
}

.footer-info h4 {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    margin-bottom: 25px;
    color: var(--color-white);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.footer-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.footer-detail a {
    color: var(--color-white);
    text-decoration: none;
    font-size: 1.05rem;
    transition: color 0.3s ease;
}

.footer-detail a:hover {
    color: var(--color-primary);
}

.footer-separator {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    margin: 10px 0 20px;
}

.footer-bottom {
    text-align: center;
    padding-top: 10px;
}

/* Katana Heading Decorators */
.heading-decoration {
    text-align: center;
}

.heading-decoration .katana {
    display: inline-block;
    vertical-align: middle;
}

.heading-decoration p,
.heading-decoration h4,
.heading-decoration .subtitle-text {
    display: inline-block;
    vertical-align: middle;
}

/* Rajdhani tiene ascender alto — compensar para centrar visualmente el texto.
   Usamos transform en vez de padding para no agrandar el box del elemento,
   lo que evita que las katanas se desplacen hacia abajo en desktop. */
.heading-decoration h4,
.heading-decoration .subtitle-text {
    transform: translateY(0.08em);
}
/* subtitle-decoration ya usa inline-flex + align-items:center,
   así que necesita menos compensación */
.subtitle-decoration .subtitle-text {
    transform: translateY(0.05em);
}


/* Adjust margins when heading-decoration wraps a contact-heading */
.heading-decoration .contact-heading {
    margin-bottom: 0;
}

/* Red CTA subtitle inside heading-decoration */
.red-cta-content .heading-decoration {
    margin-bottom: 30px;
}

.heading-decoration .red-cta-subtitle {
    margin-bottom: 0;
}

/* Footer heading inside heading-decoration */
.footer-info .heading-decoration {
    margin-bottom: 25px;
}

.footer-info .heading-decoration h4 {
    margin-bottom: 0;
}

/* Shuriken: Scroll-to-Top Button */
.shuriken-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #e00f1c;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--color-white);
    z-index: 99;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: background-color 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.shuriken-btn.visible {
    opacity: 1;
    visibility: visible;
}

.shuriken-btn:hover {
    background-color: #000000;
}

.shuriken-icon {
    width: 28px;
    height: 28px;
    filter: brightness(0) invert(1);
    transition: none; /* rotation handled by JS */
}

/* Spin rápido al hacer click (scroll-to-top) */
.shuriken-btn.spinning .shuriken-icon {
    animation: shuriken-fast-spin 0.6s linear;
}

@keyframes shuriken-fast-spin {
    from { transform: rotate(var(--shuriken-angle, 0deg)); }
    to   { transform: rotate(calc(var(--shuriken-angle, 0deg) + 1080deg)); }
}

/* ═══════════════════════════════════════════════════════════ */
/* SHARED SECTION PATTERNS                                     */
/* ═══════════════════════════════════════════════════════════ */

/* Light Mosaic Section — white/light bg with tile pattern + shodo decoration */
/* Base: used by .subtitle-section, .beneficios-section, .buj-schools-section, .contact-page-info */
/* Each page adds its own shodo image via ::before or ::after */
.section-light-mosaic {
    background-color: #f8f8f8;
    background-image: url('../images/Background-image.png');
    background-repeat: repeat;
    position: relative;
    overflow: hidden;
}
.section-light-mosaic .container {
    position: relative;
    z-index: 1;
}

/* Red Parallax Section — red overlay over parallax hands image */
/* Base: used by .red-cta-section (already defined above) */
/* Image set via inline style on .red-cta-bg */

/* Dark Section — dark bg with 26787001_l.jpg and dark overlay */
/* Used by .buj-comparison-section, .buj-masters-section, .contact-info-section */
.section-dark {
    position: relative;
    background-color: #0a0a0a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: #ffffff;
}
.section-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 10, 10, 0.85);
    z-index: 0;
}
.section-dark > .container {
    position: relative;
    z-index: 1;
}

/* Hero Section Base — dark bg with branches layout */
/* Used by .hero-section, .buj-hero-section, .contact-hero */
.section-hero-base {
    position: relative;
    background-color: #0a0a0a;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════ */
/* SHARED HERO IMAGE + SUN AREA                                */
/* Used by: home (.hero-section), bujinkan (.buj-hero-section),*/
/*          instructores (.instructores-hero-section)           */
/* ═══════════════════════════════════════════════════════════ */

/* Contenedor compartido: foto + sol rojo */
.hero-image-area {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: visible;
}

/* Sol rojo — siempre centrado horizontalmente, anclado al fondo del contenedor */
.hero-image-area .hero-sun {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 95vw;
    max-width: 1470px;
    z-index: 1;
    object-fit: contain;
    pointer-events: none;
}

/* Foto encima del sol — z-index superior */
.hero-image-area .hero-photo {
    position: relative;
    z-index: 2;
    height: auto;
    border-radius: 8px;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
}

/* Animate on scroll (fade-in from below) */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.fade-in {
    opacity: 1;
    transform: translateY(0);
}