/* Custom CSS for LERM Website */

/* Preloader Styles */
#preloader {
    transition: opacity 0.5s ease-out;
}

#preloader.hidden {
    opacity: 0;
    pointer-events: none;
}

/* TV Glitch Effect for Preloader Logo */
.tv-glitch-logo {
    width: 300px;
    height: auto;
    animation: tvGlitch 2s infinite;
    filter: contrast(1.2) brightness(1.1);
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

/* Logo Zoom Out Effect */
@keyframes logoZoomOut {
    0% {
        transform: scale(1);
        opacity: 1;
        filter: contrast(1.2) brightness(1.1);
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
        filter: contrast(1.5) brightness(1.3);
    }

    100% {
        transform: scale(0);
        opacity: 0;
        filter: contrast(0.5) brightness(0.5);
    }
}

/* Ensure zoom out animation takes priority */
.tv-glitch-logo.zooming-out {
    animation: logoZoomOut 1.2s ease-out forwards !important;
}

@keyframes tvGlitch {

    0%,
    100% {
        transform: translate(0);
        filter: contrast(1.2) brightness(1.1) hue-rotate(0deg);
    }

    10% {
        transform: translate(-2px, 1px);
        filter: contrast(1.5) brightness(1.3) hue-rotate(5deg);
    }

    20% {
        transform: translate(2px, -1px);
        filter: contrast(1.8) brightness(0.9) hue-rotate(-5deg);
    }

    30% {
        transform: translate(-1px, 2px);
        filter: contrast(1.3) brightness(1.2) hue-rotate(3deg);
    }

    40% {
        transform: translate(1px, -2px);
        filter: contrast(1.6) brightness(1.1) hue-rotate(-3deg);
    }

    50% {
        transform: translate(-2px, -1px);
        filter: contrast(1.4) brightness(1.4) hue-rotate(2deg);
    }

    60% {
        transform: translate(2px, 1px);
        filter: contrast(1.7) brightness(0.8) hue-rotate(-2deg);
    }

    70% {
        transform: translate(-1px, -2px);
        filter: contrast(1.2) brightness(1.3) hue-rotate(4deg);
    }

    80% {
        transform: translate(1px, 2px);
        filter: contrast(1.5) brightness(1.0) hue-rotate(-4deg);
    }

    90% {
        transform: translate(-2px, 2px);
        filter: contrast(1.6) brightness(1.2) hue-rotate(1deg);
    }
}

/* Preloader Video Styles */
#preloader-video {
    object-fit: cover;
    z-index: 1;
}

/* Preloader Logo Container */
#preloader .absolute.inset-0.flex {
    z-index: 2;
}

/* Responsive Preloader Logo */
@media (max-width: 768px) {
    .tv-glitch-logo {
        width: 200px;
    }
}

@media (max-width: 480px) {
    .tv-glitch-logo {
        width: 150px;
    }
}

@media (max-width: 360px) {
    .tv-glitch-logo {
        width: 120px;
    }
}

/* Custom Font - BubbleBaz */
@font-face {
    font-family: 'BubbleBaz';
    src: url('../font/bubblebaz.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Main Font Family */
body {
    font-family: 'BubbleBaz', 'Arial', 'Helvetica', sans-serif;
}

/* Headings with BubbleBaz */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'BubbleBaz', 'Arial', 'Helvetica', sans-serif;
}

/* Button text with BubbleBaz */
button {
    font-family: 'BubbleBaz', 'Arial', 'Helvetica', sans-serif;
}

/* Marquee text with BubbleBaz */
.marquee-content {
    font-family: 'BubbleBaz', 'Arial', 'Helvetica', sans-serif;
}

/* LERM Token card styling with BubbleBaz */
#hero h2 {
    font-family: 'BubbleBaz', 'Arial', 'Helvetica', sans-serif;
    font-weight: normal;
    letter-spacing: 1px;
}

/* Custom Button Styling */
.custom-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-btn:hover {
    transform: scale(1.1);
}

.custom-btn:active {
    transform: scale(0.95);
}

/* Video Modal Controls - Positioned above bottom border */
#video-modal .absolute.bottom-24 {
    bottom: 6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
}

#video-modal .flex {
    background: none;
    backdrop-filter: none;
    border-radius: 0;
    padding: 0;
}

/* Modal controls with BubbleBaz */
#video-modal button {
    font-family: 'BubbleBaz', 'Arial', 'Helvetica', sans-serif;
    font-weight: normal;
    letter-spacing: 0.5px;
}

