/* ============================================================
   ENCARTE / OFERTA — estilos para zona 4 (supermercado)
   Complementa slides.css
   ============================================================ */

/* ── Zone 4: Encarte Supermercado ── */
.slide-zone-4 {
    position: relative;
    width: 100%; height: 100%;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

/* Área da imagem do produto (esquerda) */
.slide-zone-4 .enc-img-area {
    width: 44%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 80px 50px;
    position: relative;
    z-index: 2;
}
.slide-zone-4 .enc-img-area img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,.35));
    display: block;
}

/* Cartaz diagonal (direita) — largura via CSS var definida no elemento pai */
.slide-zone-4 .enc-cartaz {
    position: absolute;
    right: -30px;
    top: -40px;
    width: var(--cartaz-w, 62%);
    height: calc(100% + 80px);
    z-index: 3;
    clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header do cartaz (faixa colorida com "OFERTA") */
.enc-cartaz-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 60px 28px 100px;
    font-size: 80px;
    font-weight: 900;
    color: #fff;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1;
    font-style: italic;
}

/* Corpo do cartaz */
.enc-cartaz-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px 60px 60px 100px;
    gap: 16px;
}

/* Nome do produto no cartaz */
.enc-product-name {
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: -.01em;
}

/* Preço no cartaz — estilo supermercado com inteiro/centavos separados */
.enc-price-row {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    line-height: 1;
}
.enc-price-currency {
    font-weight: 900;
    opacity: .85;
    padding-top: .15em;
    line-height: 1;
}
.enc-price-int {
    font-weight: 900;
    line-height: .9;
    letter-spacing: -.04em;
}
.enc-price-frac {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    padding-top: .1em;
    gap: 0;
}
.enc-price-cents {
    font-weight: 900;
    line-height: 1;
}
.enc-price-unit {
    font-weight: 700;
    opacity: .75;
    line-height: 1.1;
}

/* Rodapé do slide (faixa inferior) */
.enc-footer {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    padding: 16px 60px;
    gap: 20px;
}
.enc-footer-text {
    font-size: 38px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .02em;
}
.enc-footer-badge {
    border: 2px solid rgba(255,255,255,.5);
    border-radius: 8px;
    padding: 8px 24px;
    font-size: 30px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}

/* Logo watermark */
.enc-logo {
    position: absolute;
    top: 28px; left: 48px;
    z-index: 5;
    font-size: 44px;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
    line-height: 1.1;
}
.enc-logo small {
    display: block;
    font-size: .38em;
    font-weight: 400;
    letter-spacing: .12em;
    opacity: .75;
}

/* ── ANIMAÇÕES DO ENCARTE ── */

