/*!
 * FlickBG — eliminador de fondo · flickbg.com
 * author: Deltadri · © 2026 Deltadri.
 * Licencia: PolyForm Noncommercial 1.0.0 (ver fichero LICENSE).
 * USO COMERCIAL PROHIBIDO sin permiso expreso del autor.
 * Required Notice: Copyright 2026 Deltadri (https://flickbg.com)
 */
:root{
  --bg:#faf8f3;
  --ink:#14110d;
  --soft:#8a8579;
  --hair:rgba(20,17,13,.10);
  --hair-2:rgba(20,17,13,.18);
  --checker:rgba(20,17,13,.06);
  --danger:#9a2a1c;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  font-family:'Fraunces',Georgia,serif;
  font-weight:400;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
}

/* whole-page chrome */
.shell{
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:32px 40px;
}

/* top — brand + tiny meta */
header{
  display:flex;justify-content:space-between;align-items:center;
}
.brand{
  font-size:18px;font-weight:500;letter-spacing:-.01em;
  display:flex;align-items:baseline;gap:8px;
}
.brand::after{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--ink);transform:translateY(-2px);
}
.meta{
  font-size:13px;color:var(--soft);font-feature-settings:"tnum" 1;
  letter-spacing:.02em;
}

/* center — the work */
main{
  display:grid;place-items:center;
  padding:60px 0 40px;
}
.stage{
  width:100%;max-width:620px;text-align:center;
}

h1{
  font-family:'Fraunces';
  font-weight:400;
  font-variation-settings:"opsz" 144, "SOFT" 100;
  font-size:clamp(48px,7vw,88px);
  line-height:1.02;
  letter-spacing:-.035em;
  margin:0 0 22px;
}
h1 em{
  font-style:italic;
  font-weight:300;
  color:var(--soft);
}

.deck{
  font-size:18px;
  color:var(--soft);
  max-width:440px;
  margin:0 auto 56px;
  line-height:1.5;
}

/* show/hide by state ------------------------------------------------ */
.drop,.processing,.result,.error{display:none}
.stage[data-state="idle"]    .drop      {display:block}
.stage[data-state="loading"] .processing{display:block}
.stage[data-state="result"]  .result    {display:block}
.stage[data-state="error"]   .error     {display:block}

/* The drop ---------------------------------------------------------- */
.drop{
  position:relative;
  border:1px solid var(--hair-2);
  border-radius:14px;
  padding:52px 28px;
  background:transparent;
  transition:border-color .25s ease, background .25s ease;
  cursor:pointer;
}
.drop:hover,
.drop.is-over{
  border-color:var(--ink);
  background:rgba(20,17,13,.015);
}
.drop.is-over{
  background:rgba(20,17,13,.04);
}
.drop-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--hair-2);
  margin-bottom:18px;
  transition:border-color .25s ease, transform .25s ease;
}
.drop:hover .drop-mark,
.drop.is-over .drop-mark{border-color:var(--ink);transform:translateY(-2px)}
.drop-mark svg{width:16px;height:16px;color:var(--ink)}
.drop-t{
  font-size:22px;font-weight:400;letter-spacing:-.01em;
  margin:0 0 6px;
}
.drop-t em{font-style:italic;font-weight:300;color:var(--soft)}
.drop-s{font-size:14px;color:var(--soft);margin:0}

/* Loading ----------------------------------------------------------- */
.processing{padding:52px 28px;border:1px solid var(--hair);border-radius:14px}
.proc-t{
  font-size:24px;font-weight:400;letter-spacing:-.01em;
  margin:0 0 26px;
}
.dots i{
  display:inline-block;animation:blink 1.4s infinite;
  font-style:normal;
}
.dots i:nth-child(2){animation-delay:.2s}
.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}

.bar{
  height:2px;background:var(--hair);border-radius:2px;
  overflow:hidden;max-width:320px;margin:0 auto;
}
.bar-fill{
  height:100%;width:0;background:var(--ink);
  transition:width .25s ease;
}
.proc-s{
  font-size:13px;color:var(--soft);margin:18px 0 0;font-style:italic;
}

