/* cropcrop-icons.css — Inline SVG icon styling & animations
   Icons are rendered as inline SVGs by cropcrop-icons.js.
   All icons use stroke="currentColor" for automatic theme adaptation. */

/* ── Base ── */
svg.cc-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex-shrink: 0;
    overflow: visible;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ── Size modifiers ── */
svg.cc-icon--sm  { width: 0.75rem; height: 0.75rem; }
svg.cc-icon--lg  { width: 1.5rem;  height: 1.5rem;  }
svg.cc-icon--xl  { width: 2rem;    height: 2rem;    }
svg.cc-icon--2xl { width: 3rem;    height: 3rem;    }

/* Fallback for un-replaced <i> tags (brief flash before JS runs) */
i.cc-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
}
i.cc-icon--2xl { width: 3rem; height: 3rem; }


/* ── Preset device icons ── */
.preset-device-icon {
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.35em;
    vertical-align: -0.15em;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}
.preset-item:hover .preset-device-icon,
.preset-item.selected .preset-device-icon {
    opacity: 1;
}
.preset-item-name {
    display: flex;
    align-items: center;
}


/* ══════════════════════════════════════
   MICRO-ANIMATIONS
   ══════════════════════════════════════ */

/* Scissors snip on hover */
.logo:hover .cc-icon--scissors {
    animation: cc-snip 0.5s ease;
}
@keyframes cc-snip {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(8deg); }
    40%  { transform: rotate(-5deg); }
    60%  { transform: rotate(4deg); }
    80%  { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* Sun gentle rotate on hover */
.theme-toggle:hover .cc-icon--sun {
    animation: cc-sun-spin 0.6s ease;
}
@keyframes cc-sun-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(30deg); }
}

/* Moon tilt on hover */
.theme-toggle:hover .cc-icon--moon {
    animation: cc-moon-tilt 0.5s ease;
}
@keyframes cc-moon-tilt {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(-15deg); }
    100% { transform: rotate(0deg); }
}

/* Undo nudge left on hover */
.btn:hover > .cc-icon--undo {
    animation: cc-nudge-left 0.3s ease;
}
@keyframes cc-nudge-left {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-2px); }
}

/* Redo nudge right on hover */
.btn:hover > .cc-icon--redo {
    animation: cc-nudge-right 0.3s ease;
}
@keyframes cc-nudge-right {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(2px); }
}

/* Robot pulse during AI loading */
@keyframes cc-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
.ai-loading-active .cc-icon--robot {
    animation: cc-pulse 1.2s ease-in-out infinite;
}

/* Save bounce on export success */
@keyframes cc-bounce {
    0%, 100% { transform: translateY(0); }
    30%      { transform: translateY(-3px); }
    60%      { transform: translateY(-1px); }
}
.cc-icon--save.cc-bounce {
    animation: cc-bounce 0.4s ease;
}

/* Chevron rotation for panel collapse */
svg.cc-icon--chevron {
    transition: transform 0.25s ease;
}
.collapsed .cc-icon--chevron,
.collapsed .panel-header-icon.cc-icon--chevron {
    transform: rotate(-90deg);
}

/* Pencil & brush: cancel default rotation that was for CSS version */
svg.cc-icon--pencil,
svg.cc-icon--brush {
    transform: none;
}

/* Scale down on active press */
.btn:active > svg.cc-icon,
.tool-btn:active > svg.cc-icon,
button:active > svg.cc-icon {
    transform: scale(0.88);
}

/* Tool button hover */
.tool-btn:hover > svg.cc-icon {
    transform: scale(1.1);
}


/* ══════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    svg.cc-icon {
        transition: none !important;
        animation: none !important;
    }
    .logo:hover .cc-icon--scissors,
    .theme-toggle:hover .cc-icon--sun,
    .theme-toggle:hover .cc-icon--moon,
    .btn:hover > .cc-icon--undo,
    .btn:hover > .cc-icon--redo,
    .ai-loading-active .cc-icon--robot,
    .cc-icon--save.cc-bounce,
    .tool-btn:hover > svg.cc-icon {
        animation: none !important;
        transform: none !important;
    }
    svg.cc-icon--chevron {
        transition: none !important;
    }
}