/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* ============================================
   Base Styles
   ============================================ */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0d0d0d;
    scroll-behavior: smooth;
}

/* ============================================
   Common Utility Classes
   ============================================ */
.section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* ============================================
   Header Styles
   ============================================ */
#main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 64px !important;
    z-index: 50 !important;
    background-color: transparent !important;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease !important;
}

/* Scrolled state - applied via JavaScript with maximum specificity */
header#main-header.scrolled {
    background-color: rgba(13, 13, 13, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

/* Alternative approach - use attribute selector */
#main-header[data-scrolled="true"] {
    background-color: rgba(13, 13, 13, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   Index Page Styles
   ============================================ */
/* Portfolio section specific styling */
#portfolio {
    padding-top: 2rem;
    padding-bottom: 2rem;
    min-height: auto;
    height: auto;
}

#portfolio-footer-button {
    margin-top: 2rem !important;
}

/* Ensure portfolio grid doesn't cause height issues */
#portfolio-grid {
    min-height: auto;
    height: auto;
    overflow: hidden;
}

/* Hide portfolio items that are not supposed to be visible */
.portfolio-item[style*="display: none"] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Overlay for video text readability */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); 
    z-index: -1;
}

/* YouTube background video styles */
.youtube-background-container {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    z-index: -2;
}

.youtube-background-iframe {
    position: absolute;
    /* Maintain 16:9 aspect ratio and cover the screen */
    width: 100vw;
    height: 56.25vw; /* 100 * 9 / 16 */
    min-height: 100vh;
    min-width: 177.77vh; /* 100 * 16 / 9 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; /* Allows clicking content over the iframe */
}

/* Animation styles (simplified with AOS) */
.portfolio-item, .animate-target {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
}

/* Portfolio item loading animation */
.portfolio-item {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Portfolio items initial state for AOS */
.portfolio-item[data-aos="fade-up"]:not(.aos-animate) {
    opacity: 0;
    transform: translateY(20px);
}

/* Ensure portfolio items are visible when AOS animates them */
.portfolio-item.aos-animate {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Animated Arrow Styles */
.arrow-container {
    position: relative;
    display: inline-block;
}

.arrow-icon {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(0);
}

.portfolio-item:hover .arrow-icon {
    transform: translateX(12px);
    animation: arrowSlide 2s ease-in-out infinite;
}

@keyframes arrowSlide {
    0% {
        transform: translateX(12px);
        opacity: 1;
    }
    50% {
        transform: translateX(18px);
        opacity: 0.7;
    }
    100% {
        transform: translateX(12px);
        opacity: 1;
    }
}

/* Keep hero animation classes for initial page load animation */
.hero-animate-initial {
    opacity: 0;
    transform: translateY(100px); 
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; 
}

.hero-animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive one-line text for about section */
#about h2 {
    font-size: clamp(1rem, 3.5vw, 2.5rem);
    white-space: nowrap;
    overflow: visible;
}

@media (max-width: 1024px) {
    #about h2 {
        font-size: clamp(0.875rem, 4vw, 2rem);
    }
}

@media (max-width: 768px) {
    #about h2 {
        font-size: clamp(0.75rem, 5vw, 1.5rem);
    }
}

/* ============================================
   Portfolio Page Styles
   ============================================ */
.animate-initial {
    opacity: 0;
    transform: translateY(20px);
}

.animate-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   About Page Styles
   ============================================ */
   .sticky-card-container {
            background-color: #f9f9f9; /* Almost black */
            padding-bottom: 1vh;
        }
        
       .sticky-card {
		position: sticky;
		top: 100px;
		margin-bottom: 5vh;
		transform-origin: center top;
		transition: transform 0.5s ease, opacity 0.5s ease;
		display: flex;
		justify-content: center;
		}

		/* Desktop */
		@media (min-width: 1024px) {
			.sticky-card {top: 15vh;margin-bottom: 10vh;}
		}

		.glass-card {
		  background: rgba(0, 0, 0, 0.9); /* 배경 비디오/이미지 위의 유리 카드 느낌 */
		  backdrop-filter: blur(10px);
		  -webkit-backdrop-filter: blur(10px);
		}

		@media screen and (max-width: 1023.98px) {
		.font-m{line-height:1.3; font-size:14px;}
		

		}


		.video-cover {
			width: 100%;
			height: 100%;
			object-fit: cover; 
			}

        
        /* Hide scrollbar for clean look if needed */
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;}

   #newmedia-section [data-aos] {
    opacity: 1 !important;
    transform: none !important;
}
/* Fullpage.js Custom Styles */
#fullpage {
    position: relative;
}

