/*
 * SANDYA / LIGHTFLOW — HERO FAMILY R01
 * REVIEW PROPOSAL, NOT PRODUCTION ACCEPTANCE.
 * Namespace: .lf-hero only. No header, navigation, footer or lower-section rules.
 * Original source and assets are retained; this layer is independently removable.
 */

/* Additional vector layers are invisible in the original-view comparator. */
[data-lf-family] > .lf-atmosphere,
[data-lf-family] .lf-curve-art { display: none; }

/* 01. One measured composition, including the photo, not just its old grid. */
.lf-hero {
  --lf-max: 1320px;
  --lf-gutter: 40px;
  --lf-bleed: max(var(--lf-gutter), calc((100vw - var(--lf-max)) / 2));
  --lf-ice: #e8f7ff;
  --lf-glow: #c5effe;
  position: relative;
  isolation: isolate;
  min-height: 0;
  padding: 52px 0 48px;
  overflow: hidden;
  background: #fff;
}
.lf-hero.hero-template-home,
.lf-hero.hero-template-service,
.lf-hero.editorial-hero { min-height: 0; padding: 52px 0 48px; background: #fff; }
.lf-hero[data-lf-family] :is(.hero-shell, .inalite-hero-shell, .editorial-hero-shell) {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(var(--lf-max), calc(100% - 2 * var(--lf-gutter)));
  min-height: 0;
  margin: 0 auto;
  grid-template-columns: minmax(0, .435fr) minmax(0, .565fr);
  align-items: center;
  gap: 38px;
}
.lf-hero[data-lf-family] :is(.hero-copy, .inalite-copy, .editorial-hero-copy) {
  position: relative;
  z-index: 5;
  min-width: 0;
  max-width: none;
  padding: 0;
  margin: 0;
  align-self: center;
}
.lf-hero .reveal,
.lf-hero .reveal.is-visible { opacity: 1; transform: none; transition: none; }
.lf-hero[data-lf-family] :is(.hero-visual, .inalite-visual, .editorial-hero-visual) {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: clamp(530px, 40vw, 670px);
  margin: 0;
  transform: none;
  isolation: isolate;
}

/* 02. Retire only old hero decorations, not the photo, text or information. */
.lf-hero::before, .lf-hero::after,
.lf-hero .hero-backdrop-bottom-crop,
.lf-hero .hero-triangle-field,
.lf-hero > .hero-wave,
.lf-hero > .inalite-triangles,
.lf-hero > .inalite-wave,
.lf-hero .inalite-triangles-right,
.lf-hero > .editorial-hero-ring,
.lf-hero > .editorial-hero-particles,
.lf-hero > .editorial-hero-wave,
.lf-hero .editorial-hero-visual::before,
.lf-hero .editorial-hero-visual::after,
.lf-hero .hero-photo-frame::after,
.lf-hero .inalite-photo::after,
.lf-hero .hero-blue-sweep::before,
.lf-hero .hero-blue-sweep::after,
.lf-hero .inalite-blue-curve::before,
.lf-hero .inalite-blue-curve::after { display: none; }

/* 03. Decorative canvas. It never captures a pointer or a keyboard focus. */
.lf-hero > .lf-atmosphere {
  position: absolute; z-index: 0; inset: 0; display: block;
  overflow: hidden; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 76px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 76px), transparent 100%);
}
.lf-hero .lf-atmosphere > * { position: absolute; pointer-events: none; }
.lf-hero .lf-color-field {
  inset: 0;
  background: radial-gradient(ellipse at 88% 31%, var(--lf-glow) 0, transparent 51%),
              linear-gradient(108deg, #fff 24%, #f7fcff 58%, var(--lf-ice));
}
.lf-hero .lf-color-field::after {
  position: absolute; inset: 0; content: "";
  background: linear-gradient(0deg, #fff 0, rgba(255,255,255,0) 25%);
}
.lf-hero .lf-orbit { display: none; }
.lf-hero .lf-dna {
  width: min(1000px, 64vw); height: 330px;
  right: -6%; top: -24px;
  background: url("assets/signature/wave.svg") center / contain no-repeat;
  opacity: .68; transform: rotate(-7deg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 86%, transparent);
}
.lf-hero .lf-particles {
  display: block; width: clamp(170px, 18vw, 320px); height: auto;
  opacity: .55; overflow: visible;
}
.lf-hero .lf-particles--a { top: 10px; left: -22px; transform: rotate(-6deg); }
.lf-hero .lf-particles--b { right: -18px; bottom: 90px; width: clamp(170px, 20vw, 340px); transform: rotate(11deg); }
.lf-hero .lf-curve-art { display: block; width: 100%; height: 100%; overflow: visible; }

/* 04. HOME / Sambutan: open cyan horizon, no extra frame around the trio. */
.lf-hero[data-lf-family="home"] { padding-bottom: 42px; }
.lf-hero[data-lf-family="home"] .lf-color-field {
  background: radial-gradient(ellipse at 81% 34%, #bceefc 0, #e6f8ff 34%, transparent 67%),
              linear-gradient(108deg, #fff 33%, #f4fbff 66%, #e7f7ff);
}
.lf-hero[data-lf-family="home"] .lf-dna { top: 1%; right: -7%; width: min(1150px, 72vw); transform: rotate(-10deg); }
.lf-hero[data-lf-family="home"] .lf-particles--a { top: 42px; left: -65px; }
.lf-hero[data-lf-family="home"] .lf-particles--b { bottom: 170px; right: -52px; }
.lf-hero[data-lf-family="home"] .hero-visual-backdrop {
  z-index: 0; inset: 18px -9px 6px -12px;
  background: linear-gradient(140deg, rgba(224,249,255,.2), rgba(139,218,247,.44));
  border-radius: 58% 42% 24% 64% / 48% 46% 41% 49%;
  clip-path: none; transform: none;
}
.lf-hero[data-lf-family="home"] .hero-photo-frame-trio {
  z-index: 2; inset: 0; border-radius: 0; clip-path: none;
  overflow: hidden; background: transparent; box-shadow: none;
}
.lf-hero[data-lf-family="home"] .hero-photo-frame-trio img,
.lf-hero[data-lf-family="home"] .hero-photo-frame-trio:hover img {
  position: absolute; top: 0; left: 3%; width: 94%; height: auto;
  max-width: none; object-fit: contain; object-position: center top;
  transform: none; transform-origin: center top; transition: none;
}
.lf-hero[data-lf-family="home"] .hero-blue-sweep {
  position: absolute; z-index: 4; top: auto; left: -12%;
  right: calc(-1 * var(--lf-bleed)); bottom: -62px;
  width: auto; height: 238px; overflow: visible;
  background: none; border-radius: 0; clip-path: none; transform: none;
}
.lf-hero[data-lf-family="home"] .shard-hero {
  z-index: 6; top: auto; right: auto; left: 51%; bottom: 88px;
  transform: rotate(-10deg);
}
.lf-hero[data-lf-family="home"] > .signal-rail {
  z-index: 7; width: min(var(--lf-max), calc(100% - 2 * var(--lf-gutter)));
  margin: -2px auto 0;
}

/* 05. PRODUCT / Fokus: a local blue cushion, with the same light-flow DNA. */
.lf-hero[data-lf-family="product"] {
  --lf-max: 1360px;
  padding-block: 50px 62px;
}
.lf-hero[data-lf-family="product"] .inalite-hero-shell {
  grid-template-columns: minmax(0, .427fr) minmax(0, .573fr); gap: 54px;
}
.lf-hero[data-lf-family="product"] .inalite-visual { height: clamp(530px, 43vw, 700px); }
.lf-hero[data-lf-family="product"] .lf-color-field {
  background: radial-gradient(ellipse at 82% 45%, #d4f1ff 0, #edf9ff 27%, transparent 61%), #fff;
}
.lf-hero[data-lf-family="product"] .lf-orbit {
  display: block; width: min(870px, 56vw); aspect-ratio: 1;
  top: 50%; left: 48%; transform: translateY(-50%) rotate(-12deg);
  border: 1px solid rgba(73,151,204,.14);
  border-radius: 42% 58% 42% 58% / 48% 40% 60% 52%;
}
.lf-hero[data-lf-family="product"] .lf-dna {
  top: -50px; right: -95px; width: min(840px, 57vw); opacity: .62; transform: rotate(9deg);
}
.lf-hero[data-lf-family="product"] .lf-particles--a { top: 48px; left: -84px; width: 270px; opacity: .42; }
.lf-hero[data-lf-family="product"] .lf-particles--b { bottom: 26px; right: -70px; opacity: .6; }
.lf-hero[data-lf-family="product"] .inalite-visual-backdrop {
  z-index: 0; inset: 12px -10px -12px 7px;
  border-radius: 46% 18% 46% 12% / 31% 22% 39% 18%;
  clip-path: polygon(7% 2%, 96% 0, 100% 83%, 88% 100%, 4% 96%, 0 17%);
  background: linear-gradient(152deg, #e3f8ff, #a4e0f5); transform: rotate(2deg);
}
.lf-hero[data-lf-family="product"] .inalite-photo {
  z-index: 2; inset: 0 8px 14px 0;
  border-radius: 46% 18% 46% 12% / 31% 22% 39% 18%;
  clip-path: polygon(7% 2%, 96% 0, 100% 83%, 88% 100%, 4% 96%, 0 17%);
}
.lf-hero[data-lf-family="product"] .inalite-photo img,
.lf-hero[data-lf-family="product"] .inalite-photo:hover img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; object-fit: cover;
  object-position: var(--service-photo-x, 50%) var(--service-photo-y, 50%);
  transform: none; transition: none;
}
.lf-hero[data-lf-family="product"] .inalite-blue-curve {
  position: absolute; z-index: 4; top: auto; left: -2%; right: -1%; bottom: -14px;
  width: auto; height: 192px; overflow: visible;
  background: none; border-radius: 0; clip-path: none; transform: none;
}
.lf-hero[data-lf-family="product"] .inalite-shard {
  z-index: 6; top: auto; right: auto; left: 53%; bottom: 96px;
  transform: rotate(-8deg);
}

/* 06. TOPIC / Jelajah: an orbital composition around the existing organic frame. */
.lf-hero[data-lf-family="topic"] { padding-block: 64px 56px; }
.lf-hero[data-lf-family="topic"] .editorial-hero-shell {
  grid-template-columns: minmax(0, .427fr) minmax(0, .573fr); gap: 72px;
}
.lf-hero[data-lf-family="topic"] .editorial-hero-visual { height: 640px; }
.lf-hero[data-lf-family="topic"] .lf-color-field {
  background: radial-gradient(ellipse at 91% 40%, #e2f3ff 0, #f4faff 35%, transparent 66%), #fff;
}
.lf-hero[data-lf-family="topic"] .lf-orbit {
  display: block; width: min(1060px, 72vw); aspect-ratio: 1;
  right: -13%; top: -15%; border: 88px solid rgba(148,201,237,.15); border-radius: 50%;
}
.lf-hero[data-lf-family="topic"] .lf-orbit::after {
  position: absolute; content: ""; inset: -108px; border: 1px solid rgba(73,143,199,.16); border-radius: 50%;
}
.lf-hero[data-lf-family="topic"] .lf-dna {
  width: min(1000px, 66vw); right: -14%; top: auto; bottom: 18px;
  transform: rotate(-19deg); opacity: .67;
}
.lf-hero[data-lf-family="topic"] .lf-particles--a { top: 6px; left: -64px; width: 250px; opacity: .45; }
.lf-hero[data-lf-family="topic"] .lf-particles--b { top: 25px; right: -88px; bottom: auto; width: 340px; opacity: .62; }
.lf-hero[data-lf-family="topic"] .editorial-photo {
  inset: 0 8px 32px 0;
  /* Preserve the existing organic frame; lighten its background, not its photo. */
  background: linear-gradient(135deg, #145489, #123c71);
  border-color: rgba(255,255,255,.96);
  box-shadow: 0 24px 58px rgba(22,65,111,.13);
}
.lf-hero[data-lf-family="topic"] .editorial-photo::after { display: none; }
.lf-hero[data-lf-family="topic"] .editorial-photo img {
  position: absolute; top: 34px; left: 7%; width: 86%; height: auto;
  max-width: none; object-fit: contain; object-position: center top; transform: none;
}
.lf-hero[data-lf-family="topic"] .editorial-hero-badge { right: 0; bottom: 21px; }
.lf-hero[data-lf-family="topic"] .editorial-shard {
  right: 28px; top: 41px; width: 84px; height: 72px; transform: rotate(-5deg);
}

/* All families use the exact same two overlapping shard silhouettes. */
.lf-hero .shard b { display: none; }
.lf-hero .editorial-shard::before {
  z-index: 2; inset: 15px 0 0 20px;
  background: var(--yellow); clip-path: polygon(0 50%, 100% 0, 58% 100%);
}
.lf-hero .editorial-shard::after {
  z-index: 1; inset: 7px 28px 12px 0;
  background: #fff; clip-path: polygon(0 50%, 100% 0, 58% 100%);
}

/* 07. Responsive compositions: preserve a reading column, not a desktop crop. */
@media (min-width: 901px) and (max-width: 1180px) {
  .lf-hero { --lf-gutter: 32px; }
  .lf-hero[data-lf-family] :is(.hero-shell, .inalite-hero-shell, .editorial-hero-shell) {
    grid-template-columns: minmax(0, .46fr) minmax(0, .54fr); gap: 26px;
  }
  .lf-hero[data-lf-family] :is(.hero-visual, .inalite-visual, .editorial-hero-visual) { height: 550px; }
  .lf-hero[data-lf-family="product"] .inalite-blue-curve { height: 155px; bottom: -6px; }
  .lf-hero[data-lf-family="product"] .inalite-shard { bottom: 78px; }
  .lf-hero[data-lf-family="topic"] .editorial-hero-badge { width: 65%; padding: 18px; }
}
@media (max-width: 900px) {
  .lf-hero { --lf-gutter: 32px; }
  .lf-hero.hero-template-home,
  .lf-hero.hero-template-service,
  .lf-hero.editorial-hero { padding: 38px 0 42px; }
  .lf-hero[data-lf-family] :is(.hero-shell, .inalite-hero-shell, .editorial-hero-shell) {
    grid-template-columns: minmax(0, 1fr); gap: 32px;
  }
  .lf-hero[data-lf-family] :is(.hero-copy, .inalite-copy, .editorial-hero-copy) {
    width: 100%; max-width: 680px; padding: 0; margin-inline: auto;
  }
  .lf-hero[data-lf-family] :is(.hero-visual, .inalite-visual, .editorial-hero-visual) {
    width: min(680px, 100%); height: auto; aspect-ratio: 1.1; min-height: 0; margin-inline: auto;
  }
  .lf-hero[data-lf-family="home"] .hero-photo-frame-trio img { width: 90%; left: 5%; }
  .lf-hero[data-lf-family="home"] .hero-blue-sweep {
    left: -9%; right: calc(-1 * var(--lf-bleed)); height: 32%; bottom: -18px;
  }
  .lf-hero[data-lf-family="home"] .shard-hero { bottom: 19%; left: 55%; }
  .lf-hero[data-lf-family="home"] > .signal-rail { margin-top: 24px; }
  .lf-hero[data-lf-family="product"] .inalite-blue-curve { height: 28%; bottom: -12px; }
  .lf-hero[data-lf-family="product"] .inalite-shard { bottom: 14%; left: 53%; }
  .lf-hero[data-lf-family="topic"] .editorial-photo { inset: 0 0 40px; }
  .lf-hero[data-lf-family="topic"] .editorial-hero-badge { right: 0; bottom: 0; }
  .lf-hero .lf-color-field { opacity: .85; }
  .lf-hero .lf-dna,
  .lf-hero[data-lf-family] .lf-dna {
    top: auto; bottom: 14%; right: -35%; width: 105%; height: 300px; transform: rotate(-12deg); opacity: .6;
  }
  .lf-hero[data-lf-family] .lf-particles--a { top: 8px; left: auto; right: -105px; width: 260px; opacity: .28; }
  .lf-hero[data-lf-family] .lf-particles--b { top: auto; bottom: 70px; right: auto; left: -120px; width: 270px; opacity: .44; }
  .lf-hero[data-lf-family="product"] .lf-orbit { width: 700px; left: 8%; top: auto; bottom: 5%; transform: rotate(-12deg); }
  .lf-hero[data-lf-family="topic"] .lf-orbit { width: 780px; right: -46%; top: auto; bottom: -3%; border-width: 60px; }
}
@media (max-width: 620px) {
  .lf-hero { --lf-gutter: 22px; }
  .lf-hero.hero-template-home,
  .lf-hero.hero-template-service,
  .lf-hero.editorial-hero { padding: 30px 0 32px; }
  .lf-hero[data-lf-family] :is(.hero-shell, .inalite-hero-shell, .editorial-hero-shell) { gap: 28px; }
  .lf-hero[data-lf-family] :is(.hero-visual, .inalite-visual, .editorial-hero-visual) { aspect-ratio: 1 / 1; }
  .lf-hero[data-lf-family="home"] .hero-visual { aspect-ratio: 1.05; }
  .lf-hero h1 { overflow-wrap: break-word; }
  .lf-hero .hero-actions, .lf-hero .inalite-actions { max-width: 100%; }
  .lf-hero .hero-actions .button, .lf-hero .inalite-actions .button {
    max-width: 100%; white-space: normal;
  }
  .lf-hero[data-lf-family="home"] .shard-hero,
  .lf-hero[data-lf-family="product"] .inalite-shard {
    width: 66px; height: 54px; left: 54%; bottom: 13%;
  }
  .lf-hero[data-lf-family="product"] .inalite-shard { bottom: 12%; }
  .lf-hero[data-lf-family="product"] .inalite-visual-backdrop { inset: 6px -5px -4px 6px; }
  .lf-hero[data-lf-family="product"] .inalite-photo { inset: 0 4px 9px 0; }
  .lf-hero[data-lf-family="product"] .inalite-blue-curve { height: 30%; bottom: -4px; }
  .lf-hero[data-lf-family="topic"] .editorial-hero-visual { aspect-ratio: auto; height: auto; padding-top: calc(100% + 62px); }
  .lf-hero[data-lf-family="topic"] .editorial-photo { inset: 0 0 78px; }
  .lf-hero[data-lf-family="topic"] .editorial-photo img { top: 24px; }
  .lf-hero[data-lf-family="topic"] .editorial-shard { right: 4px; top: 20px; width: 70px; height: 60px; }
  .lf-hero[data-lf-family="topic"] .editorial-hero-badge { right: 0; bottom: 0; width: min(305px, 87%); padding: 18px 20px; }
  .lf-hero[data-lf-family] .lf-particles--a { opacity: .22; }
  .lf-hero[data-lf-family] .lf-particles--b { opacity: .32; }
  .lf-hero[data-lf-family="product"] .lf-orbit { width: 450px; bottom: 18px; left: 5%; }
  .lf-hero[data-lf-family="topic"] .lf-orbit { width: 580px; border-width: 42px; bottom: 5%; right: -85%; }
}
@media (max-width: 374px) {
  .lf-hero { --lf-gutter: 18px; }
  .lf-hero.hero-template-home h1 { font-size: 44px; }
  .lf-hero.hero-template-service h1 { font-size: 44px; }
  .lf-hero.editorial-hero h1 { font-size: 44px; }
  .lf-hero .inalite-mini-proof { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-hero *, .lf-hero *::before, .lf-hero *::after { animation: none; transition: none; }
}

/* Narrow-screen proof rows must shrink with the actual available column. */
@media (max-width: 620px) {
  .lf-hero .signal-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lf-hero .signal-rail > div { min-width: 0; padding: 17px 12px; gap: 9px; }
  .lf-hero .signal-rail > div > span { min-width: 0; }
}

/* Integration guards accepted with the R01 handoff. */
.lf-hero[data-lf-family="topic"] .editorial-hero-copy h1 { overflow-wrap: anywhere; }
.lf-hero .hero-blue-sweep,
.lf-hero .inalite-blue-curve,
.lf-hero .shard,
.lf-hero .editorial-shard { pointer-events: none; }

/*
 * Topic-family adapters for nested child pages. Their content templates remain
 * intact; only the approved catalog atmosphere is shared with them.
 */
.lf-hero[data-lf-family="topic"] :is(
  .article-header-shell,
  .profile-hero-shell,
  .people-hero-shell,
  .topology-hero-shell
) { position: relative; z-index: 2; }

.lf-hero[data-lf-family="topic"]:is(
  .article-header,
  .profile-hero,
  .people-hero,
  .topology-hero
) { background: #fff; }

.lf-hero[data-lf-family="topic"] :is(
  .people-hero-wave,
  .people-hero-triangles,
  .topology-hero-wave
) { display: none; }