/* ===========================================
   SendRCS - Main Stylesheet
   =========================================== */

* {
    outline: none;
}

    main a:not([class*="bg-"]):not([class*="rounded-"]) {
        color: #e91e8c;
    }
    main a:not([class*="bg-"]):not([class*="rounded-"]):hover {
        color: #7c3aed;
    }


/* ===========================================
   HEADLINE TYPOGRAPHY - Base
   =========================================== */
h2 {
    line-height: 1.1;
    letter-spacing: -0.02em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h2 span {
    display: block;
    line-height: 1.1;
}

/* ===========================================
   HEADLINE TYPOGRAPHY - DESKTOP (default)
   =========================================== */


.headline{
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: white;
    zoom: 0.85;
}

/* Line 1: "Traditionelle" / "RCS Messaging" - Smallest */
.headline-line-1 {
    display: block;
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Line 2: "Messaging" / "verwandelt" - Large */
.headline-line-2 {
    display: block;
    font-size: 5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* Line 3: "steht vor einer radikalen" / "jede Botschaft in" - Medium */
.headline-line-3 {
    display: block;
    font-size: 4rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* Line 4: "VERÄNDERUNG" / "ERLEBNIS" - Largest */
.headline-line-4 {
    display: block;
    font-size: 6rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

/* ===========================================
   SUBPAGE HEADLINES
   =========================================== */
.subpage-headline {
    font-size: 2rem;
}

@media (min-width: 768px) {
    .subpage-headline {
        font-size: 3rem;
    }
}

/* ===========================================
   HERO SECTION - DESKTOP (default)
   =========================================== */
.hero-section {
    min-height: 110vh;
}

/* Background layers - Desktop */
.bg-layer {
    background-position: 65% top;
    background-size: auto 110%;
}

/* ===========================================
   RCS INFO SECTION - DESKTOP (default)
   =========================================== */
#rcs-messaging {
    position: relative;
    z-index: 10;
    margin-top: -40vh;
}

/* Mockup card styling */
.mockup-card {
    transform: rotate(-1deg);
}

@media (max-width: 768px) {
    .mockup-card {
        transform: rotate(0deg);
    }
}

/* ===========================================
   SECTION VARIANTS
   =========================================== */
.section-light {
    background-color: #e8f4fc;
}

/* ===========================================
   TABLET (max-width: 768px)
   =========================================== */
@media (max-width: 768px) {
    .hero-section {
        min-height: 70vh;
    }

    .bg-layer {
        background-position: 50% center;
    }

    .headline-line-1 {
        font-size: 2rem;
    }
    .headline-line-2 {
        font-size: 3.5rem;
    }
    .headline-line-3 {
        font-size: 2.5rem;
    }
    .headline-line-4 {
        font-size: 4rem;
    }

    #rcs-messaging {
        margin-top: -150px;
    }
}

/* ===========================================
   MOBILE (max-width: 480px)
   =========================================== */
@media (max-width: 480px) {
    .hero-section {
        min-height: 65vh;
    }

    .bg-layer {
        background-position: 70% center;
    }

    #bg-coffee-1 {
        background-position: 95% center;
    }

    #bg-coffee-2 {
        background-position: 95% center;
    }

    #bg-berlin-1 {
        background-position: 72% center;
    }

    #bg-berlin-2 {
        background-position: 72% center;
    }

    #bg-roofer-1{
         background-position: 80% center;
    }

    #bg-roofer-2{
         background-position: 90% center;
    }

    .headline-line-1 {
        font-size: 1.5rem;
    }
    .headline-line-2 {
        font-size: 2.5rem;
    }
    .headline-line-3 {
        font-size: 1.75rem;
    }
    .headline-line-4 {
        font-size: 2.75rem;
    }

    #rcs-messaging {
        margin-top: -170px;
    }
}

/* ===========================================
   TYPEWRITER & CURSOR
   =========================================== */
.cursor {
    display: inline-block;
    width: 3px;
    height: 0.9em;
    background-color: white;
    margin-left: 4px;
    animation: blink 1s infinite;
    vertical-align: baseline;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ===========================================
   BACKGROUND TRANSITIONS & KEN BURNS
   =========================================== */
.bg-layer {
    transition: opacity 1s ease-in-out, transform 8s ease-out;
}

/* Ken Burns - Zoom IN */
@keyframes kenburns-zoom-in {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.01) translate(0%, 0%); }
}

/* Ken Burns - Zoom OUT */
@keyframes kenburns-zoom-out {
    0% { transform: scale(1) translate(0%, 0%); }
    100% { transform: scale(1) translate(0, 0); }
}

.bg-layer.kenburns-in {
    animation: kenburns-zoom-in 7s ease-in-out forwards;
}

.bg-layer.kenburns-out {
    animation: kenburns-zoom-out 6s ease-in-out forwards;
}

/* ===========================================
   CONTENT TRANSITIONS
   =========================================== */
.content-fade {
    transition: opacity 0.5s ease-in-out;
}

/* ===========================================
   MOBILE MENU
   =========================================== */
.mobile-menu {
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.mobile-menu.hidden {
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
}

.mobile-menu.visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* ===========================================
   HEADER
   =========================================== */
header {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

header.scrolled {
    background-color: rgba(6, 8, 9, 0.98);
}

/* Mega menu always keeps blur effect */
.mega-menu-panel {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Mega menu solid background only when header is scrolled */
header.scrolled .mega-menu-panel {
    background-color: rgba(6, 8, 9, 0.90) !important;
        backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}


/* ===========================================
   RCS EXPLAINED - 3D PERSPECTIVE ANIMATION
   =========================================== */
@media (min-width: 769px) {
    .rcs-skewed {
        transform: rotateY(-5deg);
        transition: transform 0.5s ease-out;
    }

    .rcs-skewed.flat {
        transform: rotateY(0deg);
    }
}