/* n-index — butterfly hero, continuous story */

html,
body {
  background: var(--bg);
  overflow-x: hidden;
  max-width: 100%;
}

.site-header {
  position: fixed;
  z-index: 40;
}

main,
.site-footer,
.page-end,
.closing-band,
.belief-band {
  position: relative;
  z-index: 1;
}

/* —— Continuous field: no banded section backgrounds —— */
.intro,
.about,
.work,
.now,
.approach,
.connect,
.belief,
.belief-band,
.expertise,
.proof,
.timeline,
.logos,
.page-end,
.site-footer,
.closing-band,
.trust {
  background: transparent !important;
  border-block: none !important;
  border-top-color: transparent !important;
}

.work,
.proof,
.timeline,
.now,
.expertise {
  background: transparent !important;
}

/* Soften hard dividers into barely-there breath marks */
.proof,
.logos,
.trust,
.site-footer,
.expertise {
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-block: none !important;
}

.intro {
  background: transparent !important;
  isolation: auto;
  overflow-x: clip;
  overflow-y: visible;
}

.intro__media {
  overflow: visible !important;
}

.hero {
  overflow-x: clip;
  overflow-y: visible !important;
  position: relative;
}

.intro__veil {
  background:
    radial-gradient(ellipse 58% 52% at 78% 44%, rgba(74, 158, 150, 0.07), transparent 64%),
    linear-gradient(105deg, rgba(12, 14, 17, 0.72) 0%, rgba(12, 14, 17, 0.34) 40%, rgba(12, 14, 17, 0.08) 72%, transparent 100%),
    linear-gradient(
      180deg,
      rgba(12, 14, 17, 0.16) 0%,
      transparent 42%,
      rgba(12, 14, 17, 0.18) 88%,
      transparent 100%
    );
}

.intro__media::after {
  display: none;
}

/* Hero butterfly — authored landscape aspect, ~3× presence */
.hero .about__butterfly.hero-butterfly:not(.hero-butterfly--mini),
.hero .about__butterfly:not(.hero-butterfly--mini) {
  display: block;
  position: absolute;
  z-index: 0;
  top: 52%;
  left: 12%;
  right: auto;
  bottom: auto;
  width: min(160vw, 2100px);
  max-width: none;
  margin-left: 0;
  pointer-events: none;
  background: transparent;
  transform-origin: 50% 50%;
  transform:
    translate3d(0, calc(-50% + var(--about-y, 0px)), 0)
    rotate(calc(-20deg + var(--about-tilt, 0deg)))
    scale(var(--about-scale, 1));
  opacity: var(--about-opacity, 0.94);
  transition: opacity 0.55s var(--ease);
  animation: none;
  will-change: transform;
}

.hero .about__butterfly:not(.hero-butterfly--mini) .about__butterfly-canvas {
  background: transparent;
}

/* Mini — always floats above the About / O mně eyebrow; flaps on scroll */
.about-acc__face .eyebrow {
  position: relative;
  display: inline-block;
  overflow: visible;
}

.hero-butterfly--mini,
.about .about__butterfly.hero-butterfly--mini {
  display: block;
  position: absolute;
  z-index: 2;
  left: 50%;
  right: auto;
  bottom: calc(100% + 0.35rem);
  top: auto;
  width: min(36vw, 220px);
  max-width: none;
  margin: 0;
  pointer-events: none;
  background: transparent;
  transform-origin: 50% 85%;
  transform:
    translateX(-50%)
    scaleX(-1)
    rotate(var(--fly-rot, -18deg))
    scale(var(--fly-scale, 1));
  opacity: 0.9;
  transition: opacity 0.4s var(--ease);
  animation: none;
  will-change: transform;
}

.hero-butterfly--mini .about__butterfly-canvas,
.about .about__butterfly.hero-butterfly--mini .about__butterfly-canvas {
  background: transparent;
}

.about__butterfly-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--mesh-aspect, 1.834);
}

