/* Style 1 — Story Vertical Frontend */
.hpe-s1 { margin: 0; padding: 0; }
.hpe-s1 * { box-sizing: border-box; }

.hpe-s1-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
   display:flex;
align-items:flex-end;
justify-content:flex-start;
    color: #fff;
    isolation: isolate;
}

.hpe-s1-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    display: block;
}
.hpe-s1-bg-mobile { display: none; }


.hpe-s1-overlay{

    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;

    background:

    linear-gradient(

        to top,

        rgba(
            var(--hpe-overlay-r,0),
            var(--hpe-overlay-g,0),
            var(--hpe-overlay-b,0),
            calc(var(--hpe-overlay-a,.45) + .25)
        ) 0%,

        rgba(
            var(--hpe-overlay-r,0),
            var(--hpe-overlay-g,0),
            var(--hpe-overlay-b,0),
            calc(var(--hpe-overlay-a,.45) * .65)
        ) 25%,

        rgba(
            var(--hpe-overlay-r,0),
            var(--hpe-overlay-g,0),
            var(--hpe-overlay-b,0),
            calc(var(--hpe-overlay-a,.45) * .20)
        ) 50%,

        transparent 75%

    );

}

.hpe-s1-overlay::after{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(0,0,0,0) 45%,
            rgba(0,0,0,.18) 100%
        );

    opacity:.45;
}



.hpe-s1-inner{

    position:relative;
    z-index:3;

    width:100%;
    max-width:560px;

    margin:0;

    padding:
        0
        clamp(28px,6vw,80px)
        clamp(70px,8vh,95px);

    text-align:left;

}


.hpe-s1-align-left .hpe-s1-inner{

    margin-right:auto;

}



.hpe-s1-align-right .hpe-s1-inner{

    margin-left:auto;

    text-align:right;

}
.hpe-s1-title {
    margin: 0 0 14px;
   font-size:

clamp(2.1rem,4vw,3.5rem);

line-height:1.08;

margin-bottom:1px;
    font-weight: normal;
    letter-spacing: -0.02em;
   text-shadow:0 3px 18px rgba(0,0,0,.25);
font-family: anton;
}





.hpe-s1-desc{

    max-width:480px;

    margin-bottom:8px;

    font-size:1.08rem;

    line-height:1.75;

    opacity:.92; margin-top: -1px;

}






.hpe-s1-btn {
    display: inline-block;
   padding:12px 26px;

font-size:.95rem;

border:1px solid rgba(255,255,255,.65);

background:transparent;

color:#fff;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.hpe-s1-btn:hover { transform: translateY(-2px); background: #111; color: #fff; }
.hpe-s1-btn.is-inert { opacity: 0.6; pointer-events: none; }

.hpe-s1-scroll-hint {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    animation: hpe-s1-bounce 1.6s ease-in-out infinite;
}
.hpe-s1-chev {
    width: 14px; height: 14px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    opacity: 0.85;
}
@keyframes hpe-s1-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 10px); }
}

.hpe-s1-empty { background: #111; color: #fff; }
.hpe-s1-empty h2 { color: #fff; }

/* Mobile — Story mode */
@media (max-width: 768px) {
    .hpe-s1-section {
        height: 100svh;
        min-height: 100svh;
    }
    .hpe-s1-bg-desktop { display: none; }
    .hpe-s1-bg-mobile  { display: block; }
    .hpe-s1-align-left  .hpe-s1-inner,
    .hpe-s1-align-right .hpe-s1-inner {
        margin-left: 0; margin-right: 0;
        padding: 0 24px;
    }
    .hpe-s1-title { font-size: clamp(1.75rem, 8vw, 2.75rem); }
    .hpe-s1-desc  { font-size: 1rem; }
}

/* Reveal animation on entering viewport */
.hpe-s1-inner > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.hpe-s1-section.is-in .hpe-s1-inner > * { opacity: 1; transform: translateY(0); color: #fff;}
.hpe-s1-section.is-in .hpe-s1-desc  { transition-delay: 0.08s; }
.hpe-s1-section.is-in .hpe-s1-btn   { transition-delay: 0.16s; }


/* ===== Clickable Section ===== */

.hpe-s1-section[data-link]:not([data-link=""]){
    cursor: pointer;
}