/* Safarly - graphic effects layer. Polish on top of site.css; safe to delete as one file. */

/* premium scrollbar */
html { scrollbar-width: thin; scrollbar-color: rgba(76, 201, 255, .55) var(--space); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--space); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--neon), var(--gold)); border-radius: 99px; border: 2px solid var(--space); }
::selection { background: rgba(76, 201, 255, .35); color: #fff; }

/* page hero: slow camera drift, aurora light, fine scan lines */
.page-hero .hero-bg { animation: fx-drift 28s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes fx-drift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }
.fx-aurora { position: absolute; inset: -20%; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: .22;
  background: radial-gradient(40% 40% at 20% 30%, rgba(76, 201, 255, .35), transparent 70%), radial-gradient(35% 35% at 80% 20%, rgba(227, 189, 114, .28), transparent 70%), radial-gradient(40% 40% at 60% 90%, rgba(130, 90, 255, .25), transparent 70%);
  animation: fx-aurora 18s ease-in-out infinite alternate; }
@keyframes fx-aurora { from { transform: translate3d(-3%, 0, 0) rotate(0deg); } to { transform: translate3d(3%, 2%, 0) rotate(6deg); } }

.page-hero .wrap { position: relative; z-index: 2; }

/* gold words shimmer */
h1 em, h2 em { background-image: linear-gradient(100deg, var(--gold-3) 0%, var(--gold-2) 35%, #fff 50%, var(--gold-2) 65%, var(--gold-3) 100%); background-size: 220% 100%; animation: fx-shimmer 6s linear infinite; }
@keyframes fx-shimmer { from { background-position: 100% 0; } to { background-position: -120% 0; } }

/* photo cards: light sweep, cursor spotlight, glowing edge, tilt */
.card, .service { --mx: 50%; --my: 50%; }
.card { position: relative; }
.card::before, .service::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(155, 231, 255, .22), transparent 65%); }
.card:hover::before, .service:hover::after { opacity: 1; }
.card-img::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none; transform: translateX(-130%) skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.card:hover .card-img::after { transform: translateX(320%) skewX(-20deg); }
.card:hover, a.service:hover { border-color: rgba(76, 201, 255, .5); }
.fx-tilt { will-change: transform; transition: transform .25s ease-out, box-shadow .3s; }

.cta-band > img { animation: fx-drift 30s ease-in-out infinite alternate; }

/* buttons: shine sweep */
.btn { position: relative; overflow: hidden; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); }
.btn:hover::after { animation: fx-sweep .8s ease-out; }
@keyframes fx-sweep { to { left: 130%; } }

@media (hover: none) { .fx-tilt { transform: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .page-hero .hero-bg, .fx-aurora, h1 em, h2 em, .cta-band > img { animation: none !important; }
}

/* ---------- round 2 ---------- */

/* soft light that follows the mouse (desktop only, added by fx.js) */
.fx-aura { position: fixed; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(closest-side, rgba(76, 201, 255, .13), rgba(227, 189, 114, .05) 55%, transparent 75%); mix-blend-mode: screen; will-change: transform; }
.fx-aura.on { opacity: 1; }

/* shooting stars across the night background */
.fx-star { position: fixed; z-index: -1; pointer-events: none; width: 140px; height: 1.5px; opacity: 0; transform: rotate(-28deg);
  background: linear-gradient(90deg, transparent, rgba(155, 231, 255, .9), #fff); border-radius: 99px; filter: drop-shadow(0 0 6px rgba(155, 231, 255, .9)); animation: fx-shoot 9s linear infinite; }
.fx-star:nth-child(1) { top: 12%; left: 62%; animation-delay: 1s; }
.fx-star:nth-child(2) { top: 30%; left: 88%; animation-delay: 5.5s; animation-duration: 11s; }
.fx-star:nth-child(3) { top: 8%; left: 30%; animation-delay: 8.5s; animation-duration: 13s; }
@keyframes fx-shoot { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-28deg); } 3% { opacity: 1; } 12% { opacity: 0; transform: translate3d(-380px, 200px, 0) rotate(-28deg); } 100% { opacity: 0; transform: translate3d(-380px, 200px, 0) rotate(-28deg); } }

/* panels: spinning light around the edge on hover */
@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.glass, .search, .review, .steps li, .why > *, .contact-item { position: relative; }
.glass::after, .review::after, .contact-item::after, .why > *::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: conic-gradient(from var(--fx-a), transparent 0 60%, var(--neon) 80%, var(--gold) 95%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: fx-spin 4s linear infinite; }
.glass:hover::after, .review:hover::after, .contact-item:hover::after, .why > *:hover::after { opacity: 1; }
@keyframes fx-spin { to { --fx-a: 360deg; } }

/* page opening: photo focuses in, hero words rise one after another */
.page-hero .hero-bg { animation: fx-focus 1.4s cubic-bezier(.2, .7, .2, 1) both, fx-drift 28s ease-in-out 1.4s infinite alternate; }
@keyframes fx-focus { from { filter: blur(14px) saturate(.6); opacity: .4; } to { filter: none; opacity: 1; } }
.page-hero .wrap > * { animation: fx-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.page-hero .wrap > :nth-child(2) { animation-delay: .12s; }
.page-hero .wrap > :nth-child(3) { animation-delay: .24s; }
@keyframes fx-rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .fx-star, .glass::after, .review::after, .contact-item::after, .why > *::after, .page-hero .wrap > * { animation: none !important; }
  .page-hero .hero-bg { animation: none !important; }
}
.logo-custom { object-fit: contain; filter: none; }

/* drawings on thank-you / not-found / message pages */
.ill { display: block; width: min(360px, 82vw); height: auto; margin: 0 auto 22px; filter: drop-shadow(0 20px 40px rgba(76, 201, 255, .18)); animation: fx-float 7s ease-in-out infinite alternate; }
@keyframes fx-float { from { transform: translateY(0); } to { transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce) { .ill { animation: none; } }