/* Clicko finish layer v1 (09.11.2026). One file for every demo site.
   The site sets --cf-accent (its accent), --cf-on-accent (text on the accent) and --cf-ink (its dark color).
   Markup hooks: [data-cf-header] on the sticky header, .cf-fab for the round contact buttons,
   [data-cf-reveal] on image boxes, [data-cf-tilt] on cards. Works without JS (everything visible). */
:root{--cf-accent:#d6f24b;--cf-on-accent:#0f1914;--cf-ink:#0f1914;--cf-wa:#25d366;--cf-ease:cubic-bezier(.2,.7,.2,1)}

/* page to page: a soft cross-fade instead of a hard jump (browsers that support it) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:cf-out .22s var(--cf-ease) both}
::view-transition-new(root){animation:cf-in .4s var(--cf-ease) both}
@keyframes cf-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes cf-in{from{opacity:0;transform:translateY(10px)}}

::selection{background:var(--cf-accent);color:var(--cf-on-accent)}
html{scrollbar-color:color-mix(in srgb,var(--cf-ink) 60%,transparent) transparent;scroll-behavior:smooth}

/* reading progress: a thin accent line at the very top */
.cf-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;pointer-events:none}
.cf-progress i{display:block;height:100%;background:var(--cf-accent);transform-origin:right center;transform:scaleX(var(--cf-p,0));will-change:transform}
[dir=ltr] .cf-progress i{transform-origin:left center}

/* sticky header gets lighter and floats once you scroll */
[data-cf-header]{transition:box-shadow .35s,background-color .35s}
html.cf-scrolled [data-cf-header]{box-shadow:0 14px 34px -22px rgba(0,0,0,.45)}

/* round floating contact buttons on the side */
.cf-fab{position:fixed;z-index:90;inset-inline-end:max(18px,env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
.cf-fab>a{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;text-decoration:none;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.12);transform:translateY(14px) scale(.6);opacity:0;
  transition:transform .55s var(--cf-ease),opacity .4s,box-shadow .3s}
html.cf-ready .cf-fab>a{transform:none;opacity:1}
html.cf-ready .cf-fab>a:nth-of-type(2){transition-delay:.09s}
.cf-fab .cf-wa{background:var(--cf-wa)}
.cf-fab .cf-tel{background:var(--cf-accent);color:var(--cf-on-accent)}
.cf-fab>a>svg{width:27px;height:27px}
.cf-fab .cf-tel svg{width:24px;height:24px}
html.cf-ready .cf-fab>a:hover,html.cf-ready .cf-fab>a:focus-visible{transform:translateY(-3px) scale(1.06);box-shadow:0 20px 36px -14px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.18)}
.cf-fab>a:focus-visible{outline:3px solid var(--cf-accent);outline-offset:3px}
.cf-fab .cf-wa::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(37,211,102,.55);pointer-events:none}
html.cf-ready .cf-fab .cf-wa::after{animation:cf-ring 2.6s ease-out 1.4s 3}
@keyframes cf-ring{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}80%,100%{box-shadow:0 0 0 18px rgba(37,211,102,0)}}
.cf-lab{position:absolute;inset-inline-end:calc(100% + 12px);top:50%;transform:translate(var(--cf-lx,-6px),-50%);white-space:nowrap;background:#fff;color:#111;
  font:700 15px/1 var(--f-b,system-ui,sans-serif);padding:10px 14px;border-radius:999px;box-shadow:0 10px 24px -12px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:opacity .25s,transform .3s var(--cf-ease)}
[dir=rtl] .cf-lab{--cf-lx:6px}
.cf-fab>a:hover .cf-lab,.cf-fab>a:focus-visible .cf-lab{opacity:1;transform:translate(0,-50%)}
@media (hover:none){.cf-lab{display:none}}
.cf-bubble{position:absolute;inset-inline-end:calc(100% + 14px);bottom:4px;width:max-content;max-width:min(230px,calc(100vw - 110px));background:#fff;color:#111;border-radius:16px;
  padding:12px 34px 12px 14px;font:600 15px/1.35 var(--f-b,system-ui,sans-serif);box-shadow:0 16px 34px -14px rgba(0,0,0,.5);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .35s,transform .45s var(--cf-ease)}
[dir=rtl] .cf-bubble{padding:12px 14px 12px 34px}
.cf-bubble.cf-show{opacity:1;transform:none;pointer-events:auto}
.cf-bubble button{position:absolute;top:6px;inset-inline-end:6px;width:24px;height:24px;border:0;border-radius:50%;background:#eef0ee;color:#333;font:700 15px/1 system-ui;cursor:pointer;display:grid;place-items:center}

/* image boxes open up from the bottom with a slow zoom (only when JS runs) */
html.cf-js [data-cf-reveal]{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s var(--cf-ease)}
html.cf-js [data-cf-reveal] img{transform:scale(1.14);transition:transform 1.6s var(--cf-ease)}
html.cf-js [data-cf-reveal].cf-in{clip-path:inset(0 0 0 0)}
html.cf-js [data-cf-reveal].cf-in img{transform:none}

/* cards lean toward the pointer, with a soft light where the pointer is */
html [data-cf-tilt][data-cf-tilt]{transform:perspective(1000px) rotateX(var(--cf-rx,0deg)) rotateY(var(--cf-ry,0deg));transition:transform .6s var(--cf-ease),opacity .7s}
html [data-cf-tilt][data-cf-tilt].cf-tilting{transition:transform .1s linear,opacity .7s}
[data-cf-tilt]>.cf-sheen{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s;
  background:radial-gradient(520px circle at var(--cf-mx,50%) var(--cf-my,50%),rgba(255,255,255,.16),transparent 42%)}
[data-cf-tilt].cf-tilting>.cf-sheen{opacity:1}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  html{scroll-behavior:auto}
  html.cf-js [data-cf-reveal]{clip-path:none;transition:none}
  html.cf-js [data-cf-reveal] img{transform:none;transition:none}
  .cf-fab>a{transition:none}
  html.cf-ready .cf-fab .cf-wa::after{animation:none}
  html [data-cf-tilt][data-cf-tilt]{transform:none}
}

/* 3D stage (clicko-3d.js): the photo stays until the 3D is drawn, and comes back if WebGL fails */
.cf3d{position:relative}
.cf3d>canvas{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;transition:opacity 1.2s;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 86%,transparent);mask-composite:intersect}
.cf3d.cf3d-on>canvas{opacity:1}
.cf3d-fb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s}
.cf3d.cf3d-wait:not(.cf3d-fail)>.cf3d-fb{opacity:0}
.cf3d.cf3d-fail>canvas{display:none}
@media (max-width:620px){.cf-fab{gap:10px}.cf-fab>a{width:52px;height:52px}.cf-fab>a>svg{width:25px;height:25px}}