/* Entrada do cartaz */
@keyframes enc-cartaz-in {
    from { transform: translateX(120px) rotate(2deg); opacity: 0; }
    to   { transform: translateX(0) rotate(0deg); opacity: 1; }
}
@keyframes enc-cartaz-bounce {
    0%   { transform: scale(.85) translateX(80px); opacity: 0; }
    60%  { transform: scale(1.04) translateX(-6px); opacity: 1; }
    80%  { transform: scale(.98) translateX(4px); }
    100% { transform: scale(1) translateX(0); }
}
@keyframes enc-img-float {
    from { transform: translateX(-60px) scale(.9); opacity: 0; }
    to   { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes enc-price-pop {
    0%   { transform: scale(0) rotate(-10deg); opacity: 0; }
    70%  { transform: scale(1.08) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); }
}
@keyframes enc-header-slide {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes enc-footer-up {
    from { transform: translateY(60px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
@keyframes pr-bounce-enc {
    0%,100% { transform: scale(1); }
    40%     { transform: scale(1.07); }
    60%     { transform: scale(.97); }
}
@keyframes pr-pulse-enc {
    0%,100% { opacity: 1; }
    50%     { opacity: .65; }
}
@keyframes pr-glow-enc {
    0%,100% { filter: none; }
    50%     { filter: drop-shadow(0 0 28px currentColor); }
}

/* ── VIRAR PÁGINA (flip) ── */
@keyframes enc-cartaz-flip {
    0%   { transform: perspective(1100px) rotateY(-90deg); opacity: 0; }
    55%  { transform: perspective(1100px) rotateY(7deg);   opacity: 1; }
    75%  { transform: perspective(1100px) rotateY(-3deg); }
    100% { transform: perspective(1100px) rotateY(0deg);   opacity: 1; }
}
/* Loop contínuo de virar página (goes back and forth) */
@keyframes enc-cartaz-flip-loop {
    0%,20%   { transform: perspective(1100px) rotateY(0deg);    opacity: 1; }
    45%      { transform: perspective(1100px) rotateY(-80deg);   opacity: .7; }
    50%      { transform: perspective(1100px) rotateY(-80deg);   opacity: .7; }
    75%,100% { transform: perspective(1100px) rotateY(0deg);    opacity: 1; }
}

/* Classes de animação aplicadas ao encarte */
.enc-anim .enc-img-area {
    animation: enc-img-float .9s .1s cubic-bezier(.22,1,.36,1) both;
}
.enc-anim .enc-cartaz {
    animation: enc-cartaz-bounce .8s .25s cubic-bezier(.22,1,.36,1) both;
}
.enc-anim .enc-cartaz-header {
    animation: enc-header-slide .6s .6s ease both;
}
.enc-anim .enc-product-name {
    animation: enc-img-float .7s .7s cubic-bezier(.22,1,.36,1) both;
}
.enc-anim .enc-price-row {
    animation: enc-price-pop .7s .9s cubic-bezier(.22,1,.36,1) both;
}
.enc-anim .enc-footer {
    animation: enc-footer-up .7s 1.1s cubic-bezier(.22,1,.36,1) both;
}
.enc-anim .enc-logo {
    animation: enc-img-float .8s 0s cubic-bezier(.22,1,.36,1) both;
}

/* Animações contínuas do preço */
.enc-preco-bounce    .enc-price-row { animation: pr-bounce-enc  2s   1.5s ease infinite; }
.enc-preco-pulse     .enc-price-row { animation: pr-pulse-enc   2s   1.5s ease infinite; }
.enc-preco-glow      .enc-price-row { animation: pr-glow-enc    3s   1.5s ease infinite; }
.enc-preco-slide-u   .enc-price-row { animation: price-slide-u  .8s  .9s  ease both; }
.enc-preco-shake     .enc-price-row { animation: price-shake    .55s 1.5s ease infinite; }
.enc-preco-tada      .enc-price-row { animation: price-tada     1.1s 1.5s ease infinite; }
.enc-preco-heartbeat .enc-price-row { animation: price-heartbeat 1.3s 1.5s ease infinite; }
.enc-preco-jello     .enc-price-row { animation: price-jello    1.2s 1.5s ease infinite; }
.enc-preco-rubber    .enc-price-row { animation: price-rubber   1.1s 1.5s ease infinite; }

/* ── Overrides de animação do cartaz (aplicados ao .enc-cartaz diretamente) ──
   Use: <div class="enc-cartaz enc-cartaz-anim-flip"> etc.
   Têm !important para sobrescrever o .enc-anim .enc-cartaz padrão (bounce).    */
.enc-cartaz.enc-cartaz-anim-none  { animation: none !important; }
.enc-cartaz.enc-cartaz-anim-slide { animation: enc-cartaz-in .7s .25s ease both !important; }
.enc-cartaz.enc-cartaz-anim-flip  {
    transform-origin: left center;
    animation: enc-cartaz-flip .9s .3s cubic-bezier(.22,1,.36,1) both !important;
}
/* Flip contínuo após a entrada */
.enc-cartaz.enc-cartaz-anim-flip.enc-anim-loop {
    animation:
        enc-cartaz-flip .9s .3s cubic-bezier(.22,1,.36,1) both,
        enc-cartaz-flip-loop 4s 1.5s ease-in-out infinite !important;
    transform-origin: left center;
}

/* ── Novas animações de entrada do cartaz ── */
@keyframes enc-cartaz-drop    { 0%{transform:translateY(-140px);opacity:0} 60%{transform:translateY(8px);opacity:1} 80%{transform:translateY(-4px)} 100%{transform:none;opacity:1} }
@keyframes enc-cartaz-zoom-in { 0%{transform:scale(.4);opacity:0} 65%{transform:scale(1.06);opacity:1} 100%{transform:scale(1);opacity:1} }
@keyframes enc-cartaz-rotate  { from{transform:rotate(-8deg) scale(.88);opacity:0} to{transform:none;opacity:1} }
/* Animações em loop do cartaz */
@keyframes enc-cartaz-shake   { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-12px)} 40%,80%{transform:translateX(12px)} }
@keyframes enc-cartaz-tada    { 0%,100%{transform:scale(1) rotate(0)} 10%,30%{transform:scale(.93) rotate(-2deg)} 20%,40%,60%{transform:scale(1.08) rotate(2deg)} 50%,70%{transform:scale(1.08) rotate(-2deg)} }
@keyframes enc-cartaz-swing   { 0%,100%{transform:rotate(0)} 20%{transform:rotate(5deg)} 40%{transform:rotate(-4deg)} 60%{transform:rotate(3deg)} 80%{transform:rotate(-2deg)} }
@keyframes enc-cartaz-pulse-l { 0%,100%{transform:scale(1)} 50%{transform:scale(1.035)} }

.enc-cartaz.enc-cartaz-anim-drop    { animation: enc-cartaz-drop    .9s  .25s cubic-bezier(.22,1,.36,1) both !important; }
.enc-cartaz.enc-cartaz-anim-zoom-in { animation: enc-cartaz-zoom-in .85s .25s cubic-bezier(.22,1,.36,1) both !important; }
.enc-cartaz.enc-cartaz-anim-rotate  { animation: enc-cartaz-rotate  .85s .25s cubic-bezier(.22,1,.36,1) both !important; }
.enc-cartaz.enc-cartaz-anim-shake   { animation: enc-cartaz-shake   .55s  .8s ease infinite !important; }
.enc-cartaz.enc-cartaz-anim-tada    { animation: enc-cartaz-tada    1.1s 1.2s ease infinite !important; }
.enc-cartaz.enc-cartaz-anim-swing   { animation: enc-cartaz-swing   2.2s  1s  ease-in-out infinite !important; transform-origin: top right; }
.enc-cartaz.enc-cartaz-anim-pulse   { animation: enc-cartaz-pulse-l 2.2s  1s  ease-in-out infinite !important; }

/* ── DUAL-COLOR BACKGROUND ── */
.bg-gradient-h { background: linear-gradient(to bottom, var(--bg1,#7f1d1d) var(--p,50%), var(--bg2,#450a0a) var(--p,50%)); }
.bg-gradient-v { background: linear-gradient(to right,  var(--bg1,#7f1d1d) var(--p,50%), var(--bg2,#450a0a) var(--p,50%)); }
.bg-diagonal   { background: linear-gradient(135deg,    var(--bg1,#7f1d1d) var(--p,50%), var(--bg2,#450a0a) var(--p,50%)); }
.bg-radial     { background: radial-gradient(ellipse at 30% 50%, var(--bg1,#7f1d1d) 0%, var(--bg2,#450a0a) 70%); }

/* ── PRESETS visually hinted ── */
.preset-card {
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: .15s;
    overflow: hidden;
    user-select: none;
}
.preset-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow); }
.preset-card.active { border-color: var(--primary); }
.preset-thumb {
    height: 54px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.preset-label {
    font-size: 11px;
    font-weight: 700;
    padding: 5px 8px;
    text-align: center;
    background: var(--surface);
    color: var(--text-2);
}

/* ── TIMELINE (gerar_video.php) ── */
.timeline-wrap {
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.timeline-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
.timeline-ruler {
    height: 22px;
    background: var(--bg-2);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    font-size: 10px;
    color: var(--text-3);
}
.timeline-track {
    display: flex;
    flex-direction: column;
}
.timeline-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
    min-height: 52px;
}
.timeline-track-label {
    width: 90px;
    flex-shrink: 0;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    border-right: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--surface);
}
.timeline-cells {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 6px 8px;
    gap: 3px;
    overflow-x: auto;
    min-height: 52px;
    position: relative;
}
.tl-clip {
    height: 40px;
    min-width: 60px;
    border-radius: 6px;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 700;
    position: relative;
    flex-shrink: 0;
    user-select: none;
    border: 2px solid transparent;
    transition: border-color .1s, box-shadow .1s;
    overflow: hidden;
}
.tl-clip:hover { box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.tl-clip.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--primary); }
.tl-clip.sortable-ghost { opacity: .4; border: 2px dashed #fff; }
.tl-clip-name { font-size: 10px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tl-clip-dur  { font-size: 10px; opacity: .75; }
.tl-clip-handle {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 6px;
    background: rgba(255,255,255,.3);
    cursor: ew-resize;
    border-radius: 0 4px 4px 0;
}
.tl-audio-bar {
    height: 40px;
    border-radius: 6px;
    background: linear-gradient(to right, #059669, #10b981);
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    cursor: grab;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tl-playhead {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    background: #ef4444;
    pointer-events: none;
    z-index: 10;
}
.tl-playhead::before {
    content: '';
    position: absolute;
    top: 0; left: -5px;
    border: 6px solid transparent;
    border-top-color: #ef4444;
}