/* ============================================================ INSTANT PHOTO STUDIO — animations.css Couche d'animations sobre & pro — chargée après styles.css ⚠️ Aucune règle ne pose de transform sur ou (sinon les position:fixed se calent sur le document). ============================================================ */ /* ── Page entry : simple fondu, SANS dépendre du JS ─────── */ @media (prefers-reduced-motion: no-preference) { body { animation: ipsPageIn .45s ease both; } } @keyframes ipsPageIn { from { opacity: 0; } to { opacity: 1; } } /* ── Scroll progress bar ─────────────────────────────────── */ .ips-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--rose) 0%, var(--rose-deep) 100%); transform-origin: left center; transform: scaleX(0); z-index: 9999; pointer-events: none; will-change: transform; } /* ── Word reveal (h1) ────────────────────────────────────── */ .ips-word { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: inherit; } .ips-word-i { display: inline-block; transform: translateY(105%); opacity: 0; transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .7s cubic-bezier(.16,1,.3,1); transition-delay: var(--wd, 0ms); } .ips-title-in .ips-word-i { transform: translateY(0); opacity: 1; } /* ── Eyebrow reveal (underline draw) ────────────────────── */ .ips-ew { position: relative; } .ips-ew::after { content: ''; position: absolute; bottom: -3px; left: 0; height: 1px; width: 100%; background: var(--rose); transform-origin: left; transform: scaleX(0); transition: transform .6s cubic-bezier(.16,1,.3,1) .3s; } .ips-ew.ips-ew-in::after { transform: scaleX(1); } /* ── Hero meta card reveal ───────────────────────────────── */ .ips-line-reveal { opacity: 0; transform: translateY(12px); transition: opacity .8s cubic-bezier(.16,1,.3,1) .15s, transform .8s cubic-bezier(.16,1,.3,1) .15s; } .ips-line-reveal.ips-line-in { opacity: 1; transform: translateY(0); } /* ── Button shimmer ──────────────────────────────────────── */ .btn-primary { position: relative; overflow: hidden; } .btn-primary::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%); transform: skewX(-18deg); transition: left .55s ease; pointer-events: none; } .btn-primary:hover::after { left: 130%; } /* ── Card hover overlay ──────────────────────────────────── */ .ss-card { position: relative; } .ss-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(201,144,138,.08) 0%, transparent 60%); opacity: 0; transition: opacity .35s ease; pointer-events: none; border-radius: inherit; } .ss-card:hover::after { opacity: 1; } .ss-card:hover .ss-card-img { box-shadow: 0 16px 48px -12px rgba(90,75,75,.25); } /* ── Nav underline smoother ──────────────────────────────── */ .site-nav > a::after, .nav-item > a::after { transition: width .35s cubic-bezier(.16,1,.3,1) !important; } /* ── Footer nav underline ────────────────────────────────── */ .footer-nav a { position: relative; display: inline-block; } .footer-nav a::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background: var(--rose); transition: width .3s ease; } .footer-nav a:hover::after { width: 100%; } /* ── Social link lift ────────────────────────────────────── */ .social-link { transition: all .3s cubic-bezier(.16,1,.3,1) !important; } .social-link:hover { transform: translateY(-2px); } /* ── Back link arrow ─────────────────────────────────────── */ .hero-back-link svg { transition: transform .25s ease; } .hero-back-link:hover svg { transform: translateX(-3px); } /* ── Focus ring ──────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 2px; } /* ── Reduce motion ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .ips-progress { display: none !important; } } /* ── Lightbox au-dessus de tout ─────────────────────────── */ .lightbox { z-index: 99999 !important; } .lightbox img { display: block; } /* Lightbox global (clic sur une image de contenu pour l'agrandir) */ .ips-zoom { position: fixed; inset: 0; z-index: 100000; background: rgba(20,14,14,.95); display: none; align-items: center; justify-content: center; padding: 1.5rem; } .ips-zoom.open { display: flex; } .ips-zoom img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: .25rem; animation: ipsZoomIn .3s cubic-bezier(.16,1,.3,1); } .ips-zoom-x { position: fixed; top: .75rem; right: 1.1rem; background: none; border: none; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; opacity: .85; } .ips-zoom-x:hover { opacity: 1; } @keyframes ipsZoomIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } } .img-frame img, .event-type-card .img-wrap img { cursor: zoom-in; } /* Lightbox unifié — figure + avis + flèches */ .ips-zoom-fig { margin:0; display:flex; flex-direction:column; align-items:center; gap:1rem; max-width:92vw; } .ips-zoom img { max-width:92vw; max-height:72vh; } .ips-zoom-cap { color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:.7rem; padding:.9rem 1.2rem; max-width:34rem; font-size:.86rem; line-height:1.55; text-align:center; font-style:italic; } .ips-zoom-cap .rv-stars { color:var(--rose); letter-spacing:.12em; font-style:normal; display:block; margin-bottom:.4rem; } .ips-zoom-cap .rv-who { display:block; margin-top:.5rem; font-size:.72rem; color:rgba(255,255,255,.6); font-style:normal; } .ips-zoom-nav { position:fixed; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:#fff; width:3rem; height:3rem; border-radius:50%; font-size:1.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; } .ips-zoom-nav:hover { background:rgba(255,255,255,.18); } .ips-zoom-prev { left:1rem; } .ips-zoom-next { right:1rem; } @media(max-width:600px){ .ips-zoom-prev{left:.4rem;} .ips-zoom-next{right:.4rem;} .ips-zoom-nav{width:2.5rem;height:2.5rem;} }