/* ========================================================================== DANIEL ZAMBRANO (@danielz.effects) - MOTION LAYER Scroll reveals, marquee, cursor, spotlight cards, aurora & media fallbacks. Loaded after style.css. Every effect degrades gracefully without JS. ========================================================================== */ :root { --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); } /* -------------------------------------------------------------------------- 1. Scroll Progress Bar -------------------------------------------------------------------------- */ .scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 1001; background: var(--gradient-ai-h); box-shadow: var(--glow-cyan); transform: scaleX(0); transform-origin: left center; pointer-events: none; } /* -------------------------------------------------------------------------- 2. Scroll Reveals (only active once JS adds .motion-ready to ) -------------------------------------------------------------------------- */ .motion-ready .reveal-item { opacity: 0; translate: 0 48px; filter: blur(6px); transition: opacity 0.9s var(--ease-out-expo) var(--reveal-delay, 0s), translate 1.1s var(--ease-out-expo) var(--reveal-delay, 0s), filter 0.9s var(--ease-out-expo) var(--reveal-delay, 0s), transform 0.35s var(--transition-smooth), border-color 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease; } .motion-ready .reveal-item.is-inview { opacity: 1; translate: 0 0; filter: blur(0); } /* Word-by-word title reveal */ .split-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; } .split-word-inner { display: inline-block; } .motion-ready .split-title .split-word-inner { translate: 0 110%; rotate: 0 0 1 6deg; transition: translate 1s var(--ease-out-expo) calc(var(--i, 0) * 0.06s), rotate 1s var(--ease-out-expo) calc(var(--i, 0) * 0.06s); } .motion-ready .split-title.is-inview .split-word-inner { translate: 0 0; rotate: 0 0 1 0deg; } /* Section tag: gradient line draws in */ .section-tag { position: relative; } /* -------------------------------------------------------------------------- 3. Aurora Glow behind sections -------------------------------------------------------------------------- */ .section-showcase { overflow-x: clip; } .section-showcase::before { content: ''; position: absolute; top: -10%; right: -15%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(123, 92, 255, 0.16), transparent 60%), radial-gradient(circle at 70% 60%, rgba(0, 229, 255, 0.10), transparent 55%), radial-gradient(circle at 40% 80%, rgba(255, 61, 219, 0.10), transparent 55%); filter: blur(40px); pointer-events: none; z-index: 0; animation: aurora-drift 18s ease-in-out infinite alternate; } .section-showcase:nth-of-type(even)::before { right: auto; left: -20%; animation-duration: 22s; animation-direction: alternate-reverse; } .section-showcase > .section-container { position: relative; z-index: 1; } @keyframes aurora-drift { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(-6%, 8%, 0) rotate(40deg) scale(1.12); } 100% { transform: translate3d(5%, -4%, 0) rotate(80deg) scale(0.95); } } /* Animated shimmer on gradient words */ .gradient-text { /* Loop back to violet so the shimmer has no visible seam */ background: linear-gradient(90deg, var(--color-violet), var(--color-cyan), var(--color-magenta), var(--color-violet)); -webkit-background-clip: text; background-clip: text; background-size: 200% auto; animation: gradient-shift 6s linear infinite; } @keyframes gradient-shift { to { background-position: 200% center; } } /* -------------------------------------------------------------------------- 4. Marquee Band -------------------------------------------------------------------------- */ .marquee-band { position: relative; z-index: 20; background: var(--bg-primary); border-top: 1px solid var(--border-subtle); padding: 1.25rem 0 1rem; overflow: hidden; display: flex; flex-direction: column; gap: 0.55rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marquee-row { display: flex; width: max-content; --marquee-speed: 38s; } .marquee-row.is-reverse .marquee-track { animation-direction: reverse; } .marquee-track { display: flex; align-items: center; gap: 2rem; padding-right: 2rem; flex-shrink: 0; animation: marquee-scroll var(--marquee-speed) linear infinite; } .marquee-track span { font-size: clamp(1.5rem, 3.8vw, 2.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; color: var(--text-primary); } .marquee-track span.is-outline { color: transparent; -webkit-text-stroke: 1px rgba(237, 237, 242, 0.45); transition: color 0.4s ease; } .marquee-band:hover .marquee-track span.is-outline { color: transparent; -webkit-text-stroke-color: var(--color-cyan); } .marquee-track i { font-style: normal; font-size: clamp(0.8rem, 1.6vw, 1.3rem); background: var(--gradient-ai); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .marquee-row.is-small { --marquee-speed: 30s; } .marquee-row.is-small .marquee-track span { font-family: var(--font-mono); font-size: clamp(0.8rem, 1.4vw, 1rem); font-weight: 500; letter-spacing: 0.15em; color: var(--text-secondary); } .marquee-row.is-small .marquee-track i { font-size: 0.9rem; } .marquee-band:hover .marquee-track { animation-play-state: paused; } @keyframes marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } } /* -------------------------------------------------------------------------- 5. Spotlight + 3D Tilt Cards -------------------------------------------------------------------------- */ .vfx-card, .arch-card, .social-card, .pipeline-step, .bio-card-profile { position: relative; --mx: 50%; --my: 50%; } .vfx-card::after, .arch-card::after, .social-card::after, .pipeline-step::after, .bio-card-profile::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(0, 229, 255, 0.10), rgba(123, 92, 255, 0.06) 35%, transparent 65%); z-index: 2; } /* Gradient border that follows the pointer */ .vfx-card::before, .arch-card::before, .social-card::before, .pipeline-step::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient(260px circle at var(--mx) var(--my), var(--color-cyan), var(--color-violet) 40%, transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 3; } .vfx-card:hover::after, .arch-card:hover::after, .social-card:hover::after, .pipeline-step:hover::after, .bio-card-profile:hover::after, .vfx-card:hover::before, .arch-card:hover::before, .social-card:hover::before, .pipeline-step:hover::before { opacity: 1; } .tilt-card { transform-style: preserve-3d; will-change: transform; } /* -------------------------------------------------------------------------- 6. Missing Media Fallback ("render in progress") -------------------------------------------------------------------------- */ .media-fallback { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: flex-start; padding: 1rem; overflow: hidden; background: radial-gradient(circle at 20% 30%, rgba(123, 92, 255, 0.55), transparent 45%), radial-gradient(circle at 80% 70%, rgba(0, 229, 255, 0.45), transparent 45%), radial-gradient(circle at 60% 20%, rgba(255, 61, 219, 0.40), transparent 40%), #0B0B14; background-size: 200% 200%; animation: fallback-mesh 9s ease-in-out infinite alternate; } .media-fallback::before { /* Scanline sweep */ content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, rgba(237, 237, 242, 0.12) 50%, transparent 100%); height: 30%; animation: fallback-scan 3.2s linear infinite; } .media-fallback::after { /* Fine grid */ content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(237, 237, 242, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(237, 237, 242, 0.05) 1px, transparent 1px); background-size: 24px 24px; } .media-fallback-label { position: relative; z-index: 1; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em; color: var(--text-primary); background: rgba(7, 7, 11, 0.6); border: 1px solid var(--border-subtle); padding: 0.35rem 0.6rem; border-radius: 999px; backdrop-filter: blur(6px); } .media-fallback-label::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 0.5rem; border-radius: 50%; background: var(--color-cyan); box-shadow: var(--glow-cyan); animation: fallback-blink 1s steps(2) infinite; vertical-align: middle; } @keyframes fallback-mesh { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } @keyframes fallback-scan { from { transform: translateY(-100%); } to { transform: translateY(400%); } } @keyframes fallback-blink { 50% { opacity: 0.2; } } /* Keep the card badge above the fallback */ .vfx-badge-tag { z-index: 4; } /* -------------------------------------------------------------------------- 7. Filter Transitions -------------------------------------------------------------------------- */ .vfx-card.is-filtered-out { display: none; } /* -------------------------------------------------------------------------- 8. Cursor Follower (desktop / fine pointer only) -------------------------------------------------------------------------- */ /* Cinematic viewfinder cursor: focus brackets, REC dot, timecode */ .has-cine-cursor, .has-cine-cursor body, .has-cine-cursor a, .has-cine-cursor button { cursor: none; } .has-cine-cursor input, .has-cine-cursor textarea { cursor: text; } .cine-cursor { position: fixed; top: 0; left: 0; width: 0; height: 0; pointer-events: none; z-index: 9995; opacity: 0; transition: opacity 0.3s ease; will-change: transform; --size: 30px; --arm: 8px; --tone: #EDEDF2; } .cine-cursor.is-visible { opacity: 1; } .cine-cursor.is-hovering { --size: 58px; --arm: 12px; --tone: var(--color-cyan); } .cine-cursor.is-pressed { --size: 20px; } .cine-bracket { position: absolute; width: var(--arm); height: var(--arm); border: 0 solid var(--tone); filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.6)); transition: transform 0.35s var(--ease-out-expo), width 0.35s var(--ease-out-expo), height 0.35s var(--ease-out-expo), border-color 0.3s ease; } .cine-bracket.tl { border-top-width: 1.5px; border-left-width: 1.5px; transform: translate(calc(var(--size) / -2), calc(var(--size) / -2)); } .cine-bracket.tr { border-top-width: 1.5px; border-right-width: 1.5px; transform: translate(calc(var(--size) / 2 - var(--arm)), calc(var(--size) / -2)); } .cine-bracket.bl { border-bottom-width: 1.5px; border-left-width: 1.5px; transform: translate(calc(var(--size) / -2), calc(var(--size) / 2 - var(--arm))); } .cine-bracket.br { border-bottom-width: 1.5px; border-right-width: 1.5px; transform: translate(calc(var(--size) / 2 - var(--arm)), calc(var(--size) / 2 - var(--arm))); } .cine-rec { position: absolute; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #FF3B3B; box-shadow: 0 0 8px rgba(255, 59, 59, 0.9); animation: cine-rec-blink 1.2s steps(2) infinite; } .cine-cursor.is-hovering .cine-rec { background: var(--color-cyan); box-shadow: 0 0 8px var(--color-cyan); animation: none; } .cine-meta { position: absolute; left: calc(var(--size) / 2 + 8px); top: calc(var(--size) / 2 - 4px); display: flex; flex-direction: column; gap: 2px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; white-space: nowrap; color: rgba(237, 237, 242, 0.7); text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9); transition: left 0.35s var(--ease-out-expo), top 0.35s var(--ease-out-expo); } .cine-label { font-size: 10px; font-weight: 700; color: var(--color-cyan); } .cine-label:empty { display: none; } @keyframes cine-rec-blink { 50% { opacity: 0.25; } } /* Ambient glow that trails the pointer across the page */ .cursor-glow { position: fixed; top: 0; left: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(123, 92, 255, 0.10), rgba(0, 229, 255, 0.05) 40%, transparent 70%); pointer-events: none; z-index: 25; mix-blend-mode: screen; opacity: 0; transition: opacity 0.6s ease; } .cursor-glow.is-visible { opacity: 1; } @media (hover: none), (pointer: coarse) { .cine-cursor, .cursor-glow { display: none; } } /* -------------------------------------------------------------------------- 9. Hero scroll-out helpers -------------------------------------------------------------------------- */ .hero-container { will-change: transform, opacity; } /* -------------------------------------------------------------------------- 10. Reduced Motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .motion-ready .reveal-item, .motion-ready .split-title .split-word-inner { opacity: 1 !important; translate: none !important; rotate: none !important; filter: none !important; } .marquee-track, .section-showcase::before, .gradient-text, .media-fallback, .media-fallback::before { animation: none !important; } .cine-cursor, .cursor-glow { display: none; } } /* -------------------------------------------------------------------------- 11. Hero Motivational Headline: Anton condensed caps + animated AI gradient -------------------------------------------------------------------------- */ .hero-headline { font-family: 'Anton', var(--font-main); font-weight: 400; font-size: clamp(2.6rem, 7.5vw, 6.5rem); text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; } .headline-text { background: linear-gradient(90deg, var(--color-violet), var(--color-cyan), var(--color-magenta), var(--color-violet)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-shift 5s linear infinite; padding: 0.04em 0; } /* The gradient is clipped from the parent, so letters must never get their own transform/animation layer (that made some letters vanish). */ .headline-text .char-word, .headline-text .char-resolved, .headline-text .char-resolved.flash, .headline-text .char-glitch, .headline-text .char-idle { animation: none; transform: none; text-shadow: none; will-change: auto; font-family: inherit; -webkit-text-fill-color: transparent; } /* Undecoded glyphs read as a dimmer, flickering version of the same gradient */ .headline-text .char-glitch { opacity: 0.55; } .headline-text .char-idle { opacity: 0.25; } @media (prefers-reduced-motion: reduce) { .headline-text { animation: none; } } /* -------------------------------------------------------------------------- 12. Preloader "DZ" Monogram -------------------------------------------------------------------------- */ .preloader-scramble-text { font-family: 'Anton', var(--font-main); font-weight: 400; font-size: clamp(6rem, 26vw, 14rem); letter-spacing: 0.02em; line-height: 1; background: linear-gradient(90deg, var(--color-violet), var(--color-cyan), var(--color-magenta), var(--color-violet)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradient-shift 2s linear infinite; transform-origin: center center; } .preloader-scramble-text .char-resolved, .preloader-scramble-text .char-resolved.flash, .preloader-scramble-text .char-glitch, .preloader-scramble-text .char-idle { animation: none; transform: none; text-shadow: none; font-family: inherit; -webkit-text-fill-color: transparent; } .preloader-scramble-text .char-glitch { opacity: 0.55; } /* Quick hand-off: counter clears out before the "DZ" monogram lands */ .preloader-stage-counter.fade-out { transition: opacity 0.15s ease, transform 0.15s ease; } .preloader-stage-name { transition: opacity 0.25s ease 0.12s; } /* -------------------------------------------------------------------------- 13. Compact gallery cards: title overlaid on the clip, description on hover -------------------------------------------------------------------------- */ .vfx-grid .vfx-card { border-radius: 12px; } .vfx-grid .vfx-card-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 2.2rem 0.8rem 0.75rem; background: linear-gradient(180deg, transparent 0%, rgba(7, 7, 11, 0.75) 45%, rgba(7, 7, 11, 0.95) 100%); pointer-events: none; } .vfx-grid .vfx-card-info h3 { font-size: 0.92rem; line-height: 1.2; margin: 0; } .vfx-grid .vfx-card-info p { font-size: 0.75rem; line-height: 1.4; margin: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out-expo), opacity 0.3s ease, margin 0.3s ease; } .vfx-grid .vfx-card:hover .vfx-card-info p { max-height: 6rem; opacity: 1; margin-top: 0.35rem; } .vfx-grid .vfx-badge-tag { top: 0.55rem; left: 0.55rem; padding: 0.2rem 0.45rem; font-size: 0.52rem; letter-spacing: 0.08em; white-space: nowrap; max-width: calc(100% - 1.1rem); overflow: hidden; text-overflow: ellipsis; } /* The "render in progress" label would collide with the title */ .vfx-grid .media-fallback-label { display: none; } @media (max-width: 639px) { .vfx-grid .vfx-card-info { padding: 1.4rem 0.45rem 0.4rem; } .vfx-grid .vfx-card-info h3 { font-size: 0.68rem; } .vfx-grid .vfx-badge-tag { display: none; } } /* Phones: justified rows stretch clips too much on a narrow screen, so use a dense 3-column grid instead — vertical clips take 1 cell, wide clips 2 */ @media (max-width: 639px) { .vfx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 0.4rem; } .vfx-grid::after { display: none; } .vfx-grid > .vfx-card { flex: none; } .vfx-grid .vfx-card-media { aspect-ratio: 3 / 4; } .vfx-grid > .vfx-card[style*="--ar: 1.7778"] { grid-column: span 2; } /* 2 cells + gap, matched to the 3:4 single cells so row heights line up */ .vfx-grid > .vfx-card[style*="--ar: 1.7778"] .vfx-card-media { aspect-ratio: 1.545; } /* First clip spans the full row; with the rest (10 singles + 4 doubles) the grid closes at 7 full rows with no holes */ .vfx-grid > .vfx-card:first-child { grid-column: 1 / -1; } .vfx-grid > .vfx-card:first-child .vfx-card-media { aspect-ratio: 16 / 9; } }