/* === Base Hero Styles === */
.expro-hero {
    position: relative;
    height: 100%;
    min-height: 100vh;
    background: #0f0e0c;
}

.expro-hero .hero {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 1;
    pointer-events: auto;
}
.expro-hero .hero:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    pointer-events: none;
    width: 100%;
    background-image: url('/wp-content/uploads/2025/11/f3-bg-img.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.expro-hero .hero__media{
    position: relative;
    width:100%;
    height:100%;
}

.expro-hero .hero__media::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
}

/* --- Media Container (background image/video) --- */
.hero__media {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;           /* default, can be overridden by custom controls if added */
    height: 100%;
    z-index: 0;
    opacity: 0;           /* initially hidden, animated to 1 */
    will-change: opacity;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* --- Overlay pseudo-element --- */
.hero__media::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s;
    opacity: 0;           /* default, overridden by control */
    border-radius: inherit;
    clip-path: inherit;   /* match the main element */
}

/* --- Mask & Gradient (static) --- */
.hero__photo-mask {
    position: absolute;
    top: 0;
    right: 0;
    width: 55%;
    height: 100%;
    background: linear-gradient(to right, #0f0e0c 0%, rgba(15,14,12,0.72) 22%, rgba(15,14,12,0.2) 50%, rgba(15,14,12,0) 65%);
    z-index: 2;
    pointer-events: none;
}
.elementor-background-video-container,
.elementor-background-video-embed{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
}

.elementor-background-video-embed{
object-fit:cover;
}
.hero__bottom-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 38%;
    background: linear-gradient(to top, #0f0e0c 0%, rgba(15,14,12,0.85) 30%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

/* --- Text (Name) --- */
.word-wrap {
    position: absolute;
    z-index: 15;
    white-space: nowrap;
    will-change: left, top;
    text-transform: uppercase;
}

/* #toscaniRow {
    margin-top: -40px;
} */

.hero__word {
    color: #f1e9db;
    letter-spacing: -0.01em;
    display: block;
    overflow: hidden;
    line-height: .85;
}

.letter-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    /* font-size: clamp(8rem, 15vw, 15rem); */
}

.letter {
    display: inline-block;
    will-change: transform;
    transform: translateY(110%);
    /* line-height: 1;
    font-weight: 700;
    padding-left: 5px;
    padding-right: 5px; */
}

/* --- Footer --- */
.hero-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 15;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 2.5rem 2.8rem;
}

.footer-block {
    display: flex;
    flex-direction: column;
    line-height: 1.55;
}

.footer-line {
    display: block;
    overflow: hidden;
    line-height: 1.6;
    white-space: nowrap;
}

.footer-line-inner {
    display: block;
    transform: translateY(110%);
    will-change: transform;
    color: #f1e9db;
}

/* --- Scroll Circle --- */
.scroll-circle {
    width: 88px;
    height: 88px;
    position: relative;
    flex-shrink: 0;
}

.scroll-circle .outer-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

.scroll-circle circle {
    fill: none;
    stroke: rgba(241,233,219,0.65);
    stroke-width: 1.6;
    stroke-dasharray: 270;
    stroke-dashoffset: 270;
    transition: none;
}

.scroll-circle.loaded circle {
    transition: stroke-dashoffset 0.85s cubic-bezier(0.16,1,0.3,1);
}

.scroll-circle.loaded:hover circle {
    stroke-dashoffset: 0;
}

.arrow-inside {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

.arrow-inside svg {
    width: 20px;
    fill: #f1e9db;
    transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}

.scroll-circle:hover .arrow-inside svg {
    transform: translate(3px, 3px);
}

/* === Responsive === */
@media (max-width: 1024px) {
    .hero-footer { padding: 0 2rem 2.2rem; }
}

@media (max-width: 900px) {
    .hero-footer { padding: 0 1.5rem 2rem; }
    .hero__media { width: 100%; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
    .hero__photo-mask { width: 100%; background: linear-gradient(to right,#0f0e0c 0%,rgba(15,14,12,0.88) 40%,rgba(15,14,12,0.55) 70%,rgba(15,14,12,0.3) 100%); }
    .hero__bottom-gradient { height: 50%; background: linear-gradient(to top,#0f0e0c 0%,rgba(15,14,12,0.92) 40%,transparent 100%); }
    .footer-block:nth-child(2) { display: none; }
    .scroll-circle { width: 72px; height: 72px; }
    .scroll-circle circle { stroke-dasharray: 222; stroke-dashoffset: 222; }
}

@media (max-width: 600px) {
    .hero-footer { padding: 0 1.2rem 1.8rem; }
    .footer-block:nth-child(2), .footer-block:nth-child(3) { display: none; }
    .footer-line-inner { font-size: 0.7rem !important; }
    .scroll-circle { width: 65px; height: 65px; }
    .scroll-circle circle { stroke-dasharray: 200; stroke-dashoffset: 200; }
    .arrow-inside svg { width: 16px; }
}

@media (max-width: 420px) {
    .hero-footer { padding: 0 1rem 1.5rem; }
    .footer-line-inner { font-size: 0.65rem !important; }
}

@media (max-width: 360px) {
    .hero-footer { padding: 0 0.9rem 1.2rem; }
    .scroll-circle { width: 55px; height: 55px; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .hero-footer { padding: 0 1.5rem 1rem; }
    .scroll-circle { width: 55px; height: 55px; }
    .scroll-circle circle { stroke-dasharray: 200; stroke-dashoffset: 200; }
    .footer-block:nth-child(2), .footer-block:nth-child(3) { display: none; }
    .hero__bottom-gradient { height: 55%; }
}

.scroll-circle {
    cursor: pointer;
}

/* If letters are not present, show the plain text */
.hero__word:not(:has(.letter)) {
    display: block;
    font-size: clamp(8rem, 15vw, 15rem);
    color: #f1e9db;
    /* approximate positioning */
    position: relative;
    top: 50%;
    transform: translateY(-90%);
}

/* Force all elements to be visible in the Elementor editor preview */
.elementor-editor-active #antonioWrap,
.elementor-editor-active #toscaniWrap {
    color: white !important;
    z-index: 9999 !important;
}

.elementor-editor-active #antonioWrap,
.elementor-editor-active #toscaniWrap,
.elementor-edit-mode #antonioWrap,
.elementor-edit-mode #toscaniWrap {
    visibility: visible !important;
}

.elementor-editor-active .hero__word .letter,
.elementor-edit-mode .hero__word .letter {
    transform: translateY(0%) !important;
}

.elementor-editor-active .footer-line-inner,
.elementor-edit-mode .footer-line-inner {
    transform: translateY(0%) !important;
}

.elementor-editor-active .hero__media,
.elementor-edit-mode .hero__media {
    opacity: 1 !important;
}

.elementor-editor-active #circleEl circle,
.elementor-edit-mode #circleEl circle {
    stroke-dashoffset: 0 !important;
}

.elementor-editor-active #arrowEl,
.elementor-edit-mode #arrowEl {
    opacity: 1 !important;
}