/* Road2Heaven Website - Custom Styles */
/* Additional styles beyond Tailwind CSS */

/* ============================================
   GLOBAL STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    /* Full-page background image */
    background-image: url('../assets/background-sky.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-color: transparent !important;
}

/* Remove any top borders or shadows from navigation */
nav {
    border-top: none !important;
    margin-top: 0 !important;
    background-color: #FFFFFF !important;
    backdrop-filter: none !important;
}

/* Ensure html has no top border */
html {
    border-top: none !important;
    margin: 0;
    padding: 0;
    box-shadow: none !important;
}

/* Remove any box-shadows from first-child elements that might bleed to top */
body > *:first-child {
    margin-top: 0 !important;
    border-top: none !important;
    box-shadow: none !important;
}

/* ============================================
   BADABB FONT STYLING
   ============================================ */

/* Base BADABB font - Simple outline */
.font-badabb {
    letter-spacing: 0.05em;
    line-height: 1.3;
    color: #FFD93D !important;
    text-shadow:
        -2px -2px 0 #1a0a3e,
        2px -2px 0 #1a0a3e,
        -2px 2px 0 #1a0a3e,
        2px 2px 0 #1a0a3e,
        -3px 0 0 #1a0a3e,
        3px 0 0 #1a0a3e,
        0 -3px 0 #1a0a3e,
        0 3px 0 #1a0a3e;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smaller BADABB text - Light outline */
.font-badabb.text-sm,
.font-badabb.text-xs,
.font-badabb.text-lg,
.font-badabb.text-xl {
    color: #FF6B35 !important;
    text-shadow:
        -1px -1px 0 #1a0a3e,
        1px -1px 0 #1a0a3e,
        -1px 1px 0 #1a0a3e,
        1px 1px 0 #1a0a3e,
        -2px 0 0 #1a0a3e,
        2px 0 0 #1a0a3e,
        0 -2px 0 #1a0a3e,
        0 2px 0 #1a0a3e;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Large BADABB headlines - Simple bold outline */
.font-badabb.text-4xl,
.font-badabb.text-5xl,
.font-badabb.text-6xl,
.font-badabb.text-7xl {
    color: #FFD93D !important;
    /* Simple 8-direction text-shadow for performance */
    text-shadow:
        -3px -3px 0 #000000,
        3px -3px 0 #000000,
        -3px 3px 0 #000000,
        3px 3px 0 #000000,
        -4px 0 0 #000000,
        4px 0 0 #000000,
        0 -4px 0 #000000,
        0 4px 0 #000000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.08em;
    line-height: 1.25;
}

/* Special styling for text on dark backgrounds (trailer, footer, etc.) */
.bg-gray-900 .font-badabb,
.bg-gray-800 .font-badabb,
[class*="from-gray-9"] .font-badabb,
[class*="from-rocket-orange"] .font-badabb,
[class*="from-pink-"] .font-badabb {
    color: #FFD93D !important; /* Bright yellow on dark backgrounds */
    text-shadow:
        -2.5px -2.5px 0 #1a0a3e,
        2.5px -2.5px 0 #1a0a3e,
        -2.5px 2.5px 0 #1a0a3e,
        2.5px 2.5px 0 #1a0a3e,
        -3px 0 0 #1a0a3e,
        3px 0 0 #1a0a3e,
        0 -3px 0 #1a0a3e,
        0 3px 0 #1a0a3e,
        0 0 20px rgba(255, 217, 61, 0.8); /* Strong glow on dark backgrounds */
}

/* Medium headers - Simple outline */
.font-badabb.text-2xl,
.font-badabb.text-3xl {
    color: #FF6B35 !important;
    text-shadow:
        -2px -2px 0 #000000,
        2px -2px 0 #000000,
        -2px 2px 0 #000000,
        2px 2px 0 #000000,
        -3px 0 0 #000000,
        3px 0 0 #000000,
        0 -3px 0 #000000,
        0 3px 0 #000000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Override gradient text transparency for BADABB font */
.font-badabb.bg-clip-text,
.font-badabb.text-transparent,
.font-badabb[class*="bg-gradient"] {
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    -webkit-background-clip: unset !important;
}

/* Ensure stats numbers are vibrant */
.font-badabb.text-rocket-orange {
    color: #FF6B35 !important;
}

/* Footer headings - BADABB font without gradient/glow effects */
footer .font-badabb {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Download CTA heading - BADABB font in yellow with black outline */
#download .font-badabb {
    color: #FFC107 !important;
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        -3px 0 0 #000,
        3px 0 0 #000,
        0 -3px 0 #000,
        0 3px 0 #000 !important;
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Fade In Up Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

/* Animation Delays */
.animation-delay-100 {
    animation-delay: 0.1s;
}

.animation-delay-200 {
    animation-delay: 0.2s;
}

.animation-delay-300 {
    animation-delay: 0.3s;
}

.animation-delay-400 {
    animation-delay: 0.4s;
}

/* Float Animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

/* Pulse Glow Animation */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 107, 53, 0.5);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 107, 53, 0.8);
    }
}

.animate-pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
}

