/* drpashmforoosh.com — motion. Loaded on every page, after components.css (and before the page stylesheets). Every animation on the site lives here, and all of it is off for visitors who ask for reduced motion. Reveal-on-scroll needs html.pf-js (set in , removed again if site.js never starts) and .is-visible (added by site.js). Only transform and opacity animate, except the one-off colour flash on a TOC target. The LCP image (hero photo, article banner) is never transparent — it only scales. */ @keyframes pf-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes pf-settle { from { transform: scale(1.06); } to { transform: none; } } @keyframes pf-backdrop { from { opacity: 0; transform: translate(-28px, 28px); } to { opacity: 1; transform: none; } } @keyframes pf-pop { 0% { opacity: 0; transform: translateY(14px) scale(.9); } 70% { opacity: 1; transform: translateY(-2px) scale(1.02); } 100% { opacity: 1; transform: none; } } @keyframes pf-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(10deg); } } @keyframes pf-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } } @keyframes pf-sheen { 0%, 60% { background-position: 160% 0; } 100% { background-position: -60% 0; } } @keyframes pf-draw { from { stroke-dashoffset: 64; } to { stroke-dashoffset: 0; } } @keyframes pf-drift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes pf-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes pf-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } } @keyframes pf-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes pf-flow { to { stroke-dashoffset: -1; } } @keyframes pf-blob { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-28px, 18px) scale(1.08); } 66% { transform: translate(18px, -12px) scale(.94); } } @keyframes pf-beat { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.35); opacity: .45; } } @keyframes pf-ring { 0%, 100% { transform: rotate(0); } 15%, 45% { transform: rotate(-14deg); } 30%, 60% { transform: rotate(14deg); } 75% { transform: rotate(0); } } @keyframes pf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes pf-tick { 0% { transform: scale(0) rotate(-40deg); } 65% { transform: scale(1.18) rotate(6deg); } 100% { transform: none; } } @keyframes pf-glow { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(124, 195, 79, 0); } 20% { box-shadow: 0 0 0 0 rgba(124, 195, 79, .55); } 55% { box-shadow: 0 0 0 12px rgba(124, 195, 79, 0); } } @keyframes pf-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes pf-zoom { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } } @keyframes pf-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pf-flash { 0%, 30% { background-color: var(--c-green-50); } 100% { background-color: transparent; } } @keyframes pf-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes pf-wiggle { 0%, 100% { transform: rotate(-45deg); } 25% { transform: rotate(-30deg); } 75% { transform: rotate(-60deg); } } /* Reading progress (articles): CSS scroll timeline, so browsers without it simply show nothing */ .pf-progress { display: none; } @media (prefers-reduced-motion: no-preference) { /* ── Entrances ── */ .pf-hero__anim { animation: pf-rise .75s var(--ease) both; animation-delay: calc(var(--d, 0) * 90ms + 120ms); } .pf-hero__media img { animation: pf-settle 1.2s var(--ease) both; } /* transform only: the LCP image is never transparent */ .pf-hero__media::before { animation: pf-backdrop 1s var(--ease) both .2s; } .pf-hero__media::after { animation: pf-float 7s ease-in-out infinite 1.2s; } .pf-hero__badge { animation: pf-pop .8s var(--ease) both 1s; } .pf-hero { background-size: 100% 140%; } .pf-article__hero img { animation: pf-settle 1.1s var(--ease) both; } /* reveal on scroll */ .pf-js .pf-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 85ms); } .pf-js .pf-reveal.is-visible { opacity: 1; transform: none; } .pf-sechead.is-visible .pf-sechead__kicker::before, .pf-pagehero .pf-sechead__kicker::before { transform-origin: right; animation: pf-grow .6s var(--ease) both .3s; } /* ── Page hero artwork: vessels trace themselves, a pulse flows through the main one ── */ .pf-pagehero__art .pf-art__vessel { stroke-dasharray: 1; animation: pf-trace 2.2s var(--ease) both .2s; } .pf-pagehero__art .pf-art__vessel--b { animation-delay: .7s; } .pf-pagehero__art .pf-art__vessel--c { animation-delay: 1s; } .pf-pagehero__art .pf-art__flow { display: inline; stroke-dasharray: .05 .95; animation: pf-flow 6s linear infinite 2s; } .pf-pagehero__art .pf-art__node { transform-box: fill-box; transform-origin: center; animation: pf-beat 2.6s ease-in-out infinite; } .pf-pagehero__art .pf-art__node:nth-of-type(2) { animation-delay: .9s; } .pf-pagehero__art .pf-art__node:nth-of-type(3) { animation-delay: 1.8s; } .pf-pagehero::before { animation: pf-blob 14s ease-in-out infinite; } /* the booking CTA catches the light now and then */ .pf-shine { position: relative; overflow: hidden; } .pf-shine::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%) no-repeat; background-size: 200% 100%; animation: pf-sheen 4.5s ease-in-out infinite 2.4s; } .pf-bar__item--cta::before { animation: pf-glow 5s ease-out infinite 3s; } .pf-btn .pf-icon { transition: transform var(--t-med) var(--ease); } .pf-btn:hover .pf-icon { transform: scale(1.12) rotate(-6deg); } .pf-header__cta:hover .pf-icon, .pf-btn--cta:hover .pf-icon { animation: pf-bob .7s var(--ease); } /* ── Cards and tiles ── */ .pf-service__icon { transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease), transform var(--t-med) var(--ease); } .pf-service:hover .pf-service__icon { background: var(--c-navy-700); color: #fff; transform: translateY(-3px) rotate(-5deg); } .pf-service:hover .pf-service__icon .pf-icon path, .pf-service:hover .pf-service__icon .pf-icon circle, .pf-service:hover .pf-service__icon .pf-icon rect { stroke-dasharray: 64; animation: pf-draw .9s var(--ease); } .pf-service__go .pf-icon, .pf-way > .pf-icon, .pf-sechead__more .pf-icon, .pf-feature__go .pf-icon, .pf-drug__more .pf-icon, .pf-section-title a .pf-icon { transition: transform var(--t-fast) var(--ease); } .pf-service:hover .pf-service__go .pf-icon, .pf-sechead__more:hover .pf-icon, .pf-feature:hover .pf-feature__go .pf-icon, .pf-drug:hover .pf-drug__more .pf-icon, .pf-section-title a:hover .pf-icon { transform: translateX(-4px); } .pf-way:hover > .pf-icon { animation: pf-nudge .8s var(--ease) infinite; } .pf-way__icon { transition: transform var(--t-med) var(--ease); } .pf-way:hover .pf-way__icon { transform: scale(1.08) rotate(-4deg); } .pf-card img, .pf-video__thumb img, .pf-fig img, .pf-insta__card img, .pf-about__media img, .pf-drug__media img, .pf-poster img { transition: transform .7s var(--ease); } .pf-card:hover img, .pf-video:hover .pf-video__thumb img, .pf-fig:hover img, .pf-insta__card:hover img, .pf-drug:hover .pf-drug__media img, .pf-poster:hover img { transform: scale(1.05); } .pf-video__play { animation: pf-pulse 2.2s ease-out infinite; } .pf-quote { transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); } .pf-quote:hover { transform: translateY(-4px); box-shadow: var(--e-2); } .pf-conds a, .pf-toplist a { transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), padding var(--t-fast) var(--ease); } .pf-toplist a:hover { padding-inline-start: calc(var(--s-4) + 6px); } .pf-stat b { font-variant-numeric: tabular-nums; } .pf-chip, .pf-pager a { transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .pf-chips .pf-chip:hover, .pf-pager a:hover { transform: translateY(-2px); } .pf-group, .pf-dgroup, .pf-highlight, .pf-visit__card, .pf-drug, .pf-poster, .pf-checklist li { transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease), border-color var(--t-med) var(--ease); } .pf-group:hover, .pf-dgroup:hover, .pf-highlight:hover, .pf-visit__card:hover, .pf-drug:hover, .pf-poster:hover { transform: translateY(-3px); box-shadow: var(--e-2); } .pf-checklist li:hover { transform: translateX(-4px); border-color: var(--c-green-100); } .pf-group li a::before { transition: transform var(--t-fast) var(--ease); } .pf-group li a:hover::before { transform: scale(1.6); } /* the Instagram band drifts slowly */ .pf-sec--navy { background: linear-gradient(120deg, var(--c-navy-900), #12305a, var(--c-navy-800), var(--c-navy-900)); background-size: 300% 300%; animation: pf-drift 16s ease infinite; } /* ── Core pages ── */ .pf-checklist li.is-visible .pf-icon { animation: pf-tick .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 85ms + .35s); } .pf-highlight .pf-icon, .pf-visit__h .pf-icon, .pf-dgroup__icon { transition: transform var(--t-med) var(--ease); } .pf-highlight:hover .pf-icon { transform: rotate(-8deg) scale(1.08); } .pf-visit__card:hover .pf-visit__h .pf-icon { animation: pf-bob .9s var(--ease); } .pf-visit__phone:hover .pf-icon, .pf-topbar a[href^="tel:"]:hover .pf-icon, .pf-bar__item[href^="tel:"]:active .pf-icon { animation: pf-ring .8s ease-in-out; } .pf-feature::after { animation: pf-blob 12s ease-in-out infinite; } .pf-feature__icon { animation: pf-glow 4s ease-out infinite 1.5s; } .pf-feature:hover .pf-feature__icon .pf-icon { animation: pf-bob .9s var(--ease) infinite; } .pf-faq__item { transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); } .pf-faq__item[open] > .pf-faq__a { animation: pf-open .4s var(--ease); } .pf-faq__item > summary { transition: color var(--t-fast) var(--ease), padding var(--t-fast) var(--ease); } .pf-faq__item > summary:hover { padding-inline-start: calc(var(--s-4) + 4px); } .pf-form input, .pf-form textarea { transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); } .pf-note { animation: pf-pop .6s var(--ease) both; } /* medicines */ .pf-drug__pill .pf-icon { transform: rotate(-45deg); } .pf-drug:hover .pf-drug__pill .pf-icon, .pf-dgroup:hover .pf-dgroup__icon .pf-icon { animation: pf-wiggle .7s ease-in-out; } .pf-dgroup:hover .pf-dgroup__icon { transform: scale(1.08) rotate(-4deg); } /* poster gallery + lightbox */ .pf-poster__zoom { transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); } .pf-poster:hover .pf-poster__zoom, .pf-poster a:focus-visible .pf-poster__zoom { transform: scale(1.1); } .pf-lightbox[open] { animation: pf-fade .25s var(--ease); } .pf-lightbox[open]::backdrop { animation: pf-fade .25s var(--ease); } .pf-lightbox__fig.is-in { animation: pf-zoom .35s var(--ease); } /* ── Articles ── */ .pf-prose h2:target, .pf-prose h3:target { animation: pf-flash 2s var(--ease); border-radius: 6px; } .pf-toc a::before { transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .pf-toc a.is-active::before { transform: scale(1.1); } .pf-share .pf-iconbtn { transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); } .pf-share .pf-iconbtn:hover { transform: translateY(-3px) scale(1.06); } .pf-author img { transition: transform var(--t-med) var(--ease); } .pf-author:hover img { transform: scale(1.05) rotate(-2deg); } .pf-follow__icon { animation: pf-glow 5s ease-out infinite 2s; } .pf-inlinecta .pf-btn--cta { position: relative; overflow: hidden; } @supports (animation-timeline: scroll()) { .pf-progress { display: block; position: absolute; inset-inline: 0; bottom: -1px; height: 3px; pointer-events: none; background: linear-gradient(to left, var(--c-green-500), var(--c-navy-600)); transform: scaleX(0); transform-origin: right; animation: pf-progress linear both; animation-timeline: scroll(root); } } } /* Smooth open/close for the FAQ where the browser can animate to height:auto (Chromium 131+) */ @media (prefers-reduced-motion: no-preference) { @supports (interpolate-size: allow-keywords) { .pf-faq { interpolate-size: allow-keywords; } .pf-faq__item::details-content { block-size: 0; overflow: clip; transition: block-size .4s var(--ease), content-visibility .4s allow-discrete; } .pf-faq__item[open]::details-content { block-size: auto; } } }