/* ==========================================================================
   MedhaSofts — Motion & interaction system
   Everything here animates transform/opacity only. Hover effects are gated
   behind (hover: hover) so touch devices never get stuck states, and the whole
   file yields to prefers-reduced-motion at the end.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --sweep: linear-gradient(90deg,
    transparent 0%, rgba(34, 211, 238, .9) 35%,
    rgba(59, 130, 246, .95) 65%, transparent 100%);
}

/* --------------------------------------------------------------------------
   1. Entrance reveals
   -------------------------------------------------------------------------- */
.reveal,
.reveal-image,
.stagger-group > * {
  will-change: transform, opacity;
}

.js .reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js .reveal.is-in { opacity: 1; transform: none; }

.js .reveal--left { transform: translate3d(-32px, 0, 0); }
.js .reveal--right { transform: translate3d(32px, 0, 0); }
.js .reveal--scale { transform: scale(.965); opacity: 0; }
.js .reveal--scale.is-in { transform: none; }

/* Mask reveal — the image slides up inside a clipping window */
.js .reveal-image {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s var(--ease-soft);
}
.js .reveal-image.is-in { clip-path: inset(0 0 0 0); }
.js .reveal-image > * {
  transform: scale(1.12);
  transition: transform 1.4s var(--ease-soft);
}
.js .reveal-image.is-in > * { transform: none; }

/* Staggered children — index set by JS as --i */
.js .stagger-group > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .62s var(--ease-out), transform .62s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 85ms);
}
.js .stagger-group.is-in > * { opacity: 1; transform: none; }

/* Line-by-line headline reveal */
.js .reveal-lines span {
  display: block;
  opacity: 0;
  transform: translate3d(0, .5em, 0);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js .reveal-lines.is-in span { opacity: 1; transform: none; }
.reveal-lines span { display: block; }

/* --------------------------------------------------------------------------
   2. Interactive cards
   -------------------------------------------------------------------------- */
.interactive-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .45s var(--ease-out),
              box-shadow .45s var(--ease-out),
              border-color .35s var(--ease-out);
}

/* Sweep bar is clipped by the card and sits on its own layer: no layout shift */
.hover-sweep-horizontal::after,
.hover-sweep-vertical::after {
  content: '';
  position: absolute;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.hover-sweep-horizontal::after {
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--sweep);
  transform: translate3d(-100%, 0, 0);
}
.hover-sweep-vertical::after {
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent,
    rgba(34, 211, 238, .9) 40%, rgba(59, 130, 246, .95) 70%, transparent);
  transform: translate3d(0, -100%, 0);
}

/* Image zoom inside cards */
.image-zoom { overflow: hidden; }
.image-zoom img {
  transition: transform .9s var(--ease-soft), filter .6s var(--ease-out);
}

/* Supporting label / arrow nudge */
.card-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform .4s var(--ease-out), color .3s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .interactive-card:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 18px 44px rgba(20, 85, 192, .18);
    border-color: var(--brand-accent);
  }
  .interactive-card:hover .card-cue { transform: translate3d(4px, 0, 0); }

  .hover-sweep-horizontal:hover::after {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity .2s var(--ease-out), transform .85s var(--ease-out);
  }
  .hover-sweep-vertical:hover::after {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: opacity .2s var(--ease-out), transform .85s var(--ease-out);
  }

  .image-zoom:hover img,
  .interactive-card:hover .image-zoom img { transform: scale(1.045); }
}

/* Keyboard parity for the hover treatment */
.interactive-card:focus-within {
  transform: translate3d(0, -4px, 0);
  box-shadow: 0 18px 44px rgba(20, 85, 192, .18);
  border-color: var(--brand-accent);
}

/* Veil that deepens over card imagery, keeping any overlaid label readable */
.image-veil { position: relative; }
.image-veil::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Text sits in the lower third, so density has to build well before the
     bottom edge — a veil that only reaches .78 at 100% leaves copy fighting
     whatever the photograph is doing behind it. */
  background: linear-gradient(180deg,
    rgba(6, 24, 58, 0) 18%, rgba(6, 24, 58, .52) 46%,
    rgba(6, 24, 58, .88) 76%, rgba(5, 20, 48, .96) 100%);
  transition: opacity .5s var(--ease-out);
}

/* --------------------------------------------------------------------------
   3. Parallax
   -------------------------------------------------------------------------- */
