/* ========================================================================= THE JINN — styles.css Hand-written rules that sit ON TOP of Tailwind (loaded via CDN in on every page). Tailwind utilities cover layout/spacing/color; this file covers the things utilities can't express cleanly: the cinematic hero canvas/preloader mechanics, the scroll-reveal system, gradient text, decorative motifs (glow orbs, dividers, particles), and card/border treatments carried over from the original org.style.css. ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background-color: #0a0a12; } /* -------------------------------------------------------------------- */ /* Scrollbar — gold, matching the brand accent */ /* -------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #0a0a12; } ::-webkit-scrollbar-thumb { background: rgba(201, 162, 39, 0.5); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(201, 162, 39, 0.7); } /* -------------------------------------------------------------------- */ /* Gradient text — gold (brand) and violet (jinn-energy) variants */ /* -------------------------------------------------------------------- */ .text-gold-gradient { background: linear-gradient(135deg, #d4a853 0%, #c9a227 50%, #b8860b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .text-fire-gradient { background: linear-gradient(135deg, #ff8c42 0%, #ff6b35 50%, #e55039 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .text-violet-gradient { background: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 55%, #6d28d9 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .text-glow-gold { text-shadow: 0 0 10px rgba(201, 162, 39, 0.5), 0 0 20px rgba(201, 162, 39, 0.3), 0 0 40px rgba(201, 162, 39, 0.2); } .text-glow-violet { text-shadow: 0 0 10px rgba(139, 92, 246, 0.5), 0 0 20px rgba(139, 92, 246, 0.3), 0 0 40px rgba(139, 92, 246, 0.2); } /* -------------------------------------------------------------------- */ /* Navigation — transparent over the hero, blurred solid once scrolled */ /* -------------------------------------------------------------------- */ #site-nav { background: transparent; border-bottom: 1px solid transparent; } #site-nav.site-nav--solid { background: rgba(10, 10, 18, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom-color: rgba(255, 255, 255, 0.08); } .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: #c9a227; transition: width 0.3s; } .nav-link:hover::after { width: 100%; } /* -------------------------------------------------------------------- */ /* HERO — cinematic frame-sequence scroll engine */ /* -------------------------------------------------------------------- */ #hero { background-color: #05050a; } #hero-canvas { display: block; } /* Reduced-motion / no-JS / frame-0-failure fallback: canvas is hidden and this class paints a single strong frame as a plain CSS background. */ .hero-static-fallback { background: url('../images/hero-poster.webp') center center / cover no-repeat; } .hero-badge span { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Floating embers drifting over the hero — decorative only, matches the amber sparks visible throughout the frame sequence itself. */ .ember { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 176, 32, 0.9), rgba(255, 107, 53, 0)); pointer-events: none; animation: emberFloat 7s ease-in-out infinite; } @keyframes emberFloat { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.35; } 50% { transform: translateY(-30px) scale(1.15); opacity: 0.9; } } #scroll-indicator { animation: scrollFloat 3s ease-in-out infinite; transition: opacity 0.3s ease; } @keyframes scrollFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* -------------------------------------------------------------------- */ /* Preloader */ /* -------------------------------------------------------------------- */ #preloader { transition: opacity 0.4s ease; } /* -------------------------------------------------------------------- */ /* Scroll-reveal system — fade + rise on first intersection */ /* -------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.16, 0.8, 0.24, 1), transform 0.8s cubic-bezier(0.16, 0.8, 0.24, 1); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-48px); transition: opacity 0.8s cubic-bezier(0.16, 0.8, 0.24, 1), transform 0.8s cubic-bezier(0.16, 0.8, 0.24, 1); } .reveal-left.is-visible { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(48px); transition: opacity 0.8s cubic-bezier(0.16, 0.8, 0.24, 1), transform 0.8s cubic-bezier(0.16, 0.8, 0.24, 1); } .reveal-right.is-visible { opacity: 1; transform: translateX(0); } .reveal-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.8s cubic-bezier(0.16, 0.8, 0.24, 1), transform 0.8s cubic-bezier(0.16, 0.8, 0.24, 1); } .reveal-scale.is-visible { opacity: 1; transform: scale(1); } /* Staggered entrance for grid/list children */ .reveal-group > .reveal:nth-child(1), .reveal-group > .reveal-scale:nth-child(1) { transition-delay: 0ms; } .reveal-group > .reveal:nth-child(2), .reveal-group > .reveal-scale:nth-child(2) { transition-delay: 100ms; } .reveal-group > .reveal:nth-child(3), .reveal-group > .reveal-scale:nth-child(3) { transition-delay: 200ms; } .reveal-group > .reveal:nth-child(4), .reveal-group > .reveal-scale:nth-child(4) { transition-delay: 300ms; } .reveal-group > .reveal:nth-child(n + 5), .reveal-group > .reveal-scale:nth-child(n + 5) { transition-delay: 400ms; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; transform: none !important; transition: none !important; } } /* -------------------------------------------------------------------- */ /* Section dividers / decorative motifs */ /* -------------------------------------------------------------------- */ .divider-line { height: 1px; width: 60px; } .divider-line.left { background: linear-gradient(to right, transparent, rgba(201, 162, 39, 0.6)); } .divider-line.right { background: linear-gradient(to left, transparent, rgba(201, 162, 39, 0.6)); } .divider-diamond { width: 8px; height: 8px; border: 1px solid rgba(201, 162, 39, 0.6); transform: rotate(45deg); } .divider-square { width: 10px; height: 10px; background: rgba(201, 162, 39, 0.4); transform: rotate(45deg); } .section-line { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(201, 162, 39, 0.3), transparent); } .glow-orb { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; animation: pulseGlow 6s ease-in-out infinite; } .glow-gold { background: rgba(201, 162, 39, 0.12); } .glow-violet { background: rgba(139, 92, 246, 0.12); } .glow-fire { background: rgba(255, 107, 53, 0.08); } @keyframes pulseGlow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* -------------------------------------------------------------------- */ /* Cards — gradient-border treatment (double-background border trick) */ /* -------------------------------------------------------------------- */ .character-card { position: relative; background: linear-gradient(#12121f, #12121f) padding-box, linear-gradient(135deg, rgba(201, 162, 39, 0.5), rgba(139, 92, 246, 0.25), rgba(201, 162, 39, 0.3)) border-box; border: 1px solid transparent; border-radius: 0.75rem; transition: transform 0.5s ease, box-shadow 0.5s ease; } .character-card:hover { transform: scale(1.02); box-shadow: 0 0 40px rgba(201, 162, 39, 0.25); } .character-card .character-image { transition: transform 0.7s ease; } .character-card:hover .character-image { transform: scale(1.08); } .character-card .character-overlay { background: linear-gradient(to top, #0a0a12 0%, rgba(10, 10, 18, 0.65) 45%, transparent 100%); } .character-card .character-description { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.5s ease, opacity 0.5s ease; } .character-card:hover .character-description { max-height: 320px; opacity: 1; } .character-card:hover .character-hover-hint { opacity: 0; } .feature-card { position: relative; background: linear-gradient(145deg, #12121f 0%, #1a1a2f 100%); border-radius: 0.75rem; transition: transform 0.5s ease, box-shadow 0.5s ease; } .feature-card::before { content: ''; position: absolute; inset: 0; border-radius: 0.75rem; padding: 1px; background: linear-gradient(135deg, rgba(201, 162, 39, 0.5), rgba(139, 92, 246, 0.15), rgba(201, 162, 39, 0.3)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .feature-card:hover { transform: translateY(-8px); box-shadow: 0 0 40px rgba(201, 162, 39, 0.18); } .feature-card .feature-icon { transition: color 0.5s ease, transform 0.5s ease, filter 0.5s ease; } .feature-card:hover .feature-icon { color: #ff6b35; transform: scale(1.1); filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.5)); } .feature-card .feature-glow { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, #c9a227, #8b5cf6, #c9a227); opacity: 0; transition: opacity 0.5s ease; border-radius: 0 0 0.75rem 0.75rem; } .feature-card:hover .feature-glow { opacity: 1; } .gallery-item { position: relative; overflow: hidden; border-radius: 0.75rem; transition: transform 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease; } .gallery-item img { transition: transform 0.7s ease; } .gallery-item:hover img { transform: scale(1.08); } .gallery-item:hover { border-color: rgba(201, 162, 39, 0.5); box-shadow: 0 0 30px rgba(201, 162, 39, 0.2); transform: scale(1.01); } .gallery-overlay { opacity: 0; transition: opacity 0.3s ease; } .gallery-item:hover .gallery-overlay { opacity: 1; } .price-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1rem; transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease; } .price-card:hover { border-color: rgba(201, 162, 39, 0.35); background: rgba(255, 255, 255, 0.045); transform: translateY(-4px); } /* -------------------------------------------------------------------- */ /* Buttons */ /* -------------------------------------------------------------------- */ .btn-hero { background: linear-gradient(135deg, #b8860b 0%, #c9a227 50%, #b8860b 100%); color: #0a0a12; border: 1px solid rgba(201, 162, 39, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; } .btn-hero:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(201, 162, 39, 0.4); } .btn-hero-outline { background: transparent; color: #c9a227; border: 2px solid rgba(201, 162, 39, 0.6); transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .btn-hero-outline:hover { background: rgba(201, 162, 39, 0.1); border-color: #c9a227; box-shadow: 0 0 20px rgba(201, 162, 39, 0.3); } /* -------------------------------------------------------------------- */ /* Video modal + gallery lightbox */ /* -------------------------------------------------------------------- */ .modal, .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10, 10, 18, 0.95); display: none; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; } .modal.is-visible, .lightbox.is-visible { display: flex; opacity: 1; } .modal-content, .lightbox-content { animation: scaleIn 0.4s ease; } @keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } .lightbox-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(245, 245, 240, 0.3); border: none; transition: all 0.3s ease; cursor: pointer; } .lightbox-dot:hover { background: rgba(245, 245, 240, 0.5); } .lightbox-dot.active { width: 28px; border-radius: 4px; background: #c9a227; } /* -------------------------------------------------------------------- */ /* Utility */ /* -------------------------------------------------------------------- */ .container-page { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }