/* Hương Ly V3.7.7 — CLAUDE MOTION EXPERIMENT. Styles for assets/ig377-engine.js.
   Tier lives on html[data-hly-tier="full|calm"]. Every rule is keyed on html.ig377,
   which the engine adds only after it has initialised, so the no-JS page is untouched.
   Variable defaults are the final (fully revealed) state: a script failure can never
   leave content hidden. */
html.ig377{
  /* Grid outside the lens stays near-invisible; the lens draws it stronger. */
  --ig377-ink:rgba(6,86,56,.07);
  --ig377-ink-strong:rgba(6,86,56,.26);
  --ig377-gold:rgba(197,165,92,.08);
  --ig377-gold-strong:rgba(197,165,92,.30);
}

/* 1. One scroll owner: the inherited V3.7 controller keeps hero/cinematic/story/halo,
      but its editorial reveal, intro-photo and card-photo writes are neutralised. */
html.ig377 .ig372-reveal,
html.ig377.ig7-scrub.ig374-ready .ig372-reveal{opacity:1!important;translate:none!important;will-change:auto!important}
html.ig377.ig7-scrub .v36-intro .photo-frame img{transform:none!important}
html.ig377.ig7-scrub .v36-intro .photo-frame::after{clip-path:inset(0 0 var(--ig377-rule,100%) 0)!important}
html.ig377.ig7-scrub .v36-cards .plate img{transform:none!important}
html.ig377 .ig373-plane,html.ig377 .hly376-glass-plane{display:none!important}

/* 2. Text: line masks (headings) and block masks (copy). The clip allows stacked
      Vietnamese diacritics to overflow above the line box; it is removed at rest. */
html.ig377 .ig377-split{display:block}
html.ig377 .ig377-line{display:block;clip-path:var(--ig377-clip,none)}
html.ig377 .ig377-line>.ig377-inner{display:block;translate:0 var(--ig377-y,0%);opacity:var(--ig377-alpha,1)}
html.ig377 .ig377-mask{clip-path:var(--ig377-clip,none)}
html.ig377 .ig377-mask>.ig377-inner{display:block;translate:0 var(--ig377-y,0%);opacity:var(--ig377-alpha,1)}
html.ig377 a.ig377-mask>.ig377-inner,
html.ig377 span.ig377-mask>.ig377-inner{display:inline-block}
html.ig377 .ig377-self{translate:0 var(--ig377-y,0%);opacity:var(--ig377-alpha,1);clip-path:var(--ig377-clip,none)}
html.ig377 .ig377-line>.ig377-inner,
html.ig377 .ig377-mask>.ig377-inner,
html.ig377 .ig377-self{transition:none!important}
/* Keyboard focus always wins over a reveal state. */
html.ig377 .ig377-target:focus-within .ig377-inner,
html.ig377 .ig377-target:focus-within .ig377-self{translate:none!important;opacity:1!important}
html.ig377 .ig377-target:focus-within .ig377-line,
html.ig377 .ig377-target:focus-within .ig377-mask{clip-path:none!important}

/* 3. Images: wipe from the bottom, settle from 1.18 to 1, inside their overflow:hidden frame. */
html.ig377 img.ig377-image,
html.ig377.ig7-scrub.ig374-ready img.ig377-image,
html.ig377.ig7-scrub.ig374-ready .ig374-visual>img.ig377-image{
  clip-path:inset(0 0 var(--ig377-clip,0%) 0)!important;
  scale:var(--ig377-scale,1)!important;
  translate:0 var(--ig377-y,0px)!important;
  opacity:var(--ig377-alpha,1)!important;
  transition:none!important;
}
html.ig377 .plate,html.ig377 .ig374-visual{overflow:hidden}

/* 4. Pinned intro chapter: full tier, desktop only. Calm/mobile keep document flow. */
@media(min-width:901px){
  html.ig377[data-hly-tier="full"] .v36-intro.ig377-intro{position:relative;isolation:isolate;min-height:172svh}
  html.ig377[data-hly-tier="full"] .v36-intro.ig377-intro>.wrap{
    position:sticky;top:calc(var(--ig372-header,109px) + 28px);
    min-height:clamp(520px,66svh,760px);align-items:center;z-index:2;
  }
}

/* 5. Opt-in full tier under an OS "reduce" signal must also keep the inherited hero
      exit alive (its own reduce media rules would otherwise freeze it). */
html.ig377[data-hly-tier="full"].ig7-scrub.ig375-ready .v36-hero .copy > .reveal:not(.actions){
  opacity:var(--ig375-hero-text-alpha,1)!important;
}
html.ig377[data-hly-tier="full"].ig7-scrub.ig375-ready .v36-hero .v3-hero-portrait{
  opacity:var(--ig375-hero-art-alpha,1)!important;
  clip-path:inset(0 0 var(--ig375-hero-art-mask,0%) 0)!important;
}

/* V3794: feathered atmospheric lens below foreground; no grid or rim. */
html.ig377 .ig377-scene:not(.ig7-cinema-pin){position:relative}
html.ig377 .ig377-scene>.wrap{position:relative;z-index:2}
html.ig377 .ig377-plane{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;contain:paint;background:none}
html.ig377 .ig377-lens{
 position:absolute;left:0;top:0;width:280px;height:280px;border-radius:50%;
 pointer-events:none;border:0;outline:0;box-shadow:none;
 transform:translate3d(calc(var(--ig377-x,-999px) - 140px),calc(var(--ig377-y,-999px) - 140px),0);
 opacity:var(--ig377-lens-alpha,0);
 backdrop-filter:blur(12px) saturate(1.13) brightness(1.10);
 -webkit-backdrop-filter:blur(12px) saturate(1.13) brightness(1.10);
 mask-image:radial-gradient(circle,#000 0 24%,rgba(0,0,0,.8) 43%,transparent 70%);
 -webkit-mask-image:radial-gradient(circle,#000 0 24%,rgba(0,0,0,.8) 43%,transparent 70%);
 background:radial-gradient(circle at 38% 33%,rgba(255,255,248,.22),transparent 65%);
 will-change:transform,opacity;
}
html.ig377 .ig377-lens::before,html.ig377 .ig377-lens::after{content:none;border:0;outline:0;box-shadow:none}
html.ig377[data-hly-tier="calm"] .ig377-plane{display:none}
@media(max-width:900px),(hover:none) and (pointer:coarse){html.ig377 .ig377-plane{display:none}}

/* 8. Debug overlay (?debug=1). Not part of the default experience. */
.ig377-debug{
  position:fixed;top:calc(var(--ig372-header,109px) + 14px);right:18px;z-index:2147483001;
  width:min(340px,calc(100vw - 36px));
  background:rgba(4,41,29,.93);color:#edf7e0;
  border:1px solid rgba(224,199,123,.55);border-radius:9px;padding:11px 13px;
  font:600 12px/1.6 "Segoe UI",Arial,sans-serif;pointer-events:none;white-space:pre-line;
  box-shadow:0 8px 30px rgba(0,0,0,.2);
}
@media(max-width:900px){.ig377-debug{top:86px;right:8px;font-size:11px}}