.parallax-layer {
  will-change: transform;
  transform: translate3d(0, var(--py, 0px), 0);
}

/* Slow cinematic drift on hero imagery */
.ken-burns img {
  animation: kenburns 26s var(--ease-soft) infinite alternate;
  transform-origin: 58% 45%;
}
@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.2%, -1.4%, 0); }
}

/* One slow light sweep across the hero on load */
.light-sweep { position: relative; overflow: hidden; }
.light-sweep::after {
  content: '';
  position: absolute;
  top: -40%; bottom: -40%; left: -30%;
  width: 28%;
  background: linear-gradient(100deg, transparent,
    rgba(255, 255, 255, .13) 45%, transparent);
  transform: skewX(-14deg) translate3d(0, 0, 0);
  animation: sweep 7.5s var(--ease-soft) 1.1s 2;
  pointer-events: none;
}
@keyframes sweep {
  0%   { transform: skewX(-14deg) translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: skewX(-14deg) translate3d(420%, 0, 0); opacity: 0; }
}

/* --------------------------------------------------------------------------
   4. Navigation & buttons
   -------------------------------------------------------------------------- */
.animated-underline { position: relative; }
.animated-underline::after {
  content: '';
  position: absolute;
  left: 11px; right: 11px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s var(--ease-out);
}
@media (hover: hover) {
  .animated-underline:hover::after { transform: scaleX(1); }
}
.animated-underline[aria-current="page"]::after {
  transform: scaleX(1);
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-primary));
}

/* Button highlight sweep */
.btn { position: relative; overflow: hidden; }
/* inline-flex, not the default block: `svg { display: block }` would otherwise
   drop the arrow onto its own line inside this wrapper. */
.btn > * {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, transparent 20%,
    rgba(255, 255, 255, .22) 50%, transparent 80%);
  transform: translate3d(-120%, 0, 0);
  transition: transform .7s var(--ease-out);
}
@media (hover: hover) {
  .btn:hover::before { transform: translate3d(120%, 0, 0); }
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 200;
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-primary));
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

/* ===================================== floating controls (one system) ===
   The two corner controls are one component with one set of tokens: the
   chat button sits in the corner, the back-to-top button stacks directly
   above it, and both are centred on the same vertical line even though
   they are different sizes — the offset is derived from the two sizes
   rather than written as a magic number.

   Both are fixed against the viewport and live outside the footer, so no
   ancestor can become their containing block. The insets respect the
   device's safe area, so neither lands in a phone's gesture strip. */
:root {
  --float-x: clamp(16px, 3vw, 32px);
  --float-y: clamp(16px, 3vw, 32px);
  --float-size: 52px;
  --float-size-sm: 46px;
  --float-gap: 12px;
  /* WhatsApp's own green taken darker: the brand #25D366 gives white only
     2:1, and the mark must read at 4.5:1. #0F7A6C gives 5.2:1. */
  --wa-green: #0F7A6C;
  --wa-green-deep: #075E54;
}
.floats { position: static; }
.wa-float,
.to-top {
  position: fixed;
  right: max(var(--float-x), env(safe-area-inset-right, 0px));
  z-index: 90;
  display: grid;
  place-items: center;
  border-radius: 50%;
  padding: 0;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out),
              box-shadow .25s var(--ease-out), transform .25s var(--ease-out),
              opacity .4s var(--ease-out);
}
.wa-float {
  bottom: max(var(--float-y), env(safe-area-inset-bottom, 0px));
  width: var(--float-size);
  height: var(--float-size);
  background: var(--wa-green);
  color: #FFFFFF;
  text-decoration: none;
  box-shadow: 0 10px 24px -8px rgba(7, 94, 84, .55), var(--shadow-md);
}
.wa-float__icon { display: grid; place-items: center; }
.wa-float__icon svg { display: block; width: 24px; height: 24px; }
.wa-float:hover {
  background: var(--wa-green-deep);
  color: #FFFFFF;
  transform: scale(1.06);
  box-shadow: 0 16px 32px -10px rgba(7, 94, 84, .7), var(--shadow-lg);
}
.wa-float:active { transform: scale(.98); }

