/* ============================================================ PS Animations — Scroll Reveal + Hero Entrance + UX Polish PhotoShoot.Store Ultra — v4.2.0 ============================================================ */ /* ── 0. CONTENT-VISIBILITY OVERRIDE ────────────────────────── */ /* El CSS base del tema puede aplicar content-visibility:auto a secciones, lo que rompe IntersectionObserver en Chrome/Edge (el browser no renderiza el contenido off-screen y IO calcula posiciones incorrectas). Forzamos visible para que las animaciones funcionen correctamente. */ #ps-main > section:not(:first-child), main > section:not(:first-child), article.ps-post-wrap > section { content-visibility: visible !important; contain-intrinsic-size: unset !important; } /* ── 1. REDUCED MOTION RESPECT ─────────────────────────────── */ @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal] *, .ps-hero-word, .ps-hero-badge, .ps-hero-cta, .ps-hero-sub, .ps-card-3d, .ps-card-premium, .ps-card-glow, .ps-pricing-featured, .ps-auto-reveal { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } } /* ── 1b. MOTION FAIL-SAFE ───────────────────────────────────── */ /* Si ps-motion.min.js NO carga o tiene un error no capturado, el script inline de footer añade 'ps-motion-fail' al a los 3s. Esto revela todos los elementos ocultos para mantener la web usable. */ body.ps-motion-fail [data-reveal], body.ps-motion-fail .ps-auto-reveal { opacity: 1 !important; transform: none !important; transition: opacity 0.6s ease, transform 0.6s ease !important; } /* ── 2. BASE REVEAL STATES ─────────────────────────────────── */ /* Estado inicial: opacity 0 + transform según tipo de reveal. CSS transition se activa cuando Motion añade la clase ps-revealed. Motion (WAAPI) sobreescribe la transition con animaciones más dramáticas. Si Motion falla: la CSS transition funciona igual (degradación elegante). */ [data-reveal] { opacity: 0; transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1), transform 0.75s cubic-bezier(0.22,1,0.36,1); will-change: opacity, transform; } [data-reveal], [data-reveal="up"] { transform: translateY(40px); } [data-reveal="down"] { transform: translateY(-30px); } [data-reveal="left"] { transform: translateX(-50px); } [data-reveal="right"] { transform: translateX(50px); } [data-reveal="scale"] { transform: scale(0.88); } [data-reveal="fade"] { transform: none; } [data-reveal="card"] { transform: translateY(50px) scale(0.93); } /* Estado revelado — Motion ADEMÁS de animar añade esta clase */ [data-reveal].ps-revealed { opacity: 1; transform: none !important; } [data-reveal="card"].ps-revealed { transition: opacity 0.80s cubic-bezier(0.34,1.4,0.64,1), transform 0.80s cubic-bezier(0.34,1.4,0.64,1); } /* Stagger delays vía data-delay (CSS fallback cuando Motion no está disponible) */ [data-delay="1"] { transition-delay: 0.06s; } [data-delay="2"] { transition-delay: 0.13s; } [data-delay="3"] { transition-delay: 0.20s; } [data-delay="4"] { transition-delay: 0.28s; } [data-delay="5"] { transition-delay: 0.37s; } [data-delay="6"] { transition-delay: 0.47s; } [data-delay="7"] { transition-delay: 0.58s; } [data-delay="8"] { transition-delay: 0.70s; } /* ── 2b. AUTO-SECTIONS (sin data-reveal) ────────────────────── */ /* Motion detecta secciones sin markup y les añade esta clase. CSS provee estado inicial + transition fallback. */ .ps-auto-reveal { opacity: 0; transform: translateY(70px) scale(0.93); transition: opacity 1.0s cubic-bezier(0.22,1,0.36,1), transform 1.0s cubic-bezier(0.22,1,0.36,1); will-change: opacity, transform; } .ps-auto-reveal.ps-revealed { opacity: 1; transform: none !important; } /* ── 3. HERO ENTRANCE ANIMATIONS ───────────────────────────── */ /* Animación CSS pura — SIEMPRE funciona aunque Motion no cargue. Motion enhances con animación adicional al mismo estado final. */ .ps-hero-badge { opacity: 0; transform: translateY(16px); animation: ps-hero-in 0.65s cubic-bezier(0.22,1,0.36,1) 0.10s forwards; } .ps-hero-h1 { opacity: 0; transform: translateY(28px); animation: ps-hero-in 0.80s cubic-bezier(0.22,1,0.36,1) 0.28s forwards; } .ps-hero-sub { opacity: 0; transform: translateY(20px); animation: ps-hero-in 0.70s cubic-bezier(0.22,1,0.36,1) 0.48s forwards; } .ps-hero-cta { opacity: 0; transform: translateY(16px); animation: ps-hero-in 0.65s cubic-bezier(0.22,1,0.36,1) 0.66s forwards; } @keyframes ps-hero-in { to { opacity: 1; transform: none; } } /* Hero image Ken Burns */ .ps-hero-img { animation: ps-kenburns 20s ease-in-out infinite alternate; transform-origin: center 35%; } @keyframes ps-kenburns { 0% { transform: scale(1) translateX(0) translateY(0); } 100% { transform: scale(1.07) translateX(-1.5%) translateY(-1%); } } /* Gold shimmer en texto gradiente del hero */ .ps-grad-shimmer { background-size: 200% auto !important; animation: ps-shimmer 4s linear 1.2s infinite; } @keyframes ps-shimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } /* ── 4. SECTION TITLE UNDERLINE REVEAL ─────────────────────── */ .ps-section-title { position: relative; display: inline-block; } .ps-section-title::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, #c59a6d, #e8b97e, #c59a6d); border-radius: 2px; transition: width 0.8s cubic-bezier(0.22,1,0.36,1) 0.2s; } .ps-revealed .ps-section-title::after, .ps-section-title.ps-revealed::after { width: 100%; } /* ── 5. TEXT SPLIT ENGINE — Técnica Awwwards #1 ───────────────── Cada palabra se envuelve en .ps-sw-wrap (overflow:hidden). El hijo .ps-sw empieza en translateY(108%) — debajo de la máscara. Invisible sin usar opacity: el overflow del padre lo oculta. .ps-split-visible activa animation-play-state:running. body.ps-motion-fail lo muestra todo al instante como fail-safe. ──────────────────────────────────────────────────────────────── */ .ps-sw-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.05em; margin-bottom: -0.05em; } .ps-sw { display: inline-block; transform: translateY(108%); animation: ps-word-rise var(--ps-wd, 0.88s) cubic-bezier(0.23, 1, 0.32, 1) var(--ps-wdl, 0s) both; animation-play-state: paused; } .ps-split-visible .ps-sw { animation-play-state: running; } @keyframes ps-word-rise { to { transform: translateY(0); } } .ps-sw.ps-sw-body { animation-name: ps-word-rise-body; } @keyframes ps-word-rise-body { from { transform: translateY(42%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .ps-sw.ps-sw-label { animation-name: ps-word-rise-label; } @keyframes ps-word-rise-label { from { transform: translateY(88%); } to { transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .ps-sw { transform: none !important; animation: ps-split-fade var(--ps-wd, 0.4s) ease var(--ps-wdl, 0s) both !important; } @keyframes ps-split-fade { from { opacity:0; } to { opacity:1; } } } body.ps-motion-fail .ps-sw { transform: translateY(0) !important; opacity: 1 !important; animation: none !important; } /* ── 5b. CARD HOVER MICRO-INTERACTIONS ─────────────────────────── */ .ps-card-hover { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s cubic-bezier(0.22,1,0.36,1); } .ps-card-hover:hover { transform: translateY(-7px) scale(1.01); box-shadow: 0 24px 64px rgba(0,0,0,0.52), 0 0 0 1px rgba(197,154,109,0.18); } /* ── 6. BUTTON MICRO-INTERACTIONS ──────────────────────────── */ .ps-home-cta-primary, .ps-home-cta-secondary { transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s cubic-bezier(0.22,1,0.36,1), background-color 0.22s ease, border-color 0.22s ease !important; } .ps-home-cta-primary:hover { transform: translateY(-2px) scale(1.02); } .ps-home-cta-secondary:hover { transform: translateY(-2px); } .ps-home-cta-primary:active, .ps-home-cta-secondary:active { transform: scale(0.97); } /* ── 7. TYPOGRAPHY SCALE — FLUID ───────────────────────────── */ :root { --ps-text-xs: clamp(0.70rem, 0.68rem + 0.1vw, 0.75rem); --ps-text-sm: clamp(0.82rem, 0.78rem + 0.2vw, 0.875rem); --ps-text-base: clamp(0.95rem, 0.90rem + 0.25vw, 1.05rem); --ps-text-lg: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem); --ps-text-xl: clamp(1.15rem, 1.0rem + 0.75vw, 1.5rem); --ps-text-2xl: clamp(1.35rem, 1.1rem + 1.25vw, 2rem); --ps-text-3xl: clamp(1.65rem, 1.2rem + 2.25vw, 2.75rem); --ps-text-4xl: clamp(2.0rem, 1.4rem + 3vw, 3.5rem); --ps-text-5xl: clamp(2.4rem, 1.6rem + 4vw, 4.5rem); --ps-space-1: clamp(0.375rem, 0.35rem + 0.125vw, 0.5rem); --ps-space-2: clamp(0.625rem, 0.55rem + 0.375vw, 0.875rem); --ps-space-3: clamp(0.875rem, 0.75rem + 0.625vw, 1.25rem); --ps-space-4: clamp(1.25rem, 1.0rem + 1.25vw, 2rem); --ps-space-6: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); --ps-space-8: clamp(2.5rem, 2rem + 2.5vw, 4rem); --ps-space-12: clamp(3rem, 2.5rem + 2.5vw, 5rem); --ps-space-16: clamp(4rem, 3rem + 5vw, 7rem); --ps-gold: #c59a6d; --ps-gold-light: #e8b97e; --ps-gold-alpha-10: rgba(197,154,109,0.10); --ps-gold-alpha-20: rgba(197,154,109,0.20); --ps-gold-alpha-35: rgba(197,154,109,0.35); --ps-gold-alpha-60: rgba(197,154,109,0.60); } body { font-size: var(--ps-text-base); line-height: 1.65; } h1 { font-size: var(--ps-text-5xl); line-height: 1.05; letter-spacing: -0.03em; } h2 { font-size: var(--ps-text-4xl); line-height: 1.1; letter-spacing: -0.025em; } h3 { font-size: var(--ps-text-3xl); line-height: 1.2; letter-spacing: -0.02em; } h4 { font-size: var(--ps-text-2xl); line-height: 1.3; } h5 { font-size: var(--ps-text-xl); line-height: 1.4; } p { font-size: var(--ps-text-base); line-height: 1.72; } /* ── 8. FORM FIELD UX ──────────────────────────────────────── */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="url"], textarea, select { font-size: var(--ps-text-base) !important; padding: 0.75rem 1rem !important; line-height: 1.5 !important; border-radius: 0.625rem !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; } input:focus, textarea:focus, select:focus { outline: none !important; box-shadow: 0 0 0 2px rgba(197,154,109,0.35) !important; } label { font-size: var(--ps-text-sm) !important; font-weight: 600 !important; letter-spacing: 0.04em !important; margin-bottom: 0.375rem !important; display: block !important; } /* ── 9. SECTION SPACING ────────────────────────────────────── */ .ps-section { padding-top: var(--ps-space-16); padding-bottom: var(--ps-space-16); } .ps-section-sm { padding-top: var(--ps-space-12); padding-bottom: var(--ps-space-12); } /* ── 10. SCROLL PROGRESS BAR ───────────────────────────────── */ #ps-scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, #c59a6d 0%, #e8b97e 50%, #c59a6d 100%); background-size: 200% 100%; animation: ps-progress-shimmer 2s linear infinite; z-index: 9999; transition: width 0.1s linear; pointer-events: none; box-shadow: 0 0 8px rgba(197,154,109,0.6); } @keyframes ps-progress-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* ── 11. NAVIGATION SCROLL EFFECT ──────────────────────────── */ .ps-nav-scrolled { background: rgba(10,10,10,0.92) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.06) !important; transition: background 0.3s ease, box-shadow 0.3s ease !important; } /* ── 12. LOADING SKELETON PULSE ─────────────────────────────── */ .ps-skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%); background-size: 200% 100%; animation: ps-skeleton-pulse 1.6s ease infinite; border-radius: 0.375rem; } @keyframes ps-skeleton-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================ PS PREMIUM CARD EFFECTS — v2.5.0 VISIBLE sin interacción + dramáticos en hover ============================================================ */ @media (prefers-reduced-motion: reduce) { .ps-card-3d, .ps-card-premium::before, .ps-card-premium::after, .ps-card-glare::after, .ps-pricing-featured, .ps-card-glow, .glass-panel { animation: none !important; } } /* ── 1. 3D MAGNETIC TILT ────────────────────────────────────── */ .ps-card-3d { transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.23,1,0.32,1), box-shadow 0.55s cubic-bezier(0.23,1,0.32,1); will-change: transform, box-shadow; box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04); } .ps-card-3d:hover { box-shadow: 0 32px 80px rgba(0,0,0,0.60), 0 0 0 1px rgba(197,154,109,0.22), 0 0 50px rgba(197,154,109,0.10); } /* ── 2. SHIMMER SWEEP — SIEMPRE ACTIVO ──────────────────────── */ .ps-card-premium { position: relative; isolation: isolate; overflow: hidden; } .ps-card-premium::before { content: ''; position: absolute; top: 0; left: -100%; width: 55%; height: 100%; background: linear-gradient( 105deg, transparent 20%, rgba(232,185,126,0.14) 45%, rgba(255,255,255,0.22) 50%, rgba(232,185,126,0.14) 55%, transparent 80% ); transform: skewX(-18deg); animation: ps-sweep 4s cubic-bezier(0.4,0,0.6,1) 1s infinite; pointer-events: none; z-index: 2; } @keyframes ps-sweep { 0% { left: -100%; } 40% { left: 150%; } 100% { left: 150%; } } .ps-card-premium:hover { box-shadow: 0 0 0 1px rgba(232,185,126,0.70), 0 28px 72px rgba(0,0,0,0.55), 0 0 40px rgba(197,154,109,0.15) !important; } .ps-card-premium::after { content: ''; position: absolute; top: 0; left: -100%; width: 40%; height: 100%; background: linear-gradient( 105deg, transparent 20%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.08) 55%, transparent 80% ); transform: skewX(-18deg); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 2; } .ps-card-premium:hover::after { opacity: 1; animation: ps-sweep 1.8s cubic-bezier(0.4,0,0.6,1) infinite; } /* ── 3. CURSOR GLARE EFFECT ─────────────────────────────────── */ .ps-card-glare { position: relative; } .ps-glare-layer { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; opacity: 0; transition: opacity 0.25s ease; background: radial-gradient( circle 180px at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255,255,255,0.12) 0%, rgba(197,154,109,0.08) 35%, transparent 70% ); } .ps-card-glare:hover .ps-glare-layer { opacity: 1; } /* ── 4. GOLD PULSE GLOW ─────────────────────────────────────── */ .ps-card-glow { transition: box-shadow 0.4s cubic-bezier(0.23,1,0.32,1), transform 0.4s cubic-bezier(0.23,1,0.32,1), border-color 0.4s ease; animation: ps-glow-breathe 3.5s ease-in-out infinite; } @keyframes ps-glow-breathe { 0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.30), 0 0 0 1px rgba(197,154,109,0.12); } 50% { box-shadow: 0 8px 35px rgba(0,0,0,0.38), 0 0 0 1px rgba(197,154,109,0.28), 0 0 20px rgba(197,154,109,0.10); } } .ps-card-glow:hover { animation: none; transform: translateY(-6px) scale(1.015); box-shadow: 0 24px 60px rgba(0,0,0,0.50), 0 0 0 1px rgba(197,154,109,0.40), 0 0 40px rgba(197,154,109,0.18); border-color: rgba(197,154,109,0.40) !important; } /* ── 5. PORTFOLIO IMAGE REVEAL ──────────────────────────────── */ .ps-portfolio-card { position: relative; overflow: hidden; } .ps-portfolio-card .ps-card-img { transition: transform 0.85s cubic-bezier(0.23,1,0.32,1), filter 0.85s ease; will-change: transform; } .ps-portfolio-card:hover .ps-card-img { transform: scale(1.08); filter: brightness(0.80) saturate(1.15); } .ps-portfolio-card .ps-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.30) 45%, transparent 100%); opacity: 0; transition: opacity 0.5s cubic-bezier(0.23,1,0.32,1); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 1.5rem; text-align: center; } .ps-portfolio-card:hover .ps-card-overlay { opacity: 1; } .ps-portfolio-card .ps-card-overlay-content { transform: translateY(16px); transition: transform 0.5s cubic-bezier(0.23,1,0.32,1) 0.05s; } .ps-portfolio-card:hover .ps-card-overlay-content { transform: translateY(0); } /* ── 6. ICON CONTAINER ANIMATION ────────────────────────────── */ .ps-card-icon { transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background-color 0.35s ease, box-shadow 0.35s ease; } .ps-card-3d:hover .ps-card-icon, .ps-card-premium:hover .ps-card-icon, .ps-card-glow:hover .ps-card-icon { transform: scale(1.20) rotate(-8deg); background-color: rgba(197,154,109,0.22) !important; box-shadow: 0 0 24px rgba(197,154,109,0.35); } /* ── 7. NUMBER COUNTER ──────────────────────────────────────── */ .ps-counter { display: inline-block; font-variant-numeric: tabular-nums; } /* ── 8. GLASS-PANEL HOVER PREMIUM ───────────────────────────── */ .glass-panel { transition: border-color 0.4s ease, box-shadow 0.4s cubic-bezier(0.23,1,0.32,1), transform 0.4s cubic-bezier(0.23,1,0.32,1), background 0.4s ease; } .glass-panel:hover { border-color: rgba(197,154,109,0.25) !important; background: rgba(255,255,255,0.05) !important; transform: translateY(-3px); } /* ── 9. PRICING CARD FEATURED ───────────────────────────────── */ .ps-pricing-featured { animation: ps-featured-pulse 2.8s ease-in-out infinite; position: relative; z-index: 1; } @keyframes ps-featured-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(197,154,109,0.40), 0 0 30px rgba(197,154,109,0.12), 0 8px 40px rgba(0,0,0,0.40); } 50% { box-shadow: 0 0 0 2px rgba(197,154,109,0.65), 0 0 60px rgba(197,154,109,0.28), 0 8px 60px rgba(0,0,0,0.50); } } .ps-pricing-featured .absolute.top-0 { animation: ps-badge-glow 2.8s ease-in-out infinite; } @keyframes ps-badge-glow { 0%, 100% { box-shadow: 0 0 10px rgba(197,154,109,0.30); } 50% { box-shadow: 0 0 22px rgba(197,154,109,0.65); } } /* ── 10. SERVICE CARD ────────────────────────────────────────── */ .ps-service-card { transition: transform 0.40s cubic-bezier(0.23,1,0.32,1), border-color 0.40s ease, box-shadow 0.40s cubic-bezier(0.23,1,0.32,1), background 0.40s ease; } .ps-service-card:hover { transform: translateY(-10px) scale(1.01); border-color: rgba(197,154,109,0.38) !important; box-shadow: 0 28px 70px rgba(0,0,0,0.48), 0 0 0 1px rgba(197,154,109,0.15), 0 0 40px rgba(197,154,109,0.10); background: rgba(255,255,255,0.04) !important; } .ps-service-card:hover .ps-card-icon-wrap { background-color: rgba(197,154,109,1) !important; color: #0a0a0a !important; box-shadow: 0 0 20px rgba(197,154,109,0.45); } .ps-card-icon-wrap { transition: background-color 0.35s cubic-bezier(0.34,1.56,0.64,1), color 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease; } .ps-service-card:hover .ps-card-icon-wrap { transform: scale(1.15) rotate(-5deg); } /* ── 11. CARD ENTRANCE GOLD FLASH ───────────────────────────── */ [data-reveal="card"].ps-revealed { animation: ps-card-enter-glow 0.8s ease forwards; } @keyframes ps-card-enter-glow { 0% { box-shadow: 0 0 0 2px rgba(197,154,109,0.50); } 60% { box-shadow: 0 0 0 2px rgba(197,154,109,0.25); } 100% { box-shadow: 0 4px 24px rgba(0,0,0,0.30), 0 0 0 1px rgba(255,255,255,0.04); } } /* ── 12. SPARKLE en FEATURED ────────────────────────────────── */ .ps-pricing-featured::before { content: ''; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 60%; height: 2px; background: linear-gradient(90deg, transparent, rgba(232,185,126,0.80), rgba(255,255,255,0.95), rgba(232,185,126,0.80), transparent); border-radius: 0 0 4px 4px; animation: ps-top-glow 2.8s ease-in-out infinite; pointer-events: none; z-index: 2; } @keyframes ps-top-glow { 0%, 100% { opacity: 0.5; width: 40%; } 50% { opacity: 1.0; width: 70%; } }