/* ==========================================================================
   Studio depth & motion layer — loads after studio.css on public pages.
   Ambient hero light, 3D circuit tilt, light pulses + spinning PC fan,
   headline rise, elevated surfaces with cursor specular, sheen buttons,
   steps connector, service sweep, magnetic CTA, spring chevrons,
   scroll reveals, header depth, scroll spine.
   Steps stay open rows so the connector line stays visible; trust,
   services and FAQ become elevated surfaces.
   ========================================================================== */

/* ---------- Ambient light on the navy hero surfaces ------------------------- */
body.studio-site .studio-hero,
body.studio-site .studio-page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* The hero no longer reserves a band for the artwork — it stays compact. */
body.studio-site .studio-hero {
  padding-block: clamp(56px, 8vw, 110px);
}
body.studio-site .studio-hero::before,
body.studio-site .studio-hero::after,
body.studio-site .studio-page-hero::before,
body.studio-site .studio-page-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
body.studio-site .studio-hero::before,
body.studio-site .studio-page-hero::before {
  width: 560px;
  height: 560px;
  top: -180px;
  inset-inline-start: -120px;
  background: radial-gradient(circle, rgba(164, 225, 214, 0.16), transparent 65%);
  animation: bc-drift-a 16s ease-in-out infinite alternate;
}
body.studio-site .studio-hero::after,
body.studio-site .studio-page-hero::after {
  width: 460px;
  height: 460px;
  bottom: -200px;
  inset-inline-end: -80px;
  background: radial-gradient(circle, rgba(8, 121, 110, 0.28), transparent 65%);
  animation: bc-drift-b 20s ease-in-out infinite alternate;
}
@keyframes bc-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(90px, 50px, 0) scale(1.15); }
}
@keyframes bc-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-70px, -40px, 0) scale(0.95); }
}

/* ---------- Hero headline rises into place (C) ----------------------------- */
body.studio-site .studio-hero h1 span {
  display: inline-block;
  clip-path: inset(-0.1em -0.2em 110% -0.2em);
  transform: translateY(0.35em);
  animation: bc-rise 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
body.studio-site .studio-hero h1 span:last-child {
  animation-delay: 0.14s;
}
body.studio-site .studio-hero .hero-content {
  opacity: 0;
  transform: translateY(14px);
  animation: bc-fade 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}
@keyframes bc-rise {
  to { clip-path: inset(-0.1em -0.2em -0.15em -0.2em); transform: none; }
}
@keyframes bc-fade {
  to { opacity: 1; transform: none; }
}

/* ---------- The circuit becomes a background texture behind the hero --------
   It sits low-contrast behind the text and bleeds to the full hero width —
   out of the centered content container — so the whole navy band carries it. */
body.studio-site .studio-art {
  position: absolute;
  inset: 0;
  width: 100%;
  z-index: 0;
  margin-block-start: 0;
  padding-inline: 0;
  pointer-events: none;
  overflow: hidden;
}
body.studio-site .studio-art img,
body.studio-site .studio-art svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  opacity: 0.13;
}
/* Content sits above the artwork and stays readable. */
body.studio-site .studio-hero .studio-hero-inner > h1,
body.studio-site .studio-hero .studio-hero-inner > .hero-content {
  position: relative;
  z-index: 1;
}

/* ---------- Light pulses travel the circuit (C) ---------------------------- */
body.studio-site .bc-circuit .bc-pulse {
  fill: none;
  stroke: #eafffa;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 5 95;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 1px 2px rgba(6, 18, 26, 0.5));
  opacity: 0;
}
body.studio-site.motion-ok .bc-circuit .bc-pulse {
  opacity: 1;
  animation: bc-travel 7s linear infinite;
}
body.studio-site.motion-ok .bc-circuit .bc-pulse.bc-pulse-2 {
  animation-delay: 3.5s;
  animation-duration: 9s;
  stroke-width: 2.5;
}
@keyframes bc-travel {
  from { stroke-dashoffset: 105; }
  to   { stroke-dashoffset: 0; }
}

/* ---------- Header gains depth once you scroll (B) -------------------------- */
body.studio-site .site-header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
body.studio-site .site-header.bc-scrolled {
  background: rgba(15, 41, 57, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 32px -12px rgba(6, 18, 26, 0.55);
}

/* ---------- Elevated surfaces with traveling specular (B) -------------------
   Elevation is committed through shadow alone — no hairline borders. */
body.studio-site .trust-card,
body.studio-site .service-card,
body.studio-site .faq-item {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: none;
  border-block-start: none;
  border-inline-start: none;
  border-inline-end: none;
  border-block-end: none;
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow:
    0 1px 2px rgba(15, 41, 57, 0.06),
    0 18px 44px -18px rgba(15, 41, 57, 0.28);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
body.studio-site .trust-card::after,
body.studio-site .service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, -20%),
              rgba(164, 225, 214, 0.18), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
body.studio-site .trust-card:hover,
body.studio-site .service-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 2px 4px rgba(15, 41, 57, 0.07),
    0 32px 64px -20px rgba(15, 41, 57, 0.38);
}
body.studio-site .trust-card:hover::after,
body.studio-site .service-card:hover::after {
  opacity: 1;
}
body.studio-site .trust-grid,
body.studio-site .services-grid {
  gap: 22px;
}

