/*
 * Concept 2 — Schaad Advisors · "Private banking" hero
 * Pixel-perfect from Figma node 42:430 · Artboard 1440 × 800.
 *
 *   Layout strategy:
 *   - Hero is 100vw × 100vh (min 800), dark navy bg.
 *   - Header (logo / nav / Kontakt button) anchored to TOP of viewport.
 *   - Jakob portrait + service rings + text blocks anchored to BOTTOM
 *     of viewport. The bottom of the body paragraph (left) and the
 *     bottom of the claim/loc row (right) align on the same baseline.
 *   - --gutter horizontally centres a 1440-wide stage on viewport.
 *   - All button heights = 40px (header Kontakt and bottom CTAs).
 */

:root {
  --gutter: max(0px, calc((100vw - 1440px) / 2));

  --bg-deep:   #072634;            /* Figma rgb(7,38,52) */
  --blue:      #116490;            /* brand */
  --blue-dark: #0d4f72;
  --white:     #ffffff;

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* ─── Reset ─────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { margin: 0; padding: 0; }
html { font-family: var(--font); -webkit-font-smoothing: antialiased; }
body {
  background: var(--bg-deep);
  color: var(--white);
  overflow-x: hidden;
}
a   { text-decoration: none; color: inherit; }
ul  { list-style: none; }
img { display: block; max-width: 100%; }

/* ─── Entrance animation ─────────────────────────────────────
   fill-mode: backwards  → element starts at "from" state BEFORE
   animation begins (during delay), so it's already hidden.
   fill-mode does NOT lock the final state, so CSS transitions
   (e.g. nav hover opacity) work normally once animation ends.   */

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Fade-only — for elements that have JS-set transform (indicator) */
@keyframes hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Ring continuous slow-spin + counter-spin to keep + upright */
@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes plus-stay {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Shared shorthand: duration ease delay fill-mode */
.hero__logo     { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.10s backwards; }
.hero__nav-cta  { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.15s backwards; }
.hero__portrait { animation: hero-rise 1.1s cubic-bezier(0.23,1,0.32,1) 0.40s backwards; }
.hero__name     { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.55s backwards; }
.hero__body     { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.55s backwards; }
.hero__signature{ animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.55s backwards; }
.hero__claim    { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.55s backwards; }
.hero__loc      { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.55s backwards; }
.hero__ctas     { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.75s backwards; }

/* Nav links — staggered, explicit white color, NO inherit to avoid :visited flash */
.hero__nav a:nth-child(1) { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.15s backwards; }
.hero__nav a:nth-child(2) { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.21s backwards; }
.hero__nav a:nth-child(3) { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.27s backwards; }

/* Service rings — staggered */
.hero__service:nth-child(1) { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.80s backwards; }
.hero__service:nth-child(2) { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.87s backwards; }
.hero__service:nth-child(3) { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 0.94s backwards; }
.hero__service:nth-child(4) { animation: hero-rise 0.9s cubic-bezier(0.23,1,0.32,1) 1.01s backwards; }

/* ─── Hero stage ────────────────────────────────────────────── */

.hero {
  position: relative;
  width: 100vw;
  height: max(800px, 100vh);
  background:
    url('../assets/images/06.webp') center / cover no-repeat,
    var(--bg-deep);
  overflow: hidden;
  color: var(--white);
}

/* ─── Logo · TOP anchor · Figma x=80 y=0 w=328 h=205 ────────── */

.hero__logo {
  position: absolute;
  left: calc(var(--gutter) + 80px);
  top:  0;
  width:  328px;
  height: 205px;
  z-index: 10;
}
.hero__logo img { display: block; width: 100%; height: 100%; }

/* ─── Nav · TOP anchor · Figma x=546 y=22 w=348 h=46 ────────── */

.hero__nav {
  position: absolute;
  left: calc(var(--gutter) + 546px);
  top:  22px;
  width:  348px;
  height: 46px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  z-index: 10;
}

/* Nav links: explicit #ffffff on EVERY pseudo-state.
   Both :link and :visited have the same value → no privacy leak,
   browser renders white regardless of history. No color: inherit
   to avoid the brief UA-default flash on :visited re-evaluation. */
.hero__nav { color: #ffffff; }

.hero__nav a {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: 46px;
  padding-top: 13px;
  font-size:      14px;
  line-height:    14px;
  font-weight:    400;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity 220ms ease;
  color: #ffffff;
}
.hero__nav a:link,
.hero__nav a:visited,
.hero__nav a:hover,
.hero__nav a:active,
.hero__nav a:focus {
  color: #ffffff;
}
.hero__nav a:hover { opacity: 0.65; }

/* Sliding indicator — 40×4 blue, anchored to bottom of nav row.
   hero-fade (opacity only) so the JS translateX never conflicts. */
.hero__nav-indicator {
  position: absolute;
  left: 0;
  top: 38px;                /* nav text bottom; underline at Figma y=64
                               relative to nav top 22: 64-22 = 42.
                               Use top:38 for 4px bar ending at 42. */
  width: 40px;
  height: 4px;
  background: var(--blue);
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  animation: hero-fade 0.35s ease 0.35s backwards;
}

/* ─── Kontakt button · TOP anchor · x=1258 y=28 w=102 h=40 ─── */

.hero__nav-cta,
.hero__nav-cta:link,
.hero__nav-cta:visited,
.hero__nav-cta:hover,
.hero__nav-cta:active,
.hero__nav-cta:focus {
  position: absolute;
  left: calc(var(--gutter) + 1258px);
  top:  28px;
  width:  102px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: #ffffff;
  font-size:      14px;
  line-height:    14px;
  font-weight:    400;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  z-index: 10;
  transition: background 200ms ease;
}
.hero__nav-cta:hover { background: var(--blue-dark); }

/* ─── Jakob portrait · BOTTOM anchor · cut-out fills lower zone ───
      Figma 568 / 88 / 537.5 / 713  — bottom of image at y=801
      (essentially flush with hero bottom 800).                      */

.hero__portrait {
  position: absolute;
  left: calc(var(--gutter) + 568px);
  bottom: 0;
  width:  538px;
  height: 713px;
  z-index: 3;                     /* sits BEHIND service rings */
  pointer-events: none;
}
.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  will-change: filter;
  transition: filter 0.9s ease-in-out;
}
/* JS toggles this class when any service ring is hovered */
.hero__portrait img.hero__portrait-img--blur {
  filter: blur(2.5px);
}

/* ─── Left text block · BOTTOM anchor ────────────────────────
      Figma:
        H1     y=299, h=56  → bottom-from-artboard = 800-355 = 445
        body   y=379, h=84  → bottom-from-artboard = 800-463 = 337
        CTAs   y=503, h=40  → bottom-from-artboard = 800-543 = 257
      So if we anchor the WHOLE block at bottom: 257 (CTAs flush bottom)
      and stack contents column-up from there, body bottom lands at 337,
      H1 bottom at 445. Internal margins give the Figma gaps.            */

.hero__lead {
  position: absolute;
  left:  calc(var(--gutter) + 80px);
  bottom: 257px;            /* CTAs row bottom matches Figma y=543 */
  width: 436px;
  z-index: 7;               /* above service rings (z=6) */
}

.hero__name {
  font-size:      56px;
  line-height:    56px;
  font-weight:    400;
  letter-spacing: -0.005em;
  color: var(--white);
  white-space: nowrap;
  margin-bottom: 24px;          /* gap H1→body : 379-(299+56)=24 */
}

.hero__body {
  width: 338px;
  font-size:      16px;
  line-height:    21px;
  font-weight:    400;
  letter-spacing: 0;
  color: var(--white);
  margin-bottom: 40px;          /* gap body→CTAs : 503-(379+84)=40 */
}

/* ─── CTA button row · h=40 · gap=8 (Figma: 282-(80+194)=8) ── */

.hero__ctas { display: flex; gap: 8px; }

.hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  font-size:      14px;
  line-height:    14px;
  font-weight:    400;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  border-radius: 3px;
  text-decoration: none;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

/* Primary — filled blue, same as header Kontakt */
.hero__btn--primary {
  width: 194px;
  background: var(--blue);
  color: var(--white);
  border: 1px solid transparent;
}
.hero__btn--primary:hover { background: var(--blue-dark); }

/* Ghost — outlined with brand blue border, transparent bg */
.hero__btn--ghost {
  width: 114px;
  background: transparent;
  color: var(--white);
  border: 1px solid var(--blue);
}
.hero__btn--ghost:hover {
  background: rgba(17, 100, 144, 0.18);
  border-color: var(--blue);
}

/* ─── Right text block · BOTTOM anchor (same baseline as body) ───
      Figma:
        Signature  y=318, h=58 → bottom = 376
        Claim/Loc  y=400, h=63 → bottom = 463 (= body bottom)
      Anchor block bottom at 337px (same as body bottom-from-artboard).
      Inside, claim/loc sit at the bottom; signature stacks above with a
      24px margin (400-(318+58)=24).                                      */

.hero__right {
  position: absolute;
  left:  calc(var(--gutter) + 1048px);
  bottom: 337px;                /* matches body bottom (Figma y=463) */
  width: 312px;
  z-index: 7;               /* above service rings (z=6) */
  display: flex;
  flex-direction: column;
}

.hero__signature {
  display: block;
  width: 312px;                 /* Signature 1 in Figma is 312×58 */
  height: auto;
  margin-bottom: 24px;          /* gap signature→claim row */
  /* Image is white-on-transparent; stays crisp on dark bg. */
}

.hero__claim-row {
  display: flex;
  gap: 75px;                    /* 219-144 = 75 between claim and loc */
  padding-left: 29px;           /* Figma: Frame 9 inset 29px inside Frame 27 */
}

.hero__claim {
  width: 144px;
  font-size:      16px;
  line-height:    21px;
  font-weight:    400;
  letter-spacing: 0;
  color: var(--white);
  white-space: nowrap;
}

.hero__loc {
  width: 64px;
  display: flex;
  flex-direction: column;
}
.hero__loc span {
  font-size:      16px;
  line-height:    21px;
  font-weight:    400;
  letter-spacing: 0;
  color: var(--white);
}

/* ─── Service rings strip · responsive 4 × 25vw grid ───────────
      Rings fill their cell exactly → tangent (edge-to-edge, no overlap).
      vector-effect="non-scaling-stroke" keeps stroke at 1px device-px.
      Strip anchored bottom:-70px so rings bleed below viewport edge.  */

.hero__services {
  position: absolute;
  left:   0;
  bottom: -70px;
  width:  100vw;
  height: 25vw;
  display: grid;
  grid-template-columns: repeat(4, 25vw);
  z-index: 6;
  pointer-events: none;
}

.hero__service {
  position: relative;
  width:  25vw;
  height: 25vw;
  pointer-events: auto;
  cursor: pointer;
}

/* Rotating wrapper — spins ring + plus together; plus counter-spins to stay upright */

.hero__service-ring-wrap {
  position: absolute;
  inset: 0;
  animation: ring-spin 70s linear infinite;
}

/* Ring SVG fills the wrapper; stroke stays 1px via non-scaling-stroke */

.hero__service-ring {
  position: absolute;
  inset: 0;
  width:  100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

/* Photo overlay — same circle as the ring */

.hero__service-photo {
  position: absolute;
  inset: 0;
  width:  100%;
  height: 100%;
  border-radius: 50%;
  background: center / cover no-repeat;
  filter: grayscale(0.25) brightness(0.85) contrast(0.95);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.9s ease-in-out;
}
.hero__service:hover .hero__service-photo {
  opacity: 0.9;
  transition: opacity 0.7s ease-out;
}

/* Plus mark — sits on circumference at gap midpoint.
   No background fill: it floats cleanly in the gap on the dark bg. */

.hero__service-plus {
  position: absolute;
  left: var(--plus-x-pct, 8%);
  top:  var(--plus-y-pct, 76%);
  /* base transform is overridden by plus-stay animation which includes both translate + counter-rotate */
  transform: translate(-50%, -50%);
  animation: plus-stay 70s linear infinite;
  font-size:   13px;
  line-height: 1;
  color: var(--white);
  font-weight: 300;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

/* Service label — centered horizontally at ring equator (≈48% height) */

.hero__service-label {
  position: absolute;
  top: 48.25%;
  left: 50%;
  transform: translateX(-50%);
  font-size:      14px;
  line-height:    14px;
  font-weight:    400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* ─── Reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}