/* ═══════════════════════════════════════════════════════
   FISH ANIMATIONS — subscribe button icon + animations
   Depends on: colors.css (tokens), style.css (base btn-remind-icon)
   ═══════════════════════════════════════════════════════ */

/* Fish icon states */
.remind-plus { display: none; }
.remind-fish {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}
.btn-remind-icon .fish-icon {
    color: var(--brand-hover);
    fill: currentColor;
    transition: all 0.3s;
}
.btn-remind-icon:hover {
    border-color: var(--teal);
    background: rgba(13, 148, 136, 0.06);
    transform: scale(1.1);
}
.btn-remind-icon:hover .fish-icon {
    color: var(--teal);
}

/* ── Fish Animation V1 ── gated by body.fish-v1 ── */

/* Idle — fish sits still by default, JS triggers animations randomly */
.fish-v1 .btn-remind-icon:not(.subscribed) .fish-open {
    display: inline;
    position: absolute;
    opacity: 0;
}

/* Animation classes — added/removed by JS */
.fish-v1 .fish-anim-swim .remind-fish {
    animation: fishSwimAround 4s ease-in-out forwards !important;
}
.fish-v1 .fish-anim-chomp .fish-closed {
    animation: fishSideAnim 3s ease-in-out forwards !important;
}
.fish-v1 .fish-anim-chomp .fish-open {
    animation: fishFrontAnim 3s ease-in-out forwards !important;
}

@keyframes fishSwimAround {
    0%   { transform: translate(0, 0) scaleX(1) rotate(0deg) scale(0.85); }
    10%  { transform: translate(5px, -4px) scaleX(1) rotate(-10deg) scale(0.85); }
    20%  { transform: translate(8px, -2px) scaleX(1) rotate(-5deg) scale(0.85); }
    30%  { transform: translate(5px, 4px) scaleX(1) rotate(5deg) scale(0.85); }
    38%  { transform: translate(0px, 3px) scaleX(1) rotate(0deg) scale(0.85); }
    42%  { transform: translate(0px, 3px) scaleX(-1) rotate(0deg) scale(0.85); }
    50%  { transform: translate(-5px, -3px) scaleX(-1) rotate(8deg) scale(0.85); }
    60%  { transform: translate(-8px, -1px) scaleX(-1) rotate(3deg) scale(0.85); }
    70%  { transform: translate(-5px, 4px) scaleX(-1) rotate(-5deg) scale(0.85); }
    78%  { transform: translate(0px, 2px) scaleX(-1) rotate(0deg) scale(0.85); }
    82%  { transform: translate(0px, 2px) scaleX(1) rotate(0deg) scale(0.85); }
    90%  { transform: translate(2px, 0px) scaleX(1) rotate(-3deg) scale(0.85); }
    100% { transform: translate(0, 0) scaleX(1) rotate(0deg) scale(0.85); }
}
@keyframes fishSideAnim {
    0%, 15%, 85%, 100% { opacity: 1; transform: scale(1); }
    20%, 80% { opacity: 0; transform: scale(0.8); }
}
@keyframes fishFrontAnim {
    0%, 15%, 85%, 100% { opacity: 0; transform: scale(0.8); }
    20% { opacity: 1; transform: scale(1.25) rotate(-6deg); }
    35% { opacity: 1; transform: scale(1.2) rotate(6deg); }
    50% { opacity: 1; transform: scale(1.25) rotate(-4deg); }
    65% { opacity: 1; transform: scale(1.2) rotate(4deg); }
    80% { opacity: 1; transform: scale(1.15) rotate(0); }
}

/* Closed mouth visible by default, open mouth hidden */
.fish-open { display: none; }
.fish-closed { display: inline; }