/* Services page: drop the hairline border that fought the wide elevation. */
body.studio-site .services-grid.full .service-card {
  border: none;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(15, 41, 57, 0.05),
    0 14px 34px -16px rgba(15, 41, 57, 0.22);
}
body.studio-site .services-grid.full .service-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 3px rgba(15, 41, 57, 0.06),
    0 24px 48px -18px rgba(15, 41, 57, 0.3);
}

/* Inner-page eyebrows: a calm marker, not a chip competing with the h1. */
body.studio-site .studio-page-hero .eyebrow {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  color: var(--studio-mint);
  font-weight: 500;
}

/* ---------- Steps: open rows, ring numbers, connector line (C) -------------- */
body.studio-site .steps-grid {
  position: relative;
}
body.studio-site.motion-ok .steps-grid::before {
  content: "";
  position: absolute;
  top: 21px;
  inset-inline: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--studio-mint));
  transform: scaleX(0);
  transform-origin: right center; /* RTL: fill starts at the first step */
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
body.studio-site.motion-ok .steps-grid.in-view::before {
  transform: scaleX(1);
}
body.studio-site .step-card .step-number {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-block-end: 14px;
  background: #ffffff;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  font-weight: 600;
}

/* ---------- Service tiles: mint wash sweeps on hover (C) -------------------- */
body.studio-site .service-card {
  isolation: isolate;
}
body.studio-site .service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: rgba(164, 225, 214, 0.14);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
body.studio-site .service-card:hover::before {
  transform: scaleX(1);
}
body.studio-site .service-card > * {
  position: relative;
  z-index: 1;
}
body.studio-site .service-card .icon {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.studio-site .service-card:hover .icon {
  transform: translateX(-6px) scale(1.1);
  color: var(--color-accent);
}

/* ---------- Buttons: sheen sweep + depth (B), magnetic glow (C) ------------- */
body.studio-site .btn {
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 10px 24px -8px rgba(9, 24, 33, 0.4);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}
body.studio-site .btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  inset-inline-start: -60%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
body.studio-site .btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 16px 34px -10px rgba(9, 24, 33, 0.5);
}
body.studio-site .btn:hover::after {
  inset-inline-start: 120%;
}
body.studio-site .btn-whatsapp {
  will-change: transform;
}
/* Neutral elevation only on the dark hero — no colored glow. */
body.studio-site .btn-whatsapp:hover {
  box-shadow:
    0 16px 36px -12px rgba(9, 24, 33, 0.55),
    0 6px 14px -6px rgba(9, 24, 33, 0.4);
}

/* ---------- FAQ chevrons rotate with a spring (C) ---------------------------- */
body.studio-site .faq-item .chevron {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
body.studio-site .faq-item[open] .chevron {
  transform: rotate(180deg);
}

/* ---------- Scroll spine: a live trace down the page edge (C) ---------------- */
.bc-spine {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 22px;
  width: 2px;
  background: rgba(8, 121, 110, 0.14);
  z-index: 60;
  pointer-events: none;
}
.bc-spine-fill {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(180deg, var(--studio-mint), var(--color-accent));
  transform-origin: top;
  transform: scaleY(var(--p, 0));
}
.bc-spine-dot {
  position: absolute;
  inset-inline-start: 50%;
  width: 9px;
  height: 9px;
  margin-inline-start: -3.5px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(8, 121, 110, 0.35);
  transform: translateY(-50%);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.bc-spine-dot.lit {
  background: var(--studio-mint);
  border-color: var(--color-accent);
  box-shadow: 0 2px 6px rgba(8, 121, 110, 0.4);
}
@media (max-width: 1200px) {
  .bc-spine { display: none; }
}

/* ---------- Scroll reveals (B; JS-gated so no-JS stays visible) ------------- */
body.studio-site.fx .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
body.studio-site.fx .reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- Reduced motion: the page is born settled ------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.studio-site .studio-hero::before,
  body.studio-site .studio-hero::after,
  body.studio-site .studio-page-hero::before,
  body.studio-site .studio-page-hero::after {
    animation: none;
  }
  body.studio-site .studio-art {
    transform: none !important;
  }
  body.studio-site .studio-hero h1 span,
  body.studio-site .studio-hero .hero-content {
    animation: none;
    clip-path: none;
    opacity: 1;
    transform: none;
  }
  body.studio-site.fx .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.studio-site .btn::after,
  body.studio-site .service-card::before {
    display: none;
  }
  .bc-spine { display: none; }
}