/* ===================================================================
 * Page Designer — Column Effects (Hover + Motion)
 * -------------------------------------------------------------------
 * Attribute-driven, shared by the editor canvas AND published pages:
 *   - canvas  : loaded via canvasStyles[] in views/editor.php
 *   - frontend: loaded via <link> in views/frontend_page.php
 *
 * The Column panel (assets/js/pd_column_panel.js → onFxToggle) writes
 *   data-pd-col-hover="lift|glow|zoom|tilt|brighten"
 *   data-pd-col-anim ="float|pulse|glowloop|fadein|risein"
 * onto a .gjs-cell. These rules do the rest — nothing per-column is
 * generated, so a column only carries a tiny attribute.
 *
 * DESIGN RULE: hover + motion touch ONLY transform / filter / opacity.
 * Surface presets paint box-shadow/border/radius/bg INLINE, so keeping
 * clear of those lets Surface + Hover + Motion stack on one column
 * without specificity fights. The accent colour is the live theme token
 * var(--pd-btn-bg) with a sensible fallback.
 *
 * PD clears data-pd-* to "" (not removed), so a bare [data-pd-col-hover]
 * also matches an emptied attr — every base rule is guarded with
 * :not([...=""]). (see feedback_attr_presence_empty_value)
 * =================================================================== */

/* ── Hover ─────────────────────────────────────────────────────────
 * Smooth both ways via a transition on the base element. */
.gjs-cell[data-pd-col-hover]:not([data-pd-col-hover=""]) {
    transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.28s ease;
}

.gjs-cell[data-pd-col-hover="lift"]:hover     { transform: translateY(-6px); }
.gjs-cell[data-pd-col-hover="zoom"]:hover     { transform: scale(1.03); }
.gjs-cell[data-pd-col-hover="tilt"]:hover     { transform: perspective(700px) rotateX(5deg); }
.gjs-cell[data-pd-col-hover="glow"]:hover     { filter: drop-shadow(0 0 12px color-mix(in srgb, var(--pd-btn-bg, #6c5ce7) 70%, transparent)); }
.gjs-cell[data-pd-col-hover="brighten"]:hover { filter: brightness(1.06) saturate(1.05); }

/* ── Motion ────────────────────────────────────────────────────────
 * Continuous loops (float / pulse / glow loop) + one-shot entrances
 * (fade in / rise in). Selecting the preset IS the opt-in, so these are
 * intentionally NOT gated on prefers-reduced-motion. */
.gjs-cell[data-pd-col-anim="float"]    { animation: pd-colfx-float    3.2s ease-in-out infinite; }
.gjs-cell[data-pd-col-anim="pulse"]    { animation: pd-colfx-pulse    2.4s ease-in-out infinite; }
.gjs-cell[data-pd-col-anim="glowloop"] { animation: pd-colfx-glowloop 2.6s ease-in-out infinite; }
.gjs-cell[data-pd-col-anim="fadein"]   { animation: pd-colfx-fadein   0.8s ease-out both; }
.gjs-cell[data-pd-col-anim="risein"]   { animation: pd-colfx-risein   0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

@keyframes pd-colfx-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@keyframes pd-colfx-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
}
@keyframes pd-colfx-glowloop {
    0%, 100% { filter: drop-shadow(0 0 2px transparent); }
    50%      { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--pd-btn-bg, #6c5ce7) 65%, transparent)); }
}
@keyframes pd-colfx-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pd-colfx-risein {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}