/* the narrower button keeps its centre on the chat button's centre line */
.to-top {
  bottom: calc(max(var(--float-y), env(safe-area-inset-bottom, 0px))
               + var(--float-size) + var(--float-gap));
  margin-right: calc((var(--float-size) - var(--float-size-sm)) / 2);
  width: var(--float-size-sm);
  height: var(--float-size-sm);
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--brand-primary);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  pointer-events: none;
  /* hidden means hidden: without this the control is still in the tab
     order while it cannot be seen, and a keyboard reader lands on a focus
     ring floating over nothing */
  visibility: hidden;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
.to-top:hover {
  background: var(--brand-primary);
  color: var(--white);
  transform: scale(1.06);
  box-shadow: var(--shadow-lg);
}
.to-top:active { transform: scale(.98); }
.wa-float:focus-visible,
.to-top:focus-visible { outline: 3px solid var(--brand-primary); outline-offset: 3px; }

/* WhatsApp in a contact list: the icon alone, in a 44px target. The deep
   green reads at 5.2:1 on light grounds; on the dark footer the brand green
   is used, as the deep one would fall under 3:1 there. */
.contact-line .wa-icon-link {
  justify-content: center;
  width: 44px;
  margin-inline: -11px 0;
  border-radius: 50%;
  color: var(--wa-green);
}
.contact-line .wa-icon-link svg { width: 22px; height: 22px; margin: 0; opacity: 1; }
.contact-line .wa-icon-link:hover { color: var(--wa-green-deep); }
.site-footer .contact-line .wa-icon-link { color: #25D366; }
.site-footer .contact-line .wa-icon-link:hover { color: #5BE38F; }

/* Several numbers under one phone icon: one per line, each its own target */
.contact-line__stack { display: flex; flex-direction: column; }
.contact-line__stack a { min-height: 32px; margin-block: 0; }
.contact-line--phones > svg { margin-top: 8px; }

/* Inline WhatsApp links next to the phone number */
.wa-link { display: inline-flex; align-items: center; gap: 6px; }
.wa-link svg { flex: none; color: var(--wa-green); }

@media print { .wa-float { display: none; } }

/* --------------------------------------------------------------------------
   5. Section transitions
   -------------------------------------------------------------------------- */
/* Panel that lifts into the section above it */
.section-overlap { margin-top: clamp(-120px, -7vw, -56px); position: relative; z-index: 2; }

/* Thin rule that draws itself as the section enters */
.section-rule {
  height: 1px;
  background: var(--border);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease-soft);
}
.section-rule.is-in { transform: scaleX(1); }

/* Oversized watermark numeral behind editorial sections */
.section-index {
  font-family: var(--font-display);
  font-size: clamp(6rem, 16vw, 14rem);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.06em;
  color: var(--brand-primary);
  opacity: .06;
  pointer-events: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   6. Reduced motion — everything above degrades to a static, legible page
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .stagger-group > *,
  .reveal-lines span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .reveal-image {
    clip-path: none !important;
    transition: none !important;
  }
  .reveal-image > * { transform: none !important; transition: none !important; }
  .section-rule { transform: scaleX(1) !important; }
  .ken-burns img { animation: none !important; }
  .light-sweep::after { animation: none !important; display: none; }
  .parallax-layer { transform: none !important; }
  .btn::before { display: none; }
  .interactive-card,
  .image-zoom img,
  .card-cue { transition: none !important; }
  .interactive-card:hover { transform: none !important; }
  /* the floating controls keep their colour and light response; only the
     scale and the travel are removed */
  .to-top, .wa-float { transform: none !important; }
}

/* Horizontal entrance offsets push content past the viewport edge on narrow
   screens before they animate in. Fall back to a vertical offset there. */
@media (max-width: 720px) {
  .js .reveal--left,
  .js .reveal--right { transform: translate3d(0, 22px, 0); }
}

/* ==========================================================================
   AMBIENT GRADIENT MOTION
   Transform-driven, so it stays on the compositor instead of repainting a
   moving background-position every frame.
   ========================================================================== */
.band-dark { isolation: isolate; }
.band-dark > * { position: relative; z-index: 1; }
.band-dark::before {
  content: '';
  position: absolute;
  inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 24% 28%, rgba(34, 211, 238, .22), transparent 70%),
    radial-gradient(44% 48% at 78% 68%, rgba(59, 130, 246, .24), transparent 72%);
  animation: aurora 28s var(--ease-soft) infinite alternate;
  will-change: transform;
}
@keyframes aurora {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.14); }
}

/* Gradient wash behind the cinematic hero copy, drifting opposite the image */
.hero-cinematic__grid { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .band-dark::before { animation: none !important; }
}