/* DanangInk FX — progressive enhancement layer.
   To disable everything: remove the <link> to fx.css and the <script> tags for fx.js / portfolio-data.js. */

:root{--fx-a1:#FF8A1F;--fx-a2:#FF4F8B;--fx-a3:#2FD17A;--fx-bg:#12151C}

/* ---------- scroll progress bar ---------- */
.fx-progress{
  position:fixed;top:0;left:0;width:100%;height:3px;z-index:1200;
  transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--fx-a1),var(--fx-a2));
  pointer-events:none;
}

/* ---------- reveal on scroll (only hides once JS is running) ---------- */
@keyframes fx-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.fx-js .fx-reveal:not(.fx-in){opacity:0}
.fx-js .fx-reveal.fx-in{
  animation:fx-up .7s cubic-bezier(.2,.7,.2,1) backwards;
  animation-delay:var(--fx-d,0s);
}

/* ---------- card / service-link hover: gradient border + glow ---------- */
.fx-glow{position:relative}
.fx-glow::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;
  background:linear-gradient(135deg,var(--fx-a1),var(--fx-a2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s;pointer-events:none;
}
.fx-glow:hover::after{opacity:1}
.fx-glow:hover{box-shadow:0 14px 40px rgba(255,79,139,.16),0 8px 32px rgba(0,0,0,.42)}

/* ---------- counters ---------- */
[data-fx-count]{font-weight:inherit;font-style:normal}

/* ---------- open / closed badge ---------- */
.fx-open{
  display:flex;width:fit-content;max-width:100%;align-items:center;gap:9px;
  margin:-6px 0 22px;padding:7px 15px;border-radius:50px;
  font-size:13px;font-weight:600;line-height:1.4;color:#f1f1f1;
  background:rgba(18,21,28,.55);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.fx-open:empty{display:none}
.fx-open::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--fx-dot,#999)}
.fx-open.is-open{--fx-dot:var(--fx-a3)}
.fx-open.is-closed{--fx-dot:var(--fx-a2)}
.fx-open.is-open::before{animation:fx-pulse 2s ease-out infinite}
@keyframes fx-pulse{0%{box-shadow:0 0 0 0 rgba(47,209,122,.55)}100%{box-shadow:0 0 0 10px rgba(47,209,122,0)}}

/* ---------- portfolio album (auto-built from portfolio-data.js) ---------- */
.fx-pf-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 28px}
.fx-pf-chip{
  border:1px solid rgba(255,255,255,.2);background:rgba(18,21,28,.6);color:#f1f1f1;
  padding:9px 20px;border-radius:50px;font:600 14px 'Poppins',sans-serif;cursor:pointer;
  text-shadow:none;transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.fx-pf-chip:hover{border-color:var(--fx-a2);transform:translateY(-2px)}
.fx-pf-chip[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--fx-a1),var(--fx-a2));border-color:transparent;color:#1B1209;
}
.fx-pf-grid{columns:4 230px;column-gap:14px}
.fx-pf-item{
  display:block;width:100%;margin:0 0 14px;padding:0;border:1px solid rgba(255,255,255,.12);
  border-radius:18px;overflow:hidden;background:#1b1f29;cursor:zoom-in;break-inside:avoid;
  box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .3s,border-color .3s;
}
.fx-pf-item:hover,.fx-pf-item:focus-visible{transform:translateY(-5px);border-color:var(--fx-a2);outline:none}
.fx-pf-item img{display:block;width:100%;height:auto}
@media(max-width:700px){
  .fx-pf-grid{columns:2;column-gap:10px}
  .fx-pf-item{margin-bottom:10px;border-radius:14px}
  .fx-pf-chip{padding:8px 15px;font-size:13px}
}
.fx-pf-grid.fx-pf-few{columns:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.fx-pf-few .fx-pf-item{width:min(300px,44vw);margin:0}
.fx-pf-item{position:relative}
.fx-pf-time{
  position:absolute;left:10px;top:10px;padding:6px 11px;border-radius:50px;
  background:rgba(10,12,16,.8);color:#fff;font:600 12px/1.1 'Poppins',sans-serif;text-shadow:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.14);
}
.fx-pf-cap{
  position:absolute;left:0;right:0;bottom:0;padding:30px 12px 11px;text-align:left;
  font:600 12.5px/1.35 'Poppins',sans-serif;color:#fff;text-shadow:none;
  background:linear-gradient(to top,rgba(10,12,16,.9),transparent);
}
.fx-pf-note{text-align:center;color:#aab0bb;font-size:13px;margin:14px auto 0;max-width:640px}
.fx-pf-item.fx-pf-new{animation:fx-up .55s cubic-bezier(.2,.7,.2,1) backwards}
.fx-pf-more{text-align:center;margin-top:18px}
.fx-pf-more button{cursor:pointer;font-family:inherit;font-size:15px}
.fx-pf-foot{text-align:center;margin-top:22px;font-size:15px;color:#d6d6d6}
.fx-pf-foot a{color:var(--fx-a1);font-weight:700;text-decoration:none}
.fx-pf-foot a:hover{text-decoration:underline}


/* ---------- album wrappers that work on any page layout ---------- */
.fx-pf-wrap{max-width:1200px;margin:0 auto;padding:80px 20px}
.fx-pf-box{margin:46px 0 10px}
.fx-pf-box h2{text-align:center;margin:0 0 12px}
.fx-pf-sub{text-align:center;max-width:760px;margin:0 auto 30px;color:#d6d6d6}
.story-album{max-width:1100px;margin:0 auto;padding:10px 20px 50px}
.story-album h2{font-size:30px;text-align:center;margin-bottom:8px}
.story-album-sub{text-align:center;color:#cfcfcf;margin-bottom:22px}
@media(max-width:768px){.fx-pf-wrap{padding:56px 16px}}

/* ---------- lightbox ---------- */
.fx-lb{
  position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;
  flex-direction:column;gap:10px;padding:20px 20px 56px;background:rgba(8,10,14,.94);
}
.fx-lb.fx-lb-open{display:flex;animation:fx-fade .25s ease}
@keyframes fx-fade{from{opacity:0}to{opacity:1}}
.fx-lb img{max-width:92vw;max-height:calc(100vh - 210px);width:auto;height:auto;border-radius:14px;box-shadow:0 20px 70px rgba(0,0,0,.6)}
.fx-lb-cap{color:#eee;font-size:15px;text-align:center;min-height:1.4em}
.fx-lb-time{color:var(--fx-a1);font-size:15px;font-weight:700;text-align:center}
.fx-lb-time:empty,.fx-lb-note:empty{display:none}
.fx-lb-note{color:#9aa0ab;font-size:12px;text-align:center;max-width:520px}
.fx-lb button{
  position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);
  background:rgba(18,21,28,.9);color:#fff;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;text-shadow:none;
}
.fx-lb button:hover,.fx-lb button:focus-visible{background:var(--fx-a1);color:#1B1209;outline:none}
.fx-lb-close{top:16px;right:16px}
.fx-lb-prev{left:14px;top:50%;margin-top:-24px}
.fx-lb-next{right:14px;top:50%;margin-top:-24px}
body.fx-lb-lock{overflow:hidden}

/* ---------- sticky CTA bar (phones only): Book / Telegram / WhatsApp ---------- */
.fx-bar{display:none}
@media(max-width:700px){
  .fx-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:998;display:flex;gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(18,21,28,.92);border-top:1px solid rgba(255,255,255,.12);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform .3s;
  }
  .fx-bar a{
    flex:1;text-align:center;text-decoration:none;font-weight:700;font-size:14px;
    padding:13px 6px;border-radius:50px;text-shadow:none;white-space:nowrap;
  }
  .fx-bar .fx-bar-book{background:var(--fx-a1);color:#1B1209}
  .fx-bar .fx-bar-tg{background:#229ED9;color:#031a26}
  .fx-bar .fx-bar-wa{background:#25D366;color:#04210f}
  .fx-bar .fx-bar-kk{background:#FEE500;color:#191600}
  .fx-bar.fx-bar-hide{transform:translateY(110%)}
  body.fx-has-bar{padding-bottom:76px}
  body.fx-has-bar .float-stack{bottom:92px}
  /* Book / Telegram / WhatsApp are already in the bar, so drop the duplicate floating icons on phones */
  body.fx-has-bar .float-book-icon,body.fx-has-bar .float-telegram,body.fx-has-bar .float-kakao,body.fx-has-bar .float-whatsapp{display:none}
}

/* ---------- respect reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .fx-js .fx-reveal:not(.fx-in){opacity:1}
  .fx-js .fx-reveal.fx-in,.fx-pf-item.fx-pf-new{animation:none}
  .fx-open.is-open::before{animation:none}
  .fx-pf-item,.fx-glow::after,.fx-bar,.fx-pf-chip{transition:none}
}