/* Result ------------------------------------------------------------ */
.result{}
.canvas{
  display:flex;
  justify-content:center;
  align-items:center;
  border:1px solid var(--hair-2);
  border-radius:14px;
  padding:18px;
  margin-bottom:24px;
  background-color:var(--bg);
  background-image:
    linear-gradient(45deg, var(--checker) 25%, transparent 25%),
    linear-gradient(-45deg, var(--checker) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--checker) 75%),
    linear-gradient(-45deg, transparent 75%, var(--checker) 75%);
  background-size:18px 18px;
  background-position:0 0, 0 9px, 9px -9px, -9px 0;
}
.canvas-stage{
  position:relative;
  max-width:100%;
  line-height:0; /* evita el espacio bajo la imagen */
}
.canvas-stage img{
  display:block;
  max-width:100%;max-height:60vh;
  border-radius:6px;
}
#reveal-overlay{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  opacity:0;
  clip-path:inset(0 0 0 0);
  border-radius:6px;
}
.canvas-stage.is-revealing #reveal-overlay{
  opacity:1;
  animation:revealWipe 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes revealWipe{
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 100%); }
}
/* Línea fina que va con el wipe — discreta */
.canvas-stage::after{
  content:"";
  position:absolute;top:0;bottom:0;
  left:0;width:1px;
  background:var(--ink);
  opacity:0;
  pointer-events:none;
}
.canvas-stage.is-revealing::after{
  animation:revealLine 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes revealLine{
  0%   { left:0;   opacity:0; }
  10%  { opacity:.65; }
  90%  { opacity:.65; }
  100% { left:100%; opacity:0; }
}
/* Respeta prefers-reduced-motion: sin animación */
@media (prefers-reduced-motion: reduce){
  .canvas-stage.is-revealing #reveal-overlay,
  .canvas-stage.is-revealing::after{
    animation:none;
  }
  .canvas-stage.is-revealing #reveal-overlay{ opacity:0; }
}

.actions{
  display:flex;align-items:center;justify-content:center;gap:22px;
  flex-wrap:wrap;
}

/* Buttons ----------------------------------------------------------- */
.btn{
  display:inline-block;
  font-family:'Fraunces';font-weight:400;font-size:16px;letter-spacing:-.005em;
  padding:14px 26px;
  background:var(--ink);color:var(--bg);
  border:1px solid var(--ink);
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease, background .2s ease;
}
.btn:hover{background:#000;transform:translateY(-1px)}
.btn-ghost{
  appearance:none;background:transparent;border:0;cursor:pointer;
  font-family:'Fraunces';font-style:italic;font-weight:400;
  font-size:15px;color:var(--soft);
  border-bottom:1px solid var(--hair-2);padding:2px 0;
  transition:color .2s ease, border-color .2s ease;
}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink)}

/* Error ------------------------------------------------------------- */
.error{padding:38px 28px;border:1px solid var(--hair-2);border-radius:14px}
.err-t{
  font-size:22px;font-weight:400;letter-spacing:-.01em;margin:0 0 6px;
  color:var(--danger);font-style:italic;
}
.err-s{font-size:14px;color:var(--soft);margin:0 0 18px}

/* Hint at the bottom of stage --------------------------------------- */
.hint{
  margin-top:24px;
  font-size:13px;color:var(--soft);
  display:flex;align-items:center;justify-content:center;gap:18px;
  flex-wrap:wrap;
}
.hint span{display:inline-flex;align-items:center;gap:6px}
.hint .dot{width:3px;height:3px;border-radius:50%;background:var(--soft);display:inline-block}

/* Footer ------------------------------------------------------------ */
footer{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:18px;
  border-top:1px solid var(--hair);
  font-size:13px;color:var(--soft);
}
footer em{font-style:italic;color:var(--ink);font-weight:400;opacity:.7}
footer a{
  color:var(--soft);
  text-decoration:none;
  border-bottom:1px solid var(--hair-2);
  transition:color .2s ease, border-color .2s ease;
}
footer a:hover{color:var(--ink);border-color:var(--ink)}

/* Small screens ----------------------------------------------------- */
@media (max-width:600px){
  .shell{padding:24px 22px}
  main{padding:32px 0 24px}
  h1{font-size:46px}
  .deck{font-size:16px;margin-bottom:40px}
  .drop,.processing,.error{padding:40px 20px}
  footer{flex-direction:column;gap:8px;text-align:center}
}