/* BEINC — Icon Animations (Component CSS) / Depends on: global.css */


/* ============================================================
   1. ASTERISK  (asterisk-preview)
   Three-bar asterisk with staggered breathing animation.
   Each bar scales along its own axis at different speeds.
   ============================================================ */

/* Shared bar properties */
.bar {
    transform-box: fill-box;
    transform-origin: center;
    animation-play-state: paused;
}

.bar.animate {
    animation-play-state: running;
}

.bar-1 { animation: breathe1 2s var(--ease-gentle) infinite; }
.bar-2 { animation: breathe2 2.2s var(--ease-gentle) 0.3s infinite; }
.bar-3 { animation: breathe3 2.4s var(--ease-gentle) 0.7s infinite; }

@keyframes breathe1 {
    0%   { transform: rotate(35.6deg) scaleX(1) rotate(-35.6deg); }
    50%  { transform: rotate(35.6deg) scaleX(0.7) rotate(-35.6deg); }
    100% { transform: rotate(35.6deg) scaleX(1) rotate(-35.6deg); }
}

@keyframes breathe2 {
    0%   { transform: rotate(88deg) scaleX(1) rotate(-88deg); }
    50%  { transform: rotate(88deg) scaleX(0.72) rotate(-88deg); }
    100% { transform: rotate(88deg) scaleX(1) rotate(-88deg); }
}

@keyframes breathe3 {
    0%   { transform: rotate(131.7deg) scaleX(1) rotate(-131.7deg); }
    50%  { transform: rotate(131.7deg) scaleX(0.68) rotate(-131.7deg); }
    100% { transform: rotate(131.7deg) scaleX(1) rotate(-131.7deg); }
}


/* ============================================================
   2. ARROW  (arrow-preview)
   Morphing arrow with path breathing animation.
   Arrow contracts/expands via animated d property.
   ============================================================ */

.arrow-path {
    fill: var(--color-black2);
    animation: arrowBreathe 2.8s var(--ease-gentle) infinite;
}

@keyframes arrowBreathe {
    0%, 100% {
        d: path("M 4.88,1.14 L 12.52,8.28 C 12.70,8.45 12.97,8.44 13.14,8.26 L 13.76,7.60 C 13.93,7.42 14.20,7.41 14.38,7.58 L 17.41,10.41 C 17.59,10.58 17.60,10.85 17.43,11.03 L 7.21,21.98 C 7.04,22.16 6.77,22.17 6.59,22.00 L 3.56,19.17 C 3.38,19.00 3.37,18.73 3.54,18.55 L 9.12,12.56 C 9.29,12.38 9.28,12.11 9.10,11.94 L 1.45,4.81 C 1.27,4.64 1.26,4.37 1.43,4.19 L 4.26,1.16 C 4.43,0.98 4.70,0.97 4.88,1.14 Z");
    }
    50% {
        d: path("M 3.78,0.12 L 12.52,8.28 C 12.70,8.45 12.97,8.44 13.14,8.26 L 13.76,7.60 C 13.93,7.42 14.20,7.41 14.38,7.58 L 17.41,10.41 C 17.59,10.58 17.60,10.85 17.43,11.03 L 3.79,25.64 C 3.62,25.82 3.35,25.83 3.17,25.66 L 0.14,22.83 C -0.04,22.66 -0.05,22.39 0.12,22.21 L 9.12,12.56 C 9.29,12.38 9.28,12.11 9.10,11.94 L 0.35,3.79 C 0.17,3.62 0.16,3.35 0.33,3.17 L 3.16,0.14 C 3.33,-0.04 3.60,-0.05 3.78,0.12 Z");
    }
}


/* ============================================================
   3. BRAND ELEMENT  (brand-element-preview)
   Six-bar grid with staggered horizontal/vertical breathing.
   Bars scale independently along their axes.
   ============================================================ */

/* Shared brand element bar */
.brand-bar {
    fill: var(--color-black2);
    transform-box: fill-box;
    transform-origin: center;
    animation-play-state: paused;
}

.brand-bar.animate {
    animation-play-state: running;
}

/* Horizontal bars */
.brand-h1 { animation: brandH1 2s var(--ease-gentle) infinite; }
.brand-h2 { animation: brandH2 2.4s var(--ease-gentle) 0.6s infinite; }
.brand-h3 { animation: brandH3 1.8s var(--ease-gentle) 1.1s infinite; }

/* Vertical bars */
.brand-v1 { animation: brandV1 2.2s var(--ease-gentle) 0.6s infinite; }
.brand-v2 { animation: brandV2 2s var(--ease-gentle) 0.2s infinite; }
.brand-v3 { animation: brandV3 2.6s var(--ease-gentle) 1.1s infinite; }

@keyframes brandH1 { 0% { transform: scaleX(1); }   50% { transform: scaleX(0.7); }  100% { transform: scaleX(1); } }
@keyframes brandH2 { 0% { transform: scaleX(1); }   50% { transform: scaleX(0.72); } 100% { transform: scaleX(1); } }
@keyframes brandH3 { 0% { transform: scaleX(1); }   50% { transform: scaleX(0.65); } 100% { transform: scaleX(1); } }
@keyframes brandV1 { 0% { transform: scaleY(1); }   50% { transform: scaleY(0.68); } 100% { transform: scaleY(1); } }
@keyframes brandV2 { 0% { transform: scaleY(1); }   50% { transform: scaleY(0.7); }  100% { transform: scaleY(1); } }
@keyframes brandV3 { 0% { transform: scaleY(1); }   50% { transform: scaleY(0.75); } 100% { transform: scaleY(1); } }