/* Rainbow Background (Easter Egg) */
@keyframes rainbow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Bounce In */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

.animate-bounce-in {
    animation: bounceIn 0.6s ease-out forwards;
}

/* Slide In From Right */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-right {
    animation: slideInRight 0.8s ease-out forwards;
}

/* Slide In From Left */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-slide-in-left {
    animation: slideInLeft 0.8s ease-out forwards;
}

/* Rotate In */
@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

.animate-rotate-in {
    animation: rotateIn 0.8s ease-out forwards;
}

/* ============================================
   CLOUD DIVIDER
   ============================================ */
.cloud-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.cloud-divider svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================
   FEATURES SECTION BACKGROUND
   ============================================ */
.features-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-image: url('../assets/features-background-4k.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


.features-section > * {
    position: relative;
    z-index: 2;
}

/* Features section header styling */
.features-section h2 {
    color: #FFFFFF !important;
    text-shadow:
        3px 3px 6px rgba(0, 0, 0, 0.5),
        -1px -1px 0 rgba(0, 0, 0, 0.3);
}

.features-section > div > div:first-child > p {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* Content islands for features */
.features-section .feature-highlight {
    background: #FFFDF8;
    border-radius: 24px;
    padding: 28px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(237, 237, 237, 0.5);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.features-section .feature-highlight:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.1);
}

.features-section .feature-highlight h3 {
    color: #FFD700 !important;
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        -3px 0 0 #000,
        3px 0 0 #000,
        0 -3px 0 #000,
        0 3px 0 #000;
}

.features-section .feature-highlight p {
    color: #333333 !important;
    text-shadow: none;
}

/* Adjust grid columns for center divider alignment */
.features-section .grid {
    gap: 8rem;
}

.features-section .grid > div:nth-child(odd) {
    padding-right: 1.5rem;
}

.features-section .grid > div:nth-child(even) {
    padding-left: 1.5rem;
}

/* ============================================
   STORY SECTION - SOFT WARM GLOW
   ============================================ */
#story {
    background: linear-gradient(
        to bottom,
        #FFF5E9 0%,
        #FFEFDE 100%
    ) !important;
}

/* ============================================
   CARD HOVER EFFECTS
   ============================================ */
.gameplay-card,
.character-card,
.feature-highlight,
.screenshot-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.gameplay-card:hover,
.character-card:hover {
    transform: translateY(-10px) scale(1.02);
}

.screenshot-card:hover {
    transform: scale(1.05);
    z-index: 10;
}

/* Character Image Hover */
.character-card .aspect-square {
    transition: transform 0.3s ease-out;
}

/* ============================================
   GRADIENT TEXT
   ============================================ */
.gradient-text {
    background: linear-gradient(135deg, #FF6B35, #ec4899, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================
   BUTTON EFFECTS
   ============================================ */
.app-store-btn,
.play-store-btn {
    transition: all 0.3s ease;
}

.app-store-btn:hover,
.play-store-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* ============================================
   SECTION DIVIDERS
   ============================================ */
.section-divider {
    position: relative;
    height: 2px;
    background: linear-gradient(90deg, transparent, #FF6B35, transparent);
    margin: 60px auto;
    max-width: 200px;
}

/* ============================================
   TOOLTIP (Optional)
   ============================================ */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* ============================================
   LOADING SPINNER (Optional)
   ============================================ */
.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 4px solid #FF6B35;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   SCROLL INDICATOR
   ============================================ */
.scroll-indicator {
    animation: bounce 2s infinite;
}

/* ============================================
   PARALLAX EFFECT
   ============================================ */
.parallax {
    transition: transform 0.1s ease-out;
    will-change: transform;
}

/* ============================================
   VIDEO CONTAINER
   ============================================ */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-container iframe,
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================
   IPHONE MOCKUP - EXACT IPHONE 17 PRO RATIO
   ============================================ */

/* Outer wrapper - enforces exact iPhone 17 Pro aspect ratio (9:19.5) */
.iphone-frame {
    position: relative;
    width: 100%;
    max-width: 304px; /* Reduced by 20%: 380 * 0.8 = 304 */
    margin: 0 auto;
}

/* Modern browsers: use aspect-ratio only (Safari 15+, Chrome, Firefox) */
@supports (aspect-ratio: 9 / 19.5) {
    .iphone-frame {
        aspect-ratio: 9 / 19.5;
    }
}

/* Fallback for browsers without aspect-ratio support (older Safari <15) */
@supports not (aspect-ratio: 9 / 19.5) {
    .iphone-frame {
        padding-bottom: 216.67%; /* 19.5/9 * 100 */
    }

    .iphone-frame > .iphone-body {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

/* Inner body - fills frame without distorting */
.iphone-body {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 56px;
    overflow: hidden;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    box-shadow:
        0 0 0 2px #3a3a3a,
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}

/* Screen - uses flex to prevent Safari bottom cropping */
.iphone-screen {
    position: absolute;
    inset: 8px;
    border-radius: 48px;
    overflow: hidden;
    background: #000;

    /* Flex layout prevents Safari from trimming bottom pixels */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dynamic Island - visually accurate sizing for mockup */
/* Sized to be clearly visible and proportional to mockup frame */
.iphone-screen::before {
    content: '';
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    height: 3%;
    background: #000;
    border-radius: 999px;
    z-index: 20;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* Video - fills screen with proper coverage */
.iphone-screen video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills frame completely */
    object-position: center; /* Centers the video content */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Images (screenshots) - fills screen with proper coverage */
.iphone-screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Hero section - shift iPhone mockup upward */
#hero .iphone-frame {
    transform: translateY(-10vh); /* Move up by 10% of viewport height */
}

/* Responsive sizing */
@media (max-width: 768px) {
    .iphone-frame {
        max-width: 240px; /* Reduced by 20%: 300 * 0.8 = 240 */
    }

    /* Less shift on tablets */
    #hero .iphone-frame {
        transform: translateY(-8vh);
    }
}

@media (max-width: 768px) {
    /* Increase spacing for stats badges on tablets */
    #hero .grid-cols-2 {
        gap: 3rem; /* Increase from gap-4 (1rem) to 3rem */
    }

    /* Push badges farther to edges to clear iPhone mockup */
    #hero .grid-cols-2 > div:first-child {
        text-align: left;
        margin-left: -34px; /* Reduced by 25%: -45px * 0.75 = -33.75px */
    }

    #hero .grid-cols-2 > div:last-child {
        text-align: right;
        margin-right: -34px; /* Reduced by 25%: -45px * 0.75 = -33.75px */
    }
}

@media (max-width: 480px) {
    .iphone-frame {
        max-width: 208px; /* Reduced by 20%: 260 * 0.8 = 208 */
    }

    /* Less shift on mobile */
    #hero .iphone-frame {
        transform: translateY(-5vh);
    }

    /* Push badges farther to edges to clear iPhone mockup */
    #hero .grid-cols-2 > div:first-child {
        margin-left: -56px; /* Reduced by 25%: -74px * 0.75 = -55.5px */
    }

    #hero .grid-cols-2 > div:last-child {
        margin-right: -56px; /* Reduced by 25%: -74px * 0.75 = -55.5px */
    }
}