.about__wrap {
  min-height: 0;
}

/* Even vertical rhythm — chapters breathe, don’t jump */
.statement {
  padding-top: 5.5rem;
  padding-bottom: 4rem;
}

.about {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

.proof {
  padding-top: 2.5rem;
  padding-bottom: 1rem;
}

.timeline {
  padding-bottom: 3rem;
}

.work {
  padding-top: 5.5rem;
  padding-bottom: 4.5rem;
}

.expertise {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.now {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

.approach {
  padding-top: 6rem;
  padding-bottom: 5rem;
}

.epigraph {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
  min-height: 0;
}

.connect {
  padding-top: 7rem;
  padding-bottom: 5rem;
}

/* Portrait / closing images — soft dissolve, not a hard scene cut */
.belief-band__visual img {
  opacity: 0.28;
}

.belief-band__visual::after {
  background:
    linear-gradient(
      to right,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 70%, transparent) 28%,
      transparent 72%
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--bg) 55%, transparent) 0%,
      transparent 22%,
      transparent 78%,
      color-mix(in srgb, var(--bg) 70%, transparent) 100%
    );
}

.closing-band {
  isolation: auto;
}

.closing-band::before {
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 18%,
    #000 78%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 18%,
    #000 78%,
    transparent 100%
  );
}

/* Reveals — soft fade only, no bouncey section hops */
[data-reveal] {
  opacity: 0;
  transform: none;
  transition:
    opacity 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Work media: keep clip reveals gentle */
.work-item__media img:not(.work-scroll__page):not(.work-phone__page):not(.work-phone__frame):not(.work-feature__shot),
.work-grid__media img:not(.work-scroll__page) {
  transition: transform 0.7s var(--ease), clip-path 1.1s var(--ease);
}

/* Epigraph — each line steps up in size */
.epigraph__quote > p:nth-child(1) {
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.5;
}

.epigraph__quote > p:nth-child(2) {
  font-size: clamp(1.55rem, 3.1vw, 2.2rem);
  line-height: 1.45;
}

.epigraph__quote > p:nth-child(3) {
  font-size: clamp(1.8rem, 3.7vw, 2.65rem);
  line-height: 1.4;
  letter-spacing: -0.02em;
}

.epigraph__quote > p.epigraph__climax,
.epigraph__quote > p:nth-child(4) {
  margin-top: 2.5rem !important;
  font-size: clamp(2.15rem, 4.8vw, 3.45rem) !important;
  line-height: 1.28 !important;
  letter-spacing: -0.03em !important;
}

@media (max-width: 860px) {
  .hero .about__butterfly.hero-butterfly:not(.hero-butterfly--mini),
  .hero .about__butterfly:not(.hero-butterfly--mini) {
    top: 38%;
    left: -5%;
    right: auto;
    width: min(155vw, 980px);
    transform:
      translate3d(0, calc(-35% + var(--about-y, 0px)), 0)
      rotate(calc(-18deg + var(--about-tilt, 0deg)))
      scale(var(--about-scale, 1));
    opacity: var(--about-opacity, 0.82);
  }

  .hero-butterfly--mini,
  .about .about__butterfly.hero-butterfly--mini {
    width: min(48vw, 170px);
    bottom: calc(100% + 0.2rem);
  }

  .statement,
  .about,
  .work,
  .now,
  .approach,
  .epigraph {
    padding-top: 4rem;
    padding-bottom: 3.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .about__butterfly:not(.hero-butterfly--mini) {
    transition: none !important;
    transform:
      translate3d(0, -50%, 0)
      rotate(-20deg)
      scale(1);
  }

  .hero-butterfly--mini,
  .about .about__butterfly.hero-butterfly--mini {
    transition: none !important;
    transform:
      translateX(-50%)
      scaleX(-1)
      rotate(-18deg)
      scale(1);
  }

  [data-reveal] {
    opacity: 1;
    transition: none;
  }
}