html { scroll-behavior: smooth; }

body { margin: 0; background: #1e293b; }

button, [role="button"] { -webkit-tap-highlight-color: transparent; }

@keyframes slideInRight { 0% { opacity: 0; transform: translateX(60px); } 100% { opacity: 1; transform: translateX(0); } }

@keyframes slideInUp { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } }

@keyframes scaleIn { 0% { opacity: 0; transform: scale(0.85); } 100% { opacity: 1; transform: scale(1); } }

@keyframes blob { 0% { transform: translate(0px, 0px) scale(1); } 33% { transform: translate(30px, -50px) scale(1.1); } 66% { transform: translate(-20px, 20px) scale(0.9); } 100% { transform: translate(0px, 0px) scale(1); } }

.animate-slide-in-right { animation: slideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.animate-slide-in-up { animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.animate-scale-in { animation: scaleIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.animate-blob { animation: blob 7s infinite; }

.animation-delay-2000 { animation-delay: 2s; }

.hide-scrollbar::-webkit-scrollbar { display: none; }

.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.media-thumb, .news-thumb, .member-image, .member-button-image, .goods-image {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.video-modal-backdrop {
  position: fixed; inset: 0; z-index: 9999; background: rgba(2, 6, 23, .84);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  backdrop-filter: blur(8px);
}

.video-modal-panel {
  width: min(1100px, 96vw); background: #0f172a; border: 1px solid #475569;
  border-radius: 20px; box-shadow: 0 30px 90px rgba(0,0,0,.55); overflow: hidden;
}

.video-modal-toolbar { display:flex; justify-content:flex-end; padding:10px 12px; background:#1e293b; border-bottom:1px solid #334155; }

.video-close {
  min-width: 40px; height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid #64748b; background: #0f172a; color: #f8fafc; font-weight: 800;
  cursor: pointer; transition: .2s ease;
}

.video-close:hover { background: #ec4899; border-color: #ec4899; }

.video-frame-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }

.video-frame-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

.replaceable-note { position:absolute; right:8px; bottom:8px; font-size:9px; color:#cbd5e1; background:rgba(15,23,42,.72); padding:3px 6px; border-radius:999px; opacity:0; transition:.2s; pointer-events:none; }

.group:hover .replaceable-note { opacity:1; }

.navbar-logo-link {
  width: 132px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
}

.navbar-logo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.news-status {
  margin: 0 auto 2.5rem;
  max-width: 780px;
  padding: 1rem 1.25rem;
  border: 1px solid #475569;
  border-radius: 1rem;
  background: rgba(51, 65, 85, .72);
  text-align: center;
  color: #cbd5e1;
  font-size: .875rem;
}

@media (max-width: 768px){
.navbar-logo-link { width: 104px; height: 40px; }
}

.chapter-heading-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.chapter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chapter-tab {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid #475569;
  border-radius: 999px;
  background: rgba(51, 65, 85, .8);
  color: #cbd5e1;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  white-space: nowrap;
  transition: .2s ease;
}

.chapter-tab:hover { border-color: #f472b6; color: #f9a8d4; transform: translateY(-1px); }

.chapter-tab.is-active { background: #ec4899; border-color: #ec4899; color: #fff; box-shadow: 0 0 18px rgba(236,72,153,.24); }

.chapter-group-summary {
  padding: 14px 16px;
  border-left: 3px solid #f472b6;
  background: rgba(51,65,85,.35);
  border-radius: 0 14px 14px 0;
}

.talent-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.talent-button {
  aspect-ratio: 1 / 1;
  width: 100%;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #475569;
  background: #334155;
  opacity: .75;
  transition: .2s ease;
  box-shadow: 0 2px 8px rgba(15,23,42,.22);
}

.talent-button:hover { opacity: 1; transform: translateY(-2px); border-color: #a78bfa; }

.talent-button.is-active { opacity: 1; border-color: #f472b6; transform: scale(1.06); box-shadow: 0 0 15px rgba(244,114,182,.42); }

@media (max-width: 640px){
.chapter-heading-wrap { align-items: flex-start; gap: 14px; }
.chapter-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.chapter-tab { min-height: 40px; padding: 8px 6px; font-size: .62rem; letter-spacing: .06em; }
.talent-grid { gap: 8px; }
}

:root { --livium-navy: #27384d; --livium-purple: #7060ce; --livium-pink: #f46aa4; }

section[id] { scroll-margin-top: 88px; }

.floating-header {
  position: fixed; z-index: 1000; inset: 0 0 auto; height: 86px;
  pointer-events: none;
}

.floating-header .navbar-logo-link {
  position: absolute; top: 15px; left: clamp(14px,3vw,50px); width: 142px; height: 54px;
  z-index: 4; pointer-events: auto;
}

.floating-header .navbar-logo-image { width: 100%; height: 100%; object-fit: contain; }

.desktop-nav-pill {
  position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  min-height: 58px; padding: 9px 38px; display: flex; align-items: center; gap: clamp(15px,2.3vw,34px);
  border-radius: 100px; background: var(--livium-navy);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 12px 27px rgba(5,11,28,.29);
  color: #e8edf9; pointer-events: auto;
}

.desktop-nav-pill a {
  white-space: nowrap; font-size: 14px; font-weight: 900; letter-spacing: .12em;
  text-decoration: none; transition: color .18s,transform .18s;
}

.desktop-nav-pill a:hover, .desktop-nav-pill a:focus-visible { color: #ffafcf; transform: translateY(-1px); outline-color: #ffc5df; }

.floating-header-actions {
  position: absolute; top: 23px; right: clamp(14px,2.5vw,45px);
  display: flex; align-items: center; gap: 10px; z-index: 4; pointer-events: auto;
}

.language-switch {
  display: flex; align-items: center; gap: 1px; padding: 3px;
  border-radius: 30px; background: rgba(37,51,74,.96); border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 5px 18px rgba(8,15,30,.25);
}

.language-switch button { border: 0; border-radius: 20px; min-width: 33px; height: 28px; color: #cad5e7; font-size: 11px; font-weight: 900; }

.language-switch button:hover { color: white; }

.language-switch button.is-active { background: #e96aab; color: white; }

.floating-contact {
  min-width: 91px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 11px; border-radius: 30px; color: #fff; background: #ed61a1;
  box-shadow: 0 7px 18px rgba(236,72,153,.34); font-size: 11px; font-weight: 900; letter-spacing: .04em;
  transition: transform .2s, background .2s;
}

.floating-contact:hover { transform: translateY(-2px); background:#ff79b7; }

.mobile-menu-toggle, .mobile-menu-popover, .mobile-menu-backdrop { display: none; }

.about-section {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 760px; background-color: #fdfcfd;
  background-image:
    radial-gradient(circle,rgba(127,100,220,.17) 2px,transparent 2.8px),
    radial-gradient(circle,rgba(251,123,170,.11) 2.1px,transparent 3px),
    radial-gradient(circle,rgba(113,204,235,.11) 1.5px,transparent 3px);
  background-position: 0 0, 8px 8px, 3px 14px;
  background-size: 19px 19px, 31px 31px, 23px 23px;
}

.about-decor-circle {
  position:absolute; right: 5%; top: -86px; width: 160px; height: 160px;
  background:#f25f9d; border-radius: 50%; z-index:-1;
}

.about-inner {
  max-width: 1660px; min-height: 760px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,1.75fr) minmax(320px, .85fr);
  align-items: center; gap: 3%; padding: 55px clamp(22px,4vw,72px) 30px;
}

.about-visual { align-self:end; width:100%; display:flex; align-items:end; justify-content:center; }

.about-visual img { display:block; width: min(100%,980px); max-height: 690px; height:auto; object-fit:contain; object-position:center bottom; filter: drop-shadow(0 12px 12px rgba(116,82,188,.14)); }

.about-content { position:relative; color:#313142; padding: 10px 5px 35px; }

.about-heading { position:relative; margin:0 0 35px; }

.about-heading h2 {
  margin:0; color:var(--livium-purple); font-family: Impact,"Arial Narrow",Arial,sans-serif;
  font-size: clamp(70px,9vw,146px); line-height: .88; font-stretch: condensed; letter-spacing: -.035em;
}

.about-crosshair {
  position:absolute; left:-84px; top:76px; color:var(--livium-purple);
  font-family:Georgia,serif; font-size:76px; line-height:1;
}

.about-tagline {
  color:#2f303a; margin-bottom: 38px; font-size: clamp(36px,3.6vw,62px);
  line-height:1.2; font-family:"Brush Script MT","Segoe Script",cursive;
  font-style:italic; transform: rotate(-4deg); transform-origin: left center;
}

.about-description { max-width: 440px; font-size:17px; line-height:1.9; font-weight:650; margin:0 0 46px; }

.about-view-all {
  display:inline-flex; justify-content:center; align-items:center; gap:17px;
  padding: 18px 48px; min-width: 218px; color:#30313d; background:rgba(255,255,255,.65);
  border:1px solid #66616e; border-radius: 40px; font-size:13px; font-weight:900; letter-spacing:.02em;
  transition: background .2s,transform .2s,color .2s;
}

.about-view-all:hover { transform:translateY(-2px); background:var(--livium-purple); color:white; border-color:var(--livium-purple); }

.talent-socials { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; padding-top:19px; border-top:1px solid rgba(148,163,184,.25); }

.talent-social-link {
  display:inline-flex; justify-content:center; align-items:center; width:36px; height:36px;
  border-radius:50%; border:1px solid rgba(249,168,212,.5);
  color:#ffc0df; background:rgba(51,65,85,.9); transition:transform .18s, background .18s, border-color .18s;
}

.talent-social-link svg { width:17px; height:17px; display:block; }

a.talent-social-link:hover { transform:translateY(-3px); background:#db4c96; border-color:#ffacd8; color:white; }

.talent-social-link.is-unavailable { opacity:.43; cursor:not-allowed; border-color:rgba(148,163,184,.4); color:#cbd5e1; }

.talent-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }

.talent-title-group { width:max-content; max-width:none; overflow:visible; }

.talent-section-title {
  display:inline-block; width:max-content; max-width:none; white-space:nowrap;
  padding-inline-end:.28em; margin-inline-end:0; overflow:visible;
  line-height:1.2;
}

.goods-watermark {
  position:absolute; top:0; left:50%; width:max-content; max-width:none;
  transform:translateX(-50%); text-align:center; white-space:nowrap;
  font-size:25vw; font-weight:900; line-height:1; color:rgba(71,85,105,.30);
  pointer-events:none; user-select:none;
}

.goods-section-title { display:block; width:100%; text-align:center; padding-inline:0.15em; }

.talent-view-all-wrap { display:flex; justify-content:center; margin-top:clamp(38px,4vw,60px); padding-bottom:8px; }

.talent-view-all {
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  min-height:46px; min-width:176px; padding:12px 24px; border-radius:999px;
  border:1px solid rgba(249,168,212,.75); background:rgba(51,65,85,.8);
  color:#fbcfe8; font-size:12px; font-weight:900; letter-spacing:.10em;
  transition:background .2s, transform .2s, border-color .2s;
}

.talent-view-all:hover, .talent-view-all:focus-visible {
  background:rgba(236,72,153,.25); border-color:#f472b6; transform:translateY(-2px);
}

.talent-view-all-arrow { transition:transform .2s; }

.talent-view-all-arrow.is-expanded { transform:rotate(-90deg); }

.footer-brand-logo { display:block; width:min(250px,70vw); height:auto; margin:0 auto 22px; transform: translateY(-30px); }

.footer-brand-logo video { display:block; width:100%; height:auto; aspect-ratio:720/300; object-fit:contain; }

@media (max-width: 1180px){
.desktop-nav-pill { display:none; }
.mobile-menu-toggle {
    width:42px; height:40px; display:flex; flex-direction:column; justify-content:center; align-items:center;
    gap:5px; padding:0; border:1px solid rgba(255,255,255,.20); border-radius:13px;
    color:#fff; background:var(--livium-navy); box-shadow:0 9px 22px rgba(15,23,42,.28); transition:background .2s;
  }
.mobile-menu-toggle:hover, .mobile-menu-toggle.is-open { background:#e960a1; }
.mobile-menu-toggle span { width:19px; height:2px; border-radius:2px; background:white; transition:transform .2s,opacity .2s; }
.mobile-menu-toggle.is-open span:first-child { transform:translateY(7px) rotate(45deg); }
.mobile-menu-toggle.is-open span:nth-child(2) { opacity:0; }
.mobile-menu-toggle.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.mobile-menu-backdrop { display:block; position:fixed; inset:0; width:100vw; height:100dvh; cursor:default; z-index:2; background:rgba(9,16,33,.22); border:0; pointer-events:auto; }
.mobile-menu-popover {
    position:absolute; z-index:3; display:flex; flex-direction:column; gap:3px;
    top:72px; right:clamp(14px,2.5vw,45px); width:220px; padding:12px;
    border-radius:19px; background:rgba(34,49,71,.98); box-shadow:0 20px 60px rgba(7,17,36,.47);
    border:1px solid rgba(255,255,255,.15); opacity:0; visibility:hidden;
    transform:translateY(-10px) scale(.96); transform-origin:top right;
    transition:opacity .19s,transform .19s,visibility .19s; pointer-events:none;
  }
.mobile-menu-popover.is-open { opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto; }
.mobile-menu-popover a {
    display:flex; justify-content:space-between; align-items:center; padding:13px 15px;
    color:#ecf0f7; font-weight:900; font-size:12px; letter-spacing:.1em; border-radius:10px;
    transition:background .15s,transform .15s;
  }
.mobile-menu-popover a:hover, .mobile-menu-popover a:focus-visible { background:rgba(244,114,182,.22); color:#fff; transform:translateX(2px); outline-color:#ffacd2; }
.floating-header-actions > .language-switch,
  .floating-header-actions > .floating-contact { display:none; }
.mobile-menu-popover { width:250px; }
.mobile-menu-utilities { display:flex; flex-direction:column; gap:9px; padding:12px 3px 3px; margin-top:7px; border-top:1px solid rgba(255,255,255,.2); }
.mobile-menu-language { display:flex; align-items:center; justify-content:space-between; padding:0 9px; gap:10px; }
.mobile-menu-language > span { color:#aebed3; font-size:10px; font-weight:900; letter-spacing:.1em; }
.mobile-menu-language .language-switch { display:flex; }
.mobile-menu-popover a.mobile-menu-contact { background:#eb61a3; color:white; border-radius:12px; justify-content:space-between; }
.mobile-menu-popover a.mobile-menu-contact:hover { background:#f774b0; }
}

@media (max-width: 860px){
.about-inner { grid-template-columns:1fr; gap:0; padding: 85px 18px 20px; }
.about-content { order:0; text-align:center; padding:0 15px 12px; }
.about-heading { margin-bottom:20px; }
.about-heading h2 { font-size:clamp(74px,14vw,122px); }
.about-crosshair { left: calc(50% - 180px); top:-25px; font-size:60px; }
.about-tagline { text-align:center; transform:rotate(-3deg); transform-origin:center; font-size:clamp(38px,6.7vw,56px); margin-bottom:22px; }
.about-description { max-width:620px; margin:0 auto 24px; font-size:15px; line-height:1.8; }
.about-view-all { padding:13px 30px; min-width:190px; }
.about-visual { order:1; }
.about-visual img { max-height:510px; width:min(100%,690px); }
.about-section,.about-inner { min-height:0; }
}

@media (max-width: 600px){
.floating-header { height:76px; }
.floating-header .navbar-logo-link { width:105px; height:43px; top:13px; left:11px; }
.floating-header-actions { right:10px; top:15px; gap:6px; }
.language-switch { padding:2px; }
.language-switch button { min-width:27px; height:27px; font-size:10px; }
.floating-contact { min-width:67px; height:35px; padding:0 7px; font-size:10px; }
.mobile-menu-toggle { width:38px; height:36px; border-radius:11px; }
.mobile-menu-popover { top:64px; right:10px; width:min(250px,calc(100vw - 20px)); }
.about-inner { padding-top:70px; }
.about-description { font-size:14px; }
.about-heading h2 { font-size:clamp(70px,18vw,100px); }
.about-crosshair { left:calc(50% - 145px); font-size:49px; }
.about-visual img { width:calc(100% + 54px); max-width:none; }
.about-decor-circle { width:95px; height:95px; top:-48px; }
.talent-socials { gap:7px; }
.talent-social-link { width:33px; height:33px; }
}

@media (prefers-reduced-motion: reduce){
html { scroll-behavior:auto; }
.mobile-menu-popover { transition:none; }
}

.talent-stage {position:relative; width:min(78vw,320px); height:430px; isolation:isolate; overflow:visible; flex:none;}

.talent-stage-arch {position:absolute;inset:0;z-index:1;border:4px solid #475569;border-radius:999px 999px 22px 22px;overflow:hidden;background:#334155;box-shadow:0 20px 35px rgba(2,6,23,.4);}

.talent-stage-overlay {position:absolute;z-index:2;right:-23%;bottom:-1%;width:87%;height:104%;object-fit:contain;object-position:right bottom;pointer-events:none;filter:drop-shadow(0 12px 16px rgba(2,6,23,.32));animation:talentOverlayIn .65s cubic-bezier(.16,1,.3,1) both;}

@keyframes talentOverlayIn {from{opacity:0;transform:translateX(28px) scale(.94)}to{opacity:1;transform:translateX(0) scale(1)}}

@media (min-width:640px){
.talent-stage{height:500px;}
}

@media (max-width:1023px){
.talent-stage-overlay{right:-13%;width:75%;}
}

@media (prefers-reduced-motion:reduce){
.talent-stage-overlay {animation:none!important;opacity:1;}
}

.livium-talent-page {min-height:100vh;background:#1e293b;color:#e2e8f0;padding:40px max(20px,calc((100vw - 1250px)/2)) 80px;font-family:system-ui,-apple-system,Segoe UI,sans-serif;}

.livium-talent-page-header {display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px;}

.livium-talent-page-header h1 {margin:0;font-weight:1000;font-style:italic;font-size:clamp(36px,6vw,68px);color:#e9a6f4;}

.livium-talent-page-header a {color:#fbcfe8;text-decoration:none;border:1px solid #be86b4;padding:12px 18px;border-radius:99px;font-size:13px;font-weight:800;}

.livium-talent-page-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;}

.livium-talent-page-card {overflow:hidden;border:1px solid #475569;border-radius:18px;background:#28384d;}

.livium-talent-page-art {position:relative;aspect-ratio:4/5;overflow:hidden;background:#334155;}

.livium-talent-page-art img {width:100%;height:100%;object-fit:cover;}

.livium-talent-page-card .info {padding:14px 16px;}

.livium-talent-page-card h2 {font-size:18px;margin:0 0 3px;}

.livium-talent-page-card p {font-size:12px;margin:0;color:#cbd5e1;letter-spacing:.08em;}

/* LIVIUM V15 — Independent 3-plane hero transition.
   No shake, no blur crossfade. The layers never share a transform parent. */
.lvhero-stage {
  position:relative; display:block; width:100%; height:auto; aspect-ratio:16/9;
  min-height:0; overflow:hidden; isolation:isolate; background:#141c31;
}
.lv15-track {position:absolute; inset:0; width:100%; height:100%; overflow:hidden; isolation:isolate;}
.lv15-plane {position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:hidden;}
.lv15-background {z-index:1; background:#141c31;}
.lv15-chapter {z-index:2;}
.lv15-characters {z-index:3;}
.lv15-frame {
  position:absolute; inset:0; display:block; width:100%; height:100%;
  visibility:hidden; transform:translate3d(0,0,0); backface-visibility:hidden;
}
.lv15-frame--idle {visibility:hidden; z-index:0;}
.lv15-frame--active {visibility:visible; z-index:1;}
.lv15-frame--exit {visibility:visible; z-index:3;}
.lv15-frame--enter {visibility:visible; z-index:2;}
.lv15-frame img {display:block; width:100%; height:100%; object-position:center; user-select:none;}
.lv15-background img {object-fit:cover;}
.lv15-characters img {object-fit:contain; object-position:center bottom;}

/* LIVIUM V16 — Layer slide + isolated motion blur (no fade/shake).
   Background reaches 64px blur: 4× the 16px peak blur on characters.
   Both layers resolve to blur(0) when their incoming frames settle. */
.lv15-background .lv15-frame--exit {
  animation:lv15BgOut 2.6s cubic-bezier(.65,0,.35,1) both;
  will-change:transform,filter;
}
.lv15-background .lv15-frame--enter {
  animation:lv15BgIn 2.6s cubic-bezier(.65,0,.35,1) both;
  will-change:transform,filter;
}
@keyframes lv15BgOut {
   0% {transform:translate3d(0,0,0);filter:blur(0px)}
  25% {filter:blur(16px)}
  55% {filter:blur(44px)}
 100% {transform:translate3d(0,-100%,0);filter:blur(64px)}
}
@keyframes lv15BgIn {
   0% {transform:translate3d(0,100%,0);filter:blur(64px)}
  45% {filter:blur(44px)}
  75% {filter:blur(16px)}
 100% {transform:translate3d(0,0,0);filter:blur(0px)}
}

/* Characters still exit DOWN and enter from BELOW, with a stronger
   16px blur during movement and a sharp resting state. */
.lv15-characters .lv15-frame--exit {
  animation:lv15HeroOut 1.45s cubic-bezier(.6,.04,.55,.96) both;
  will-change:transform,filter;
}
.lv15-characters .lv15-frame--enter {
  animation:lv15HeroIn 1.85s .72s cubic-bezier(.19,1,.3,1) both;
  will-change:transform,filter;
}
@keyframes lv15HeroOut {
   0% {transform:translate3d(0,0,0);filter:blur(0px)}
  45% {filter:blur(8px)}
 100% {transform:translate3d(0,112%,0);filter:blur(16px)}
}
@keyframes lv15HeroIn {
   0% {transform:translate3d(0,112%,0);filter:blur(16px)}
  55% {filter:blur(8px)}
 100% {transform:translate3d(0,0,0);filter:blur(0px)}
}

/* Chapter title stays fully opaque at rest; characters scatter, rotate, briefly
   display randomized glyphs via JS, then settle into the actual CHAPTER text. */
.lv15-chapter .lv15-frame {display:flex; align-items:flex-start; justify-content:center;}
.lv15-chapter-title {
  margin:0; padding-top:15.5%; width:100%; text-align:center; color:#fff;
  font-size:clamp(28px,10.6vw,182px); line-height:1; font-weight:1000;
  letter-spacing:-.055em; white-space:nowrap; text-shadow:0 8px 24px rgba(8,13,38,.35);
}
.lv15-glyph {display:inline-block; opacity:1; white-space:pre; will-change:transform,filter;}
.lv15-chapter .lv15-frame--exit {z-index:3; animation:lv15ChapterOut 1.5s ease-in both;}
.lv15-chapter .lv15-frame--enter {z-index:2; animation:lv15ChapterIn 2.2s .35s ease-out both;}
.lv15-chapter .lv15-frame--exit .lv15-glyph {
  animation:lv15GlyphScatter 1.35s var(--lv15-delay,0ms) cubic-bezier(.3,0,.8,1) both;
}
.lv15-chapter .lv15-frame--enter .lv15-glyph {
  animation:lv15GlyphGather 1.65s calc(.55s + var(--lv15-delay,0ms)) cubic-bezier(.2,.75,.25,1) both;
}
@keyframes lv15ChapterOut {0%,60%{visibility:visible}100%{visibility:hidden}}
@keyframes lv15ChapterIn {from{visibility:visible}to{visibility:visible}}
@keyframes lv15GlyphScatter {
  0%{transform:translate3d(0,0,0) rotate(0) scale(1);filter:blur(0)}
  45%{transform:translate3d(calc(var(--lv15-x,0px)*.32),calc(var(--lv15-y,0px)*.35),0) rotate(calc(var(--lv15-rotate,0deg)*.3)) scale(1.15);filter:blur(2px)}
  100%{transform:translate3d(var(--lv15-x,0px),var(--lv15-y,0px),0) rotate(var(--lv15-rotate,0deg)) scale(.85);filter:blur(8px)}
}
@keyframes lv15GlyphGather {
  0%{transform:translate3d(var(--lv15-x,0px),var(--lv15-y,0px),0) rotate(var(--lv15-rotate,0deg)) scale(1.25);filter:blur(9px)}
  65%{filter:blur(2px)}
  100%{transform:translate3d(0,0,0) rotate(0) scale(1);filter:blur(0)}
}
@media(max-width:600px){.lv15-chapter-title{font-size:10.6vw}}

/* Targeted news adjustment: header no longer floats far from its outline. */
:root { --lv-section-space:clamp(58px,6vw,94px); --lv-section-break:clamp(30px,3.7vw,60px); }
#news.lv-section-pad,#talent.lv-section-pad,#media.lv-section-pad,#goods.lv-section-pad {
  padding-top:var(--lv-section-space);
  padding-bottom:var(--lv-section-space);
}
#news.lv-section-pad {
  padding-top:clamp(20px,2.2vw,32px);
  margin-top:clamp(16px,2.2vw,32px);
}
#about.about-section { margin-top:var(--lv-section-break); }
#talent.lv-section-pad { padding-top:calc(var(--lv-section-space) + 8px); }
#talent .talent-view-all-wrap { margin-top:clamp(38px,4vw,60px); }
/* V15 About: 70% of V14 Project: Livium size, physically overlapping ABOUT.
   Single line is intentional even when it exceeds its column width. */
#about .about-heading {margin-bottom:0; position:relative; z-index:1;}
#about .about-tagline {
  position:relative; z-index:2; margin-top:calc(-1 * clamp(24px,3.8vw,55px));
  margin-bottom:clamp(25px,3vw,42px);
  width:max-content; min-width:max-content; max-width:none;
  white-space:nowrap; overflow-wrap:normal; word-break:keep-all;
  font-size:clamp(50.4px,5.04vw,86.8px);
  line-height:1.06; letter-spacing:-.025em;
  transform:rotate(-4deg); transform-origin:left center;
}
@media(max-width:860px) {
  #about .about-tagline {
    font-size:clamp(53.2px,9.38vw,78.4px);
    margin-top:calc(-1 * clamp(22px,4.5vw,40px));
    left:50%; transform:translateX(-50%) rotate(-3deg); transform-origin:center;
  }
}
@media(max-width:600px) {
  :root {--lv-section-space:clamp(46px,11vw,62px);--lv-section-break:28px;}
  #about .about-tagline {font-size:clamp(50.4px,11.2vw,64.4px);}
  #talent .talent-view-all-wrap {margin-top:32px;}
}
/* Reduced-motion preferences are handled in JS only for duration;
   auto-advance is never disabled. */


/* LIVIUM V17 — isolated enhancements; keep V16 bg/hero motion and 7s autoplay. */
/* Full-page video background. Content stays above the movie. */
html, body { background:#182338; }
.lv17-site-shell { background:transparent; isolation:isolate; }
.lv17-site-video { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#182338; }
.lv17-site-video video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lv17-site-video-tint { position:absolute; inset:0; background:linear-gradient(125deg,rgba(16,25,45,.57),rgba(25,32,55,.5)); }
/* Keep the exact V16 desktop/mobile navigation layout; do not retarget every child. */
.lv17-site-shell > section, .lv17-site-shell > footer {position:relative;z-index:1;}
.lv17-site-shell > .floating-header {position:fixed;z-index:2147483000;overflow:visible;isolation:isolate;}
.lv17-site-shell > .video-modal-backdrop {z-index:2147483001;}
/* Section backgrounds retain their original translucent tint. */

/* Layer order: BACKGROUND > CHAPTER > STARS > HERO. */
.lv15-background { z-index:1; }
.lv15-chapter { z-index:2; }
.lv17-stars { z-index:3; overflow:hidden; }
.lv15-characters { z-index:4; }
/* Stars only animate when JS triggers a slide transition. */
.lv17-star {position:absolute;display:block;color:rgba(255,255,255,.95);opacity:0;
  width:10px;height:10px;transform:rotate(var(--lv18-star-angle,0deg)) scale(0);
  transform-origin:center;filter:drop-shadow(0 0 5px rgba(255,215,245,.72));
  will-change:transform,opacity;pointer-events:none;}
.lv17-star svg {width:100%;height:100%;display:block;}
@keyframes lv18StarFallback {
  0%{opacity:0;transform:rotate(var(--lv18-star-angle,0deg)) scale(0)}
  28%{opacity:1;transform:rotate(var(--lv18-star-angle,0deg)) scale(1.3)}
  42%{opacity:1;transform:rotate(var(--lv18-star-angle,0deg)) scale(.87)}
  55%,75%{opacity:1;transform:rotate(var(--lv18-star-angle,0deg)) scale(1)}
  100%{opacity:0;transform:rotate(var(--lv18-star-angle,0deg)) scale(0)}
}
/* Make chapter blur 2.5-3x stronger while it scatters/gathers. */
@keyframes lv15GlyphScatter {
  0%{transform:translate3d(0,0,0) rotate(0) scale(1);filter:blur(0)}
  45%{transform:translate3d(calc(var(--lv15-x,0px)*.32),calc(var(--lv15-y,0px)*.35),0) rotate(calc(var(--lv15-rotate,0deg)*.3)) scale(1.15);filter:blur(10px)}
  100%{transform:translate3d(var(--lv15-x,0px),var(--lv15-y,0px),0) rotate(var(--lv15-rotate,0deg)) scale(.85);filter:blur(24px)}
}
@keyframes lv15GlyphGather {
  0%{transform:translate3d(var(--lv15-x,0px),var(--lv15-y,0px),0) rotate(var(--lv15-rotate,0deg)) scale(1.25);filter:blur(26px)}
  65%{filter:blur(12px)}
  100%{transform:translate3d(0,0,0) rotate(0) scale(1);filter:blur(0)}
}
/* ABOUT visible and visually separate from Project: Livium. */
#about .about-heading h2 { color:#6a42d6; -webkit-text-stroke:1px rgba(42,30,105,.22); text-shadow:2px 3px 0 rgba(233,166,248,.6); }
#about .about-tagline { color:#ed4f9f; text-shadow:none; }
/* Bring bottom outline toward View All on X without squeezing the button. */
#news.lv-section-pad { padding-bottom:clamp(22px,2.5vw,34px); }
/* Dummy social links should be clickable and glow when hovered/focused. */
.talent-social-link { cursor:pointer; }
a.talent-social-link:hover,a.talent-social-link:focus-visible {
  transform:translateY(-3px) scale(1.1);
  color:#fff; background:#c83592; border-color:#ffb5df;
  box-shadow:0 0 10px rgba(244,114,182,.85),0 0 24px rgba(217,70,239,.6),inset 0 0 6px rgba(255,255,255,.3);
  outline:2px solid rgba(255,221,245,.7); outline-offset:2px;
}
@media(max-width:600px){
  #news.lv-section-pad{padding-bottom:22px}
  .lv17-star {filter:drop-shadow(0 0 4px rgba(255,215,245,.7))}
}

/* LIVIUM V19 — true blur, WITHOUT repeat-edge / overscan / zoom.
   Image exactly fits its own frame; normal transparent blur edges are allowed.
   Preserve V18 exit fade and 2.6s independent background motion. */
.lv15-background .lv15-frame {
  overflow:hidden; filter:none; background:none; background-image:none;
}
.lv15-background .lv15-frame > img {
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:center;
  filter:blur(0px); transform:none; backface-visibility:hidden;
  will-change:filter;
}
.lv15-background .lv15-frame--exit {
  animation:lv18BackgroundOut 2.6s cubic-bezier(.65,0,.35,1) both;
  will-change:transform,opacity;
}
.lv15-background .lv15-frame--enter {
  animation:lv18BackgroundIn 2.6s cubic-bezier(.65,0,.35,1) both;
  will-change:transform;
}
.lv15-background .lv15-frame--exit > img {animation:lv19BackgroundBlurOut 2.6s cubic-bezier(.65,0,.35,1) both;}
.lv15-background .lv15-frame--enter > img {animation:lv19BackgroundBlurIn 2.6s cubic-bezier(.65,0,.35,1) both;}
@keyframes lv18BackgroundOut {
  0%{transform:translate3d(0,0,0);opacity:1}
  35%{opacity:.65}
  70%{opacity:.22}
  100%{transform:translate3d(0,-100%,0);opacity:0}
}
@keyframes lv18BackgroundIn {
  0%{transform:translate3d(0,100%,0);opacity:1}
  100%{transform:translate3d(0,0,0);opacity:1}
}
@keyframes lv19BackgroundBlurOut {
  0%{filter:blur(0px)}
  25%{filter:blur(16px)}
  55%{filter:blur(44px)}
  100%{filter:blur(64px)}
}
@keyframes lv19BackgroundBlurIn {
  0%{filter:blur(64px)}
  45%{filter:blur(44px)}
  75%{filter:blur(16px)}
  100%{filter:blur(0px)}
}
/* Menu stays V16, but its popover now sits above ALL sections/videos/buttons. */
@media(max-width:1180px){
 .floating-header .floating-header-actions {z-index:30;}
 .floating-header .mobile-menu-toggle {position:relative;z-index:31;}
 .floating-header .mobile-menu-backdrop {z-index:20;}
 .floating-header .mobile-menu-popover {z-index:40;}
}
/* ABOUT: pink, no shadow, preserve V15 one-line overlap. */
#about .about-tagline {color:#ed4f9f;text-shadow:none!important;}

/* LIVIUM V19 — per-talent accent only in talent detail panel. */
#talent .talent-bio .talent-eyebrow { color:var(--talent-accent,#ff8bc4); }
#talent .talent-bio .talent-socials { border-top-color:color-mix(in srgb,var(--talent-accent,#ff8bc4) 40%,transparent); }
#talent .talent-bio .talent-social-link {
  color:var(--talent-accent,#ff8bc4);
  border-color:color-mix(in srgb,var(--talent-accent,#ff8bc4) 65%,transparent);
  background:color-mix(in srgb,var(--talent-accent,#ff8bc4) 10%,#253347);
  transition:transform .18s, background .18s, border-color .18s, box-shadow .18s;
}
#talent .talent-bio a.talent-social-link:hover,
#talent .talent-bio a.talent-social-link:focus-visible {
  color:#fff;
  background:color-mix(in srgb,var(--talent-accent,#ff8bc4) 60%,#27384d);
  border-color:var(--talent-accent,#ff8bc4);
  box-shadow:0 0 11px color-mix(in srgb,var(--talent-accent,#ff8bc4) 85%,transparent),
             0 0 24px color-mix(in srgb,var(--talent-accent,#ff8bc4) 50%,transparent),
             inset 0 0 7px rgba(255,255,255,.28);
  outline:2px solid color-mix(in srgb,var(--talent-accent,#ff8bc4) 62%,white);
  outline-offset:2px;
}
/* Navigation retains its original solid shape while the page is at the top.
   Scroll activates glass on the desktop pill and the mobile menu controls. */
.desktop-nav-pill {
  transition:background-color .32s ease,border-color .32s ease,box-shadow .32s ease,backdrop-filter .32s ease;
}
.floating-header.is-scrolled .desktop-nav-pill {
  background:rgba(37,56,77,.52);
  border-color:rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(18px) saturate(155%);
  backdrop-filter:blur(18px) saturate(155%);
  box-shadow:0 14px 38px rgba(5,11,28,.26),inset 0 1px 0 rgba(255,255,255,.17);
}
@media(max-width:1180px){
  .floating-header .mobile-menu-toggle,
  .floating-header .mobile-menu-popover {
    transition:background-color .32s ease,border-color .32s ease,box-shadow .32s ease,backdrop-filter .32s ease,opacity .19s,transform .19s,visibility .19s;
  }
  .floating-header.is-scrolled .mobile-menu-toggle {
    background:rgba(37,56,77,.54);
    border-color:rgba(255,255,255,.38);
    -webkit-backdrop-filter:blur(18px) saturate(155%);
    backdrop-filter:blur(18px) saturate(155%);
    box-shadow:0 9px 24px rgba(5,11,28,.3),inset 0 1px 0 rgba(255,255,255,.15);
  }
  .floating-header.is-scrolled .mobile-menu-popover {
    background:rgba(34,49,71,.70);
    border-color:rgba(255,255,255,.29);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    backdrop-filter:blur(22px) saturate(160%);
  }
}


/* LIVIUM V20 — animated symbol WebM in ABOUT and floating ATAS button. */
#about .about-crosshair {
  display:block;
  width:84px;
  height:84px;
  font-size:0;
  pointer-events:none;
  z-index:2;
}
#about .about-crosshair video,
#about .about-crosshair img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transform:scale(1.25);
}
@media(max-width:860px){
  #about .about-crosshair {width:65px;height:65px;}
}
@media(max-width:600px){
  #about .about-crosshair {width:55px;height:55px;}
}
/* Transparent WebM sits ABOVE the ATAS button, overlapping its top by ~10px. */
.lv20-back-top { position:fixed; overflow:visible; isolation:isolate; cursor:pointer; }
.lv20-back-top-video {
  position:absolute;
  width:66px;
  height:66px;
  left:50%;
  top:-73px;
  transform:translateX(-50%);
  z-index:2;
  pointer-events:none;
}
.lv20-back-top-video video,
.lv20-back-top-video img {display:block;width:100%;height:100%;object-fit:contain;transform:scale(1.25);}
.lv20-back-top:hover .lv20-back-top-video,
.lv20-back-top:focus-visible .lv20-back-top-video {
  filter:drop-shadow(0 0 9px rgba(184,128,255,.76));
}
/* Navigation glow, including individual items, without changing V19 glass on scroll. */
.floating-header .desktop-nav-pill {
  transition:background-color .32s ease,border-color .25s ease,box-shadow .25s ease,backdrop-filter .32s ease;
}
.floating-header .desktop-nav-pill:hover,
.floating-header .desktop-nav-pill:focus-within {
  border-color:rgba(250,185,243,.64);
  box-shadow:0 0 14px rgba(197,136,255,.28),0 0 34px rgba(246,98,190,.28),0 14px 38px rgba(5,11,28,.30),inset 0 1px 0 rgba(255,255,255,.26);
}
.floating-header .desktop-nav-pill a:hover,
.floating-header .desktop-nav-pill a:focus-visible {
  color:#ffe3f7;
  text-shadow:0 0 8px rgba(255,156,229,.98),0 0 17px rgba(186,138,255,.88);
}
.floating-header .navbar-logo-link:hover,
.floating-header .navbar-logo-link:focus-visible {
  filter:drop-shadow(0 0 9px rgba(207,147,255,.66));
}
.floating-header .language-switch:hover,
.floating-header .language-switch:focus-within,
.floating-header .floating-contact:hover,
.floating-header .floating-contact:focus-visible {
  box-shadow:0 0 12px rgba(250,140,230,.55),0 0 22px rgba(151,118,255,.28);
}
@media(max-width:1180px){
  .floating-header .mobile-menu-toggle:hover,
  .floating-header .mobile-menu-toggle:focus-visible,
  .floating-header .mobile-menu-popover a:hover,
  .floating-header .mobile-menu-popover a:focus-visible {
    box-shadow:0 0 12px rgba(249,157,240,.55),0 0 24px rgba(163,130,245,.25);
  }
}


/* LIVIUM V23 — welcome intro, terpisah dari React */
@keyframes lv23-welcome-rise {
  0% { transform: translate3d(0,0,0); visibility: visible; }
  99% { transform: translate3d(0,-108%,0); visibility: visible; }
  100% { transform: translate3d(0,-108%,0); visibility: hidden; }
}
@keyframes lv23-logo-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.025); }
}
.lv23-welcome {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center; overflow: hidden;
  width: 100%; height: 100vh; height: 100dvh;
  background: #11182a; isolation: isolate;
  pointer-events: auto; will-change: transform;
  animation: lv23-welcome-rise 0.9s cubic-bezier(.71,.01,.25,1) 3s both;
}
.lv23-welcome-bg {
  display: block; position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  object-position: center; filter: brightness(.63) saturate(1.12);
  transform: scale(1.025); pointer-events: none;
}
.lv23-welcome-tint {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,23,42,.30), rgba(15,23,42,.52));
}
.lv23-welcome-content {
  position: relative; z-index: 1; width: 100%; padding: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.lv23-welcome-logo {
  width: min(62vw, 360px); height: auto; min-width: 190px;
  max-width: 80%; display: block;
  filter: drop-shadow(0 9px 27px rgba(13,17,43,.5));
  animation: lv23-logo-breathe 1.8s ease-in-out infinite;
}
@media (max-width: 640px) {
  .lv23-welcome-logo { width: min(82vw, 330px); min-width: 160px; }
}