/* Container Fixes */
.hero-section {
    width: 100%;
}

.hero-title {
    display: block;
    overflow: visible;
    /* Changed from hidden to show the reveal */
    word-wrap: break-word;
}

.hero-title .word {
    display: inline-block;
    overflow: hidden;
    /* This keeps the 'mask' effect for each word */
    vertical-align: bottom;
    margin-right: 0.15em;
    /* Space between words */
}

.hero-title .word-inner {
    display: inline-block;
    opacity: 0;
    transform: translateY(110%);
    filter: blur(10px);
    font-family: var(--font-main);
}

/* Auth Pic Fix */
.hero-auth-pic {
    opacity: 0;
    display: block;
}

body {
    overflow-x: hidden;
}

/* sec02 */
.sec-02 h2 {
    overflow: visible;
    line-height: 1.4;
}

.sec-02 .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.sec-02 .word-inner {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    filter: blur(10px);
    transition: opacity 0.1s;
    /* Smooths the initial appearance */
}

/* Ensure your globe span stays styled */
.globe {
    display: inline-block;
    /* Your existing globe styles (width, height, background) go here */
}

.sec-02 .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    font-family: var(--font-main);
}

.sec-02 .word-inner {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    filter: blur(10px);
    font-family: var(--font-main);
}

/* about-auth */
/* Image Mask Reveal - The "Pro" way */
.about-auth .img-box {
    position: relative;
    overflow: hidden;
    clip-path: inset(0 0 100% 0);
    /* Hidden from bottom */
    transform: translateY(30px);
    transition: clip-path 0s;
    /* Handled by Anime.js */
}

/* Heading Word Styling */
.about-auth-content h2 .word {
    display: inline-block;
    overflow: hidden;
}

.about-auth-content h2 .word-inner {
    display: inline-block;
    transform: translateY(110%) rotate(5deg);
    /* Added a slight tilt for 'momentum' */
    opacity: 0;
    filter: blur(15px);
}

/* Body Text - Snappy slide */
.about-auth-content p {
    opacity: 0;
    transform: translateY(40px);
    clip-path: inset(0 0 100% 0);
}

/* The Button - Magnetic feel */
.arrow-btn {
    opacity: 0;
    transform: translateX(-30px);
}

/* Book section */
/* Scope: Book Section 01 */
.book-sec-01 {
    overflow: hidden;
}

/* Heading Masked Reveal */
.book-sec-01 .book-sec-content h2 .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.book-sec-01 .book-sec-content h2 .word-inner {
    display: inline-block;
    opacity: 0;
    transform: translateY(-110%);
    filter: blur(10px);
}

/* Paragraph: Clean Slide */
.book-sec-01 .book-sec-content p {
    opacity: 0;
    transform: translateY(30px);
    display: block !important;
}

/* Button: Rise */
.book-sec-01 .arrow-btn {
    opacity: 0;
    transform: translateY(20px);
}

/* Image: Heavy Sweep + Blur Reveal */
.book-sec-01 .hand-book {
    opacity: 0;
    transform: translateY(100px) rotate(10deg);
    filter: blur(20px);
    /* Start heavily blurred */
    transform-origin: bottom right;
    will-change: transform, opacity, filter;
}

/* book -section 2 */
/* Scope: Sec-Book Specific */
.sec-book {
    /* overflow: hidden; */
}

/* Heading: Top-to-Bottom Mask */
.sec-book .book-sec-content h2 .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.sec-book .book-sec-content h2 .word-inner {
    display: inline-block;
    opacity: 0;
    transform: translateY(-110%);
    filter: blur(10px);
}

/* Paragraph: The solid slide reveal */
.sec-book .book-sec-content p {
    opacity: 0;
    transform: translateY(30px);
    display: block !important;
}

/* Button */
.sec-book .arrow-btn {
    opacity: 0;
    transform: translateY(20px);
}

/* Image: Sweep + Blur (The one you loved) */
.sec-book .img-box-content {
    opacity: 0;
    transform: translateY(100px) rotate(-8deg);
    /* Slight reverse tilt for variety */
    filter: blur(20px);
    transform-origin: bottom left;
    /* Origin flipped because image is on the left */
    will-change: transform, opacity, filter;
}

.word-inner {
    font-family: var(--font-main);
}

/* Scope: FAQ Section */
.faq {
    overflow: hidden;
}

/* FAQ Heading Mask */
.faq .faq-heading h2 .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
}

.faq .faq-heading h2 .word-inner {
    display: inline-block;
    opacity: 0;
    transform: translateY(-110%);
    filter: blur(10px);
}

/* FAQ Items: Staggered Slide */
.faq .faq-item {
    opacity: 0;
    transform: translateY(40px);
    will-change: transform, opacity;
}

/* Animation Container Prep */
.contact-us {
    perspective: 1500px;
    /* Essential for the rotateX effect */
}

.contact-form-container {
    will-change: transform, opacity;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Heading Splitting */
.contact-us-heading h2 .word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

.contact-us-heading h2 .word-inner {
    display: inline-block;
    will-change: transform, opacity;
    transform-origin: left bottom;
}

/* Initial Hidden States */
.contact-form-container,
.contact-us .img-box-content,
.form-title,
.contact-form-container .row,
.contact-form-container .mb-4,
.contact-btn {
    opacity: 0;
}

/* Premium Focus State (Bonus) */
.contact-form-container .form-control {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.contact-form-container .form-control:focus {
    transform: scale(1.01) translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}