@import url('../../../assets/tokens/css-variables.css');
@import url('../../../assets/tokens/typography.css');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;
  overflow:hidden;
  font-family:var(--klj-font);
}

body{
  background:var(--klj-splash-from);
  color:var(--klj-text);
}

/* ══════════════════════════════════════
   VIEWPORT SHELL
   ══════════════════════════════════════ */
.launch-page{
  position:fixed;
  inset:0;
  width:100%;
  height:100vh;
  height:100dvh;
  height:100svh;
  overflow:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* ── SVG background เต็มจอ ── */
.splash-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 22%, rgba(255,255,255,.75) 0%, transparent 70%),
    linear-gradient(180deg, var(--klj-splash-from) 0%, #E4F7F4 55%, var(--klj-splash-to) 100%),
    url('/assets/splash/klaijai-splash-v2-community.svg') center bottom / cover no-repeat;
}

/* ── Overlay ── */
.launch-overlay{
  position:relative;
  z-index:10;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:
    max(12px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  max-width:520px;
  margin:0 auto;
  width:100%;
}

/* ── Top bar ── */
.launch-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-shrink:0;
}

.launch-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:linear-gradient(135deg,var(--klj-primary-500),var(--klj-primary-700));
  color:#fff;
  font-size:clamp(11px,2.8vw,13px);
  font-weight:var(--klj-weight-semibold);
  padding:7px 16px;
  border-radius:9999px;
  box-shadow:0 4px 20px rgba(15,142,147,.32);
  white-space:nowrap;
}
.launch-badge-dot{
  width:7px;height:7px;border-radius:50%;
  background:#fff;
  animation:blink 1.4s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.85)}}

.demo-link{
  font-size:clamp(11px,2.6vw,12px);
  font-weight:var(--klj-weight-medium);
  color:var(--klj-brand-tagline);
  text-decoration:none;
  padding:7px 14px;
  border-radius:20px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 2px 12px rgba(15,142,147,.08);
  white-space:nowrap;
  transition:background .2s,color .2s,transform .2s;
}
.demo-link:hover{
  background:#fff;
  color:var(--klj-primary-600);
  transform:translateY(-1px);
}

/* ── Hero / Brand lockup ── */
.launch-hero{
  flex:0 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  padding:clamp(4px,1vh,12px) 0;
}

