/* Decorative polish only. No content is created, hidden, or delayed by this file:
   reveal states apply exclusively under .jf-js, which the script adds at runtime.
   Without JS every element renders in its final, visible state. */

[data-anim] { opacity: 0; }
[data-anim].in { animation: var(--a) .8s cubic-bezier(.25,.46,.45,.94) both; }
[data-anim="fadeInUp"]    { --a: fadeInUp; }
[data-anim="fadeIn"]      { --a: fadeIn; }
[data-anim="fadeInRight"] { --a: fadeInRight; }

@keyframes fadeInUp    { from { opacity:0; transform: translate3d(0,40px,0); } to { opacity:1; transform:none; } }
@keyframes fadeIn      { from { opacity:0; } to { opacity:1; } }
@keyframes fadeInRight { from { opacity:0; transform: translate3d(60px,0,0); } to { opacity:1; transform:none; } }

[data-delay="200"].in { animation-delay: .2s; }
[data-delay="400"].in { animation-delay: .4s; }
[data-delay="600"].in { animation-delay: .6s; }

.card { transition: transform .35s ease, box-shadow .35s ease; }
.card:hover { transform: translateY(-6px); box-shadow: 0 42px 60px rgba(0,0,0,.3); }
.card img { transition: transform .5s ease; }
.card:hover img { transform: scale(1.06); }

/* Animated bronze underline — links with no border of their own */
a.jf-ul {
  background-image: linear-gradient(#9C7C4A, #9C7C4A);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.38s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.25s ease;
  padding-bottom: 2px;
}
a.jf-ul:hover, a.jf-ul:focus-visible { background-size: 100% 1px; }

/* Links that already carry a rule: warm the rule instead of drawing a second one */
a.jf-ul-b { transition: border-color 0.35s ease, color 0.25s ease; }
a.jf-ul-b:hover, a.jf-ul-b:focus-visible { border-bottom-color: #C4A473; }

/* Trainer photo — very slight zoom */
.jf-hero-photo { overflow: hidden; }
.jf-hero-photo img { transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1); }
.jf-hero-photo:hover img { transform: scale(1.03); }

/* Primary WhatsApp CTA — soft bronze glow, minimal lift */
a[href*="wa.me"]:not(.jf-ul):not(.jf-ul-b) {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease, background-color 0.3s ease;
}
a[href*="wa.me"]:not(.jf-ul):not(.jf-ul-b):hover,
a[href*="wa.me"]:not(.jf-ul):not(.jf-ul-b):focus-visible {
  transform: translateY(-1px) scale(1.012);
  box-shadow: 0 14px 44px -14px rgba(156, 124, 74, 0.7), 0 0 0 1px rgba(196, 164, 115, 0.4);
}

/* FAQ rows */
details[data-jf-faq] summary { transition: color 0.25s ease; }
details[data-jf-faq] .jf-plus { transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* Section rule draws itself in */
.jf-js [data-jf-rule] {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.jf-js [data-jf-rule="in"] { transform: none; }

/* Sticky header condenses once you leave the hero */
header img { transition: height 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
header[data-jf-shrunk] { box-shadow: 0 10px 34px -18px rgba(0, 0, 0, 0.9); }
header[data-jf-shrunk] > div { padding-top: 4px !important; padding-bottom: 4px !important; }
header[data-jf-shrunk] img[alt="José Fernandes Fitness"] { height: 56px !important; }

/* Reading progress */
#jf-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, #9C7C4A, #C4A473);
  z-index: 120; pointer-events: none; transition: width 0.12s linear;
}

/* Cards lift slightly */
.jf-card { transition: background 0.25s ease, transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease; }
.jf-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.95); }

/* Floating WhatsApp — visible by default; only the JS layer defers its entrance */
.jf-fab {
  position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px); z-index: 110;
  display: flex; align-items: flex-end; gap: 12px;
}
.jf-js .jf-fab { opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.jf-js .jf-fab[data-jf-fab="in"] { opacity: 1; transform: none; pointer-events: auto; }
.jf-fab-msg {
  max-width: 232px; background: #111214; border: 1px solid #2B2C2E; border-radius: 2px;
  padding: 14px 34px 14px 16px; position: relative; box-shadow: 0 20px 50px -26px rgba(0, 0, 0, 0.95);
}
.jf-fab-msg p { font-size: 13px; line-height: 1.6; color: #EDEDEE; }
.jf-fab-msg button {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; padding: 0;
  background: none; border: 0; color: #9A9EA3; font-size: 15px; line-height: 1; cursor: pointer;
}
.jf-fab-msg button:hover { color: #EDEDEE; }
.jf-fab-msg[hidden] { display: none; }
.jf-fab-btn {
  flex: none; width: 58px; height: 58px; border-radius: 50%; background: #9C7C4A; color: #0A0A0B;
  display: grid; place-items: center;
  box-shadow: 0 16px 40px -14px rgba(156, 124, 74, 0.75);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.3s ease;
  animation: jf-halo 3.4s ease-out infinite;
}
.jf-fab-btn:hover, .jf-fab-btn:focus-visible { transform: scale(1.07); background: #C4A473; }
@keyframes jf-halo {
  0% { box-shadow: 0 16px 40px -14px rgba(156, 124, 74, 0.75), 0 0 0 0 rgba(156, 124, 74, 0.4); }
  70% { box-shadow: 0 16px 40px -14px rgba(156, 124, 74, 0.75), 0 0 0 18px rgba(156, 124, 74, 0); }
  100% { box-shadow: 0 16px 40px -14px rgba(156, 124, 74, 0.75), 0 0 0 0 rgba(156, 124, 74, 0); }
}
@media (max-width: 560px) { .jf-fab-msg { display: none; } }

@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1 !important; animation: none !important; }
  a.jf-ul { background-size: 0% 1px !important; }
  .jf-js [data-jf-rule] { transform: none !important; }
  .jf-js .jf-fab { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .jf-fab-btn { animation: none !important; }
}