/* Subscribed state — teal circle, white open-mouth fish */
.btn-remind-icon.subscribed {
    background: var(--teal);
    border-color: var(--teal);
    cursor: pointer;
}
.fish-v1 .btn-remind-icon.subscribed .remind-fish {
    animation: fishChomp 0.8s ease, fishIdle 4s 2s ease-in-out infinite;
}
.btn-remind-icon.subscribed .fish-icon {
    color: #fff;
    fill: #fff;
}
/* Subscribed: show open mouth, hide closed */
.btn-remind-icon.subscribed .fish-closed { display: none; }
.btn-remind-icon.subscribed .fish-open { display: inline; }
@keyframes fishChomp {
    0%   { transform: scale(0.3) scaleX(-1); opacity: 0; }
    20%  { transform: scale(1.3) scaleX(-1); opacity: 1; }
    35%  { transform: scale(1.1) scaleX(1) rotate(10deg); }
    50%  { transform: scale(1.2) scaleX(1) rotate(-5deg); }
    65%  { transform: scale(1.05) scaleX(1) rotate(3deg); }
    80%  { transform: scale(1.1) scaleX(1); }
    100% { transform: scale(1) scaleX(1) rotate(0); }
}

/* Idle wiggle — plays occasionally on subscribed fish */
.fish-v1 .btn-remind-icon.subscribed .remind-fish {
    animation: fishChomp 0.8s ease, fishIdle 4s 2s ease-in-out infinite;
}
@keyframes fishIdle {
    0%, 85%, 100% { transform: scale(1) rotate(0); }
    90% { transform: scale(1.1) rotate(-8deg); }
    95% { transform: scale(1.05) rotate(5deg); }
}

/* Email popover for image card fish */
.fish-email-pop {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.35rem;
    display: flex;
    gap: 0.35rem;
    background: var(--white, #fff);
    border: 1px solid var(--gray-light);
    border-radius: 10px;
    padding: 0.35rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    z-index: 10;
    min-width: 200px;
}
.fish-email-pop input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--text-sm);
    padding: 0.35rem 0.5rem;
    background: transparent;
    min-width: 0;
}
.btn-remind-sm {
    width: 32px !important;
    height: 32px !important;
}

/* Subscriber count badge */
.fish-count {
    position: absolute;
    top: -4px;
    right: -6px;
    background: var(--gray, #999);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    border: 2px solid var(--off-white, #fff);
}
.btn-remind-icon.subscribed .fish-count {
    background: var(--teal-hover);
}

/* Fish bubbles — sync with open mouth animation */
.btn-remind-icon::before,
.btn-remind-icon::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(13, 148, 136, 0.4);
    opacity: 0;
    pointer-events: none;
}
.btn-remind-icon::before {
    width: 5px; height: 5px;
    top: -4px; right: 4px;
}
.btn-remind-icon::after {
    width: 4px; height: 4px;
    top: -2px; right: 12px;
}
/* Bubbles on hover */
.fish-v1 .btn-remind-icon:hover::before {
    animation: bubble 1s ease-out infinite;
}
.fish-v1 .btn-remind-icon:hover::after {
    animation: bubble 1s 0.3s ease-out infinite;
}
/* Bubbles when chomp animation is active */
.fish-v1 .fish-anim-chomp.btn-remind-icon::before {
    animation: fishBubble 3s ease-out forwards !important;
}
.fish-v1 .fish-anim-chomp.btn-remind-icon::after {
    animation: fishBubble 3s 0.3s ease-out forwards !important;
}
@keyframes fishBubble {
    0%, 15%, 85%, 100% { opacity: 0; transform: translateY(0); }
    25% { opacity: 0.8; transform: translateY(-4px); }
    40% { opacity: 0.6; transform: translateY(-12px); }
    55% { opacity: 0.4; transform: translateY(-20px); }
    70% { opacity: 0.2; transform: translateY(-26px); }
    80% { opacity: 0; transform: translateY(-30px); }
}
.fish-v1 .btn-remind-icon.subscribed::before,
.fish-v1 .btn-remind-icon.subscribed::after {
    animation: none;
    opacity: 0;
}