.splash-lockup{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  animation:fade-up .7s ease-out both;
}
@keyframes fade-up{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

.splash-logo{
  width:clamp(96px,24vw,132px);
  height:clamp(96px,24vw,132px);
  margin-bottom:clamp(14px,3.2vh,22px);
  filter:drop-shadow(0 10px 28px rgba(15,142,147,.28));
  animation:float 4s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
.splash-logo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}

.splash-brand-th{
  font-size:clamp(32px,9vw,52px);
  line-height:1.05;
  letter-spacing:-0.02em;
}
.splash-brand-en{
  font-size:clamp(18px,5vw,30px);
  margin-top:clamp(2px,0.6vh,6px);
  line-height:1.2;
}
.splash-tagline{
  font-size:clamp(13px,3.4vw,18px);
  margin-top:clamp(8px,2vh,14px);
  line-height:1.35;
}
.tagline-heart{
  color:var(--klj-primary-400);
  font-size:.9em;
}
.splash-subtitle{
  font-size:clamp(11px,2.8vw,14px);
  margin-top:clamp(4px,1vh,8px);
  line-height:1.35;
  opacity:.9;
}

/* ── ICD-10 chips (01-project-overview §1.3) ── */
.icd-chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:5px;
  margin-top:clamp(8px,1.8vh,12px);
  max-width:100%;
}
.icd-chip{
  font-size:clamp(9px,2.2vw,10px);
  font-weight:var(--klj-weight-medium);
  padding:4px 9px;
  border-radius:9999px;
  border:1px solid transparent;
  white-space:nowrap;
}
.icd-f20{background:rgba(15,142,147,.1);color:var(--klj-primary-700);border-color:rgba(15,142,147,.2)}
.icd-f30{background:rgba(59,130,246,.08);color:#1D4ED8;border-color:rgba(59,130,246,.18)}
.icd-f10{background:rgba(245,158,11,.1);color:#B45309;border-color:rgba(245,158,11,.22)}

/* ── Features (03-app + 04-dashboard) ── */
.launch-features{
  flex-shrink:0;
  margin-bottom:clamp(6px,1.2vh,10px);
  animation:fade-up .7s .1s ease-out both;
}
.features-heading{
  font-size:clamp(9px,2.2vw,10px);
  font-weight:var(--klj-weight-semibold);
  color:var(--klj-brand-tagline);
  text-transform:uppercase;
  letter-spacing:var(--klj-tracking-label);
  text-align:center;
  margin-bottom:clamp(6px,1.2vh,8px);
}
.feature-grid{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(5px,1.2vw,7px);
}
.feature-card{
  display:flex;
  align-items:flex-start;
  gap:7px;
  padding:clamp(7px,1.6vh,9px) clamp(8px,2vw,10px);
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.92);
  border-radius:clamp(10px,2.5vw,12px);
  box-shadow:0 2px 10px rgba(15,142,147,.06);
}
.feature-icon{
  font-size:clamp(14px,3.8vw,16px);
  line-height:1;
  flex-shrink:0;
  margin-top:1px;
}
.feature-body{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.feature-body strong{
  font-size:clamp(10px,2.5vw,11px);
  font-weight:var(--klj-weight-semibold);
  color:var(--klj-brand-th);
  line-height:1.25;
}
.feature-body span{
  font-size:clamp(8px,2vw,9px);
  color:var(--klj-brand-subtitle);
  line-height:1.3;
}

/* ── Bottom panel ── */
.launch-bottom{
  display:flex;
  flex-direction:column;
  gap:clamp(6px,1.2vh,10px);
  flex-shrink:0;
  animation:fade-up .7s .15s ease-out both;
}

.countdown-panel{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.95);
  border-radius:clamp(16px,4vw,20px);
  padding:clamp(12px,2.5vh,18px) clamp(14px,3.5vw,18px) clamp(10px,2vh,14px);
  box-shadow:
    0 4px 24px rgba(15,142,147,.1),
    0 1px 0 rgba(255,255,255,.8) inset;
}

.countdown-heading{
  font-size:clamp(10px,2.4vw,11px);
  font-weight:var(--klj-weight-semibold);
  color:var(--klj-brand-tagline);
  text-transform:uppercase;
  letter-spacing:var(--klj-tracking-label);
  text-align:center;
  margin-bottom:clamp(8px,1.8vh,12px);
}

.countdown-grid{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(3px,1.2vw,8px);
}

.countdown-unit{
  flex:1;
  max-width:clamp(56px,15vw,76px);
  background:linear-gradient(180deg,#fff 0%,var(--klj-neutral-50) 100%);
  border:1px solid var(--klj-border);
  border-radius:var(--klj-radius-sm);
  padding:clamp(8px,1.8vh,12px) clamp(4px,1vw,6px) clamp(6px,1.4vh,9px);
  text-align:center;
  transition:transform .2s ease,box-shadow .2s ease;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}
.countdown-unit.tick{
  transform:scale(1.05);
  box-shadow:0 4px 12px rgba(15,142,147,.15);
}
.countdown-unit.highlight{
  background:linear-gradient(180deg,var(--klj-primary-50) 0%,var(--klj-primary-100) 100%);
  border-color:var(--klj-primary-300);
}

.countdown-value{
  font-size:clamp(20px,6vw,30px);
  font-weight:var(--klj-weight-bold);
  color:var(--klj-brand-th);
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.countdown-unit-label{
  font-size:clamp(9px,2.2vw,10px);
  color:var(--klj-brand-subtitle);
  margin-top:clamp(3px,0.6vh,5px);
  font-weight:var(--klj-weight-medium);
}
.countdown-sep{
  font-size:clamp(15px,4.2vw,22px);
  font-weight:var(--klj-weight-bold);
  color:var(--klj-primary-400);
  padding-bottom:clamp(12px,2.8vh,16px);
  opacity:.4;
  flex-shrink:0;
}

.launch-progress{margin-top:clamp(10px,2vh,14px)}
.launch-progress-labels{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:clamp(9px,2.2vw,10px);
  color:var(--klj-brand-subtitle);
  margin-bottom:5px;
  gap:6px;
}
.launch-progress-labels #progress-pct{
  font-weight:var(--klj-weight-semibold);
  color:var(--klj-primary-600);
  font-size:clamp(10px,2.4vw,11px);
}
#launch-date-label{
  font-weight:var(--klj-weight-medium);
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex:1;
  min-width:0;
}

.launch-progress-track{
  height:5px;
  background:var(--klj-neutral-100);
  border-radius:9999px;
  overflow:hidden;
}
.launch-progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--klj-primary-400),var(--klj-primary-600));
  border-radius:9999px;
  transition:width 1s linear;
  box-shadow:0 0 8px rgba(15,142,147,.35);
}

