/*
 * Vedinterior – WELCOME intro (home page only)
 *  1. 3D doors open on first visit of the session
 *  2. "Welcome To Vedinterior" letters flip in
 *  3. Main title writes itself, letter by letter, with a 3D flip
 *  4. Paragraph + buttons rise out of depth
 * Safe to load on every page: nothing happens unless a .banner-3 hero exists.
 */

/* ---------- cover that stops a flash before the doors appear ----------
   (needs the one-line snippet in index.php <head>, see instructions) */
html.a3d-wait::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999990;
    background: #2c2926;
    animation: a3d-failsafe 0.3s ease 6s forwards;
}

@keyframes a3d-failsafe {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

html.a3d-lock,
html.a3d-lock body {
    overflow: hidden;
}

/* the hero starts slightly zoomed and settles back as the doors open */
html.a3d-welcome .banner-3 {
    transition: transform 1.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

html.a3d-gate-on .banner-3 {
    transform: scale(1.12);
}

/* After the doors open: video first, title second, actions third, slider last. */
.banner-3.a3d-sequence .hero-heading,
.banner-3.a3d-sequence .banner-3__content,
.banner-3.a3d-sequence .hero-image-box {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
}

.banner-3.a3d-video-only::before {
    background: transparent !important;
}

.banner-3.a3d-sequence.is-title-on .hero-heading {
    opacity: 1 !important;
    visibility: visible;
    animation: hero-stage-title 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.banner-3.a3d-sequence.is-actions-on .banner-3__content {
    opacity: 1 !important;
    visibility: visible;
    animation: hero-stage-actions 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.banner-3.a3d-sequence.is-slider-on .hero-image-box {
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto;
    animation: hero-stage-slider 0.95s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes hero-stage-title {
    from {
        opacity: 0;
        transform: perspective(900px) translate3d(-28px, 24px, -90px) rotateY(-12deg);
        filter: blur(7px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes hero-stage-actions {
    from {
        opacity: 0;
        transform: perspective(800px) translate3d(0, 28px, -70px) rotateX(15deg);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes hero-stage-slider {
    from {
        opacity: 0;
        transform: perspective(1200px) translate3d(70px, 28px, -140px) rotateY(18deg) scale(0.9);
    }
    to {
        opacity: 1;
        transform: perspective(1200px) translate3d(0, 0, 0) rotateY(0) scale(1);
    }
}

/* ============================================================
   1. THE DOORS
   ============================================================ */
.a3d-gate {
    position: fixed;
    inset: 0;
    z-index: 9999990;
    perspective: 1600px;
    overflow: hidden;
    cursor: pointer;
}

.a3d-door {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50.3%;
    background:
        linear-gradient(180deg, rgba(20, 14, 11, 0.45), rgba(20, 14, 11, 0.78)),
        url('../imgs/interior-service/home-interior.jfif') center center / cover no-repeat,
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.022) 0 2px, transparent 2px 11px),
        linear-gradient(180deg, #332f2a, #24211e);
    background-blend-mode: multiply, normal, normal, normal;
    backface-visibility: hidden;
    transition: transform 1.5s cubic-bezier(0.7, 0, 0.2, 1) 0.45s;
}

.a3d-door--l {
    left: 0;
    background-position: left center, left center, center, center;
    transform-origin: 0 50%;
    box-shadow: inset -1px 0 0 rgba(144, 110, 80, 0.7), inset -16px 0 30px rgba(0, 0, 0, 0.35);
}

.a3d-door--r {
    right: 0;
    background-position: right center, right center, center, center;
    transform-origin: 100% 50%;
    box-shadow: inset 1px 0 0 rgba(144, 110, 80, 0.7), inset 16px 0 30px rgba(0, 0, 0, 0.35);
}

/* brass handles */
.a3d-door::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 5px;
    height: 96px;
    margin-top: -48px;
    border-radius: 3px;
    background: linear-gradient(#cfa981, #906e50);
}

.a3d-door--l::after {
    right: 22px;
}

.a3d-door--r::after {
    left: 22px;
}

/* shadow deepens as each door swings away */
.a3d-door::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    transition: opacity 1.4s ease 0.45s;
}

.a3d-gate.is-opening .a3d-door::before {
    opacity: 0.55;
}

.a3d-gate.is-opening .a3d-door--l {
    transform: rotateY(-104deg);
}

.a3d-gate.is-opening .a3d-door--r {
    transform: rotateY(104deg);
}

/* ---------- text on the doors ---------- */
.a3d-gate__inner {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
    pointer-events: none;
}

.a3d-gate.is-opening .a3d-gate__inner {
    transform: translateZ(240px) scale(1.15);
    opacity: 0;
    transition: transform 0.8s ease-in, opacity 0.6s ease 0.1s;
}

.a3d-gate__hi,
.a3d-gate__tag {
    opacity: 0;
    font-family: var(--rr-ff-heading, 'Outfit', sans-serif);
}

.a3d-gate__hi {
    font-size: 20px;
    color: #cfa981;
}

.a3d-gate__tag {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 6px;
}

.a3d-gate__brand {
    font-family: var(--rr-ff-heading, 'Outfit', sans-serif);
    font-size: clamp(44px, 9vw, 104px);
    font-weight: 600;
    line-height: 1.1;
    color: #fff;
    margin: 4px 0;
}

.a3d-gate__brand span {
    display: inline-block;
    opacity: 0;
    transform: perspective(600px) rotateX(-90deg) translateY(20px);
    transform-origin: 50% 100%;
}

.a3d-gate__line {
    position: relative;
    width: 150px;
    height: 2px;
    margin-top: 26px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.14);
}

.a3d-gate__line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #906e50;
    transform: scaleX(0);
    transform-origin: 0 50%;
}

/* intro animations start once the page has loaded (.is-intro) */
.a3d-gate.is-intro .a3d-gate__hi {
    animation: a3d-fade 0.8s ease 0.1s forwards;
}

.a3d-gate.is-intro .a3d-gate__tag {
    animation: a3d-fade 0.8s ease 1.1s forwards;
}

.a3d-gate.is-intro .a3d-gate__brand span {
    animation: a3d-letter 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
    animation-delay: calc(var(--i) * 70ms + 200ms);
}

.a3d-gate.is-intro .a3d-gate__line::after {
    animation: a3d-load 2s ease forwards;
}

@keyframes a3d-fade {
    to {
        opacity: 1;
    }
}

@keyframes a3d-letter {
    to {
        opacity: 1;
        transform: perspective(600px) rotateX(0) translateY(0);
    }
}

@keyframes a3d-load {
    to {
        transform: scaleX(1);
    }
}

/* ============================================================
   2. HERO TEXT SEQUENCE
   ============================================================ */

/* "Welcome To Vedinterior": letters flip in on their vertical axis */
.banner-3__content .subtitle.a3d-pre {
    background-color: transparent;
}

.a3d-sl {
    display: inline-block;
    opacity: 0;
    transform: perspective(500px) rotateY(90deg);
    transition: opacity 0.4s ease, transform 0.7s cubic-bezier(0.2, 0.9, 0.2, 1.1);
    transition-delay: calc(var(--i) * 38ms);
}

.a3d-sl.is-on {
    opacity: 1;
    transform: none;
}

/* main title: each letter tips up from the floor as it is "typed" */
.a3d-word {
    display: inline-block;
    white-space: nowrap;
}

.a3d-ch {
    display: inline-block;
    opacity: 0;
    transform: perspective(700px) rotateX(-85deg) translateZ(-40px);
    transform-origin: 50% 100%;
    transition: opacity 0.2s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.2, 1.2);
}

.a3d-ch.is-on {
    opacity: 1;
    transform: none;
}

/* blinking caret (takes no space, so the layout never jumps) */
.a3d-caret {
    position: relative;
    display: inline-block;
    width: 0;
    height: 1em;
    vertical-align: baseline;
}

.a3d-caret::before {
    content: '';
    position: absolute;
    left: 3px;
    bottom: -0.08em;
    width: 3px;
    height: 0.9em;
    background: #c9a37e;
    animation: a3d-blink 0.8s steps(1) infinite;
}

.a3d-caret.is-done::before {
    animation: a3d-blink 0.8s steps(1) 4, a3d-caret-out 0.5s ease 3.4s forwards;
}

@keyframes a3d-blink {
    50% {
        opacity: 0;
    }
}

@keyframes a3d-caret-out {
    to {
        opacity: 0;
    }
}

/* paragraph + buttons rise out of depth */
.banner-3 .a3d-rise {
    opacity: 0;
    transform: perspective(900px) translate3d(0, 34px, -80px) rotateX(22deg);
    transform-origin: 50% 100%;
    transition: opacity 0.9s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.banner-3 .a3d-rise.is-on {
    opacity: 1;
    transform: none;
}

/* ============================================================
   3. Reduced motion: no gate, no typing
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html.a3d-wait::before {
        display: none;
    }
}