/* === Video background === */
.hero-video { position: absolute; inset: 0; overflow: hidden; }
.hero-video video {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center; display: block;
}

/* === Rotating text animation === */
.ap-rotate { display:inline-block; position:relative; will-change:transform,opacity; }
.ap-rotate.ap-in { animation: apFadeUp 700ms cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes apFadeUp {
    0% { opacity:0; transform:translateY(16%); filter:blur(2px); }
    100%{ opacity:1; transform:translateY(0);   filter:blur(0); }
}

/* === Dynamic rails / frame === */
#apHero{
    --stroke: 2px;        /* line thickness */
    --gap: 0px;           /* space between blue & red rails at bottom */
    --box-left: 0px;
    --box-width: 0px;
    --box-height: 0px;    /* card height (measured) */
    --frame-bottom: 0px;  /* distance from hero bottom to card bottom (measured) */
    --radius-top: 1rem;   /* match rounded-2xl */
    --collapse-extra: 2.5rem; /* EXTRA collapse after 5s (2–3rem as requested) */
}

/* BLUE info rail (bottom) */
#apHero .blue-line{
    position:absolute; left:0; right:0; bottom:0;
    height:var(--stroke);
    background-color: rgb(14 165 233); /* sky-500 fallback */
    filter: blur(2px); will-change: filter;
}

/* RED primary rail (bottom) – sits just above the blue rail */
#apHero .red-bottom-left{
    position:absolute; left:0; bottom:calc(var(--stroke)+var(--gap));
    height:var(--stroke); width:var(--box-left);
    background-color: rgb(220 38 38); /* red-600 fallback */
    filter: blur(2px); will-change: filter;
}
#apHero .red-bottom-right{
    position:absolute; left:calc(var(--box-left) + var(--box-width)); right:0;
    bottom:calc(var(--stroke)+var(--gap));
    height:var(--stroke);
    background-color: rgb(220 38 38);
    filter: blur(2px); will-change: filter;
}

#apHero .red-frame{
    position:absolute;
    left:var(--box-left);
    bottom:var(--frame-bottom);
    width:var(--box-width);
    height:var(--box-height);
    border:var(--stroke) solid rgb(220 38 38);
    border-bottom:none;
    border-top-left-radius:var(--radius-top);
    border-top-right-radius:var(--radius-top);
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    pointer-events:none;

    /* hide until JS has proper values */
    opacity:0;
    visibility:hidden;
    transition:opacity .3s ease;
}

/* Smooth collapse of the body block */
#apHeroBody {
    overflow: hidden;
    transition: opacity .6s ease, max-height .6s ease, margin-top .6s ease;
}

@media (prefers-reduced-motion: reduce){
    .ap-rotate{ animation:none !important; filter:none !important; }
    #apHeroBody { transition: none !important; }
}