/* ============================================================ BEATS&BYTES — REVOLUTION LAYER · mcartigo.nosso.top Additive, premium "award-site" visual override. Load LAST in so it wins the cascade. RULES THIS FILE OBEYS: - Uses design tokens (tokens.css). No :root redeclare. - Animates GPU-only props: transform / opacity / filter / clip-path / background-position. No layout animation. - No @import, no external fonts/URLs (fonts already loaded). - Disc cards & buttons receive JS-driven transforms elsewhere (.tilt, magnetic). This layer styles sheen/border/glow via pseudo-elements and never sets transform on those roots on hover, so it does NOT fight JS. - Timeline transform reveals come from another agent — here we only touch color / shadow / gradient, never transform. - WCAG-AA preserved: dark text never lightened, white-on-dark text never washed out. Effects sit behind/around text. - prefers-reduced-motion: all infinite/auto motion disabled. ============================================================ */ /* Local helper vars (scoped, not :root tokens) */ .disc-grid, .btn, .nav, .section, .quote-section, .footer, .video-grid, .portfolio-list, .section--timeline { --rev-foil: linear-gradient(115deg, rgba(240,65,53,0) 18%, rgba(240,65,53,.16) 34%, rgba(232,124,43,.20) 46%, rgba(120,150,255,.16) 56%, rgba(240,65,53,0) 72%); --rev-ember: rgba(240,65,53,.55); --rev-ring: 0 0 0 2px var(--accent); } /* ============================================================ 1 · DISCOGRAPHY CARDS — holographic foil + spotlight border ============================================================ */ /* Animated gradient spotlight border (conic sweep, masked to a 1px ring). Pure CSS, no JS. Sits above background, below text. */ .disc-card::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--rev-angle, 0deg), rgba(240,65,53,0) 0deg, rgba(240,65,53,.0) 200deg, var(--accent) 270deg, rgba(232,124,43,.9) 310deg, rgba(240,65,53,0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; } .disc-card:hover::after, .disc-card:focus-visible::after { opacity: .9; } /* Holographic / iridescent foil sheen sweep on hover. Uses a dedicated overlay layer so it does not disturb the existing .disc-card__overlay text-contrast gradient. */ .disc-card__overlay::after { content: ''; position: absolute; inset: 0; background: var(--rev-foil); background-size: 240% 240%; background-position: 0% 0%; mix-blend-mode: screen; opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; } .disc-card:hover .disc-card__overlay::after, .disc-card:focus-visible .disc-card__overlay::after { opacity: .6; background-position: 50% 50%; } /* Sharper grayscale -> color reveal (keep existing img behavior, just push contrast/saturation a touch crisper on hover). */ .disc-card:hover .disc-card__img, .disc-card:focus-visible .disc-card__img { filter: grayscale(0%) brightness(.9) contrast(1.06) saturate(1.08); } /* Polish the ghost number: subtle ember tint on hover */ .disc-card:hover .disc-card__num { -webkit-text-stroke-color: rgba(240,65,53,.16); } /* ============================================================ 2 · BUTTONS — liquid glass, inset highlight, shimmer, ring ============================================================ */ /* Accent: glossy inset highlight + deeper ember shadow. (Shimmer ::before already exists in inline styles — we keep it and add an inset top-light via box-shadow only.) */ .btn--accent { box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.25), 0 1px 1px rgba(0,0,0,.35); background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 42%); transition: background-color 150ms var(--ease), box-shadow 220ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease), transform .3s var(--ease-spring); } .btn--accent:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.3), 0 6px 22px rgba(240,65,53,.34), 0 2px 6px rgba(240,65,53,.22); } /* Ghost: liquid-glass inset + a shimmer sweep (it lacks one). */ .btn--ghost { position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); background-image: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 50%); } .btn--ghost::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(240,65,53,.16), transparent); transition: transform 500ms var(--ease); transform: translateX(0); pointer-events: none; } .btn--ghost:hover::after { transform: translateX(380%); } /* Crisper, accessible focus ring for all buttons */ .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(240,65,53,.22); } /* ============================================================ 3 · NAV — refined glass + premium underline + ember scrubber ============================================================ */ .nav.scrolled { background: rgba(9,8,4,.78); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4); border-color: rgba(255,255,255,.07); box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 10px 30px -18px rgba(0,0,0,.8); } /* Premium animated underline: grows from center, soft ember glow */ .nav__link::after { left: 50%; right: auto; width: 100%; transform: translateX(-50%) scaleX(0); transform-origin: center; background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent); box-shadow: 0 0 10px rgba(240,65,53,.6); } .nav__link:hover::after, .nav__link[aria-current]::after { transform: translateX(-50%) scaleX(1); } /* Nav progress -> glowing ember scrubber with a leading cap */ .nav__progress { height: 2px; background: linear-gradient(90deg, rgba(240,65,53,.35), var(--accent)); box-shadow: 0 0 10px rgba(240,65,53,.7), 0 0 4px rgba(240,65,53,.9); } .nav__progress::after { content: ''; position: absolute; right: -1px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateY(-50%); box-shadow: 0 0 8px 1px rgba(240,65,53,.9); } /* ============================================================ 4 · SECTION HEADERS / EYEBROWS — monospace HUD treatment ============================================================ */ /* Bracketed HUD label + thin animated rule trailing the eyebrow */ .eyebrow { display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: '['; color: rgba(240,65,53,.55); font-weight: 700; } .eyebrow::after { content: ']'; color: rgba(240,65,53,.55); font-weight: 700; margin-right: 4px; } /* Thin animated rule under the section header (HUD scan-in). Applied via opt-in width so it never causes overflow. */ .section-header .section-title-wrap::after { content: ''; display: block; height: 1px; width: 56px; margin-top: 14px; background: linear-gradient(90deg, var(--accent), transparent); transform-origin: left; opacity: .8; } /* Giant ghost section-num polish: dual-stroke ember sheen */ .section-num { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.16); text-shadow: 0 0 24px rgba(240,65,53,.05); transition: -webkit-text-stroke-color .4s var(--ease); } .section-header:hover .section-num { -webkit-text-stroke-color: rgba(240,65,53,.32); } /* ============================================================ 5 · LYRIC STRIP MARQUEE — edge fade masks + hover pause ============================================================ */ .strip { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); } .strip:hover .strip__track { animation-play-state: paused; } /* ============================================================ 6 · TIMELINE — glowing dot, gradient line, premium year ghost (color/shadow/gradient only — transform left to JS agent) ============================================================ */ .timeline-line { height: 1px; background: linear-gradient(90deg, transparent, rgba(240,65,53,.35) 20%, rgba(240,65,53,.55) 50%, rgba(240,65,53,.35) 80%, transparent); } .timeline-dot { background: var(--accent); box-shadow: 0 0 10px 1px rgba(240,65,53,.65), 0 0 4px rgba(240,65,53,.9); } .timeline-year { text-shadow: 0 0 30px rgba(240,65,53,.08); } .timeline-row:hover .timeline-year { -webkit-text-stroke-color: rgba(240,65,53,.95); } /* ============================================================ 7 · VIDEOS · PORTFOLIO · QUOTE · FOOTER — cohesive polish ============================================================ */ /* Video items: ember play-glow + transform-only lift */ .video-item { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease); } .video-item:hover { box-shadow: inset 0 0 0 1px rgba(240,65,53,.22), 0 16px 40px -20px rgba(0,0,0,.9); } .video-item__play svg { filter: drop-shadow(0 0 12px rgba(240,65,53,.55)); } /* Portfolio rows: ember left-accent bar grows on hover (clip-path, no layout shift) + arrow already animates in inline styles. */ .portfolio-item { position: relative; } .portfolio-link::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); box-shadow: 0 0 10px rgba(240,65,53,.6); clip-path: inset(50% 0 50% 0); transition: clip-path .35s var(--ease); pointer-events: none; } .portfolio-link:hover::after, .portfolio-link:focus-visible::after { clip-path: inset(0 0 0 0); } /* Quote block: faint ember halo behind the text for depth */ .quote-block::before { content: ''; position: absolute; inset: -10% -5%; z-index: -1; background: radial-gradient(ellipse 60% 50% at 50% 45%, rgba(240,65,53,.07), transparent 70%); pointer-events: none; } /* Footer: refined dividers + social hover lift (transform only) */ .footer__social a { transition: color 150ms var(--ease), border-color 150ms var(--ease), background 150ms var(--ease), transform .25s var(--ease-spring), box-shadow .25s var(--ease); } .footer__social a:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(240,65,53,.5), inset 0 0 0 1px rgba(240,65,53,.4); } .footer__bottom { border-top-color: rgba(255,255,255,.06); } /* ============================================================ 8 · OPT-IN FX UTILITIES — film grain + scanlines (CSS only) ============================================================ */ /* .fx-grain — animated film grain overlay (svg noise data-uri). Add to any positioned container. Sits above bg, ignores clicks. */ .fx-grain { position: relative; } .fx-grain::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E"); background-size: 160px 160px; opacity: .55; mix-blend-mode: overlay; } /* .fx-scan — subtle CRT scanline overlay (repeating-gradient). */ .fx-scan { position: relative; } .fx-scan::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.10) 3px, rgba(0,0,0,0) 4px); opacity: .5; mix-blend-mode: multiply; } /* ============================================================ 9 · REDUCED MOTION — disable all infinite/auto animation here. Static fallbacks keep the premium look without movement. ============================================================ */ @media (prefers-reduced-motion: reduce) { .disc-card:hover::after, .disc-card:focus-visible::after, .disc-card:hover .disc-card__overlay::after, .disc-card:focus-visible .disc-card__overlay::after, .section-header .section-title-wrap::after, .timeline-dot, .fx-grain::before { animation: none !important; } /* Keep foil sheen visible but static (no sweep) */ .disc-card:hover .disc-card__overlay::after, .disc-card:focus-visible .disc-card__overlay::after { opacity: .55; background-position: 50% 50%; } .disc-card:hover::after, .disc-card:focus-visible::after { opacity: .9; } .section-header .section-title-wrap::after { opacity: .8; transform: scaleX(1); } .strip__track { animation-play-state: paused !important; } }