/* Additional adjustment for very small screens */
@media (max-width: 375px) {
    #hero .grid-cols-2 > div:first-child {
        margin-left: -47px; /* Reduced by 25%: -62px * 0.75 = -46.5px */
    }

    #hero .grid-cols-2 > div:last-child {
        margin-right: -47px; /* Reduced by 25%: -62px * 0.75 = -46.5px */
    }
}

/* ============================================
   GLASS MORPHISM EFFECT
   ============================================ */
.glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ============================================
   SELECTION STYLING
   ============================================ */
::selection {
    background-color: #FF6B35;
    color: white;
}

::-moz-selection {
    background-color: #FF6B35;
    color: white;
}

/* ============================================
   SCROLLBAR STYLING (Webkit)
   ============================================ */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #FF6B35, #ec4899);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ec4899, #a855f7);
}

/* ============================================
   MOBILE OPTIMIZATIONS
   ============================================ */
@media (max-width: 768px) {
    .cloud {
        opacity: 0.3;
    }

    .star {
        display: none;
    }

    /* Reduce animations on mobile for performance */
    .is-mobile .parallax {
        transform: none !important;
    }

    .is-mobile .cloud {
        animation: none;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: white;
    }

    a {
        text-decoration: underline;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus styles for keyboard navigation */
a:focus,
button:focus {
    outline: 3px solid #FF6B35;
    outline-offset: 2px;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #FF6B35;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */
@media (prefers-contrast: high) {
    .cloud,
    .star {
        display: none;
    }

    a {
        text-decoration: underline;
    }
}

/* ============================================
   DARK MODE SUPPORT (if needed later)
   ============================================ */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here if desired */
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.text-shadow-lg {
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}

.drop-shadow-xl {
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
}

.blur-sm {
    filter: blur(4px);
}

/* ============================================
   CUSTOM TRANSITIONS
   ============================================ */
.transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-bounce {
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================================
   GRADIENT BACKGROUNDS
   ============================================ */
.bg-gradient-radial {
    background: radial-gradient(circle at center, #FF6B35, #ec4899, #a855f7);
}

.bg-gradient-rainbow {
    background: linear-gradient(135deg,
        #FF6B35 0%,
        #ec4899 25%,
        #a855f7 50%,
        #3b82f6 75%,
        #10b981 100%);
}

/* ============================================
   IMAGE EFFECTS
   ============================================ */
.image-hover-zoom {
    overflow: hidden;
}

.image-hover-zoom img {
    transition: transform 0.5s ease;
}

.image-hover-zoom:hover img {
    transform: scale(1.1);
}

/* ============================================
   BADGE STYLES
   ============================================ */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
}

.badge-primary {
    background: linear-gradient(135deg, #FF6B35, #ec4899);
    color: white;
}

.badge-secondary {
    background: #e5e7eb;
    color: #374151;
}

/* ============================================
   RESPONSIVE IFRAME
   ============================================ */
.responsive-iframe {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* ============================================
   END OF STYLES
   ============================================ */