/* ===========================
   BASE & PAPER THEME
=========================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f4f1ea; /* Paper tone */
    color: #1a1a1a;
    font-family: Poppins, sans-serif;
    overflow-x: hidden;
}

.luxury-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #fafafa; /* Matches your smoky white aesthetic */
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Space between text and line */
}

/* 1. The Breathing Typography */
.loader-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 28px;
    font-style: italic;
    letter-spacing: 4px;
    color: #111;
    opacity: 0;
    /* Softly fades in and floats slightly */
    animation: textBreathe 1.5s ease-in-out infinite alternate;
}

/* 2. The Progress Line Track */
.loader-progress-wrap {
    width: 100px;
    height: 1px;
    background: rgba(0, 0, 0, 0.1); /* Very faint grey track */
    overflow: hidden;
    position: relative;
}

/* 3. The Sweeping Black Line */
.loader-progress {
    width: 100%;
    height: 100%;
    background: #111; /* Sharp dark ink color */
    transform: translateX(-100%);
    /* Sweeps from left to right, smoothly */
    animation: lineSweep 1.8s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

/* --- Animations --- */
@keyframes textBreathe {
    0% { 
        opacity: 0.2; 
        transform: translateY(3px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes lineSweep {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0); } /* Pauses slightly in the middle */
    100% { transform: translateX(100%); }
}

/* Class to fade out the entire screen when the page loads */
.luxury-preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}


.navbar {
    position: fixed;
    top: 40px;
    right: 60px; /* Keeps it on the right side */
    z-index: 9999;
}

.navbar ul {
    display: flex;
    align-items: center;
    gap: 45px;
    list-style: none;
}

.navbar a {
    position: relative;
    text-decoration: none;
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: .35s ease;
}

.navbar a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0%;
    height: 1px;
    background: #ffffff;
    transition: .4s ease;
}

.navbar a:hover {
    color: #d8d8d8;
}

.navbar a:hover::after {
    width: 100%;
}

/* =========================================
   Hamburger Button Base
   ========================================= */
.hamburger {
    display: none; 
    cursor: pointer;
    flex-direction: column;
    gap: 8px;
    z-index: 10000; 
}

.hamburger .bar {
    display: block;
    width: 32px;
    height: 1.5px;
    background-color: #ffffff;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hamburger .bar:nth-child(2) {
    width: 22px;
    align-self: flex-end;
}

/* =========================================
   Mobile Media Query & Floating Cylinder Menu
   ========================================= */
@media screen and (max-width: 768px) {
    /* 1. Lock Hamburger to Top-Right Corner */
    .hamburger {
        display: flex;
        position: fixed; 
        top: 30px;
        right: 30px;
        z-index: 10000; 
    }

    /* Keep the 'X' white since the menu now floats below it! */
    .hamburger.active .bar {
        background-color: #ffffff; 
    }

    /* 2. The Floating Cylinder Widget */
    .navbar ul {
        position: fixed;
        top: 80px; /* Floats nicely below the hamburger */
        right: -100%; /* Hidden off-screen to the right */
        
        /* Cylinder Dimensions */
        width: 150px; 
        height: auto; 
        padding: 40px 0;
        
        /* The Pill/Cylinder Shape */
        border-radius: 40px; 
        
        /* Clean, frosted glass look */
        background: rgba(255, 255, 255, 0.215); 
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        box-shadow: -10px 15px 40px rgba(0, 0, 0, 0.15), inset 0 0 0 1px rgba(255,255,255,0.6);
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px; 
        margin: 0;
        transition: right 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 9998; 
    }

    /* When Active, slide in and float 20px from the right edge */
    .navbar ul.active {
        right: 20px;
    }

    /* 3. Premium Editorial Typography (Scaled down to fit cylinder) */
    .navbar a {
        font-family: "Cormorant Garamond", serif; 
        font-size: 22px; /* Adjusted to fit the small widget beautifully */
        letter-spacing: 2px;
        text-transform: capitalize;
        font-weight: 600;
        color: #000000; 
    }

    /* Hide the underline effect on mobile */
    .navbar a::after {
        display: none; 
    }

    /* 4. Staggered Cascading Animation */
    .navbar ul li {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .navbar ul.active li {
        opacity: 1;
        transform: translateY(0);
    }

    .navbar ul.active li:nth-child(1) { transition-delay: 0.2s; }
    .navbar ul.active li:nth-child(2) { transition-delay: 0.3s; }
    .navbar ul.active li:nth-child(3) { transition-delay: 0.4s; }
    .navbar ul.active li:nth-child(4) { transition-delay: 0.5s; }

    /* 5. Hamburger 'X' Animation */
    .hamburger.active .bar:nth-child(1) {
        transform: translateY(4.75px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(2) {
        width: 32px; 
        transform: translateY(-4.75px) rotate(-45deg);
    }
}


/* ===========================
   CINEMATIC HERO (NEW EFFECT)
=========================== */
.cinematic-hero {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Container that holds the image */
.hero-image-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform-origin: center;
    will-change: transform;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    object-position: center 25%;
}

/* Darkens the image so white text pops */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); 
}

/* The text that flies towards the screen */
.hero-text-wrapper {
    position: relative;
    z-index: 10;
    text-align: center;
    color: #fff;
    will-change: transform, opacity, filter;
}

.hero-tag {
    font-size: 14px;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #ddd;
    display: block;
    margin-bottom: 25px;
}

.hero-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 140px;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    text-shadow: 0 10px 30px rgba(0,0,0,0.3);
    white-space: nowrap; /* Forces it into a single unbroken line */
}

/* ===========================
   ULTRA-PREMIUM IMAGE BREAK
=========================== */
.premium-image-break {
    position: relative;
    padding: 150px 8%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: #f4f1ea; /* Matches your paper theme seamlessly */
}

/* The Shutter Mask */
.image-reveal-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 75vh;
    overflow: hidden;
    border-radius: 4px;
    /* Starts heavily cropped on all sides */
    clip-path: inset(25% 15% 25% 15%); 
    will-change: clip-path;
    z-index: 2;
    box-shadow: 0 40px 80px rgba(0,0,0,0.15);
}

/* The Image Inside */
.premium-break-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Starts zoomed in and black & white */
    transform: scale(1.6);
    filter: grayscale(100%);
    will-change: transform, filter;
}

/* Magazine-Style Floating Typography */
.floating-text {
    position: absolute;
    font-family: "Cormorant Garamond", serif;
    font-size: 22vw; /* Massive */
    font-style: italic;
    color: #1a1a1a;
    opacity: 0.03; /* Barely visible, like a watermark */
    z-index: 1;
    pointer-events: none;
    line-height: 1;
}

.left-float {
    left: -5%;
    top: 10%;
}

.right-float {
    right: -2%;
    bottom: 5%;
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .image-reveal-wrapper {
        height: 50vh;
        clip-path: inset(15% 10% 15% 10%); 
    }
    .floating-text {
        font-size: 35vw;
    }
}

/* ===========================
   MASSIVE QUOTE SECTION
=========================== */
.quote-section {
    padding: 150px 8%;
    text-align: center;
    background: #e8e4db;
    position: relative;
    z-index: 2; /* Ensures it scrolls OVER the pinned hero */
}

.quote-section h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: 60px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.4;
    color: #111;
    max-width: 1000px;
    margin: 0 auto;
}

/* ===========================
   LITERARY COLLECTION
=========================== */
.literary-collection {
    padding: 180px 8%;
}

.collection-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 100px;
}

.col-left { flex: 1; }

.sub-heading {
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #777;
    margin-bottom: 20px;
    display: block;
}

.col-left h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 55px;
    font-weight: 400;
    margin-bottom: 30px;
    color: #111;
}

.col-left p {
    font-size: 16px;
    line-height: 2;
    color: #444;
    margin-bottom: 40px;
}

.book-meta {
    display: flex;
    gap: 40px;
    margin-bottom: 50px;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 20px 0;
}

.format-link{
    color:#111;
    text-decoration:none;
    border-bottom:1px solid rgba(0,0,0,.3);
    transition:.3s;
}

.format-link:hover{
    color:#000;
    border-bottom-color:#000;
}
.book-meta div {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: #555;
}

.book-meta strong {
    color: #111;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    margin-bottom: 5px;
}

.read-btn {
    display: inline-block;
    padding: 14px 0;
    color: #111;
    text-decoration: none;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    border-bottom: 1px solid #111;
    transition: 0.3s ease;
}
.read-btn:hover { padding-right: 15px; }

.col-right { flex: 1; }

.book-mockup img {
    width: 100%;
    max-width: 450px;
    height: auto;
    box-shadow: 20px 30px 60px rgba(0,0,0,0.2);
    border-radius: 4px;
    display: block;
    margin: 0 auto;
}

/* ===========================
   SHAYARI MASONRY
=========================== */
.shayari-section {
    padding: 100px 8% 180px;
}

.section-title {
    text-align: center;
    margin-bottom: 80px;
}

