/* ==========================================================================
   Home hero — content left · hero image right (optional live 3D tool orbit)
   Markup: resources/views/components/hero/*.blade.php · Data: config/hero.php
   Motion is transform/opacity only; reduced motion freezes every tile in place.
   ========================================================================== */

.hero {
  --hero-header: calc(var(--hdr-gap) + var(--util-h) + var(--bar-h)); /* sticky header's in-flow height */
  --hero-pad: calc(var(--hdr-inset) + var(--hdr-pad));                 /* the header card's content edge */
  --hero-line: color-mix(in srgb, var(--color-primary) 30%, transparent);
  --hero-hand: "Bradley Hand", "Segoe Print", "Chalkboard SE", "Comic Neue", cursive; /* system hand, zero bytes */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --tile-shadow:
    0 14px 26px -10px rgb(15 23 42 / 0.30),
    0 2px 5px rgb(15 23 42 / 0.08),
    inset 0 -3px 0 rgb(15 23 42 / 0.06),
    inset 0 1px 0 var(--paper);

  position: relative;
  overflow: clip;
  /* Run the paper up behind the floating header card so there is no seam. */
  margin-top: calc(-1 * var(--hero-header));
  padding-top: calc(var(--hero-header) + clamp(16px, 2.2vw, 32px));
  background: var(--warm-50);
  border-bottom: 1px solid var(--color-border);
}

/* ---- HeroBackground ------------------------------------------------------ */

.hero__bg { position: absolute; inset: 0; pointer-events: none; }

.hero__dots {
  position: absolute;
  inset: 0 0 0 38%;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--slate-400) 60%, transparent) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 64% 30%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 60% at 64% 30%, #000 10%, transparent 72%);
  opacity: 0.5;
}

.hero__ridge {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(1150px, 74%);
  height: min(360px, 44%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 45%);
  mask-image: linear-gradient(to right, transparent, #000 45%);
}
.hero__ridge-far  { fill: color-mix(in srgb, var(--slate-400) 15%, transparent); }
.hero__ridge-mid  { fill: color-mix(in srgb, var(--slate-400) 13%, transparent); }
.hero__ridge-near { fill: color-mix(in srgb, var(--teal-500) 9%, transparent); }

/* ---- Layout — phones read: content → image → trust ---------------------------- */

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "content" "visual" "trust";
  row-gap: 32px;
  max-width: var(--hdr-max);
  margin-inline: auto;
  padding: 0 var(--hero-pad) 48px;
}
.hero__content { grid-area: content; container-type: inline-size; }
.hero__visual  { grid-area: visual; }
.hero__trust   { grid-area: trust; }

/* ---- HeroContent ------------------------------------------------------------ */

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 14px;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}
.hero__place {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 11px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--paper);
  color: var(--color-text);
  font-weight: 600;
}
.hero__place::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.hero__reach { padding-left: 12px; border-left: 1px solid var(--slate-300); }
@media (max-width: 479.98px) {
  .hero__reach { flex-basis: 100%; padding-left: 0; border-left: 0; }
}

.hero__title {
  margin: 0;
  font-size: clamp(2.5rem, 11cqi, 3.75rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero__accent {
  position: relative;
  display: inline-block;
  font-style: italic;
  white-space: nowrap;
  padding-inline-end: 0.05em;
}
.hero__underline {
  position: absolute;
  left: 0;
  bottom: -0.17em;
  width: 94%;
  height: auto;
  overflow: visible;
  color: var(--color-primary);
  pointer-events: none;
}
.hero__underline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: hero-underline 0.9s var(--ease-out) 0.3s backwards;
}
@keyframes hero-underline { from { stroke-dashoffset: 1; } }

.hero__services {
  display: flex;
  flex-wrap: wrap;
  row-gap: 2px;
  margin-top: 16px;
  color: var(--color-text);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.45;
}
.hero__services li:not(:last-child)::after {
  content: "·" / "";
  margin-inline: 0.5em;
  color: var(--color-primary);
  font-weight: 700;
}
.hero__services a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color var(--t-base) var(--ease-out), background-size var(--t-base) var(--ease-out);
}
.hero__services a:hover { color: var(--color-primary); background-size: 100% 1px; }

.hero__lede {
  max-width: 36rem;
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.6;
}