.launch-stats{
  display:flex;
  justify-content:center;
  gap:clamp(16px,6vw,32px);
  margin-top:clamp(10px,2vh,14px);
  padding-top:clamp(10px,2vh,14px);
  border-top:1px solid rgba(226,232,240,.8);
}
.stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.stat-val{
  font-size:clamp(16px,4.5vw,22px);
  font-weight:var(--klj-weight-bold);
  color:var(--klj-primary-600);
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.stat-lbl{font-size:clamp(9px,2.2vw,10px);color:var(--klj-brand-subtitle)}

.launch-footer{
  text-align:center;
  font-size:clamp(9px,2.2vw,10px);
  color:var(--klj-brand-subtitle);
  line-height:1.3;
  padding:4px 0 2px;
  opacity:.85;
}

/* ── Launch CTA ── */
.launch-cta{
  background:rgba(255,255,255,.92);
  border:1px solid var(--klj-primary-300);
  border-radius:var(--klj-radius-md);
  padding:clamp(12px,2.5vh,16px);
  text-align:center;
  box-shadow:0 4px 20px rgba(15,142,147,.12);
}
.launch-cta.hidden{display:none}
.launch-cta-title{
  font-size:clamp(15px,3.8vw,17px);
  font-weight:var(--klj-weight-bold);
  color:var(--klj-brand-th);
  margin-bottom:10px;
}
.btn-launch{
  display:inline-flex;
  align-items:center;
  background:linear-gradient(135deg,var(--klj-primary-500),var(--klj-primary-600));
  color:#fff;
  font-family:var(--klj-font);
  font-size:clamp(13px,3.2vw,14px);
  font-weight:var(--klj-weight-semibold);
  padding:11px 24px;
  border-radius:var(--klj-radius-md);
  text-decoration:none;
  box-shadow:0 4px 16px rgba(15,142,147,.3);
  transition:transform .2s,box-shadow .2s;
}
.btn-launch:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(15,142,147,.4);
}

/* ── Launched ── */
.launch-page.launched .launch-badge{
  background:linear-gradient(135deg,var(--klj-success),#15803d);
}
.launch-page.launched .countdown-panel{opacity:.7}

/* ── Desktop / แท็บเล็ต ── */
@media(min-width:600px){
  .launch-overlay{
    max-width:560px;
    padding-left:24px;
    padding-right:24px;
  }
  .splash-bg{
    background-size:cover;
    background-position:center 85%;
  }
}

/* ── หน้าจอเตี้ย ── */
@media(max-height:720px){
  .splash-logo{width:clamp(72px,14vh,96px);height:clamp(72px,14vh,96px);margin-bottom:8px}
  .splash-brand-th{font-size:clamp(26px,7vh,36px)}
  .splash-brand-en{font-size:clamp(15px,3.8vh,22px)}
  .splash-tagline{font-size:clamp(11px,2.6vh,14px);margin-top:5px}
  .icd-chips{margin-top:6px;gap:4px}
  .icd-chip{font-size:8px;padding:3px 7px}
  .feature-body strong{font-size:9px}
  .feature-body span{font-size:8px}
  .feature-card{padding:6px 7px;gap:5px}
  .countdown-panel{padding:10px 12px 8px}
  .launch-stats{margin-top:8px;padding-top:8px}
}

@media(max-height:560px){
  .splash-subtitle{display:none}
  .splash-tagline{font-size:12px}
  .icd-chips{display:none}
  .features-heading{display:none}
  .feature-body span{display:none}
  .countdown-value{font-size:clamp(16px,5vw,22px)}
  .launch-footer{display:none}
}

@media(max-width:360px){
  .launch-badge{padding:6px 12px;font-size:10px}
  .demo-link{padding:6px 10px;font-size:10px}
}

@media(max-height:500px) and (orientation:landscape){
  .launch-overlay{
    max-width:none;
    display:grid;
    grid-template-columns:1fr 1fr min(360px,38vw);
    grid-template-rows:auto 1fr auto;
    grid-template-areas:
      "top top top"
      "hero features bottom"
      "footer footer footer";
    column-gap:16px;
    align-content:center;
  }
  .launch-top{grid-area:top}
  .launch-hero{grid-area:hero;align-items:center}
  .launch-features{grid-area:features;margin-bottom:0}
  .feature-grid{grid-template-columns:1fr}
  .launch-bottom{grid-area:bottom;justify-content:center}
  .launch-footer{grid-area:footer}
  .splash-logo{width:72px;height:72px;margin-bottom:6px}
  .splash-brand-th{font-size:26px}
  .splash-brand-en{font-size:15px}
  .icd-chips{display:none}
}