/* Google Fonts loaded via in HTML for non-blocking CSS parse */ /* --- ANIMACIÓN ASCENSO Y FADE DEL LOGO DEL PRELOADER --- */ .preloader-logo-ascend { animation: preloaderLogoAscend 0.5s cubic-bezier(.2, .9, .2, 1) forwards; will-change: transform, opacity; } @keyframes preloaderLogoAscend { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(calc(-50vh + 85px)); opacity: 0; } } /* --- UPPER BAR FADE-IN CON PRELOADER --- */ body.preloader-active nav.blending-item { opacity: 0; pointer-events: none; transition: opacity 0.7s cubic-bezier(.77, 0, .18, 1); user-select: none; } body.preloader-active nav.blending-item *, body.preloader-active nav.blending-item *:not(input):not(textarea):not(select) { pointer-events: none !important; user-select: none !important; cursor: default !important; } body:not(.preloader-active) nav.blending-item { opacity: 1; pointer-events: auto !important; transition: opacity 0.7s cubic-bezier(.77, 0, .18, 1); } /* Ensure nav children are interactive after preloader */ body:not(.preloader-active) nav.blending-item .menu-toggle, body:not(.preloader-active) nav.blending-item .logo { pointer-events: auto !important; } /* --- Preloader toggles y notificación en margen inferior --- */ .preloader-toggles-bottom { position: absolute; left: 0; right: 0; bottom: 2.5rem; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; z-index: 20; } .sidebar-control-buttons { display: flex; gap: 1.2rem; justify-content: center; align-items: center; mix-blend-mode: difference; } .control-status-message { position: relative; width: 100%; text-align: center; color: #333333; font-size: 11px; font-family: 'Helvetica Neue Condensed Bold', 'Helvetica', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; min-height: 16px; margin-top: 0.5rem; transition: opacity 0.3s ease; pointer-events: none; opacity: 0; } .control-status-message.show { opacity: 0.85; } .hard-corner { border-radius: 0 !important; } /* --- PRELOADER SOBER STYLES --- */ .preloader-sober { background: transparent; box-shadow: none; border-radius: 0; padding: 2rem 1rem; max-width: 320px; } .preloader-sober .preloader-logo img { filter: none; opacity: 1; } .preloader-bar-bg { background: #e0e0e0; } .preloader-bar { background: #333333; } .preloader-bar-text { color: #333333; } .preloader-enter-btn { background: #eaf7ff; color: #181818; border-radius: 0 !important; box-shadow: none; opacity: 0.85; } .preloader-enter-btn:enabled { opacity: 1; } .preloader-toggles { gap: 1rem; } /* Logo transition styles eliminadas para rehacer animaciones */ @media (max-width: 600px) { .preloader-sober { max-width: 98vw; padding: 1.2rem 0.5rem; border-radius: 0; } .preloader-logo img { width: 80px; } } /* --- FIN PRELOADER SOBER STYLES --- */ @media (max-width: 1024px) { .menu-toggle { left: 24px !important; padding-left: 12px !important; } } /* --- PRELOADER STYLES --- */ /* Fondo blanco duro cubre toda la pantalla */ .preloader { position: fixed; inset: 0; width: 100vw; height: 100vh; min-width: 100vw; min-height: 100vh; background: #ffffff !important; z-index: 50000 !important; display: flex; align-items: center; justify-content: center; opacity: 1; transition: opacity 0.6s cubic-bezier(.77, 0, .18, 1), background 0.8s cubic-bezier(.77, 0, .18, 1) 0.2s; } /* Cuando está cargado al 100%, fondo translúcido con blur */ .preloader.loaded { background: rgba(255, 255, 255, 0.65) !important; backdrop-filter: blur(20px) brightness(1.1); -webkit-backdrop-filter: blur(20px) brightness(1.1); transition: background 0.8s cubic-bezier(.77, 0, .18, 1); /* NO usar will-change con backdrop-filter: causa bug de compositing en iOS Safari donde la capa GPU persiste y no responde a opacity: 0 */ } .preloader-content { /* Eliminar fondo y sombra para que solo el fondo global sea visible */ box-shadow: none !important; background: transparent !important; } .preloader-fade-bg { opacity: 0 !important; transition: opacity 0.5s cubic-bezier(.77, 0, .18, 1); } .preloader-hide { opacity: 0 !important; pointer-events: none; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: opacity 0.6s cubic-bezier(.77, 0, .18, 1) !important; } .preloader-content { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2rem; width: 90vw; max-width: 380px; min-height: 500px; padding: 3rem 2rem; background: transparent; border-radius: 0; box-shadow: none; position: relative; } .preloader-logo { width: 100%; display: flex; justify-content: center; } .preloader-logo img { width: 150px; height: auto; max-width: 100%; user-select: none; position: relative; will-change: transform, opacity; display: block; } @keyframes logoFadeIn { 0% { opacity: 1; } 100% { opacity: 1; } } .preloader-logo img:hover { transform: scale(1.02); opacity: 0.85; } .preloader-bar-container { width: 100%; min-height: 60px; display: flex; flex-direction: column; justify-content: center; } .preloader-bar-bg { width: 100%; height: 12px; background: #e0e0e0; border: 1px solid #c0c0c0; border-radius: 0; overflow: hidden; margin-bottom: 0.3rem; } .preloader-bar { height: 100%; width: 0%; background: #333333; border-radius: 0; transition: width 0.3s cubic-bezier(.77, 0, .18, 1); } .preloader-bar-text { display: block; text-align: center; color: #000000; font-size: 1rem; font-family: 'Helvetica Neue Condensed Bold', 'Helvetica', sans-serif; font-weight: 700; letter-spacing: 0.04em; } .preloader-toggles { display: flex; gap: 1.2rem; justify-content: center; margin-bottom: 0.5rem; } .preloader-toggle { display: flex; align-items: center; gap: 0.4rem; font-size: 1rem; color: #eaf7ff; font-family: 'Helvetica Neue Condensed Bold', 'Helvetica', sans-serif; } .preloader-toggle input[type="checkbox"] { accent-color: #eaf7ff; width: 18px; height: 18px; margin: 0; } .preloader-enter-btn { width: 100%; padding: 10px 30px; font-size: 18px; font-family: 'Helvetica Neue Condensed Bold', 'Helvetica', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; background: transparent; color: #ffffff !important; mix-blend-mode: difference; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 0 !important; position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; z-index: 10; cursor: pointer; transition: all 0.4s ease; opacity: 0; overflow: hidden; transform: translateY(24px) scale(0.96); pointer-events: none; } .preloader-enter-btn::after { content: ""; background: #333333; color: #ffffff; left: 0; top: 100%; z-index: -1; width: 100%; height: 100%; position: absolute; transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1); } .preloader-enter-btn:enabled { opacity: 1; } .preloader-enter-btn:disabled { cursor: not-allowed; opacity: 0.4; } .preloader-enter-btn:hover { color: #ffffff !important; } .preloader-enter-btn:hover::after { top: 0; } .preloader-bar-text.hide { opacity: 0; transform: translateY(-16px) scale(0.92); transition: opacity 0.5s cubic-bezier(.77, 0, .18, 1), transform 0.6s cubic-bezier(.77, 0, .18, 1); display: none; } .preloader-bar.hide { opacity: 0; transform: translateY(-24px) scaleX(0.92); transition: opacity 0.5s cubic-bezier(.77, 0, .18, 1), transform 0.6s cubic-bezier(.77, 0, .18, 1); display: none; } .preloader-enter-btn.show { opacity: 1; transform: translateY(0) scale(1); display: flex; align-items: center; justify-content: center; margin: 0 auto; pointer-events: auto; position: relative; bottom: 0; box-shadow: 0 4px 24px 0 rgba(234, 247, 255, 0.18), 0 1.5px 8px 0 rgba(0, 0, 0, 0.12); } .preloader-enter-btn:hover { background: linear-gradient(90deg, #fff 0%, #eaf7ff 100%); color: #000; border-radius: 0 !important; box-shadow: 0 0 0 2px #eaf7ff, 0 8px 32px 0 rgba(234, 247, 255, 0.22); transform: scale(1.035) translateY(-2px); filter: brightness(1.08) saturate(1.1); transition: box-shadow 0.25s, background 0.18s, color 0.18s, transform 0.18s cubic-bezier(.77, 0, .18, 1); } .preloader-enter-btn:active { background: #eaf7ff; color: #181818; border-radius: 0 !important; box-shadow: 0 0 0 1.5px #eaf7ff, 0 2px 8px 0 rgba(234, 247, 255, 0.12); transform: scale(0.97) translateY(1.5px); filter: brightness(0.98) saturate(0.98); transition: box-shadow 0.12s, background 0.12s, color 0.12s, transform 0.12s cubic-bezier(.77, 0, .18, 1); } @media (max-width: 600px) { .preloader-content { max-width: 98vw; padding: 1.2rem 0.5rem; border-radius: 0; } .preloader-logo img { width: 80px; } .preloader-bar-bg { height: 10px; } .preloader-bar-text { font-size: 0.95rem; } .preloader-enter-btn { font-size: 1rem; padding: 0.6rem 0; border-radius: 0 !important; } } /* --- FIN PRELOADER STYLES --- */ @media (max-width: 1024px) and (min-width: 769px) { .menu-toggle { left: 24px; padding-left: 8px; } } /* --- Motion Blur Global Effect --- */ .motion-blur-enabled { /* Efecto de motion blur global, ajusta el valor para más/menos blur */ filter: blur(4px) brightness(1.08) saturate(1.1); transition: filter 0.3s cubic-bezier(0.76, 0, 0.24, 1); } body.motion-blur-enabled #grainCanvas, body.motion-blur-enabled #customCursor, body.motion-blur-enabled #trailCanvas { /* No aplicar blur a overlays/cursor/canvas si es necesario */ filter: none !important; } @font-face { font-family: 'Helvetica'; src: url('../fonts/Helvetica.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica'; src: url('../fonts/Helvetica-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue Condensed Bold'; src: url('../fonts/Helvetica-Neue-Condensed-Bold.ttf') format('truetype'); font-style: normal; font-display: swap; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; } /* Hide default cursor only on desktop */ @media (min-width: 1025px) and (hover: hover) and (pointer: fine) { *:not(.show-default-cursor) { cursor: none !important; } } /* Show default cursor when visual effects are disabled */ .show-default-cursor, .show-default-cursor body, .show-default-cursor #canvas, .show-default-cursor * { cursor: auto !important; } /* Cursor styles for interactive elements in visual-effects-disabled mode */ /* These need higher specificity to override the general rule */ body.show-default-cursor.visual-effects-disabled #canvas { cursor: grab !important; } body.show-default-cursor.visual-effects-disabled #canvas.dragging { cursor: grabbing !important; } html body.show-default-cursor.visual-effects-disabled .image-container:hover, html body.show-default-cursor.visual-effects-disabled #canvas .image-container:hover, html body.show-default-cursor.visual-effects-disabled .image-container:hover *, html body.show-default-cursor.visual-effects-disabled #canvas .image-container:hover * { cursor: pointer !important; } body.show-default-cursor.visual-effects-disabled .menu-toggle { cursor: pointer !important; } body.show-default-cursor.visual-effects-disabled .dropdown-link { cursor: pointer !important; } body.show-default-cursor.visual-effects-disabled .submenu-link { cursor: pointer !important; } body.show-default-cursor.visual-effects-disabled .sidebar-control-btn { cursor: pointer !important; } body.show-default-cursor.visual-effects-disabled .contact-close { cursor: pointer !important; } body.show-default-cursor.visual-effects-disabled .submit-btn { cursor: pointer !important; } body.show-default-cursor.visual-effects-disabled .cinema-close { cursor: pointer !important; } body.show-default-cursor.visual-effects-disabled .progress-bar { cursor: pointer !important; } body.show-default-cursor.visual-effects-disabled .play-pause-btn { cursor: pointer !important; } body.show-default-cursor.visual-effects-disabled .volume-icon { cursor: pointer !important; } body.show-default-cursor.visual-effects-disabled .volume-slider { cursor: pointer !important; } /* Navbar dark mode when visual effects are disabled */ body.visual-effects-disabled nav .menu-toggle span { background-color: #000000; } body.visual-effects-disabled nav .menu-toggle.active span { background-color: #ffffff; } body.visual-effects-disabled nav .logo img { filter: invert(1) brightness(0); } /* Custom Cursor Styles */ #customCursor { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none !important; z-index: 100000 !important; mix-blend-mode: difference !important; transition: opacity 0.3s ease; } #trailCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } #customCursor * { pointer-events: none !important; } .cursor-particle { position: absolute; left: 0; top: 0; width: 2px; height: 2px; background-color: #ffffff; border-radius: 50%; will-change: transform; } .cursor-center-dot { position: absolute; left: 0; top: 0; width: 12px; height: 12px; background-color: #ffffff; border-radius: 50%; will-change: transform; } body { overflow: hidden; background: #F0F0F0; background-color: #F0F0F0; position: relative; font-family: 'Helvetica Neue Condensed Bold', 'Helvetica', sans-serif; } body.menu-open { overflow: hidden; } body.menu-open #canvas, body.menu-open #canvas * { pointer-events: none !important; } /* Efecto blur en el fondo al abrir menú lateral. Usamos backdrop-filter en un pseudo-elemento en vez de filter en los contenedores, porque filter crea un nuevo containing block y rompe position:fixed de los hijos. */ body.menu-open::after { content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9999; pointer-events: none; transition: backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease; } /* Sin blur en index.html */ body.index-page.menu-open::after { backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); } .canvas-body { overflow: hidden; touch-action: manipulation; } #canvas { width: 100vw; height: 100vh; height: 100svh; position: relative; overflow: hidden; z-index: 11; touch-action: none; } /* Darkening overlay behind map items on hover */ #canvas::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 0.4s ease; pointer-events: none; z-index: -1; } #canvas.has-hover::before { background: rgba(0, 0, 0, 0.15); } #canvas.dragging { cursor: grabbing; } .image-container { position: absolute; width: 170px; height: auto; transition: filter 0.15s ease, opacity 0.3s ease, box-shadow 1.2s cubic-bezier(.22, .08, .25, 1), --shadow-opacity 1.4s cubic-bezier(.22, .08, .25, 1); pointer-events: auto; transform: translateZ(0); backface-visibility: hidden; transform-style: preserve-3d; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --shadow-opacity: 0; } /* Register custom property for animatable ::after shadow opacity */ @property --shadow-opacity { syntax: ''; inherits: false; initial-value: 0; } /* Shadow glow pseudo-element for mobile (iOS can't transition box-shadow on composited layers) */ .image-container::after { content: ""; display: none; /* hidden on desktop — box-shadow is used instead */ position: absolute; inset: -160px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.38) 10%, rgba(0, 0, 0, 0.22) 25%, rgba(0, 0, 0, 0.10) 45%, rgba(0, 0, 0, 0.03) 65%, rgba(0, 0, 0, 0.005) 80%, rgba(0, 0, 0, 0) 92%); pointer-events: none; z-index: -1; opacity: var(--shadow-opacity); will-change: opacity; } /* Parallax titles */ .parallax-titles-layer { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 15; pointer-events: none; overflow: visible; mix-blend-mode: difference; } .parallax-title { position: absolute; font-family: 'Tangerine', 'Times New Roman', serif; font-size: 6rem; font-weight: bold; color: transparent; -webkit-text-stroke: 0.2px #ffffff; text-stroke: 0.2px #ffffff; mix-blend-mode: difference; --reveal-x: 50%; --reveal-y: 50%; --reveal-radius: 120px; --reveal-fade: 160px; --reveal-min: 0.18; -webkit-mask-image: radial-gradient(circle at var(--reveal-x) var(--reveal-y), rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) var(--reveal-radius), rgba(255, 255, 255, var(--reveal-min)) calc(var(--reveal-radius) + var(--reveal-fade))); mask-image: radial-gradient(circle at var(--reveal-x) var(--reveal-y), rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) var(--reveal-radius), rgba(255, 255, 255, var(--reveal-min)) calc(var(--reveal-radius) + var(--reveal-fade))); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; white-space: nowrap; will-change: transform, filter, opacity; opacity: 1; line-height: 1; filter: blur(0px); transition: filter 0.3s ease-out, opacity 0.4s ease-out; text-transform: lowercase; } /* Grid mode styles - smooth transitions when visual effects are disabled */ body.visual-effects-disabled .image-container { cursor: pointer !important; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.6s ease, opacity 0.3s ease !important; } /* Constrain all elements to cell bounds in grid mode */ body.visual-effects-disabled .image-container { max-width: 150px; max-height: 225px; overflow: hidden; } /* Ensure videos scale to fit within cell bounds */ body.visual-effects-disabled .image-container video { width: 150px; height: 225px; object-fit: cover; } /* Ensure text phrase containers have correct height */ .image-container.text-phrase-template { height: 170px; } /* Oscurecer elementos cuando hay hover activo */ #canvas.has-hover .image-container { opacity: 0.7; /* Antes 0.35, ahora menos transparente */ transition: opacity 0.8s cubic-bezier(.25, .1, .25, 1), --shadow-opacity 1.4s cubic-bezier(.22, .08, .25, 1); } #canvas.has-hover .image-container.is-hovered { opacity: 1; } /* Radial shadow glow behind hovered map item */ .image-container.is-hovered, .image-container.mobile-centered { box-shadow: 0 0 120px 80px rgba(0, 0, 0, 0.3); transition: opacity 0.8s cubic-bezier(.25, .1, .25, 1), box-shadow 1s cubic-bezier(.25, .1, .25, 1), --shadow-opacity 1.4s cubic-bezier(.22, .08, .25, 1); } .image-container img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.3s ease; } /* Remove grayscale on hover */ .image-container:hover img { filter: grayscale(0); } /* Remove grayscale when animating (cinema mode) */ .image-container.animating img { filter: grayscale(0); } /* Reveal Text Styles */ .reveal-text-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .reveal-text-canvas { width: 170px; height: 170px; display: block; } @media screen and (max-width: 1199px) { .reveal-text-canvas { width: 150px; height: 150px; } } @media screen and (max-width: 991px) { .reveal-text-canvas { width: 150px; height: 150px; } } @media screen and (max-width: 767px) { .reveal-text-canvas { width: 140px; height: 140px; } } @media screen and (max-width: 1199px) { .image-container { width: 150px !important; } .center-marker { width: 80px; height: 80px; } } @media screen and (max-width: 991px) { .image-container { width: 150px; } .center-marker { width: 60px; height: 60px; } } @media screen and (max-width: 767px) { .center-marker { width: 30px; height: 30px; } } @media (max-width: 768px) { .parallax-title { font-size: 3rem; } } /* Background Video */ #video-background { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; overflow: hidden; } #videos-background { position: fixed; inset: 0; z-index: -2; overflow: hidden; background-color: white; transition: opacity 0.5s ease; } #videos-background video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease, filter 0.4s ease; transform: translateZ(0); opacity: 0.08; will-change: opacity, filter; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Overlay específico para el video stormlight */ #stormlight-overlay { opacity: 0.5; mix-blend-mode: screen; pointer-events: none; z-index: 1; } /* Darken video on map item hover */ #videos-background::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 0.4s ease; pointer-events: none; z-index: 1; } #videos-background.map-item-hovered::after { background: rgba(0, 0, 0, 0.15); } /* Increased opacity and inverted colors when element is focused */ #videos-background.focused-active video { opacity: 0.25; filter: invert(1); } #video-background-top video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; /* opacity: 0.2; filter: brightness(0.3); */ } #video-background-bottom video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; /* opacity: 0.9; filter: invert() grayscale() !important; mix-blend-mode: difference;*/ } /* Navbar */ nav { position: fixed; top: 0; left: 0; width: 100%; background: transparent; z-index: 200000 !important; padding: 10px 0; /* isolation: isolate — REMOVED: breaks mix-blend-mode:difference on iOS Safari by sealing the blending group against a transparent background */ touch-action: auto; -webkit-tap-highlight-color: transparent; } .nav-container { max-width: 1400px; margin: 0 auto; padding: 0 64px; display: flex; justify-content: center; align-items: center; position: relative; } /* Asegura que el botón hamburguesa siempre sea clickeable */ /* Hamburger always at left, fixed width for alignment */ .menu-toggle { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; padding: 12px; z-index: 210000 !important; width: 48px; min-width: 48px; min-height: 48px; pointer-events: auto !important; } body.visual-effects-disabled .menu-toggle { cursor: pointer !important; } .menu-toggle span { width: 28px; height: 2.5px; background-color: white; transition: all 0.3s ease, background-color 0.5s ease; display: block; margin-left: 0; } .menu-toggle.active span { background-color: #000000; } .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } /* Desktop adjustments for nav-container and menu-toggle */ @media (min-width: 1025px) { .nav-container { max-width: none; padding: 0 28px; } .menu-toggle { left: 43px; } } .logo { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; z-index: 10003; position: relative; margin: 0 auto; left: 0; top: 0; transform: none; pointer-events: auto; /* Flexbox will center it */ } .logo img { color: #fff; /* Animaciones eliminadas para rehacer */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; } .nav-controls { position: absolute; right: 40px; display: flex; gap: 20px; align-items: center; } .control-btn { background: none; border: none; cursor: pointer; color: white; padding: 12px; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; min-width: 48px; min-height: 48px; } .control-btn:hover { opacity: 0.7; } .control-btn svg { width: 28px; height: 28px; } /* Sidebar Menu */ .dropdown-menu { position: fixed; top: 0; left: 0; width: 400px; max-width: 100vw; height: 100vh; background: transparent; padding: 80px 40px 40px 55px; display: flex; flex-direction: column; justify-content: space-between; gap: 0; z-index: 10001; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; perspective: 1000px; will-change: transform; isolation: isolate; } .dropdown-menu::before { content: ''; position: fixed; top: 0; left: 0; width: 400px; max-width: 100vw; height: 100vh; background: rgba(255, 255, 255, 0.95); box-shadow: none; z-index: -1; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s ease, box-shadow 0.5s ease; pointer-events: none; mix-blend-mode: normal; } body.visual-effects-disabled .dropdown-menu::before { background: rgba(0, 0, 0, 1.0); box-shadow: none; mix-blend-mode: normal; } .dropdown-menu.active::before { transform: translateX(0); pointer-events: all; } .dropdown-menu.active { transform: translateX(0); } .menu-links { display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 2; width: 100%; margin-top: 50px; } /* Sidebar Controls */ .sidebar-controls { display: flex; flex-direction: column; gap: 16px; padding-top: 40px; margin-top: auto; border-top: 1px solid rgba(0, 0, 0, 0.864); transition: border-color 0.5s ease; position: relative; z-index: 2; } body.visual-effects-disabled .sidebar-controls { border-top: 1px solid rgba(255, 255, 255, 0.1); } .sidebar-control-buttons { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 16px; } .sidebar-control-btn { background: none; border: 2px solid #000000; border-radius: 50%; cursor: pointer; color: #000000; padding: 8px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease, border-color 0.5s ease; width: 36px; height: 36px; pointer-events: all !important; position: relative; z-index: 10; } body.visual-effects-disabled .sidebar-control-btn { border-color: #ffffff; cursor: pointer !important; } body.visual-effects-disabled .sidebar-control-btn:hover { background: #ffffff; color: #000000; } .sidebar-control-btn * { pointer-events: none; } .sidebar-control-btn:hover { background: #000000; color: #ffffff; transform: scale(1.05); } .sidebar-control-btn:hover svg { stroke: #ffffff; } .sidebar-control-btn svg { width: 20px; height: 20px; stroke: #000000; transition: stroke 0.5s ease; } body.visual-effects-disabled .sidebar-control-btn svg { stroke: #ffffff; } body.visual-effects-disabled .sidebar-control-btn:hover svg { stroke: #000000; } .control-status-message { font-family: 'Helvetica Neue Condensed Bold', 'Helvetica', sans-serif; font-size: 11px; font-weight: 700; color: #000000; text-align: center; letter-spacing: 0.05em; opacity: 0; transition: opacity 0.3s ease, color 0.5s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); min-height: 16px; margin-top: 4px; } .control-status-message.show { opacity: 0.85; background: none; border: none; box-shadow: none; } body.visual-effects-disabled .control-status-message { color: #ffffff; } @keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } } .dropdown-link { color: #000000; text-decoration: none; font-size: 26px; font-family: 'Helvetica Neue Condensed Bold', 'Helvetica', sans-serif; font-weight: 700; transition: opacity 0.3s ease, transform 0.3s ease, color 0.5s ease; padding: 25px 0; text-align: left; border: none; text-transform: uppercase; letter-spacing: 0.02em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); will-change: opacity, transform; background: none; cursor: pointer; width: auto; display: inline-block; } body.visual-effects-disabled .dropdown-link { color: #ffffff; cursor: pointer !important; } .dropdown-link:hover { opacity: 0.6; transform: translateX(10px) translateZ(0); } .menu-links>li:first-child .dropdown-link { margin-top: 120px; } .dropdown-link:last-child { border-bottom: none; } /* Submenu Styles */ .dropdown-item-with-submenu { width: 100%; } .dropdown-toggle { position: relative; border-bottom: none !important; display: flex; justify-content: space-between; align-items: center; } .dropdown-arrow { transition: transform 0.3s ease, stroke 0.5s ease; stroke: #000000; margin-left: 10px; } body.visual-effects-disabled .dropdown-arrow { stroke: #ffffff; } .dropdown-toggle.active .dropdown-arrow { transform: rotate(180deg); } .submenu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding-left: 20px; } .submenu.active { max-height: 200px; } .submenu-link { color: #000000; text-decoration: none; font-size: 20px; font-family: 'Helvetica Neue Condensed Bold', 'Helvetica', sans-serif; font-weight: 700; transition: opacity 0.3s ease, transform 0.3s ease, color 0.5s ease; padding: 12px 0; text-align: left; text-transform: uppercase; letter-spacing: 0.02em; display: block; width: fit-content; opacity: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.visual-effects-disabled .submenu-link { color: #ffffff; cursor: pointer !important; } .submenu-link:hover { opacity: 0.6; transform: translateX(10px); } /* Contact Modal */ /* Animación de apertura del modal */ @keyframes contactModalOpen { 0% { opacity: 0; transform: scale(0.85) translateY(20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .contact-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%); z-index: 10002; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .contact-modal.active { opacity: 1; pointer-events: all; } .contact-modal-content { background: transparent; padding: 50px 60px; border-radius: 999px; max-width: 600px; width: 90%; position: relative; box-shadow: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow: visible; opacity: 0; transform: scale(0.85) translateY(20px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: transform, opacity; } .contact-modal.active .contact-modal-content { animation: contactModalOpen 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .contact-nebula-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; border-radius: 999px; mix-blend-mode: lighten; } .contact-close { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 36px; cursor: pointer; color: #000000; line-height: 1; padding: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; } body.visual-effects-disabled .contact-close { cursor: pointer !important; } .contact-close:hover { opacity: 0.6; } .contact-modal h2 { font-family: 'Helvetica Neue Condensed Bold', 'Helvetica', sans-serif; font-size: 32px; font-weight: 700; text-align: center; margin-bottom: 30px; letter-spacing: 0.05em; mix-blend-mode: difference; color: #fff; } .form-group { margin-bottom: 20px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 15px; border: 2px solid #000000; background: #ffffff; font-family: 'Helvetica Neue Condensed Bold', 'Helvetica', sans-serif; font-size: 16px; transition: border-color 0.3s ease; -webkit-font-smoothing: antialiased; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: #666666; } .form-group input::placeholder, .form-group textarea::placeholder, .form-group select::placeholder { color: rgba(0, 0, 0, 0.5); font-family: 'Helvetica Neue Condensed Bold', 'Helvetica', sans-serif; letter-spacing: 0.05em; } .submit-btn { width: 100%; padding: 15px; background: #000000; color: #ffffff; border: none; font-family: 'Helvetica Neue Condensed Bold', 'Helvetica', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0.1em; cursor: pointer; transition: opacity 0.3s ease; } .form-group select { appearance: none; -webkit-appearance: none; -moz-appearance: none; border-radius: 4px; color: #000000; font-weight: 700; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 12px center; background-size: 24px 24px; } .form-group select option { font-family: 'Helvetica Neue Condensed Bold', 'Helvetica', sans-serif; font-size: 16px; color: #000000; font-weight: 700; } body.visual-effects-disabled .submit-btn { cursor: pointer !important; } .submit-btn:hover { opacity: 0.8; } .blending-item { mix-blend-mode: difference; z-index: 2; } body.visual-effects-disabled .blending-item { mix-blend-mode: normal; } /* iOS WebKit: mix-blend-mode on position:fixed blocks touch events. We keep the blend mode for visuals and use a JS touch-proxy overlay instead. These styles support the overlay approach. */ @media (hover: none) and (pointer: coarse) { /* Touch overlay proxies: invisible buttons above the blended nav */ .nav-touch-proxy { position: fixed; z-index: 250001 !important; background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; pointer-events: auto !important; /* No mix-blend-mode — this is the key: these receive touches */ } /* When menu is open on touch devices, REMOVE blend mode from the nav. This lets real touch events work on all sidebar items (links, buttons, toggles) without needing proxy overlays for every element. Uses a dedicated class that is removed AFTER the close transition finishes (450ms) to avoid a visual pop/flash. */ body.menu-blend-override nav.blending-item { mix-blend-mode: normal !important; } /* Hamburger X is already black via .menu-toggle.active span — visible on white sidebar. Logo needs to be darkened since blend mode no longer inverts it against the white sidebar background. */ body.menu-blend-override nav.blending-item .logo img { filter: brightness(0); } } body.visual-effects-disabled .dropdown-menu { mix-blend-mode: normal; } body.visual-effects-disabled .dropdown-menu * { mix-blend-mode: normal; } /* Responsive */ /* Mobile small (< 576px) */ @media (max-width: 575px) { .preloader-sober { max-width: 95vw; padding: 1rem 0.5rem; border-radius: 0; } .preloader-logo img { width: 130px; } .nav-container { padding: 0 15px; } .menu-toggle { left: 15px; padding-left: 0; width: 40px; min-width: 40px; } .logo { position: relative; left: 0; } .logo img { width: 120px; } .dropdown-link { font-size: 22px; padding: 20px 0; } } /* Mobile (576px - 767px) */ @media (min-width: 576px) and (max-width: 767px) { .preloader-sober { max-width: 96vw; padding: 1.1rem 0.5rem; border-radius: 0; } .preloader-logo img { width: 140px; } .logo img { width: 130px; } .dropdown-link { font-size: 24px; } } /* Center full-width mobile sidebar menu links */ @media (max-width: 767px) { .menu-links { align-items: center; } .dropdown-link { text-align: center; width: 100%; } .dropdown-link:hover { transform: translateX(0) translateZ(0); } /* Center Social Media toggle button */ .dropdown-toggle { justify-content: center; } /* Center submenu links (Instagram, Tiktok) */ .submenu { display: flex; flex-direction: column; align-items: center; padding-left: 0; } .submenu-link { text-align: center; width: 100%; } .submenu-link:hover { transform: translateX(0); } } /* Tablet portrait (768px - 991px) */ @media (min-width: 768px) and (max-width: 991px) { .preloader-logo img { width: 160px; } .logo img { width: 140px; } .dropdown-link { font-size: 25px; } .logo { top: 0; transform: none; margin: 0 auto; } .logo img { max-width: 100px; margin-top: 0; margin-bottom: 0; padding-top: 6px; padding-bottom: 6px; box-sizing: content-box; } .nav-controls { right: 10px; gap: 15px; } .control-btn svg { width: 24px; height: 24px; } .dropdown-menu { width: 100%; padding: 80px 40px 40px 40px; } .dropdown-link { font-size: 28px; padding: 25px 0; } .sidebar-control-btn { width: 44px; height: 44px; padding: 10px; } .sidebar-control-btn svg { width: 24px; height: 24px; } .control-status-message { font-size: 12px; } } /* Mobile pequeño (480px y menor) - DEBE IR PRIMERO */ @media (max-width: 480px) { .nav-container { padding: 10px 15px 0 15px; min-height: 56px; } .menu-toggle { left: 15px; gap: 5px; padding: 10px 10px 10px 6px; } .menu-toggle span { width: 24px; height: 2px; } .logo img { max-width: 75px; padding-top: 8px; padding-bottom: 8px; } .nav-controls { right: 15px; gap: 10px; } .control-btn { padding: 10px; min-width: 44px; min-height: 44px; } .control-btn svg { width: 20px; height: 20px; } .dropdown-menu { width: 100%; max-width: 100vw; padding: 80px 30px 40px 30px; } .dropdown-menu::before { width: 100%; max-width: 100vw; } .dropdown-link { font-size: 24px; padding: 20px 0; } .sidebar-controls { gap: 16px; padding-top: 30px; } .sidebar-control-btn { width: 40px; height: 40px; padding: 8px; } .sidebar-control-btn svg { width: 22px; height: 22px; } .control-status-message { font-size: 11px; } } /* Dispositivos muy pequeños como iPhone 12 Pro (390px) - SOBREESCRIBE lo anterior */ @media (max-width: 420px) { .dropdown-menu { width: 100vw; max-width: 100vw; padding: 80px 25px 40px 25px; } .dropdown-menu::before { width: 100vw; max-width: 100vw; } .logo img { max-width: 70px; } } /* Image Link Styles */ .image-link, .image-link img, .video-link, .video-link video, img, a { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-select: none; pointer-events: auto; } img, a { -webkit-user-drag: none !important; -khtml-user-drag: none !important; -moz-user-drag: none !important; -o-user-drag: none !important; user-select: none !important; pointer-events: auto; /* Keep as auto */ transition: 0.2s ease-in-out; } .video-link { display: block; position: relative; width: 100%; height: 100%; text-decoration: none; pointer-events: auto; transition: 0.2s ease-in-out; } .image-link { display: block; position: relative; width: 100%; height: 100%; text-decoration: none; pointer-events: auto; transition: 0.2s ease-in-out; } .image-link img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .video-link video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transform: translateZ(0); will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Tooltip Styles */ .tooltip { position: absolute; bottom: -40px; left: 50%; color: white; padding: 4px 24px; /* padding reducido */ border-radius: 999px; font-size: 13px; /* fuente ligeramente más pequeña */ white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 100; text-transform: uppercase; font-family: 'Helvetica Neue Condensed Bold', 'Helvetica', sans-serif; letter-spacing: 0.05em; background: transparent; overflow: visible; transform: translateX(-50%) scale(0.92); display: inline-block; line-height: 1.3; backdrop-filter: blur(22px) brightness(0.001) contrast(5) saturate(0.2); /* negro absoluto */ mix-blend-mode: difference; backdrop-filter: none; } /* Canvas container for nebula effect */ .tooltip .nebula-canvas { position: absolute; pointer-events: none; border-radius: inherit; z-index: 1; /* Sin blur para máxima nitidez y enfoque */ filter: none; mask-image: radial-gradient(ellipse at center, black 15%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.3) 65%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse at center, black 15%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.3) 65%, transparent 100%); mix-blend-mode: normal; } /* Outer glow for tooltip - bordes difuminados */ .tooltip::before { content: ""; position: absolute; inset: -10px -32px; /* área ligeramente reducida */ border-radius: 999px; background: radial-gradient(ellipse 90% 35% at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0.88) 76%, rgba(0, 0, 0, 0.68) 82%, rgba(0, 0, 0, 0.42) 88%, rgba(0, 0, 0, 0.20) 94%, rgba(0, 0, 0, 0) 100%); pointer-events: none; filter: blur(50px); opacity: 6.0; z-index: -2; } /* Subtle edge highlight */ .tooltip::after { content: ""; position: absolute; inset: -6px -22px; /* área ligeramente reducida */ border-radius: 999px; background: radial-gradient(ellipse 85% 30% at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 62%, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0.86) 78%, rgba(0, 0, 0, 0.64) 85%, rgba(0, 0, 0, 0.38) 92%, rgba(0, 0, 0, 0.16) 97%, rgba(0, 0, 0, 0) 100%); mix-blend-mode: multiply; pointer-events: none; filter: blur(42px); opacity: 6.5; z-index: -1; } .tooltip::before, .tooltip::after { opacity: 0; /* Keep blur filter from initial declarations instead of resetting to none. Prevents compositing flash on iOS (black rectangle before blur applies). */ transition: opacity 1s cubic-bezier(.25, .1, .25, 1); } .tooltip span { position: relative; z-index: 2; color: white; font-weight: bold; display: block; filter: none; -webkit-text-stroke: 0 transparent; text-shadow: none; padding: 2px 4px; background: none; border-radius: 0; } .image-link:hover .tooltip { opacity: 1; transform: translateX(-50%) scale(1); } .video-link:hover .tooltip { opacity: 1; transform: translateX(-50%) scale(1); } @media (hover: none), (pointer: coarse) { .image-container.mobile-centered .tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); } .image-container.mobile-centered { z-index: 2000; overflow: visible; contain: none; } /* Tooltip pseudo-element shadows visible on mobile when centered */ .image-container.mobile-centered .tooltip::before { opacity: 6.0; } .image-container.mobile-centered .tooltip::after { opacity: 6.5; } /* Override mobile-centered box-shadow with none — ::after handles it */ .image-container.mobile-centered { box-shadow: none !important; } } /* iPhone 13 mini & small screens: disable pseudo-element shadows to avoid compositing flash (translucent black rectangle before blur applies). Box-shadow on .mobile-centered provides sufficient shading. */ @media (hover: none) and (max-width: 430px), (pointer: coarse) and (max-width: 430px) { .tooltip::before, .tooltip::after { display: none !important; } } .image-link:hover { transform: scale(1.05); } /* Disable link during drag to allow smooth dragging */ .dragging .image-link { pointer-events: none; } .image-link, .image-link img { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; } /* Page fade in/out animations */ body { animation: fadeIn 1.5s ease forwards; transition: opacity 0.5s ease; } body.unloading { opacity: 0; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Grain Canvas */ /* Grain canvas: fondo de ruido, siempre al fondo, sin opacidad forzada ni animación */ #grainCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: 1 !important; } body.unloading #grainCanvas { opacity: 0; } @keyframes fadeInGrain { from { opacity: 0; } to { opacity: 0.8; } } /* Transition overlay */ #transitionOverlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #F0F0F0; z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } body.unloading #transitionOverlay { opacity: 1; } /* Update video background for fade effect */ #video-background video { transition: filter 0.5s ease; } body.unloading #video-background video { filter: brightness(0) blur(10px); } /* Morph Transition Styles */ body.morphing #canvas, body.morphing nav, body.morphing #grainCanvas { opacity: 0; transition: opacity 0.5s ease; } /* Landing Page */ .coming-soon-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; } .coming-soon-container img { max-width: 300px; max-height: 200px; } @media screen and (max-width:992px) { .coming-soon-container img { max-width: 200px; } } .content { text-align: center; max-width: 600px; width: 100%; position: relative; z-index: 1; } .tagline { font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 300; letter-spacing: 0.1em; margin-bottom: 3rem; color: #000; } .email-form-wrapper { margin-bottom: 1.5rem; } .email-form { display: flex; gap: 0; max-width: 500px; margin: 0 auto; border: 1px solid #fff; background: rgba(255, 255, 255, 0.05); transition: all 0.3s ease; } .email-form:focus-within { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.08); } .email-input { flex: 1; padding: 1rem 1.5rem; background: rgba(0, 0, 0, 0.4); /* translucent black */ backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* Safari support */ border: 1px solid rgba(255, 255, 255, 0.15); color: #fff; font-size: 1rem; outline: none; letter-spacing: 0.02em; transition: all 0.3s ease; } .email-input::placeholder { color: rgba(255, 255, 255, 0.6); } /* Optional: glow or highlight when focused */ .email-input:focus { border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 20px rgba(255, 255, 255, 0.15); } .submit-btn { padding: 1rem 2rem; background: #fff; color: #000; border: none; font-size: 1rem; font-weight: 500; letter-spacing: 0.05em; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; } .submit-btn:hover { background: rgba(255, 255, 255, 0.9); transform: translateX(-2px); } .submit-btn:active { transform: translateX(-2px) scale(0.98); } .success-message { display: none; color: rgba(255, 255, 255, 0.9); font-size: 1rem; margin-top: 1rem; letter-spacing: 0.05em; animation: fadeIn 0.5s ease; } .success-message.show { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .sub-text { font-size: 0.875rem; color: #000; letter-spacing: 0.1em; font-weight: 300; } /* Mobile responsiveness */ @media (max-width: 768px) { .email-form { flex-direction: column; } .email-input { padding: 1rem; text-align: center; } .submit-btn { padding: 1rem; } .brand-name { letter-spacing: 0.2em; } } /* Makes everything use GPU */ #cursorCanvas, #grainCanvas, #canvas, .image-container { /* will-change: transform; -> USE ON ANIMATION ONLY */ backface-visibility: hidden; perspective: 1000px; } /* Grid */ .hero { background-repeat: no-repeat; background-size: contain; background-position: center; min-height: 100vh; display: flex; align-items: center; justify-content: center; color: #fff; position: relative; overflow: hidden; } .hero h1 { font-size: 12rem; position: relative; z-index: 2; text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.5); } @media (max-width: 768px) { .hero h1 { font-size: 6rem; } } .grid-view-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 34px; } /* Cinema Mode overlays and controls */ #cinemaDim, #dimOverlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); opacity: 0; transition: opacity 0.28s ease; pointer-events: none; } .cinema-close { position: fixed; top: 18px; right: 18px; z-index: 100002; background: rgba(255, 255, 255, 0.06); color: #fff; border: none; width: 44px; height: 44px; border-radius: 22px; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; backdrop-filter: blur(6px); } body.visual-effects-disabled .cinema-close { cursor: pointer !important; } .cinema-close:hover { background: rgba(255, 255, 255, 0.12); } .item { height: 750px; /* you can change this */ overflow: hidden; } .item img { width: 100%; height: 100%; object-fit: cover; /* makes image fill box while keeping look nice */ } /* 768px */ @media (max-width: 768px) { .grid-view-content { grid-template-columns: repeat(2, 1fr); } .item { height: 500px; } } /* 576px */ @media (max-width: 576px) { .grid-view-content { grid-template-columns: 1fr; } .item { height: 400px; } } /* Cinema Mode Controls */ .cinema-controls { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 100002; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); padding: 40px 20px 20px 20px; display: flex; flex-direction: column; gap: 12px; pointer-events: auto; max-width: 100vw; width: 100%; } .progress-bar-container { display: flex; align-items: center; gap: 10px; width: 100%; } .progress-bar { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.2); border-radius: 3px; cursor: pointer; position: relative; transition: height 0.2s ease; } body.visual-effects-disabled .progress-bar { cursor: pointer !important; } .progress-bar:hover { height: 8px; } .progress-fill { height: 100%; background: #ffffff; border-radius: 3px; width: 0%; position: relative; } .progress-fill::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: #ffffff; border-radius: 50%; opacity: 0; transition: opacity 0.2s ease; } .progress-bar:hover .progress-fill::after { opacity: 1; } .time-display { color: #ffffff; font-size: 12px; font-family: 'Helvetica Neue Condensed Bold', 'Helvetica', sans-serif; white-space: nowrap; min-width: 60px; } .controls-bottom { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; } .play-pause-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: #ffffff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.2s ease; backdrop-filter: blur(6px); } body.visual-effects-disabled .play-pause-btn { cursor: pointer !important; } .play-pause-btn:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.5); } .volume-control { display: flex; align-items: center; gap: 10px; } .volume-icon { color: #ffffff; cursor: pointer; font-size: 18px; transition: opacity 0.2s ease; } body.visual-effects-disabled .volume-icon { cursor: pointer !important; } .volume-icon:hover { opacity: 0.7; } .volume-slider { width: 100px; height: 4px; -webkit-appearance: none; appearance: none; background: rgba(255, 255, 255, 0.2); border-radius: 2px; cursor: pointer; outline: none; } body.visual-effects-disabled .volume-slider { cursor: pointer !important; } .volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; background: #ffffff; border-radius: 50%; cursor: pointer; transition: background 0.2s ease; } .volume-slider::-webkit-slider-thumb:hover { background: #f0f0f0; } .volume-slider::-moz-range-thumb { width: 12px; height: 12px; background: #ffffff; border-radius: 50%; cursor: pointer; border: none; transition: background 0.2s ease; } .volume-slider::-moz-range-thumb:hover { background: #f0f0f0; } .preloader-toggles-bottom .sidebar-control-buttons { mix-blend-mode: difference; } /* ======================================== MOBILE PERFORMANCE OPTIMIZATIONS ======================================== */ /* Reduce expensive effects on mobile devices */ @media (max-width: 1024px) { /* Reduce backdrop-filter blur intensity (very expensive on mobile) */ .preloader.loaded { backdrop-filter: blur(10px) brightness(1.05); -webkit-backdrop-filter: blur(10px) brightness(1.05); } /* Disable motion blur on mobile */ .motion-blur-enabled { filter: none !important; } /* Simplify transitions on mobile */ .image-container { transition: filter 0.2s ease, opacity 0.2s ease !important; } /* Reduce will-change usage to prevent excessive layer creation */ .preloader.loaded { will-change: auto; } .preloader-logo img { will-change: auto; } /* Optimize video rendering on mobile */ #videos-background video { opacity: 0.05; /* Reduce from 0.08 for better performance */ will-change: auto; } /* Simplify menu animations */ .dropdown-menu { transition: transform 0.3s ease, opacity 0.3s ease !important; } /* Reduce blur effects */ #canvas.has-hover .image-container { opacity: 0.8; /* Less dramatic than 0.7 */ } /* Optimize grain canvas */ #grainCanvas { will-change: auto; } /* Add performance hints for isolated components */ .image-container { contain: layout style paint; } .preloader-content { contain: layout style; } /* nav contain: layout style — REMOVED: breaks iOS Safari touch hit-testing on position:fixed elements. Nav is lightweight, no perf benefit. */ body.menu-open nav .logo img { filter: invert(1) brightness(0) !important; } } /* Accessibility: Respect user's motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Disable grain effect animation */ #grainCanvas { display: none !important; } /* Disable cursor effects */ #customCursor, #trailCanvas { display: none !important; } /* Show default cursor */ body, body * { cursor: auto !important; } } /* Extra small mobile devices (< 375px) */ @media (max-width: 374px) { .preloader-logo img { width: 100px; } .logo img { max-width: 65px; } .menu-toggle { width: 36px; min-width: 36px; } .dropdown-link { font-size: 20px; padding: 18px 0; } } /* Optimize for high-DPI mobile screens */ @media (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2), (max-width: 1024px) and (min-resolution: 192dpi) { /* Reduce grain resolution on high-DPI mobile to save memory */ #grainCanvas { image-rendering: auto; } } /* Landscape mobile optimization */ @media (max-width: 1024px) and (orientation: landscape) { .preloader-content { max-width: 90vw; padding: 1.5rem 1rem; } .preloader-logo img { width: 120px; } .nav-container { padding: 8px 20px; } } /* Touch-specific optimizations */ @media (hover: none) and (pointer: coarse) { /* Increase touch targets for better usability */ .menu-toggle { min-width: 44px; min-height: 44px; padding: 12px; } .sidebar-control-btn { min-width: 44px; min-height: 44px; } .dropdown-link { padding: 22px 0; } /* Remove hover effects on touch devices */ .image-container:hover img { filter: grayscale(1); } /* On touch: by default no CSS-hover opacity dimming, but allow JS-driven mobile-centered dimming */ #canvas.has-hover .image-container { opacity: 0.7; transition: opacity 1.2s cubic-bezier(.22, .08, .25, 1), --shadow-opacity 1.4s cubic-bezier(.22, .08, .25, 1); } #canvas.has-hover .image-container.is-hovered, #canvas.has-hover .image-container.mobile-centered { opacity: 1; } /* Stronger shadow and slower transitions for mobile devices */ .image-container.is-hovered, .image-container.mobile-centered { /* No box-shadow on mobile — use ::after pseudo-element instead (iOS compositing bug) */ box-shadow: none; transition: opacity 1.2s cubic-bezier(.22, .08, .25, 1), --shadow-opacity 1.4s cubic-bezier(.22, .08, .25, 1); } /* Enable the ::after shadow glow on mobile (always block so fade-out transition works) */ .image-container::after { display: block; } /* ::after opacity is driven by --shadow-opacity custom property set from JS */ } /* --- PAGE LOADER (LIGHTWEIGHT) --- */ .page-loader { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #ffffff; z-index: 1000000; opacity: 1; transition: opacity 0.5s cubic-bezier(.77, 0, .18, 1); } /* Hidden until load takes longer than threshold */ .page-loader.page-loader-pending { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .page-loader.hidden { opacity: 0; pointer-events: none; } .page-loader-content { width: min(380px, 90vw); min-height: auto; padding: 0; gap: 1rem; } .page-loader-bar { width: 35%; animation: pageLoaderIndeterminate 1.1s ease-in-out infinite; } .page-loader-text { text-align: center; opacity: 0.8; } @keyframes pageLoaderIndeterminate { 0% { transform: translateX(-110%); } 100% { transform: translateX(280%); } }