/* ---- HeroActions — same shape language as the header's Book a Call ----------- */

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding-inline: 24px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.hero-btn:active { transform: translateY(1px); }
.hero-btn:focus-visible { outline-offset: 3px; }
.hero-btn__arrow { transition: transform var(--t-base) var(--ease-out); }
.hero-btn:hover .hero-btn__arrow { transform: translateX(3px); }

.hero-btn--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 12px 24px -12px rgb(37 99 235 / 0.55);
}
.hero-btn--primary:hover  { background: var(--color-primary-hover); }
.hero-btn--primary:active { background: var(--color-primary-active); }

.hero-btn--ghost {
  border-color: var(--slate-300);
  background: var(--paper);
  color: var(--color-text);
}
.hero-btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

@media (max-width: 479.98px) {
  .hero-btn { flex: 1 1 100%; }
}

/* ---- HeroTrustPoints ----------------------------------------------------------- */

.hero__trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  line-height: 1.35;
}
.hero__trust li { display: flex; align-items: flex-start; gap: 10px; }
.hero__trust .icon { flex-shrink: 0; color: var(--color-text); }
@media (min-width: 640px) {
  .hero__trust { grid-template-columns: repeat(2, max-content); justify-content: start; gap: 12px 36px; }
}

/* ---- Hand-written notes (a human voice; never load-bearing) ---------------------- */

.hero-note {
  color: var(--color-text);
  font-family: var(--hero-hand);
  font-size: 1.25rem;
  line-height: 1.05;
}
.hero-note__arrow {
  flex-shrink: 0;
  width: 38px;
  height: auto;
  fill: none;
  stroke: var(--slate-500);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Portrait stage: one preserve-3d space for portrait + orbit ------------------- */

.hero-scene {
  position: relative;
  container-type: inline-size;
  perspective: 1440px;
  perspective-origin: 50% 40%;
}
.hero-scene__glow {
  position: absolute;
  inset: 4% 0 0;
  background:
    radial-gradient(closest-side at 54% 46%, color-mix(in srgb, var(--color-primary) 15%, transparent), transparent),
    radial-gradient(closest-side at 42% 76%, color-mix(in srgb, var(--teal-500) 14%, transparent), transparent);
  pointer-events: none;
}
.hero-scene__note {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  max-width: 12rem;
  transform: rotate(-4deg);
  pointer-events: none;
}
.hero-scene__note .hero-note__arrow { margin-top: 24px; }

.hero-stage {
  --stage-w: min(125%, 40rem); /* phones: wider than the panel, so the outer icons crop and Himanshu stays large */
  position: relative;
  width: var(--stage-w);
  margin-left: calc((100% - var(--stage-w)) / 2);
  aspect-ratio: var(--portrait-ratio, 4 / 5);
  transform-style: preserve-3d;
}
.hero-portrait {
  position: absolute;
  inset: 0;
  transform: translateZ(0); /* a plane in the 3D space: tools behind it are hidden by its pixels */
  pointer-events: none;
}
.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: var(--portrait-position, 50% 100%);
}

/* ---- OrbitSystem ------------------------------------------------------------------ */

.orbit {
  position: absolute;
  inset: 0;
  margin: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.orbit-ring,
.orbit-tool { --r: var(--r-lg); }

/* OrbitRing — a circle laid flat, then tilted with its tools. */
.orbit-ring {
  position: absolute;
  left: 50%;
  top: var(--y);
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  border: 1px solid var(--hero-line);
  border-radius: 50%;
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-primary) 14%, transparent);
  transform: rotateZ(var(--roll)) rotateX(var(--tilt)) rotateX(90deg);
  pointer-events: none;
}

/* OrbitTool — tilt into the ring's plane, travel the circle, then undo the tilt so the
   tile always faces the viewer. The phase is the start angle; a negative delay starts it there. */