/* Enhanced text rendering for BubbleBaz */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Marquee Animation - True Infinity */
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding: 0.25rem 0;
    /* Further reduced padding */
    height: 3rem;
    /* Fixed height */
    display: flex;
    align-items: center;
    /* Vertical center */
    background-color: #000000;
    /* Latar belakang hitam */
}

.marquee-content {
    display: inline-block;
    animation: marquee 20s linear infinite;
    white-space: nowrap;
    font-size: 2.25rem;
    /* 1.5x bigger (1.5rem * 1.5 = 2.25rem) */
    font-weight: normal;
    color: #8b5cf6 !important;
    /* Teks hijau dengan !important */
    text-shadow: none;
    letter-spacing: 0.1em;
}

/* Create seamless infinite loop with more content */
.marquee-content::after {
    content: " Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm Press Start to Werm";
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Parallax Effect */
.parallax-bg {
    transform: translateZ(0);
    will-change: transform;
}

/* TV Hover Effects - Removed per user request */

/* Video Modal Container */
#video-modal {
    padding: 0;
    overflow: hidden;
}

#video-modal>div {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Video Container */
#video-modal .relative {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* Constrain container to frame dimensions */
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

/* Video Frame Styling - Properly contained */
#video-modal img[alt="Video Frame"] {
    z-index: 10;
    pointer-events: none;
    user-select: none;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    position: relative;
    /* Ensure frame defines the video boundary */
    border-radius: 0;
}

/* Video container - constrained by frame width */
#modal-video {
    z-index: 5;
    border-radius: 0;
    width: 64.8%;
    /* 54% * 1.2 = 64.8% */
    height: 64.8%;
    /* 54% * 1.2 = 64.8% */
    max-width: 64.8%;
    max-height: 64.8%;
    object-fit: contain;
    /* Changed from cover to contain to prevent overflow */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% - 10.296vh));
    /* 8.58vh * 1.2 = 10.296vh */
    border: none;
    transition: transform 0.3s ease;
    /* Ensure video stays within frame boundaries */
    overflow: hidden;
    /* Additional constraints to prevent frame overflow */
    box-sizing: border-box;
    /* Ensure video respects container bounds */
    contain: layout style paint;
    /* Strict size constraints to prevent overflow */
    min-width: 0;
    min-height: 0;
    /* Force video to respect container bounds */
    display: block;
    /* Hide video controls */
    pointer-events: none;
}

/* Hide video controls completely */
#modal-video::-webkit-media-controls {
    display: none !important;
}

#modal-video::-webkit-media-controls-panel {
    display: none !important;
}

#modal-video::-webkit-media-controls-play-button {
    display: none !important;
}

#modal-video::-webkit-media-controls-timeline {
    display: none !important;
}

#modal-video::-webkit-media-controls-current-time-display {
    display: none !important;
}

#modal-video::-webkit-media-controls-time-remaining-display {
    display: none !important;
}

#modal-video::-webkit-media-controls-mute-button {
    display: none !important;
}

#modal-video::-webkit-media-controls-volume-slider {
    display: none !important;
}

#modal-video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

/* Hide all video controls for all browsers */
#modal-video::-webkit-media-controls-overlay-play-button {
    display: none !important;
}

#modal-video::-webkit-media-controls-enclosure {
    display: none !important;
}

/* Additional video control hiding for all browsers */
#modal-video::-moz-media-controls {
    display: none !important;
}

#modal-video::-ms-media-controls {
    display: none !important;
}

/* Ensure video cannot be interacted with */
#modal-video {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* CSS Custom Properties for responsive positioning */
:root {
    --video-shift-desktop: 0vh;
    --video-shift-tablet: 2vh;
    --video-shift-mobile: 4vh;
    --video-shift-small: 6vh;
}

/* Responsive positioning adjustments - Progressive upward shift */
@media (max-width: 1200px) {
    #modal-video {
        transform: translate(-50%, calc(-50% - 6.864vh));
        /* 5.72vh * 1.2 = 6.864vh */
    }
}

@media (max-width: 992px) {
    #modal-video {
        transform: translate(-50%, calc(-50% - 13.728vh));
        /* 11.44vh * 1.2 = 13.728vh */
    }
}

@media (max-width: 768px) {
    #modal-video {
        transform: translate(-50%, calc(-50% - 20.592vh));
        /* 17.16vh * 1.2 = 20.592vh */
    }
}

@media (max-width: 480px) {
    #modal-video {
        transform: translate(-50%, calc(-50% - 27.456vh));
        /* 22.88vh * 1.2 = 27.456vh */
    }
}

