/* ============================================================ Gamenest — CINEMATIC LAYER Additive enhancement on top of style.css. Nothing here rewrites existing rules; it layers atmosphere, an energy cursor, premium micro-interactions and a cinematic hero scene. Palette reuses style.css tokens (--brand coral, --brand-2 red, --brand-3 crimson, --accent amber, --success green). Built section-by-section — this pass: FOUNDATION + HERO. ============================================================ */ /* ------------------------------------------------------------ 1. ENERGY CURSOR (global) — coral orb + amber dot + trail Enabled only on fine pointers & when motion is allowed (JS adds .cine-cursor-on to ). Keyboard/touch keep the native cursor. ------------------------------------------------------------ */ .cine-cursor-on { cursor: none; } .cine-cursor-on a, .cine-cursor-on button, .cine-cursor-on input, .cine-cursor-on textarea, .cine-cursor-on select, .cine-cursor-on label { cursor: none; } .cine-orb, .cine-dot { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); will-change: transform; } .cine-orb { width: 34px; height: 34px; mix-blend-mode: screen; background: radial-gradient(circle, rgba(252,81,48,.55), rgba(224,4,11,.15) 60%, transparent 72%); box-shadow: 0 0 30px rgba(252,81,48,.6); transition: width .25s ease, height .25s ease, background .25s ease; } .cine-dot { width: 6px; height: 6px; background: #ffd9b0; box-shadow: 0 0 10px rgba(255,166,43,.9); } .cine-orb.is-hot { width: 60px; height: 60px; background: radial-gradient(circle, rgba(255,166,43,.5), rgba(252,81,48,.2) 55%, transparent 72%); } .cine-orb.is-down { width: 24px; height: 24px; } .cine-cursor-canvas { position: fixed; inset: 0; z-index: 9998; pointer-events: none; } /* ------------------------------------------------------------ 2. CINEMATIC REVEAL (utility) — camera push-in Applied via [data-cine] + .is-in (toggled by JS). Transform/opacity only. Optional stagger via --d. ------------------------------------------------------------ */ [data-cine] { opacity: 0; transform: translateY(38px) scale(.98); transition: opacity .9s cubic-bezier(.16,.84,.34,1) var(--d,0s), transform .9s cubic-bezier(.16,.84,.34,1) var(--d,0s), filter .9s ease var(--d,0s); filter: blur(6px); } [data-cine].is-in { opacity: 1; transform: none; filter: none; } /* ------------------------------------------------------------ 3. PREMIUM BUTTONS (global) — magnetic (JS) + glow + ripple Enhances existing .btn without changing its base look. ------------------------------------------------------------ */ .btn { position: relative; overflow: hidden; will-change: transform; } .btn-primary::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), transparent 60%); } .btn-primary:hover::after { opacity: .55; } .btn-ghost:hover { box-shadow: 0 0 0 1px rgba(252,81,48,.5), 0 0 26px -6px rgba(252,81,48,.6); } .cine-ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, rgba(255,214,176,.7), rgba(252,81,48,.2) 60%, transparent 70%); animation: cine-rip .6s ease-out forwards; } @keyframes cine-rip { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } } /* ------------------------------------------------------------ 4. 3D TILT (utility) — cards / hero visual (JS drives the vars) ------------------------------------------------------------ */ .cine-tilt { transform-style: preserve-3d; will-change: transform; transition: transform .25s ease; } /* Interactive cards (Phase 3): glass border + cursor-follow glare. Scoped to .card/.game-card so it never clashes with .hero-visual::after. */ .card.cine-tilt, .game-card.cine-tilt { position: relative; } .card.cine-tilt::after, .game-card.cine-tilt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(255,166,43,.16), transparent 60%); } .card.cine-tilt:hover::after, .game-card.cine-tilt:hover::after { opacity: 1; } .card.cine-tilt:hover, .game-card.cine-tilt:hover { border-color: rgba(252,81,48,.5); box-shadow: 0 24px 50px -18px rgba(0,0,0,.6), 0 0 30px -10px rgba(252,81,48,.5); } /* Inventory rarity (Phase 4) — badge injected by initInventory() */ .rarity-badge { position: absolute; top: 12px; right: 12px; z-index: 5; padding: 4px 9px; border-radius: 999px; font-family: var(--font); font-size: .56rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .rarity-common { background: #6b5b54; color: #fff; } .rarity-rare { background: var(--brand-2); color: #fff; } .rarity-epic { background: var(--brand); color: #fff; } .rarity-legendary { background: var(--accent); color: #170d09; box-shadow: 0 0 14px rgba(255,166,43,.7); } /* All game cards share one uniform frame (per feedback) — rarity is shown only by the small badge label, not by a different border/glow. */ /* Quest chain (Phase 5): steps power on in sequence when scrolled into view. Additive glow only — never hides content. */ .pipeline .step { transition: border-color .45s ease var(--qd,0s), box-shadow .45s ease var(--qd,0s); } .pipeline .step b { transition: color .45s ease var(--qd,0s), text-shadow .45s ease var(--qd,0s); } .pipeline .step.is-unlocked { border-color: rgba(252,81,48,.4); box-shadow: 0 0 20px -8px rgba(252,81,48,.6); } .pipeline .step.is-unlocked b { color: var(--brand); text-shadow: 0 0 14px rgba(252,81,48,.7); } .process-item .num { transition: text-shadow .5s ease var(--qd,0s); } .process-item.is-unlocked .num { text-shadow: 0 0 22px rgba(224,4,11,.55); } /* Quest glyph on section labels — turns the eyebrow into a subtle HUD tag */ .eyebrow::before { content: '\25C8'; margin-right: .55em; color: var(--brand); } /* Stats as XP (Phase 6): coral bar under each stat, fills on scroll-in */ .xp-bar { display: block; height: 5px; margin: 12px auto 0; max-width: 120px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(252,81,48,.15); } .xp-fill { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--brand-2), var(--brand) 60%, var(--accent)); box-shadow: 0 0 12px rgba(252,81,48,.7); transition: width 1.4s cubic-bezier(.16,.84,.34,1); } /* Portal CTAs (Phase 7): the CTA panel becomes a portal gateway */ .cta-band { position: relative; overflow: hidden; } .cta-band::before { content: ''; position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none; width: 480px; height: 480px; transform: translate(-50%, -50%); border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(252,81,48,.25), transparent 40%, rgba(255,166,43,.2), transparent 70%, rgba(224,4,11,.22), transparent); animation: cine-spin 14s linear infinite; opacity: .5; } .cta-band > * { position: relative; z-index: 1; } /* Contact "Final Quest": frame the success state as a completed quest (green stays reserved for success). */ .form-success { box-shadow: 0 0 24px -6px rgba(51,207,122,.5); font-weight: 500; } .form-success::before { content: '\2714 Quest Complete'; display: block; font-family: var(--font); font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 5px; } /* Nav polish (Phase 8): glow the coral underline + active label */ .nav-links a::after { box-shadow: 0 0 10px rgba(252,81,48,.7); } .nav-links a.active { text-shadow: 0 0 12px rgba(252,81,48,.45); } /* Page-transition curtain (Phase 8): a warm-void panel that swipes upward with a thin coral leading edge — clean and directional (replaces the red glow). */ .cine-curtain { position: fixed; inset: 0; z-index: 9997; pointer-events: none; transform: translateY(100%); background: linear-gradient(180deg, #1a1210 0%, #0a0707 55%); transition: transform .55s cubic-bezier(.76, 0, .24, 1); } .cine-curtain::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--brand), var(--accent) 50%, var(--brand-2), transparent); box-shadow: 0 0 18px rgba(252,81,48,.7); } /* Section atmosphere (Phase 9): inner-page banners share the hero's world */ .page-banner { position: relative; overflow: hidden; } .page-banner::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(600px 320px at 82% -10%, rgba(252,81,48,.16), transparent 60%), radial-gradient(500px 320px at 8% 120%, rgba(138,2,8,.32), transparent 55%); } .page-banner > * { position: relative; z-index: 1; } /* Footer as "credits": a thin coral light along the top edge */ .site-footer { position: relative; } .site-footer::before { content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(252,81,48,.5), transparent); } /* ============================================================ 5. HERO SCENE — the opening cinematic ============================================================ */ .hero { position: relative; } .hero .container { position: relative; z-index: 3; } /* headline: bigger, heavier, with a warm glow */ .hero h1 { font-size: clamp(2.9rem, 7.5vw, 5.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; text-shadow: 0 0 42px rgba(224,4,11,.28); } .hero .eyebrow { position: relative; } /* --- atmosphere container (aria-hidden) --- */ .hero-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .hero-fx > * { position: absolute; will-change: transform; } /* particles canvas */ .hero-particles { inset: 0; width: 100%; height: 100%; } /* portal ring removed per feedback (big circle behind the visual) */ @keyframes cine-spin { to { transform: rotate(360deg); } } /* volumetric fog blobs */ .hero-fog { border-radius: 50%; filter: blur(50px); opacity: .5; } .hero-fog--1 { width: 55vw; height: 55vw; left: -12vw; bottom: -18vw; background: radial-gradient(circle, rgba(224,4,11,.42), transparent 62%); } .hero-fog--2 { width: 45vw; height: 45vw; right: -6vw; top: -12vw; background: radial-gradient(circle, rgba(252,81,48,.32), transparent 60%); } /* energy crystals removed per feedback (they overlapped content) */ /* light streak sweeping across the sky */ .hero-streak { top: 20%; left: -30%; width: 40%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,166,43,.9), transparent); filter: blur(1px); transform: rotate(-14deg); opacity: 0; animation: cine-streak 9s ease-in-out infinite; animation-delay: 3s; } @keyframes cine-streak { 0%, 78% { opacity: 0; transform: translateX(0) rotate(-14deg); } 84% { opacity: .9; } 100% { opacity: 0; transform: translateX(240%) rotate(-14deg); } } /* the visual becomes a floating island (rim outline removed; image centered) */ .hero-visual { max-width: 460px; margin-inline: auto; } .hero-visual.cine-tilt img { box-shadow: 0 40px 90px rgba(224,4,11,.35), var(--shadow); } .hero-badge { backdrop-filter: blur(6px); background: rgba(33,21,20,.82); border-color: rgba(252,81,48,.3); } /* scroll cue */ .hero-scrollcue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); text-decoration: none; } .hero-scrollcue .ring { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(252,81,48,.6); box-shadow: 0 0 12px rgba(252,81,48,.5); animation: cine-pulse 2s ease-in-out infinite; } @keyframes cine-pulse { 0%,100%{ transform: scale(1); opacity: .55;} 50%{ transform: scale(1.22); opacity: 1;} } /* ------------------------------------------------------------ 6. REDUCED MOTION — quiet everything, keep it usable ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .cine-orb, .cine-dot, .cine-cursor-canvas { display: none !important; } .cine-cursor-on, .cine-cursor-on * { cursor: auto; } [data-cine] { opacity: 1; transform: none; filter: none; transition: none; } .hero-streak, .hero-scrollcue .ring, .cta-band::before { animation: none; } .hero-fx { opacity: .5; } } /* touch: no custom cursor, lighter atmosphere */ @media (hover: none) { .cine-orb, .cine-dot, .cine-cursor-canvas { display: none !important; } }