@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    font-family: 'Inter', sans-serif;
}

.hero-gradient {
    background: linear-gradient(rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.94)), 
                url('https://images.unsplash.com/photo-1600585154340-be6161a56a9c?q=80&w=2400&auto=format&fit=crop');
    background-size: cover;
    background-position: center 35%;
    background-attachment: fixed;
}

.grid-overlay {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(245, 245, 245, 0.12) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(245, 245, 245, 0.12) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 1;
    animation: gridShift 40s linear infinite;
}

@keyframes gridShift {
    0% { background-position: 0 0; }
    100% { background-position: 48px 48px; }
}

/* ==================== POST-IT STYLE CARDS ==================== */
.deck-container {
    perspective: 1400px;
    perspective-origin: 50% 40%;
}

.deck-card {
    position: absolute;
    inset: 0;
    /* Replaced flat color with a subtle uneven paper gradient */
    background: linear-gradient(135deg, #FDF0C6 0%, #F8E8B8 60%, #EADDAD 100%);
    color: #1e2937;
    /* Grounded, realistic ambient shadow */
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.25),
                inset 0 2px 10px rgba(255, 255, 255, 0.5); 
    border-radius: 2px 2px 15px 2px; /* Slightly organic, non-perfect corners */
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    backface-visibility: hidden; 
}

/* Realistic folded curl at bottom-right */
.deck-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 55px;
    height: 55px;
    /* Simulates light catching the bend, and the shadow beneath it */
    background: linear-gradient(135deg, transparent 48%, rgba(0,0,0,0.06) 50%, #fdf5d3 52%, #eaddad 100%);
    box-shadow: -5px 5px 12px -4px rgba(0,0,0,0.35);
    border-top-left-radius: 12px; /* The soft inner bend */
    border-bottom-right-radius: 4px; /* The outer tip of the fold */
    z-index: 10;
    pointer-events: none;
}

/* Paper highlight at top */
.deck-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    /* Adjusted for a softer, more diffuse light source */
    background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, transparent 40%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Active card gets the full slap + random rotation */
.deck-card.active {
    opacity: 1 !important;
    pointer-events: auto;
    z-index: 30;
    animation: enhancedSlap 620ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Fix lingering text / transparency */
.deck-card:not(.active) {
    opacity: 0 !important;
}

@keyframes enhancedSlap {
    0%   { transform: scale(0.82) translateY(68px) rotate(-14deg); opacity: 0; }
    45%  { transform: scale(1.09) translateY(-18px) rotate(5deg); }
    68%  { transform: scale(0.96) translateY(9px) rotate(-3deg); }
    82%  { transform: scale(1.03) translateY(-4px) rotate(1deg); }
    100% { transform: scale(1) translateY(0) rotate(0deg); }
}

/* Peek cards */
.deck-card.peek-next {
    opacity: 0.35 !important;
    z-index: 20;
    transform: scale(0.88) rotate(4deg) translateY(18px) translateX(14px);
}

.deck-card.peek-prev {
    opacity: 0.22 !important;
    z-index: 10;
    transform: scale(0.82) rotate(-6deg) translateY(32px) translateX(-18px);
}

.deck-card:hover {
    /* Realistic lifting shadow instead of bright orange */
    box-shadow: 0 35px 65px -10px rgba(0, 0, 0, 0.35);
    transform: scale(1.04) rotate(1deg) translateY(-4px);
}

/* Mobile height fix */
@media (max-width: 640px) {
    .deck-container { height: 460px !important; }
    .deck-card { padding: 28px 24px; }
}

/* Simulating Ink */
.deck-card h3 { 
    color: #111827; 
    font-weight: 700; 
    opacity: 0.9; /* Softens the digital starkness */
}
.deck-card p { 
    color: #1e293b; 
    opacity: 0.85; 
}

/* CTA hierarchy */
.primary-cta {
    /* Kept the orange warmth, but grounded it */
    box-shadow: 0 8px 15px -3px rgba(194, 65, 15, 0.35);
}
.primary-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 25px -5px rgba(194, 65, 15, 0.45);
}

.nav-link:after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #c2410f;
    transition: width 0.3s ease;
}
.nav-link:hover:after { width: 100%; }

.section-header:after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 64px;
    height: 3px;
    background: #c2410f;
}

.progress-dot.active {
    background-color: #c2410f;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
}