/* Petwal Gems — loading screen (app/Views/partials/loader.php, js/loader.js). Shown only while has .pg-loading (added by an inline script in ), so without JS the page is never covered. */ .pg-loader { display: none; } html.pg-loading { overflow: hidden; } html.pg-loading .pg-loader { --gold-hi: #F6DC98; --gold: #C59B2B; --gold-lo: #8A6417; --maroon: #8B1A1A; --size: min(330px, 64vw); position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 38px; color: #fff; overflow: hidden; } /* ---------- sky: two twinkling star layers + a slow nebula ---------- */ .pg-loader__sky, .pg-loader__sky::before, .pg-loader__sky::after { position: absolute; inset: 0; pointer-events: none; } /* The sky carries the loader's whole backdrop, so the exit iris can clip it alone — animating clip-path on an ancestor of the 3D medallion breaks its backface hiding. */ .pg-loader__sky { background: radial-gradient(40% 35% at 20% 25%, rgba(96, 44, 150, .25), transparent 70%), radial-gradient(35% 40% at 82% 70%, rgba(197, 155, 43, .16), transparent 70%), radial-gradient(ellipse 70% 60% at 50% 42%, #3d1017 0%, #1c080c 48%, #0b0406 100%); clip-path: circle(150% at 50% 42%); } .pg-loader__sky::before, .pg-loader__sky::after { content: ""; background-repeat: repeat; } .pg-loader__sky::before { background-image: radial-gradient(1.2px 1.2px at 20px 30px, #fff6e6, transparent 60%), radial-gradient(1px 1px at 90px 120px, #F6DC98, transparent 60%), radial-gradient(1.4px 1.4px at 150px 60px, #fff, transparent 60%), radial-gradient(1px 1px at 60px 170px, #fff6e6, transparent 60%); background-size: 190px 190px; animation: pgl-twinkle 3.2s ease-in-out infinite alternate; } .pg-loader__sky::after { background-image: radial-gradient(1px 1px at 40px 80px, #fff, transparent 60%), radial-gradient(1.6px 1.6px at 130px 20px, #F6DC98, transparent 60%), radial-gradient(1px 1px at 170px 150px, #fff6e6, transparent 60%); background-size: 230px 230px; animation: pgl-twinkle 4.4s ease-in-out -2s infinite alternate; } /* ---------- stage ---------- */ .pg-loader__stage { position: relative; width: var(--size); height: var(--size); perspective: 1100px; transform-style: preserve-3d; animation: pgl-rise 1.2s cubic-bezier(.22, 1, .36, 1) both; } .pg-loader__rays { position: absolute; inset: -45%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(246, 220, 152, .13) 0deg 4deg, transparent 4deg 18deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%); animation: pgl-spin 40s linear infinite; } .pg-loader__rays::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle, rgba(246, 220, 152, .5), rgba(197, 155, 43, .15) 40%, transparent 68%); animation: pgl-breathe 2.6s ease-in-out infinite; } /* tilted planes: the dial leans back, the gem orbit crosses it */ .pg-loader__plane { position: absolute; inset: 0; transform-style: preserve-3d; } .pg-loader__plane--dial { transform: rotateX(68deg) rotateY(-8deg) scale(1.28); } .pg-loader__plane--gems { transform: rotateX(74deg) rotateY(22deg) scale(1.02); } .pg-loader__spin { position: absolute; inset: 0; transform-style: preserve-3d; animation: pgl-spin 18s linear infinite; } .pg-loader__spin--rev { animation-duration: 9s; animation-direction: reverse; } .pg-loader__dial { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; filter: drop-shadow(0 0 6px rgba(246, 220, 152, .55)); } .pg-loader__draw { stroke: var(--gold-hi); stroke-width: 1.6; stroke-dasharray: 1240; stroke-dashoffset: 1240; animation: pgl-draw 1.6s .2s cubic-bezier(.65, 0, .35, 1) forwards; } .pg-loader__draw--thin { stroke-width: 1; stroke-dasharray: 950; stroke-dashoffset: 950; animation-delay: .45s; } .pg-loader__dash { stroke: var(--gold); stroke-width: 1; stroke-dasharray: 2 6; opacity: 0; animation: pgl-fade .6s 1s forwards; } .pg-loader__tick { stroke: var(--gold); stroke-width: 1; opacity: 0; animation: pgl-fade .6s 1.1s forwards; } .pg-loader__sign { --w: calc(var(--size) * .1); position: absolute; top: 50%; left: 50%; width: var(--w); height: var(--w); margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2); display: grid; place-items: center; opacity: 0; transform: rotate(calc(var(--i) * 30deg + 15deg)) translateY(calc(var(--size) * -.435)); animation: pgl-fade .5s calc(1s + var(--i) * 60ms) forwards; } .pg-loader__sign i::before { margin: 0 !important; font-size: calc(var(--size) * .062) !important; line-height: 1; color: transparent; background: linear-gradient(135deg, #fff3cf, #F6DC98 40%, #C59B2B); -webkit-background-clip: text; background-clip: text; } /* faceted gems: conic facets + a glow in each stone's colour */ .pg-loader__gem { --g: calc(var(--size) * .075); --a: calc(var(--i) * 40deg); position: absolute; top: 50%; left: 50%; width: var(--g); height: var(--g); margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2); border-radius: 50%; opacity: 0; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .95) 0 8%, transparent 26%), conic-gradient(from 20deg, var(--c), color-mix(in srgb, var(--c) 55%, #fff), var(--c), color-mix(in srgb, var(--c) 60%, #000), var(--c), color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 0 14px 2px color-mix(in srgb, var(--c) 70%, transparent); transform: rotate(var(--a)) translateY(calc(var(--size) * -.5)) rotateX(-74deg); animation: pgl-pop .6s calc(1.3s + var(--i) * 70ms) cubic-bezier(.34, 1.56, .64, 1) forwards; } /* ---------- 3D medallion ---------- */ .pg-loader__coin-wrap { position: absolute; inset: 0; margin: auto; width: 46%; height: 46%; perspective: 900px; } .pg-loader__coin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: pgl-coin-in 1.4s .3s cubic-bezier(.22, 1, .36, 1) both, pgl-coin 5.2s 1.7s cubic-bezier(.65, 0, .35, 1) infinite; } .pg-loader__edge { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(90deg, #6b4c10, #F6DC98 30%, #C59B2B 55%, #8A6417 80%, #F6DC98); transform: translateZ(calc(var(--z) * 1px)); } .pg-loader__face { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; box-shadow: 0 0 0 3px #F6DC98, 0 0 0 6px rgba(138, 100, 23, .9), 0 0 40px rgba(246, 220, 152, .45); } /* Chrome ignores backface-visibility here while the coin's rotation is animated, so each face also switches on/off in step with pgl-coin, exactly when the coin is edge-on (90°/270°). */ .pg-loader__face--front { transform: translateZ(6px); background: #fff; animation: pgl-front 5.2s 1.7s linear infinite; } .pg-loader__face--back { transform: rotateY(180deg) translateZ(6px); opacity: 0; background: radial-gradient(circle at 35% 28%, #4a1219, #1c080c 70%); animation: pgl-back 5.2s 1.7s linear infinite; } .pg-loader__face img { width: 100%; height: 100%; object-fit: cover; } .pg-loader__face--back img { width: 82%; height: auto; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)); } /* travelling sheen over both faces */ .pg-loader__face::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 46%, rgba(255, 255, 255, .1) 54%, transparent 64%); transform: translateX(-120%); animation: pgl-sheen 2.6s 1.6s ease-in-out infinite; } .pg-loader__flare { position: absolute; inset: -30%; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255, 246, 220, .95), rgba(246, 220, 152, .5) 30%, transparent 62%); } /* ---------- text + progress ---------- */ .pg-loader__meta { position: relative; text-align: center; animation: pgl-rise 1s .5s cubic-bezier(.22, 1, .36, 1) both; } .pg-loader__hi { margin: 0 0 6px; font: 600 15px/1.4 "Noto Sans Devanagari", sans-serif; color: var(--gold-hi); letter-spacing: .02em; } .pg-loader__brand { margin: 0 0 18px; font: 700 clamp(28px, 5vw, 38px)/1 "Playfair Display", Georgia, serif; letter-spacing: .04em; color: #fff; } .pg-loader__brand em { font-style: italic; color: transparent; background: linear-gradient(100deg, #C59B2B, #F6DC98 30%, #fff6dc 42%, #C59B2B 60%, #F6DC98); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; animation: pgl-shimmer 3s linear infinite; } .pg-loader__bar { width: min(260px, 64vw); height: 2px; margin: 0 auto 14px; border-radius: 2px; background: rgba(246, 220, 152, .18); overflow: hidden; } .pg-loader__bar span { display: block; height: 100%; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, #8A6417, #F6DC98 60%, #fff); box-shadow: 0 0 12px rgba(246, 220, 152, .9); } .pg-loader__msg { margin: 0; font: 600 11.5px/1 "Raleway", sans-serif; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 244, 228, .72); } .pg-loader__pct { display: inline-block; min-width: 2.2em; text-align: right; color: var(--gold-hi); font-variant-numeric: tabular-nums lining-nums; } .pg-loader__sep { color: var(--gold); margin: 0 6px; } .pg-loader__word { display: inline-block; transition: opacity .35s, transform .35s; } .pg-loader__word.is-swap { opacity: 0; transform: translateY(6px); } /* ---------- exit: flare, rings burst, iris closes into the medallion ---------- */ .pg-loader.is-done .pg-loader__sky { animation: pgl-iris 1s .45s cubic-bezier(.76, 0, .24, 1) forwards; } .pg-loader.is-done .pg-loader__stage { animation: pgl-sink 1s .45s cubic-bezier(.76, 0, .24, 1) forwards; } .pg-loader.is-done .pg-loader__flare { animation: pgl-flare .9s cubic-bezier(.22, 1, .36, 1) forwards; } .pg-loader.is-done .pg-loader__plane--dial { transition: transform .9s cubic-bezier(.22, 1, .36, 1), opacity .7s; transform: rotateX(68deg) rotateY(-8deg) scale(2.2); opacity: 0; } .pg-loader.is-done .pg-loader__plane--gems { transition: transform .9s cubic-bezier(.22, 1, .36, 1), opacity .7s; transform: rotateX(74deg) rotateY(22deg) scale(2); opacity: 0; } .pg-loader.is-done .pg-loader__meta { transition: opacity .4s, transform .5s; opacity: 0; transform: translateY(12px); } .pg-loader.is-done .pg-loader__coin-wrap { transition: transform .8s cubic-bezier(.22, 1, .36, 1); transform: scale(1.12); } /* quick version (later pages of a visit, reduced motion): a short fade instead of the iris */ .pg-loader.is-quick.is-done { animation: pgl-fadeout .42s ease forwards; } .pg-loader.is-quick.is-done .pg-loader__sky, .pg-loader.is-quick.is-done .pg-loader__stage, .pg-loader.is-quick.is-done .pg-loader__flare { animation: none; } /* ---------- keyframes ---------- */ @keyframes pgl-spin { to { rotate: 360deg; } } @keyframes pgl-draw { to { stroke-dashoffset: 0; } } @keyframes pgl-fade { to { opacity: 1; } } @keyframes pgl-pop { from { opacity: 0; scale: 0; } to { opacity: 1; scale: 1; } } @keyframes pgl-rise { from { opacity: 0; translate: 0 24px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } } @keyframes pgl-breathe { 0%, 100% { opacity: .7; scale: 1; } 50% { opacity: 1; scale: 1.12; } } @keyframes pgl-twinkle { from { opacity: .35; } to { opacity: 1; } } @keyframes pgl-nebula { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.15) rotate(8deg); } } @keyframes pgl-shimmer { to { background-position: -220% 0; } } @keyframes pgl-sheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } } /* entrance swings in from edge-on (never past 90°, so only the front face is ever toward us) */ @keyframes pgl-coin-in { from { transform: rotateY(-88deg) rotateX(24deg) scale(.25); opacity: 0; } to { transform: rotateY(0) rotateX(0) scale(1); opacity: 1; } } /* pgl-coin eases 0→180° between 30% and 45% and 180→360° between 80% and 95%; the easing is symmetric, so the coin is edge-on at 37.5% and 87.5%. */ @keyframes pgl-front { 0%, 37.49% { opacity: 1; } 37.5%, 87.49% { opacity: 0; } 87.5%, 100% { opacity: 1; } } @keyframes pgl-back { 0%, 37.49% { opacity: 0; } 37.5%, 87.49% { opacity: 1; } 87.5%, 100% { opacity: 0; } } /* hold the Kendra seal, flip to Petwal Gems, hold, flip back — with a gentle tilt */ @keyframes pgl-coin { 0%, 30% { transform: rotateY(0deg) rotateX(0deg); } 45% { transform: rotateY(180deg) rotateX(8deg); } 50%, 80% { transform: rotateY(180deg) rotateX(0deg); } 95%, 100% { transform: rotateY(360deg) rotateX(-8deg); } } @keyframes pgl-flare { 0% { opacity: 0; scale: .6; } 35% { opacity: 1; } 100% { opacity: 0; scale: 2.4; } } @keyframes pgl-iris { to { clip-path: circle(0% at 50% 42%); } } @keyframes pgl-sink { to { scale: 0; } } /* ---------- reduced motion: a still, calm version that fades out ---------- */ @media (prefers-reduced-motion: reduce) { .pg-loader *, .pg-loader *::before, .pg-loader *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } .pg-loader.is-done { animation: pgl-fadeout .5s forwards !important; } .pg-loader.is-done .pg-loader__sky, .pg-loader.is-done .pg-loader__stage { animation: none !important; } .pg-loader.is-done .pg-loader__flare { animation: none; } } @keyframes pgl-fadeout { to { opacity: 0; } }