/* ========================================================================== ZIVA BEAUTY — ANIMATION LAYER Reveal utilities, keyframes, loaders & page-transition overlay. GSAP drives most timed sequences; this file supplies the CSS states they animate between, plus pure-CSS fallbacks when motion is reduced. ========================================================================== */ /* ---------- Preloader ---------- */ .preloader{ position:fixed;inset:0;z-index:9999; background:var(--ivory); display:flex;align-items:center;justify-content:center; transition:opacity .9s var(--ease), visibility .9s var(--ease); } .preloader img{ height:64px;width:auto; opacity:0; transform:translateY(14px) scale(.96); } body.loaded .preloader{opacity:0;visibility:hidden;pointer-events:none;} /* ---------- Page transition overlay ---------- */ .page-transition{ position:fixed;inset:0; z-index:8000; pointer-events:none; background:var(--ink); transform:scaleY(0); transform-origin:bottom; } .page-transition .pt-logo{ position:absolute;top:50%;left:50%; transform:translate(-50%,-50%) scale(.85); opacity:0; height:48px;width:auto; filter:brightness(0) invert(1); } .page-transition .pt-sheen{ position:absolute;inset:0; background:linear-gradient(100deg, transparent 40%, rgba(212,175,122,.5) 50%, transparent 60%); opacity:0; } /* ---------- Scroll reveal primitives ---------- Content stays fully visible unless the tiny inline head-script confirms JS actually ran (adds .js to ) — so a blocked/slow/broken script never leaves real content permanently invisible. */ .js [data-reveal]{ opacity:0; transform:translateY(48px); } [data-reveal].is-revealed, .reduced-motion [data-reveal]{ opacity:1; transform:none; transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); } .js [data-reveal="fade"]{transform:none;} .js [data-reveal="scale"]{transform:scale(1.06);} .js [data-reveal="left"]{transform:translateX(-56px);} .js [data-reveal="right"]{transform:translateX(56px);} .js [data-reveal="mask"]{transform:none;clip-path:inset(0 0 100% 0);} [data-reveal="mask"].is-revealed{clip-path:inset(0 0 0% 0);transition:clip-path 1.2s var(--ease);} [data-reveal-group] [data-reveal]{transition-delay:calc(var(--i,0) * 90ms);} /* split text lines */ .split-line{overflow:hidden;display:block;} .split-line > span{ display:inline-block; transform:translateY(110%); transition:transform 1s var(--ease); } .split-line.is-revealed > span{transform:translateY(0);} /* word-by-word emphasis reveal (Why Ziva section etc.) */ .word-fade{opacity:.22;transition:opacity .5s var(--ease), color .5s var(--ease);} .word-fade.is-active{opacity:1;} /* floating idle motion */ @keyframes floatY{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-16px);} } .float{animation:floatY 7s ease-in-out infinite;} .float-slow{animation:floatY 11s ease-in-out infinite;} .float-delay{animation-delay:1.4s;} @keyframes rotateSlow{ to{transform:rotate(360deg);} } .spin-slow{animation:rotateSlow 40s linear infinite;} @keyframes pulseGlow{ 0%,100%{opacity:.5;} 50%{opacity:1;} } .pulse{animation:pulseGlow 4s ease-in-out infinite;} @keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} } .marquee-track{ display:flex;width:max-content; animation:marquee 34s linear infinite; } @keyframes shimmerLine{ 0%{transform:scaleX(0);transform-origin:left;} 50%{transform:scaleX(1);transform-origin:left;} 50.001%{transform-origin:right;} 100%{transform:scaleX(0);transform-origin:right;} } @keyframes dripFlow{ 0%{stroke-dashoffset:1000;} 100%{stroke-dashoffset:0;} } @keyframes particleDrift{ 0%{transform:translate3d(0,0,0);} 100%{transform:translate3d(var(--dx,20px),var(--dy,-30px),0);} } /* horizontal method / journey rail */ .rail-wrap{overflow:hidden;} .rail{ display:flex; will-change:transform; } /* results gallery reveal */ @keyframes imgUnmask{ from{clip-path:inset(0 0 0 100%);} to{clip-path:inset(0 0 0 0%);} } /* accessible motion off */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.2s!important; scroll-behavior:auto!important; } [data-reveal]{opacity:1;transform:none;clip-path:none;} .split-line > span{transform:none;} .float,.float-slow,.spin-slow,.pulse,.marquee-track{animation:none!important;} }