/* =========================================================
   ONEETSAKO — HERO SYSTEM
   FULL-SCREEN / ONE SECTION / SMALL SWINGING LEAF
   ========================================================= */


/* =========================================================
   1. HERO
   ========================================================= */

.etsako-hero {
    position: relative !important;

    width: 100vw !important;
    max-width: none !important;

    height: 100vh !important;
    height: 100svh !important;
    min-height: 100svh !important;

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

    box-sizing: border-box !important;

    overflow: hidden !important;

    display: flex;
    align-items: center;
    justify-content: center;

    perspective: 1000px;
    perspective-origin: 50% 50%;

    isolation: isolate;
}


/* =========================================================
   2. BACKGROUND VIDEO
   ========================================================= */

.etsako-hero .hero-video {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

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

    display: block !important;

    object-fit: cover !important;
    object-position: center center !important;

    z-index: 1 !important;

    filter:
        brightness(0.62)
        contrast(1.08);

    pointer-events: none;
}


/* =========================================================
   3. MIST
   ========================================================= */

.etsako-hero .mist {
    position: absolute;

    width: clamp(650px, 120vw, 1500px);

    height: auto;

    z-index: 2;

    opacity: 0.18;

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

    animation:
        etsakoMistFloat
        12s
        ease-in-out
        infinite;

    will-change: transform;
}

.etsako-hero .mist-1 {
    top: 0;
    left: -10%;
}

.etsako-hero .mist-2 {
    right: -10%;
    bottom: 0;

    animation-delay: 4s;
}


@keyframes etsakoMistFloat {

    0% {
        transform:
            translateY(0)
            scale(1);
    }

    50% {
        transform:
            translateY(-20px)
            scale(1.05);
    }

    100% {
        transform:
            translateY(0)
            scale(1);
    }
}


/* =========================================================
   4. HERO OVERLAY
   ========================================================= */

.etsako-hero .hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        rgba(0, 0, 0, 0.42);
}


/* =========================================================
   5. LOGO
   ========================================================= */

.etsako-hero .etsako-hero-logo {
    position: absolute;

    top: clamp(32px, 5vw, 60px);

    right: clamp(14px, 3vw, 42px);

width: clamp(54px, 5.5vw, 82px);




    height: auto;

    display: block;

    margin: 0;
    padding: 0;

    box-sizing: border-box;

    object-fit: contain;

    border: 0;
    outline: 0;

    background: transparent;

    border-radius: 50%;

    box-shadow: none;

    filter: none;

    opacity: 1;

    z-index: 100;

    pointer-events: none;
}


/* =========================================================
   6. CENTER CONTENT
   ========================================================= */

.etsako-hero-content {
    position: relative;

    z-index: 10;

    width: min(92%, 900px);

    margin: 0 auto;

    padding: clamp(18px, 4vw, 60px);

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    min-width: 0;
}


/* =========================================================
   7. HERO LEAF
   SMALL DECORATIVE ELEMENT
   ========================================================= */





/* Cleaned CSS - NO ANIMATION KEYFRAMES NEEDED */
.etsako-hero {
    perspective: 1000px;
}

.etsako-hero .etsako-hero-leaf {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;

    width: 110px !important;
    height: 110px !important;

    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    object-fit: contain !important;
    box-sizing: border-box !important;

    z-index: 20 !important;
    opacity: 0.95;
    pointer-events: none;

    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.35));

    /* Preserves 3D hardware acceleration */
    transform-origin: center center !important;
    transform-style: preserve-3d !important;
    will-change: transform;
}















   
/* =========================================================
   9. HERO TITLE
   ========================================================= */

.etsako-hero-title {
    display: block;

    width: 100%;

    margin:
        clamp(8px, 1vw, 14px)
        0;

    padding: 0;

    font-size:
        clamp(
            1.55rem,
            4vw,
            3rem
        );

    line-height: 1.08;

    letter-spacing:
        clamp(
            2px,
            0.8vw,
            10px
        );

    font-weight: 300;

    color: #ffffff;

    text-align: center;

    text-shadow:
        0 0 18px
        rgba(214, 180, 107, 0.25);

    opacity: 0;

    animation:
        etsakoHeroFadeUp
        2s
        0.5s
        ease-out
        forwards;

    overflow-wrap: anywhere;
}


/* =========================================================
   10. HERO SUBTITLE
   ========================================================= */

.etsako-hero-subtitle {

    display: block;

    width: min(100%, 680px);

    margin: 0 auto;

    padding: 0;

    font-size:
        clamp(
            0.78rem,
            1.3vw,
            0.95rem
        );

    line-height: 1.7;

    letter-spacing:
        clamp(
            0.7px,
            0.3vw,
            2px
        );

    font-weight: 300;

    color:
        rgba(
            255,
            255,
            255,
            0.88
        );

    text-align: center;

    opacity: 0;

    animation:
        etsakoHeroFadeUp
        2s
        1s
        ease-out
        forwards;

    overflow-wrap: anywhere;
}


/* =========================================================
   11. HERO TEXT ANIMATION
   ========================================================= */

@keyframes etsakoHeroFadeUp {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

}


/* =========================================================
   12. SCROLL CAPSULE
   ========================================================= */

.etsako-hero .scroll-indicator {

    position: absolute;

    left: 50%;

    bottom:
        clamp(
            22px,
            5vh,
            60px
        );

    width:
        clamp(
            20px,
            2vw,
            24px
        );

    height:
        clamp(
            34px,
            4vw,
            42px
        );

    transform: translateX(-50%);

    display: block;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.55
        );

    border-radius: 999px;

    background: transparent;

    z-index: 9999;

    pointer-events: none;

    opacity: 1;

    visibility: visible;

    box-sizing: border-box;
}


/* =========================================================
   13. REDUCED MOTION
   ========================================================= */

.reduced-motion
.etsako-hero
.etsako-hero-leaf {

    animation: none !important;
}

.reduced-motion
.etsako-hero
.mist {

    animation: none !important;
}

.reduced-motion
.etsako-hero-title,
.reduced-motion
.etsako-hero-subtitle {

    animation: none !important;

    opacity: 1 !important;

    transform: none !important;
}


/* =========================================================
   END — ONEETSAKO HERO SYSTEM
   ========================================================= */




































   /* =========================================================
   ONEETSAKO — HERO VIDEO EDGE-TO-EDGE FIX
   ========================================================= */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.etsako-hero {
    position: relative !important;

    width: 100% !important;
    max-width: none !important;

    height: 100vh !important;
    height: 100svh !important;

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

    overflow: hidden !important;

    box-sizing: border-box !important;
}

.etsako-hero .hero-video {
    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    z-index: 1 !important;

    pointer-events: none !important;
}