.section-title h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: 50px;
    font-weight: 400;
}

.poetry-masonry {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 50px;
}

.poetry-paper {
    background: #e8e8e8;
    padding: 60px 40px;
    border-radius: 2px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    border: 1px solid #eaeaea;
    transition: transform 0.4s ease;
}

.poetry-paper:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.08);
}

.poetry-paper p {
    font-family: "Cormorant Garamond", serif;
    font-size: 24px;
    font-style: italic;
    line-height: 1.8;
    color: #222;
    margin-bottom: 30px;
}

.poetry-paper .date {
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
}

/* ===========================
   LIGHT FOOTER
=========================== */
.light-footer {
    padding: 100px 8% 50px;
    text-align: center;
    background: #e8e4db;
}
.light-footer h2 { font-size: 45px; font-weight: 400; margin-bottom: 30px; font-family: "Cormorant Garamond", serif; color: #111; }
.light-footer .mail { display: inline-block; font-size: 20px; color: #111; text-decoration: none; margin-bottom: 50px; font-weight: 500;}
.light-footer .socials { display: flex; justify-content: center; gap: 40px; margin-bottom: 50px; }
.light-footer .socials a { color: #555; text-decoration: none; font-size: 13px; text-transform: uppercase; letter-spacing: 2px; }
.light-footer .copyright { color: #777; font-size: 14px; }

/* ===========================
   RESPONSIVE (Mobile Ready)
=========================== */
@media (max-width: 1024px) {
    .hero-title { font-size: 90px; }
    .quote-section h2 { font-size: 45px; }
    .collection-container { gap: 50px; }
    .col-left h3 { font-size: 45px; }
}

@media (max-width: 768px) {
    /* Navbar Center */
    .navbar { top: 20px; right: auto; left: 50%; 
        transform: translateX(-50%); width: 100%; display: flex; 
        justify-content: center; }

    .navbar ul { gap: 20px; }
    .navbar a { font-size: 13px; }
    /* Hero */
    @media (max-width: 1024px) {
    .hero-title { font-size: 90px; }
}

@media (max-width: 768px) {
    .hero-title { font-size: 45px; } /* Scaled down to fit phones on one line */
}
    .hero-tag { font-size: 12px; }
    
    /* Quote */
    .quote-section { padding: 100px 6%; }
    .quote-section h2 { font-size: 32px; }
    
    /* Collection Stacking */
    .collection-container { flex-direction: column; text-align: center; }
    .book-meta { justify-content: center; }
    
    /* Poetry Grid */
    .poetry-masonry { grid-template-columns: 1fr; }
    
    .light-footer h2 { font-size: 35px; }


}

@media (max-width: 480px) {
    /* Final tweaks for very small screens (like iPhone SE) */
    .navbar a { font-size: 11px; }
    
    
}

/* =========================================
   Responsive Media Queries for Footer
   ========================================= */

/* Tablet & Smaller Laptops (under 768px) */
@media screen and (max-width: 768px) {
    .footer {
        padding: 90px 6% 60px; /* Reduce top and bottom padding slightly */
    }
    
    .footer h2 {
        font-size: 46px; /* Scale down the giant heading */
        margin-bottom: 25px;
    }
    
    .footer p {
        font-size: 15px; 
        line-height: 1.7;
        margin-bottom: 35px;
    }
    
    .mail {
        font-size: 22px; /* Make email link fit better */
        margin-bottom: 45px;
    }
    
    .socials {
        gap: 25px; /* Bring social links closer together */
        margin-bottom: 40px;
    }
}

/* Mobile Phones (under 480px) */
@media screen and (max-width: 480px) {
    .footer {
        padding: 60px 5% 40px; /* Compress padding for small screens */
    }
    
    .footer h2 {
        font-size: 36px; /* Further scale down the heading */
    }
    
    .mail {
        font-size: 18px;
        word-break: break-word; /* Prevent long email addresses from breaking the screen width */
        margin-bottom: 35px;
    }
    
    .socials {
        flex-direction: column; /* Stack the social links vertically on tiny screens */
        gap: 20px;
    }

    .socials a {
        font-size: 12px;
    }
}

/* Optional: Disable hover effects for touch devices to prevent "sticky" hover states */
@media (hover: none) {
    .mail:hover::after,
    .socials a:hover::after {
        transform: scaleX(0);
        width: 0;
    }
    
    .footer h2:hover,
    .mail:hover,
    .socials a:hover {
        transform: none; /* Disables the jump/lift effect when tapped */
    }
}