/* TLDsKing premium polish — floating WhatsApp + readable expanding navigation.
   CSS-only enhancement. Existing routes, backend, forms and hover rail remain intact. */
:root { --tk-motion: cubic-bezier(.22,1,.36,1); }

/* Expanded nav: two-line long labels at a legible size, instead of clipping
   'Business Email' and 'Website Builder' down to tiny text at 100% zoom. */
@media (min-width:991px) {
  .site-header .tk-v5-rail { overflow: visible; }
  .site-header .tk-v5-rail .tk-v5-link {
    font-size: 12px !important;
    letter-spacing: -.025em !important;
    line-height: 1.18;
    transition: background-color .28s ease, color .28s ease, border-color .28s ease,
                flex .48s var(--tk-motion), transform .28s var(--tk-motion);
  }
  .site-header .tk-v5-rail:hover .tk-v5-link,
  .site-header .tk-v5-rail:focus-within .tk-v5-link,
  .site-header .tk-v5-rail.tk5-open .tk-v5-link {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0;
    padding-inline: 4px;
  }
  .site-header .tk-v5-rail .tk-v5-label {
    white-space: normal;
    overflow: hidden;
    overflow-wrap: normal;
    text-align: left;
    line-height: 1.16;
    font-size: 12px;
    max-width: 0;
    opacity: 0;
  }
  .site-header .tk-v5-rail:hover .tk-v5-label,
  .site-header .tk-v5-rail:focus-within .tk-v5-label,
  .site-header .tk-v5-rail.tk5-open .tk-v5-label {
    max-width: 96px;
    margin-left: 5px;
    opacity: 1;
  }
  .site-header .tk-v5-icon { flex: 0 0 16px; }
  .site-header .tk-v5-icon svg { width: 16px; height: 16px; }
  .site-header .tk-v5-rail .tk-v5-link:hover { transform:translateY(-1px); }
}
@media (min-width:991px) and (max-width:1120px) {
  .site-header .tk-v5-rail .tk-v5-label { font-size: 11.5px; }
  .site-header .tk-v5-rail:hover .tk-v5-label,
  .site-header .tk-v5-rail:focus-within .tk-v5-label,
  .site-header .tk-v5-rail.tk5-open .tk-v5-label { margin-left: 3px; }
  .site-header .tk-v5-rail:hover .tk-v5-link,
  .site-header .tk-v5-rail:focus-within .tk-v5-link,
  .site-header .tk-v5-rail.tk5-open .tk-v5-link { padding-inline: 2px; }
}

/* Floating contact: not inside navigation and always easy to reach. */
.tk-floating-whatsapp {
  position: fixed;
  z-index: 1000;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(140deg,#38db80,#109944);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 14px 36px rgba(12,91,44,.33), inset 0 1px 0 rgba(255,255,255,.38);
  border: 2px solid rgba(255,255,255,.86);
  transition: transform .35s var(--tk-motion),box-shadow .35s ease;
  isolation: isolate;
}
.tk-floating-whatsapp::before {
  content:"";
  position:absolute;
  inset:-6px;
  border:1px solid rgba(47,200,104,.35);
  border-radius:50%;
  animation: tk-wa-halo 3s ease-in-out infinite;
  pointer-events:none;
}
.tk-floating-whatsapp:hover,
.tk-floating-whatsapp:focus-visible {
  color:white;
  transform:translateY(-6px) scale(1.06);
  box-shadow:0 20px 40px rgba(10,104,50,.36),inset 0 1px 0 rgba(255,255,255,.38);
}
.tk-floating-whatsapp:focus-visible { outline:3px solid #eac78b; outline-offset:4px; }
.tk-wa-icon { display:flex;align-items:center;justify-content:center; }
.tk-wa-tooltip {
  position:absolute;
  right:calc(100% + 13px);
  top:50%;
  transform:translate(8px,-50%);
  background:#2c1b3c;
  color:#fff8ef;
  padding:10px 13px;
  border:1px solid rgba(222,183,126,.4);
  border-radius:10px;
  font:700 12px/1.1 'Manrope',sans-serif;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  box-shadow:0 10px 25px rgba(27,13,42,.17);
  transition:opacity .22s ease,transform .3s var(--tk-motion),visibility .22s;
}
.tk-floating-whatsapp:hover .tk-wa-tooltip,
.tk-floating-whatsapp:focus-visible .tk-wa-tooltip {
  opacity:1; visibility:visible; transform:translate(0,-50%);
}
@keyframes tk-wa-halo {
  0%,100% { transform:scale(.94);opacity:.65; }
  55% { transform:scale(1.08);opacity:.2; }
}

/* More premium visual movement without dependencies or heavy JS. */
.v4-hero .v4-hero-copy,
.page-hero .container,
.king-service-hero .container {
  animation:tk-content-enter .82s var(--tk-motion) both;
}
.v4-hero .v4-prism-scene { animation:tk-content-enter 1.1s var(--tk-motion) .10s both; }
@keyframes tk-content-enter {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
.site-header .wordmark .brand-symbol {
  transition:transform .55s var(--tk-motion),filter .35s ease;
}
.site-header .wordmark:hover .brand-symbol { transform:rotate(-8deg) scale(1.08); filter:drop-shadow(0 4px 8px rgba(132,81,163,.22)); }
.domain-card,.king-plan-card,.king-feature-3d,.extension-card,.king-story-panel {
  transition:transform .4s var(--tk-motion),box-shadow .4s ease,border-color .35s ease;
}
.domain-card:hover,.king-plan-card:hover,.king-feature-3d:hover,.extension-card:hover,.king-story-panel:hover {
  transform:translateY(-5px);
  box-shadow:0 22px 46px rgba(38,22,58,.13);
}
.button,.king-gold-button,.v4-search button {
  transition: transform .3s var(--tk-motion),box-shadow .3s ease,filter .3s ease,background .3s ease;
}
.button:hover,.king-gold-button:hover,.v4-search button:hover {
  transform:translateY(-2px);
  filter:brightness(1.035);
}
/* Smooth nav / card motion only for users who allow animation. */
@media (max-width:990px) {
  .site-header .tk-v5-rail .tk-v5-label { font-size:14px; white-space:normal; }
  .tk-floating-whatsapp { width:54px;height:54px;right:max(15px,env(safe-area-inset-right));bottom:max(15px,env(safe-area-inset-bottom)); }
  .tk-floating-whatsapp .tk-wa-icon svg { width:27px;height:27px; }
}
@media (prefers-reduced-motion:reduce) {
  .tk-floating-whatsapp::before { animation:none; }
  .tk-floating-whatsapp,.tk-wa-tooltip,
  .v4-hero .v4-hero-copy,.v4-hero .v4-prism-scene,
  .page-hero .container,.king-service-hero .container { animation:none;transition:none; }
  .domain-card,.king-plan-card,.king-feature-3d,.extension-card,.king-story-panel { transition:none; }
}