/* Hide Fullpage.js watermark/credit button */
.fp-watermark,
.fp-powered-by,
a[href*="alvarotrigo.com"],
a[href*="fullpage.js"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Specific sections that should be full screen */
#tvcf-section,
#3dvr-section,
#brand-section,
#newmedia-section {
    height: 100vh !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
}

/* Contact section should have normal scroll */
#contact {
    height: auto !important;
    background-color: #0d0d0d !important;
}

/* Contact section text visibility */
#contact.fp-section {
    background-color: #0d0d0d !important;
}

#contact.fp-section .fp-tableCell {
    background-color: #0d0d0d !important;
}

#contact.fp-section h1,
#contact.fp-section h2,
#contact.fp-section h3,
#contact.fp-section h4,
#contact.fp-section h5,
#contact.fp-section h6,
#contact.fp-section p,
#contact.fp-section span,
#contact.fp-section a,
#contact.fp-section div {
    color: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Contact section text - make lighter for dark background */
#contact.fp-section h2,
#contact.fp-section h3 {
    color: #f5f5f5 !important;
    font-weight: 900 !important;
}

#contact.fp-section p {
    color: #f5f5f5 !important;
    font-weight: 600 !important;
}

/* Ensure map is visible */
#contact #map {
    position: relative !important;
    z-index: 10 !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: #1f2937 !important;
}

/* Scroll to Top Button Styles */
#scroll-to-top {
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

#scroll-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 0, 127, 0.3);
}

#scroll-to-top.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Footer Styles - Ensure footer is always visible */
footer {
    position: relative !important;
    z-index: 10 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Section Background Video Styles */
.section-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    background: #0d0d0d;
}

.section-video-background video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    background: #0d0d0d;
}

.section-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    pointer-events: none;
}

/* Override Fullpage.js section styles that might hide content */
#fullpage > section {
    min-height: 100vh;
    position: relative;
}

/* Ensure scrolling text is visible */
.scrolling-text-container {
    position: relative !important;
    z-index: 30 !important;
}
#fullpage .fp-section {
    z-index: 1;
    isolation: isolate;
}

#fullpage .fp-section.active {
    z-index: 2;
}

/* CRITICAL: Fullpage.js wraps content in .fp-tableCell - must override */
#fullpage .fp-section .fp-tableCell {
    position: relative !important;
    z-index: 10 !important;
    isolation: isolate;
}

/* Force all content inside fp-tableCell to be visible */
#fullpage .fp-section .fp-tableCell > * {
    position: relative !important;
    z-index: 20 !important;
}

/* Force all text elements to be visible with explicit colors */
#fullpage .fp-section .fp-tableCell h1,
#fullpage .fp-section .fp-tableCell h2,
#fullpage .fp-section .fp-tableCell h3,
#fullpage .fp-section .fp-tableCell h4,
#fullpage .fp-section .fp-tableCell h5,
#fullpage .fp-section .fp-tableCell h6,
#fullpage .fp-section .fp-tableCell p,
#fullpage .fp-section .fp-tableCell span,
#fullpage .fp-section .fp-tableCell a,
#fullpage .fp-section .fp-tableCell button,
#fullpage .fp-section .fp-tableCell div {
    position: relative !important;
    z-index: 30 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure video backgrounds stay behind */
#fullpage .fp-section .section-video-background {
    z-index: 0 !important;
}

#fullpage .fp-section .section-video-overlay {
    z-index: 1 !important;
}

/* Force content containers above everything */
#fullpage .fp-section .fp-tableCell .relative.z-30,
#fullpage .fp-section .fp-tableCell .max-w-8xl,
#fullpage .fp-section .fp-tableCell .max-w-3xl,
#fullpage .fp-section .fp-tableCell .max-w-5xl,
#fullpage .fp-section .fp-tableCell .section-padding {
    position: relative !important;
    z-index: 50 !important;
    isolation: isolate;
}

/* CRITICAL: Ensure newmedia-section is visible */
#newmedia-section,
#newmedia-section.fp-section {
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
    height: 100vh !important;
}