.orbit-tool {
  --tile: var(--size);
  position: absolute;
  left: 50%;
  top: var(--y);
  width: var(--tile);
  height: var(--tile);
  margin: calc(var(--tile) / -2) 0 0 calc(var(--tile) / -2);
  color: var(--color-text);
  pointer-events: auto;
  transform:
    rotateZ(var(--roll)) rotateX(var(--tilt))
    rotateY(calc(var(--phase) * var(--spin) * 1turn)) translateZ(var(--r)) rotateY(calc(var(--phase) * var(--spin) * -1turn))
    rotateX(calc(var(--tilt) * -1)) rotateZ(calc(var(--roll) * -1));
  animation:
    orbit-lap calc(var(--dur) * var(--pace, 1)) linear infinite,
    orbit-depth calc(var(--dur) * var(--pace, 1)) linear infinite;
  animation-delay: calc(var(--phase) * var(--dur) * var(--pace, 1) * -1);
  animation-direction: var(--dir);
}
@keyframes orbit-lap {
  from { transform: rotateZ(var(--roll)) rotateX(var(--tilt)) rotateY(0turn) translateZ(var(--r)) rotateY(0turn) rotateX(calc(var(--tilt) * -1)) rotateZ(calc(var(--roll) * -1)); }
  to   { transform: rotateZ(var(--roll)) rotateX(var(--tilt)) rotateY(1turn) translateZ(var(--r)) rotateY(-1turn) rotateX(calc(var(--tilt) * -1)) rotateZ(calc(var(--roll) * -1)); }
}
/* 0% = in front, 50% = behind Himanshu: fade a little with distance. */
@keyframes orbit-depth {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.orbit-tool__float {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  animation: orbit-float var(--float-dur, 6s) ease-in-out var(--float-delay, 0s) infinite alternate;
}
@keyframes orbit-float {
  from { transform: translateY(-3px); }
  to   { transform: translateY(4px); }
}

.orbit-tool__face {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 1px solid rgb(15 23 42 / 0.08);
  border-radius: 27%;
  background: linear-gradient(180deg, var(--paper) 0%, var(--slate-50) 100%);
  box-shadow: var(--tile-shadow);
  color: var(--tool-color, currentColor);
  transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out);
}
.orbit-tool__face svg,
.orbit-tool__face img { width: 54%; height: 54%; object-fit: contain; }
.orbit-tool:hover .orbit-tool__face {
  transform: scale(1.14);
  box-shadow: var(--tile-shadow), 0 22px 38px -14px rgb(15 23 42 / 0.35);
}

/* Tooltip — also the tile's accessible name (hidden visually until hover, never display:none). */
.orbit-tool__name {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  padding: 5px 10px;
  border-radius: var(--r-sm);
  background: var(--ink-900);
  color: var(--paper);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-base) var(--ease-out);
  pointer-events: none;
}
.orbit-tool:hover .orbit-tool__name { opacity: 1; transform: translate(-50%, 0); }

/* Hovering a tool stops the orbit so it can be read; hero.js pauses it off-screen. */
.orbit:has(.orbit-tool:hover) .orbit-tool,
.orbit:has(.orbit-tool:hover) .orbit-tool__float,
.orbit.is-paused .orbit-tool,
.orbit.is-paused .orbit-tool__float { animation-play-state: paused; }

/* ---- Phones & tablets: portrait on its own panel, 4 core tools, calmer motion -------- */

@media (max-width: 1023.98px) {
  .hero-scene {
    padding-top: 60px;
    border: 1px solid var(--color-border);
    border-radius: var(--r-xl);
    background: var(--paper);
    overflow: clip;
  }
  .hero-scene__note { top: 12px; left: 16px; }
  .orbit-ring:not([data-mobile]),
  .orbit-tool:not([data-mobile]) { display: none; }
  .orbit-ring,
  .orbit-tool { --r: var(--r-sm); }
  .orbit-tool { --tile: 46px; --pace: 1.35; }
  .orbit-tool__float { animation: none; }
}

/* ---- Desktop: two columns, portrait anchored to the hero's bottom edge --------------- */

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "content visual" "trust visual";
    column-gap: clamp(24px, 3vw, 56px);
    row-gap: 24px;
    padding-bottom: 0;
  }
  .hero__visual { align-self: end; }
  .hero__trust  { align-self: start; padding-bottom: 44px; }
  .hero__title  { font-size: clamp(2.75rem, 9.4cqi, 4.5rem); }
  .hero__line   { display: block; }
  /* As big as the column allows (bleeding a little into the gap), never taller than the
     screen under the header; right-aligned so the bleed never reaches the text column. */
  .hero-stage {
    --bleed: calc(var(--hero-pad) * 0.6); /* reach into the page margin on the right */
    --stage-w: min(calc(100% + var(--bleed)), 54rem, calc((100svh - var(--hero-header)) * 0.9 * var(--portrait-aspect, 0.8)));
    margin-left: calc(100% + var(--bleed) - var(--stage-w));
  }
  /* The note sits in the image's empty top-left corner, its arrow toward the icons. */
  .hero-scene__note { top: 1%; left: 1%; max-width: 8.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-tool,
  .orbit-tool__float,
  .hero__underline path { animation: none !important; }
}