/* === IMPROVEMENT 10/10: Madson Kurtis Design Sublimation === */ /* Hero text reveal with clip-path animation */ @keyframes clipReveal { 0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } @keyframes textGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes fadeUpMK { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .hero-title-reveal h1, section:first-of-type h1, #wrapwrap > main > section:first-child h1 { animation: clipReveal 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards; background: linear-gradient(135deg, #FF2222 0%, #ffffff 40%, #FF2222 60%, #ffffff 100%); background-size: 300% 300%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: clipReveal 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards, textGradientShift 4s ease infinite 1.2s; white-space: nowrap; } .hero-subtitle-reveal h2, section:first-of-type h2, #wrapwrap > main > section:first-child .lead, #wrapwrap > main > section:first-child p { animation: fadeUpMK 0.8s ease forwards 0.4s; opacity: 0; } .hero-cta-reveal .btn, section:first-of-type .btn, #wrapwrap > main > section:first-child a.btn { animation: fadeUpMK 0.8s ease forwards 0.7s; opacity: 0; } /* Portfolio cards with cinematic hover overlay */ .card, .o_portfolio_card, .portfolio-item, .project-card { position: relative; overflow: hidden; transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s ease; } .card:hover, .o_portfolio_card:hover, .portfolio-item:hover, .project-card:hover { transform: scale(1.03); box-shadow: 0 20px 60px rgba(255, 34, 34, 0.2), 0 8px 20px rgba(0, 0, 0, 0.3); } .card:hover img, .o_portfolio_card:hover img, .portfolio-item:hover img, .project-card:hover img { transform: scale(1.08); } .card img, .o_portfolio_card img, .portfolio-item img, .project-card img { transition: transform 0.6s ease; } .card::after, .o_portfolio_card::after, .portfolio-item::after, .project-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255, 34, 34, 0.3) 0%, transparent 50%, rgba(0, 0, 0, 0.5) 100%); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 1; } .card:hover::after, .o_portfolio_card:hover::after, .portfolio-item:hover::after, .project-card:hover::after { opacity: 1; } /* Timeline with progressive animation */ @keyframes timelineLine { from { height: 0; } to { height: 100%; } } @keyframes timelineDotPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 34, 34, 0.7); } 70% { box-shadow: 0 0 0 12px rgba(255, 34, 34, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 34, 34, 0); } } .timeline, .o_timeline, .timeline-container, section .timeline-wrapper { position: relative; } .timeline::before, .o_timeline::before, .timeline-container::before, .timeline-wrapper::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 3px; background: linear-gradient(180deg, #FF2222, rgba(255, 34, 34, 0.2)); animation: timelineLine 1.5s ease forwards; } .timeline-item, .timeline-entry, .o_timeline .timeline-item { opacity: 0; transform: translateX(-30px); animation: fadeUpMK 0.6s ease forwards; } .timeline-item:nth-child(1), .timeline-entry:nth-child(1) { animation-delay: 0.2s; } .timeline-item:nth-child(2), .timeline-entry:nth-child(2) { animation-delay: 0.4s; } .timeline-item:nth-child(3), .timeline-entry:nth-child(3) { animation-delay: 0.6s; } .timeline-item:nth-child(4), .timeline-entry:nth-child(4) { animation-delay: 0.8s; } .timeline-item:nth-child(5), .timeline-entry:nth-child(5) { animation-delay: 1.0s; } .timeline-item:nth-child(6), .timeline-entry:nth-child(6) { animation-delay: 1.2s; } .timeline-item .dot, .timeline-entry .dot, .o_timeline .timeline-dot { width: 16px; height: 16px; background: #FF2222; border-radius: 50%; animation: timelineDotPulse 2s infinite; } /* Category tags with distinct colors */ .tag, .badge, .o_tag, .category-badge, .o_wsale_product_tags .badge, .product_tags .badge { padding: 6px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .tag[class*="video"], .badge[class*="video"], .tag:contains("Video"), .tag:contains("Montage"), .badge[class*="formation"] { background: #FF2222; color: #fff; } .tag[class*="lut"], .badge[class*="lut"], .tag:contains("LUT"), .tag:contains("Color") { background: #6C5CE7; color: #fff; } .tag[class*="preset"], .badge[class*="preset"], .tag:contains("Preset") { background: #00B894; color: #fff; } .tag[class*="template"], .badge[class*="template"], .tag:contains("Template"), .tag:contains("Obsidian") { background: #FDCB6E; color: #1a1a1a; } .tag[class*="notion"], .badge[class*="notion"], .tag:contains("Notion") { background: #0984E3; color: #fff; } .tag[class*="stripe"], .badge[class*="stripe"], .tag:contains("Stripe") { background: #6C5CE7; color: #fff; } /* MK Brand accent style */ .mk-red { color: #FF2222; } .mk-bg-red { background-color: #FF2222; } .btn-mk-red { background: #FF2222; border-color: #FF2222; color: #fff; transition: all 0.3s ease; } .btn-mk-red:hover { background: #cc1b1b; border-color: #cc1b1b; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 34, 34, 0.35); }