#newmedia-section .fp-tableCell,
#newmedia-section.fp-section .fp-tableCell {
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#newmedia-section .fp-tableCell > *,
#newmedia-section.fp-section .fp-tableCell > * {
    position: relative !important;
    z-index: 30 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#newmedia-section .relative.z-30,
#newmedia-section .max-w-8xl,
#newmedia-section.fp-section .relative.z-30,
#newmedia-section.fp-section .max-w-8xl {
    position: relative !important;
    z-index: 50 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

#newmedia-section h1,
#newmedia-section h2,
#newmedia-section h3,
#newmedia-section h4,
#newmedia-section h5,
#newmedia-section h6,
#newmedia-section p,
#newmedia-section span,
#newmedia-section a,
#newmedia-section button,
#newmedia-section div,
#newmedia-section.fp-section h1,
#newmedia-section.fp-section h2,
#newmedia-section.fp-section h3,
#newmedia-section.fp-section h4,
#newmedia-section.fp-section h5,
#newmedia-section.fp-section h6,
#newmedia-section.fp-section p,
#newmedia-section.fp-section span,
#newmedia-section.fp-section a,
#newmedia-section.fp-section button,
#newmedia-section.fp-section div {
    position: relative !important;
    z-index: 60 !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
}

/* CRITICAL: Overview section specific styles - must be above hero video */
#overview.fp-section {
    position: relative;
    z-index: 10 !important;
}

#overview.fp-section .fp-tableCell {
    position: relative !important;
    z-index: 20 !important;
}

#overview.fp-section .fp-tableCell > * {
    position: relative !important;
    z-index: 30 !important;
}

#overview.fp-section .section-padding,
#overview.fp-section .max-w-8xl,
#overview.fp-section .scrolling-text-container {
    position: relative !important;
    z-index: 50 !important;
}

#overview.fp-section h1,
#overview.fp-section h2,
#overview.fp-section h3,
#overview.fp-section h4,
#overview.fp-section h5,
#overview.fp-section h6,
#overview.fp-section p,
#overview.fp-section span,
#overview.fp-section a,
#overview.fp-section button,
#overview.fp-section div {
    position: relative !important;
    z-index: 60 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
/* Hero Image Scroll Animation - Full Screen including Navigation */
.hero-image-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 0 !important;
    transition: opacity 0.5s ease-out;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Video brightness adjustment for about page */
#hero-video {
    filter: brightness(0.4);
}

/* Scrolling Text Animation */
.scrolling-text-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    background: transparent;
    z-index: 10;
}

.scrolling-text-wrapper {
    display: inline-flex;
    white-space: nowrap;
}

.scrolling-text {
    display: inline-block;
    animation: scroll-horizontal 20s linear infinite;
    will-change: transform;
    margin-right: 4rem;
}

.scrolling-text svg {
    display: block;
    height: 8rem;
}

.scrolling-text text {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 8rem;
    fill: transparent;
    stroke: #ffffff;
    stroke-opacity: 0.5;
    stroke-width: 1px;
    letter-spacing: 0.15em;
    text-anchor: start;
    transform: scaleY(0.7);
    transform-origin: center;
}

@keyframes scroll-horizontal {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .scrolling-text {
        margin-right: 2rem;
    }
    .scrolling-text svg {
        height: 4rem;
    }
    .scrolling-text text {
        font-size: 50;
    }
}

/* ============================================
   Overview Section Scroll Fix
   ============================================ */
/* overview 섹션이 fullpage 밖에 있을 때 스크롤 보장 */
#overview {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
}

/* fullpage 비활성화 시 body 스크롤 보장 */
body:not(.fp-enabled) {
    overflow: auto !important;
    height: auto !important;
}

html:not(.fp-enabled) {
    overflow: auto !important;
    height: auto !important;
}

/* ============================================
   Business Slider
   ============================================ */
/* Business 슬라이드 컨테이너 */
#business-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

#business-slider {
    display: flex;
    width: 400%; /* 4개 슬라이드 = 400% */
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.business-slide {
    width: 25%; /* 각 슬라이드가 25% 너비 */
    min-width: 25%;
    flex-shrink: 0;
}

/* Business 인디케이터 */
.business-indicator {
    cursor: pointer;
    transition: all 0.3s ease;
}

.business-indicator:hover {
    transform: scale(1.2);
}