/* WICION P34 · Portada Boda · Trazo caligráfico estilo Khoshnus */

/* Mantener UI existente de P32/P33 */
.wicion-p32-effects{border:1px solid #dfd2c1;background:#fffdf9;border-radius:14px;padding:14px;margin:10px 0 14px}
.wicion-p32-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.wicion-p32-title-row>div{display:grid;gap:3px}
.wicion-p32-title-row>div span{font-size:11px;color:#736a61}
.wicion-p32-title-row button{border:1px solid #1c1814;background:#1c1814;color:#fff;border-radius:8px;padding:9px 12px;font-weight:800;cursor:pointer}
.wicion-p32-grid{display:grid;gap:10px}
.wicion-p32-grid.sizes{grid-template-columns:repeat(3,minmax(0,1fr))}
.wicion-p32-grid.sequence{grid-template-columns:repeat(3,minmax(0,1fr))}
.wicion-p32-effects label{display:grid;gap:5px;font-size:12px;font-weight:700}
.wicion-p32-effects label span{font-size:10px;font-weight:400;color:#81776c}
.wicion-p32-effects input,.wicion-p32-effects select{width:100%}
.wicion-p32-lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.wicion-p32-line-card{border:1px solid #eadfce;border-radius:10px;padding:10px;display:grid;gap:8px}
.wicion-p32-line-card>b{font-size:12px}
.wicion-p32-sequence{margin-top:12px;border-top:1px solid #eadfce;padding-top:12px;display:grid;gap:9px}
@media(max-width:900px){
  .wicion-p32-grid.sizes,.wicion-p32-grid.sequence,.wicion-p32-lines{grid-template-columns:1fr}
}

body.wicion-boda-v27 .cover>.cover-top-title{
  font-size:var(--wicion-boda-top-size,var(--cover-top-title-size,18px))!important
}
body.wicion-boda-v27 .cover .wicion-cover-phrase{
  font-size:var(--wicion-boda-phrase-size,16px)!important
}

/* Efectos no caligráficos */
.wicion-p34-fx{will-change:opacity,transform,clip-path}

.wicion-p34-fx.is-sweep{
  clip-path:inset(0 100% 0 0);
  opacity:.15;
  animation:wicionP34Sweep var(--p34-duration,1200ms) cubic-bezier(.22,.72,.25,1) var(--p34-delay,0ms) forwards
}

.wicion-p34-fx.is-fade{
  opacity:0;
  animation:wicionP34Fade var(--p34-duration,900ms) ease var(--p34-delay,0ms) forwards
}

.wicion-p34-fx.is-slide-up{
  opacity:0;
  transform:translateY(18px);
  animation:wicionP34SlideUp var(--p34-duration,900ms) ease var(--p34-delay,0ms) forwards
}

.wicion-p34-fx.is-typewriter{visibility:visible}
.wicion-p34-fx.is-typewriter::after{
  content:'|';
  opacity:.7;
  animation:wicionP34Caret .7s steps(1) infinite
}

@keyframes wicionP34Sweep{
  0%{clip-path:inset(0 100% 0 0);opacity:.15;filter:blur(1px)}
  55%{opacity:1}
  100%{clip-path:inset(0 0 0 0);opacity:1;filter:blur(0)}
}
@keyframes wicionP34Fade{to{opacity:1}}
@keyframes wicionP34SlideUp{to{opacity:1;transform:translateY(0)}}
@keyframes wicionP34Caret{50%{opacity:0}}

/* Trazo caligráfico P34.
 * El HTML original conserva el layout; este SVG temporal dibuja la tinta.
 */
.has-calligraphy-trace{position:relative!important}
.wicion-p34-calligraphy-svg{
  position:absolute;
  inset:0;
  display:block;
  overflow:visible;
  pointer-events:none;
  z-index:3;
}

/* Las cuatro animaciones son el corazón del efecto:
   dashoffset dibuja la línea, width da presencia al trazo,
   stroke desaparece y fill consolida la letra. */
@keyframes wicionP34DrawDash{
  from{
    stroke-dasharray:var(--p34-dash);
    stroke-dashoffset:var(--p34-dash);
  }
  to{
    stroke-dasharray:var(--p34-dash);
    stroke-dashoffset:0;
  }
}

@keyframes wicionP34DrawWidth{
  from{stroke-width:.000001}
  to{stroke-width:var(--p34-end-stroke-width,.55)}
}

@keyframes wicionP34DrawStroke{
  from{stroke:var(--p34-start-stroke,currentColor)}
  to{stroke:transparent}
}

@keyframes wicionP34DrawFill{
  from{fill:transparent}
  to{fill:var(--p34-end-fill,currentColor)}
}

.wicion-p34-calligraphy-svg text,
.wicion-p34-calligraphy-svg tspan{
  vector-effect:non-scaling-stroke;
}