/* Victory lap — fish celebrates after subscribe */
.fish-v1 .btn-remind-icon.fish-victory .remind-fish {
    animation: fishVictory 2s ease-in-out forwards !important;
}
.fish-v1 .btn-remind-icon.fish-victory::before {
    animation: fishBubble 2s ease-out forwards !important;
}
.fish-v1 .btn-remind-icon.fish-victory::after {
    animation: fishBubble 2s 0.2s ease-out forwards !important;
}
@keyframes fishVictory {
    0%   { transform: scale(0.5) rotate(0deg); }
    15%  { transform: scale(1.4) rotate(20deg); }
    30%  { transform: scale(1.2) translate(4px, -4px) rotate(-15deg); }
    45%  { transform: scale(1.3) translate(-4px, -3px) scaleX(-1) rotate(10deg); }
    60%  { transform: scale(1.2) translate(3px, 3px) scaleX(-1) rotate(-10deg); }
    75%  { transform: scale(1.3) translate(-2px, 2px) scaleX(1) rotate(15deg); }
    90%  { transform: scale(1.1) translate(0, 0) scaleX(1) rotate(-5deg); }
    100% { transform: scale(1) translate(0, 0) scaleX(1) rotate(0deg); }
}
@keyframes bubble {
    0%   { opacity: 0; transform: translateY(0) scale(0.5); }
    20%  { opacity: 0.7; }
    100% { opacity: 0; transform: translateY(-18px) scale(1); }
}

/* ── Fish Animation V2 ── gated by body.fish-v2 ── */
/* Checkmark hidden by default */
.remind-brain {
    display: none;
    align-items: center;
    justify-content: center;
}
.remind-brain .brain-icon {
    color: #fff;
    stroke: #fff;
}

/* V2: Fish jump-out + checkmark on subscribe */
.fish-v2 .btn-remind-icon {
    overflow: visible;
}

/* V2 subscribe animation trigger */
.fish-v2 .btn-remind-icon.fish-v2-go .remind-fish {
    animation: v2FishJump 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.fish-v2 .btn-remind-icon.fish-v2-go {
    animation: v2CircleConfirm 0.6s 0.4s ease-out forwards;
}
.fish-v2 .btn-remind-icon.fish-v2-go .remind-brain {
    display: flex;
    animation: v2CheckAppear 0.5s 0.6s ease-out forwards;
    opacity: 0;
    transform: scale(0);
}

/* Fish leaps out of the bowl */
@keyframes v2FishJump {
    0%   { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
    30%  { transform: translateY(-28px) rotate(-20deg) scale(1.3); opacity: 1; }
    50%  { transform: translateY(-40px) rotate(-10deg) scale(1.2); opacity: 1; }
    70%  { transform: translateY(-35px) rotate(15deg) scale(1); opacity: 0.6; }
    100% { transform: translateY(-50px) rotate(30deg) scale(0.5); opacity: 0; }
}

/* Circle goes green */
@keyframes v2CircleConfirm {
    0%   { transform: scale(1); background: var(--white, #f5f5f5); border-color: var(--gray-light, #e0e0e0); }
    40%  { transform: scale(0.85); }
    70%  { transform: scale(1.1); background: var(--teal); border-color: var(--teal); }
    100% { transform: scale(1); background: var(--teal); border-color: var(--teal); }
}

/* Checkmark draws in */
@keyframes v2CheckAppear {
    0%   { opacity: 0; transform: scale(0); }
    50%  { opacity: 1; transform: scale(1.2); }
    75%  { opacity: 1; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

/* V2 subscribed resting state — checkmark visible, circle stays round */
.fish-v2 .btn-remind-icon.subscribed .remind-fish {
    display: none;
}
.fish-v2 .btn-remind-icon.subscribed .remind-brain {
    display: flex;
    opacity: 1;
    transform: scale(1);
}