/* Extra small devices */
@media (max-width: 360px) {
    #modal-video {
        transform: translate(-50%, calc(-50% - 34.32vh));
        /* 28.6vh * 1.2 = 34.32vh */
    }
}

/* Modal Animation */
#video-modal {
    backdrop-filter: blur(5px);
    transition: opacity 0.3s ease-in-out;
}

#video-modal.show {
    display: flex !important;
    opacity: 1;
}

/* Hero Logo Responsive */
@media (max-width: 768px) {
    #hero .max-w-xs {
        max-width: 12rem;
        /* Smaller on mobile */
    }
}

@media (max-width: 480px) {
    #hero .max-w-xs {
        max-width: 10rem;
        /* Even smaller on small mobile */
    }

    #hero .max-w-sm {
        max-width: 14rem;
        /* Smaller card on mobile */
    }

    /* Button text responsive */
    #hero button {
        font-size: 2rem !important;
        /* Smaller on mobile */
    }
}

@media (max-width: 360px) {
    #hero button {
        font-size: 1.75rem !important;
        /* Even smaller on very small mobile */
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    #tv-image {
        width: 300px !important;
        height: auto;
    }

    /* Button text responsive for tablet */
    #hero button {
        font-size: 3rem !important;
        /* Medium size for tablet */
    }

    .marquee-container {
        height: 2.5rem;
        /* Smaller height for mobile */
    }

    .marquee-content {
        font-size: 1.875rem;
        /* 1.5x bigger for mobile (1.25rem * 1.5 = 1.875rem) */
    }

    #hero .max-w-md {
        max-width: 16rem;
    }

    /* Responsive button sizes - 2x bigger */
    .custom-btn img {
        width: 6rem !important;
        height: 6rem !important;
    }

    /* Button positioning for tablet */
    #video-modal .absolute.bottom-24 {
        bottom: 6rem;
    }

    /* Video frame responsive */
    #video-modal img[alt="Video Frame"] {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    #modal-video {
        width: 72%;
        /* Increased for mobile */
        height: 72%;
        /* Increased for mobile */
        max-width: 72%;
        max-height: 72%;
        object-fit: contain;
        top: 50%;
        left: 50%;
        transform: translate(-50%, calc(-50% - 5.5vh));
        /* Very slightly raised for mobile */
        border: none;
    }
}

@media (max-width: 480px) {
    #tv-image {
        width: 250px !important;
    }

    .marquee-container {
        height: 2rem;
        /* Even smaller height for small mobile */
    }

    .marquee-content {
        font-size: 1.5rem;
        /* 1.5x bigger for small mobile (1rem * 1.5 = 1.5rem) */
    }

    #hero .max-w-sm {
        max-width: 14rem;
    }

    /* Smaller button sizes for mobile - 2x bigger */
    .custom-btn img {
        width: 5rem !important;
        height: 5rem !important;
    }

    /* Button positioning for mobile */
    #video-modal .absolute.bottom-24 {
        bottom: 6rem;
    }

    /* Video frame mobile responsive */
    #video-modal img[alt="Video Frame"] {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    #modal-video {
        width: 75%;
        /* Increased for small mobile */
        height: 75%;
        /* Increased for small mobile */
        max-width: 75%;
        max-height: 75%;
        object-fit: contain;
        top: 50%;
        left: 50%;
        transform: translate(-50%, calc(-50% - 3.5vh));
        /* Very slightly raised for small mobile */
        border: none;
    }
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Parallax Hero Container */
.parallax-hero-container {
    position: relative;
    width: 100%;
    height: 100%;
    will-change: transform;
}

/* Mouse Parallax Layer Styling */
.parallax-mouse-layer {
    transition: transform 0.1s ease-out;
    /* Menghaluskan gerakan mouse */
}

/* Memperbesar lapisan pertama (bghero.png) lebih banyak */
.parallax-mouse-layer:first-child {
    transform: scale(1.2);
}

/* TV Section Customizations */
.tv-container {
    /* Induknya sudah memusatkan, kita hanya perlu menggeser secara vertikal */
    transform: translateY(50%);
    /* -10% setara dengan menaikkan 60% dari posisi 50% */
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #8b5cf6;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #7c3aed;
}

/* Video Modal Styles */
#video-modal .custom-btn img {
    width: 8rem;
    /* 128px */
}

/* Hero Character Animations */
.hero-char {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-char.from-left {
    transform: scale(0.8) translateX(-50%);
}

.hero-char.from-right {
    transform: scale(0.8) translateX(50%);
}

.hero-char.visible {
    opacity: 1;
    transform: scale(1) translateX(0);
}

/* Hero Section */
#hero {
    min-height: 100vh;
}