/* =================================================================== BookADholPlayer — shared motion layer (anim.css) Loaded on every page. Pure enhancement: if JS never runs, or the visitor prefers reduced motion, nothing is hidden and the site looks exactly as before. All "hidden until revealed" states are gated behind html.anim-ready, which JS only sets when motion is OK. =================================================================== */ :root{ --anim-ease:cubic-bezier(.2,.7,.2,1); } html{scroll-behavior:smooth} /* Fallbacks so this file works even on pages with a slimmer :root */ .scroll-prog,.cursor-glow,.lb-overlay{--gold-b:var(--gold-bright,#f0c75a)} /* ---------- 1. SCROLL REVEAL -------------------------------------- */ /* Known content blocks start hidden ONLY when anim-ready is present. index.html drives its own `.reveal` elements, so we skip those here to avoid fighting its existing CSS. */ html.anim-ready :is( .sec-head,.svc-head, .step,.occ-card,.pkg,.rev-card,.feature,.gal-item,.vid-item,.post-card, .faq-item,.field,.stat,.related,.inline,.form-card,.pkg-foot, .page-hero .inner > * ):not(.reveal){ opacity:0;transform:translateY(32px); transition:opacity .8s var(--anim-ease) var(--a-delay,0s), transform .8s var(--anim-ease) var(--a-delay,0s); } html.anim-ready :is( .sec-head,.svc-head, .step,.occ-card,.pkg,.rev-card,.feature,.gal-item,.vid-item,.post-card, .faq-item,.field,.stat,.related,.inline,.form-card,.pkg-foot, .page-hero .inner > * ):not(.reveal).a-in{opacity:1;transform:none} /* Safety net: the hero runs its own entrance animation, so reveal must NEVER hide its contents (e.g. hero stats) — otherwise stale/failed JS would leave them invisible. Higher specificity than the hide rule above, so it always wins. */ html.anim-ready .hero :is(.sec-head,.stat,.field,.pkg-foot,.gal-item,.vid-item):not(.reveal){opacity:1;transform:none} /* directional / scale variants (opt-in via .a-left etc. if ever tagged) */ html.anim-ready .a-left:not(.a-in){transform:translateX(-46px)} html.anim-ready .a-right:not(.a-in){transform:translateX(46px)} html.anim-ready .a-scale:not(.a-in){transform:scale(.9)} /* ---------- 2. SCROLL PROGRESS BAR -------------------------------- */ .scroll-prog{ position:fixed;top:0;left:0;right:0;height:3px;z-index:300; transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--gold,#c9a23f),var(--gold-bright,#f0c75a)); box-shadow:0 0 14px rgba(240,199,90,.6);pointer-events:none; } /* ---------- 3. CUSTOM CURSOR GLOW (desktop pointers only) --------- */ .cursor-glow{ position:fixed;top:0;left:0;width:340px;height:340px;z-index:290; margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(240,199,90,.16),rgba(240,199,90,0) 60%); mix-blend-mode:screen;opacity:0;transition:opacity .35s ease; will-change:transform; } body.has-cursor .cursor-glow{opacity:1} body.has-cursor.cursor-hot .cursor-glow{ background:radial-gradient(circle,rgba(240,199,90,.28),rgba(240,199,90,0) 60%); } @media (hover:none),(pointer:coarse){ .cursor-glow{display:none} } /* ---------- 4. NAV: hide on scroll-down, animated underline ------- */ body nav.anim-nav{ transition:transform .45s var(--anim-ease),background .3s,padding .3s,box-shadow .3s; } body nav.anim-nav.nav-hidden{transform:translateY(-115%)} .nav-links a:not(.nav-cta){position:relative} .nav-links a:not(.nav-cta)::after{ content:"";position:absolute;left:0;right:100%;bottom:-5px;height:2px;border-radius:2px; background:var(--gold-bright,#f0c75a);transition:right .32s var(--anim-ease); } .nav-links a:not(.nav-cta):hover::after{right:0} /* ---------- 5. MICRO-INTERACTIONS on existing components ---------- */ /* magnetic buttons get a spring transition; JS sets the transform */ .btn-primary,.nav-cta,.btn-dark,.btn-pkg,.btn-ghost{will-change:transform} .mag{transition:transform .25s var(--anim-ease)} /* gloss sweep across primary buttons on hover */ .btn-primary{position:relative;overflow:hidden;isolation:isolate} .btn-primary::after{ content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;z-index:-1; background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-20deg);transition:left .65s var(--anim-ease); } .btn-primary:hover::after{left:135%} /* tilt cards — JS adds .tiltable; keeps a soft spring back */ .tiltable{transition:transform .4s var(--anim-ease),box-shadow .4s var(--anim-ease);transform-style:preserve-3d} /* gallery items are now interactive */ .gal-item{cursor:pointer} .gal-item::after{ content:"⤢";position:absolute;top:12px;right:14px;z-index:3; width:34px;height:34px;display:flex;align-items:center;justify-content:center; border-radius:50%;background:rgba(12,12,14,.55);color:var(--gold-bright,#f0c75a); font-size:1rem;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s; backdrop-filter:blur(3px);pointer-events:none; } .gal-item:hover::after{opacity:1;transform:scale(1)} /* ---------- 6. GALLERY LIGHTBOX ---------------------------------- */ .lb-overlay{ position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center; background:rgba(8,8,10,.94);backdrop-filter:blur(6px); opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;padding:24px; } .lb-overlay.open{opacity:1;visibility:visible} .lb-figure{position:relative;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:14px} .lb-img{ max-width:92vw;max-height:82vh;border-radius:14px;object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.6); opacity:0;transform:scale(.94);transition:opacity .4s var(--anim-ease),transform .4s var(--anim-ease); } .lb-overlay.open .lb-img{opacity:1;transform:scale(1)} .lb-cap{color:rgba(244,242,238,.75);font-size:.9rem;letter-spacing:.02em;text-align:center} .lb-btn{ position:absolute;top:50%;transform:translateY(-50%); width:52px;height:52px;border-radius:50%;border:1px solid rgba(240,199,90,.4); background:rgba(20,20,24,.7);color:var(--gold-bright,#f0c75a);font-size:1.5rem;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s,border-color .2s; } .lb-btn:hover{background:rgba(240,199,90,.16);border-color:var(--gold-bright,#f0c75a);transform:translateY(-50%) scale(1.08)} .lb-prev{left:-4px} .lb-next{right:-4px} .lb-close{ position:fixed;top:22px;right:26px;width:48px;height:48px;border-radius:50%; border:1px solid rgba(244,242,238,.25);background:rgba(20,20,24,.7);color:#f4f2ee; font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center; transition:transform .2s,background .2s; } .lb-close:hover{background:rgba(244,242,238,.12);transform:rotate(90deg)} @media(max-width:640px){ .lb-prev{left:2px} .lb-next{right:2px} .lb-btn{width:44px;height:44px} } /* ---------- 6b. VIDEO LIGHTBOX ----------------------------------- */ .vlb-overlay{ position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center; background:rgba(8,8,10,.95);backdrop-filter:blur(6px); opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;padding:24px; } .vlb-overlay.open{opacity:1;visibility:visible} .vlb-video{ max-width:92vw;max-height:86vh;width:auto;height:auto;border-radius:14px;background:#000;display:block; box-shadow:0 30px 80px rgba(0,0,0,.6); opacity:0;transform:scale(.96);transition:opacity .4s var(--anim-ease),transform .4s var(--anim-ease); } .vlb-overlay.open .vlb-video{opacity:1;transform:scale(1)} /* ---------- 6c. VIDEO SHOWCASE GRID (Services + Home) ------------ */ .vid-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:250px;gap:16px;margin-top:46px} .vid-item{position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(217,154,43,.2);padding:0;cursor:pointer;background:linear-gradient(160deg,var(--maroon,#1f1f24),var(--deep,#161619));display:block} .vid-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s;opacity:.92} .vid-item:hover img{transform:scale(1.07);opacity:1} .vid-item::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(12,12,14,.55),rgba(12,12,14,0) 55%)} .vid-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:64px;height:64px;border-radius:50%;background:rgba(240,199,90,.92);color:#161619;display:flex;align-items:center;justify-content:center;font-size:1.4rem;padding-left:4px;box-shadow:0 8px 26px rgba(0,0,0,.35);transition:transform .25s,background .25s} .vid-item:hover .vid-play{transform:translate(-50%,-50%) scale(1.12);background:var(--gold-bright,#f0c75a)} .vid-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px;color:var(--cream,#f4f2ee);font-weight:600;font-size:.98rem;text-align:left} @media(max-width:860px){.vid-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:220px}} @media(max-width:520px){.vid-grid{grid-template-columns:1fr;grid-auto-rows:230px}} /* ---------- 7. AMBIENT DECOR --------------------------------------- */ /* gentle float for hero rings when JS parallax is unavailable */ @media (prefers-reduced-motion:no-preference){ .page-hero .ring{animation:floaty 14s ease-in-out infinite} .page-hero .ring:nth-of-type(2){animation-duration:20s;animation-direction:reverse} } @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}} /* count-up numbers avoid layout shift while animating */ .counting{font-variant-numeric:tabular-nums} /* ---------- 8. REDUCED MOTION safety ------------------------------ */ @media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important} .scroll-prog,.cursor-glow{display:none} .page-hero .ring{animation:none} } /* ===================================================================== LIGHT THEME — clean, contemporary re-skin (white base, gold accent). Loaded after each page's inline