/* ============================================
   Cowch Calf — the on-device companion
   A warm, interactive "welcome & raise your calf" layer. Caring for the
   calf mirrors caring for yourself (a gentle, non-clinical metaphor — NOT
   therapy, NOT a confidant to talk to instead of people). All state lives
   on-device. Art language matches the chibi cow mascot.
   ============================================ */

/* ---------- Home: calf card / invitation ---------- */
.calf-home-slot { margin-bottom: 1.25rem; }

.calf-card {
    position: relative;
    background: var(--bg-card, #fff);
    border: 2px solid var(--border-warm, #D8CEC5);
    border-radius: 24px;
    padding: 1.1rem 1.1rem 1.25rem;
    box-shadow: 0 10px 30px -18px rgba(31,31,31,0.35);
    overflow: hidden;
}
.calf-card::before {
    /* soft pasture glow behind the calf */
    content: "";
    position: absolute;
    inset: -40% 25% auto 25%;
    height: 160px;
    background: radial-gradient(closest-side, var(--sage-glow, rgba(143,169,143,0.22)), transparent 70%);
    pointer-events: none;
}

.calf-card-top { display: flex; align-items: center; gap: 0.9rem; position: relative; }

.calf-stage {
    flex: 0 0 auto;
    width: 92px; height: 92px;
    display: grid; place-items: center;
    background: linear-gradient(180deg, #EAF4EA 0%, #DCEFE0 100%);
    border-radius: 50%;
    border: 2px solid rgba(143,169,143,0.45);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.calf-stage:active { transform: scale(.94); }
.calf-stage svg { width: 78px; height: 78px; display: block; }
.calf-stage.calf-bounce { animation: calfBounce .6s ease; }
@keyframes calfBounce {
    0%,100% { transform: translateY(0) rotate(0); }
    30% { transform: translateY(-10px) rotate(-4deg); }
    60% { transform: translateY(2px) rotate(3deg); }
}

.calf-meta { flex: 1 1 auto; min-width: 0; }
.calf-name {
    margin: 0;
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: var(--font-weight-black, 900);
    color: var(--text-primary, #1F1F1F);
    line-height: 1.1;
}
.calf-mood { margin: .2rem 0 .35rem; color: var(--text-muted, #6E6863); font-size: var(--font-size-sm,.9rem); }
.calf-grazing { margin: 0 0 .7rem; color: var(--text-muted, #6E6863); font-size: .82rem; line-height: 1.4; opacity: .92; }
/* Merged card: the cow now lives in the pasture below, so the card is a slim
   companion strip (name · mood · growth · care) with no second illustration. */
.calf-card-merged { padding-bottom: 1.1rem; }

.calf-growth { display: flex; align-items: center; gap: .5rem; }
.calf-growth-bar {
    flex: 1 1 auto; height: 9px; border-radius: 99px;
    background: rgba(31,31,31,0.08); overflow: hidden;
}
.calf-growth-fill {
    height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, var(--sage,#8FA98F), var(--color-thanks,#34B7AE));
    width: 0%; transition: width .9s cubic-bezier(.22,1,.36,1);
}
.calf-growth-label { flex: 0 0 auto; font-size: var(--font-size-xs,.75rem); color: var(--text-muted,#6E6863); font-weight: 700; }

.calf-cta {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; margin-top: 1rem;
    padding: .8rem 1rem;
    border: none; border-radius: 16px;
    background: var(--sage, #8FA98F); color: #fff;
    font-family: inherit; font-weight: 800; font-size: var(--font-size-base,1rem);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform .12s ease, filter .12s ease;
}
.calf-cta:active { transform: scale(.98); filter: brightness(.96); }

/* care choices popover */
.calf-care { margin-top: .85rem; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.calf-care[hidden] { display: none; }
.calf-care-intro { grid-column: 1 / -1; margin: 0 0 .15rem; font-size: var(--font-size-sm,.9rem); color: var(--text-muted,#6E6863); text-align: center; }
.calf-care-btn {
    display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
    padding: .7rem .8rem; border-radius: 14px;
    border: 2px solid var(--border-warm,#D8CEC5); background: var(--bg-card,#fff);
    font-family: inherit; text-align: left; cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.calf-care-btn:active { transform: scale(.97); }
.calf-care-btn .ico { font-size: 1.4rem; }
.calf-care-btn strong { font-size: var(--font-size-sm,.9rem); color: var(--text-primary,#1F1F1F); }
.calf-care-btn span { font-size: var(--font-size-xs,.75rem); color: var(--text-muted,#6E6863); }

/* not-yet-born invitation variant */
.calf-card.calf-invite { cursor: pointer; }
.calf-invite-row { display: flex; align-items: center; gap: .9rem; position: relative; }
.calf-invite .calf-stage { background: linear-gradient(180deg,#EAF1FB 0%, #E7ECFA 100%); border-color: rgba(142,168,195,.45); }
.calf-invite-text strong { display:block; font-size: var(--font-size-lg,1.125rem); font-weight: 900; color: var(--text-primary,#1F1F1F); }
.calf-invite-text span { font-size: var(--font-size-sm,.9rem); color: var(--text-muted,#6E6863); }
.calf-invite-arrow { margin-left: auto; font-size: 1.4rem; color: var(--sage,#8FA98F); }

/* tiny floating reaction bubble */
.calf-pop {
    position: absolute; left: 50%; top: 4px; transform: translateX(-50%);
    background: var(--text-primary,#1F1F1F); color: #fff;
    font-size: var(--font-size-xs,.75rem); font-weight: 700;
    padding: .3rem .6rem; border-radius: 99px; white-space: nowrap;
    pointer-events: none; opacity: 0; z-index: 3;
}
.calf-pop.show { animation: calfPop 1.8s ease forwards; }
@keyframes calfPop {
    0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); }
    15% { opacity: 1; transform: translate(-50%, -4px) scale(1); }
    80% { opacity: 1; transform: translate(-50%, -10px); }
    100% { opacity: 0; transform: translate(-50%, -18px); }
}

/* ============================================
   The welcome / birth flow (full-screen overlay)
   ============================================ */
.calf-welcome {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; flex-direction: column;
    background:
        radial-gradient(120% 80% at 50% -10%, #CDE7F5 0%, #EAF4EA 45%, #FBF4EC 100%);
    color: var(--text-primary,#1F1F1F);
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    animation: calfFadeIn .5s ease;
}
.calf-welcome[hidden] { display: none; }
@keyframes calfFadeIn { from { opacity: 0; } to { opacity: 1; } }

.calf-scene {
    flex: 1 1 auto;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
    gap: 1rem;
    max-width: 520px; width: 100%; margin: 0 auto;
    overflow-y: auto;
}
.calf-scene h2 {
    margin: 0; font-size: var(--font-size-2xl,1.5rem); font-weight: 900;
    line-height: 1.15;
}
.calf-scene p { margin: 0; color: var(--text-muted,#6E6863); font-size: var(--font-size-base,1rem); line-height: 1.5; max-width: 30ch; }
.calf-scene .calf-fineprint { font-size: var(--font-size-xs,.75rem); opacity: .8; }

.calf-stage-art { width: 200px; height: 200px; display: grid; place-items: center; }
.calf-stage-art svg { width: 100%; height: 100%; }
.calf-stage-art.pop-in { animation: calfStagePop .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes calfStagePop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.calf-stage-art.gentle-float { animation: calfFloat 4s ease-in-out infinite; }
@keyframes calfFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* sky + stork scene */
.calf-sky { position: relative; width: 100%; height: 240px; overflow: hidden; }
.calf-cloud { position: absolute; font-size: 2.5rem; opacity: .9; animation: calfDrift 18s linear infinite; }
.calf-cloud.c1 { top: 14%; left: -20%; animation-duration: 22s; }
.calf-cloud.c2 { top: 46%; left: -30%; font-size: 1.8rem; animation-duration: 30s; opacity: .7; }
@keyframes calfDrift { from { transform: translateX(0); } to { transform: translateX(160vw); } }
.calf-stork {
    position: absolute; top: 30%; left: -45%;
    width: 150px; height: 150px;
    animation: calfStorkIn 3.2s cubic-bezier(.22,1,.36,1) forwards;
}
.calf-stork svg { width: 100%; height: 100%; }
@keyframes calfStorkIn {
    0%   { left: -45%; top: 8%; }
    60%  { left: 32%;  top: 30%; }
    75%  { left: 32%;  top: 26%; }
    100% { left: 32%;  top: 30%; }
}
.calf-stork.gentle-float { animation: calfStorkIn 3.2s cubic-bezier(.22,1,.36,1) forwards, calfFloat 3.5s ease-in-out 3.2s infinite; }

/* buttons */
.calf-actions { display: flex; flex-direction: column; gap: .6rem; width: 100%; max-width: 340px; margin-top: .4rem; }
.calf-btn {
    width: 100%; padding: .9rem 1.2rem; border-radius: 16px; border: none;
    font-family: inherit; font-weight: 800; font-size: var(--font-size-base,1rem);
    cursor: pointer; transition: transform .12s ease, filter .12s ease;
}
.calf-btn:active { transform: scale(.98); }
.calf-btn-primary { background: var(--coral,#C97B63); color: #fff; }
.calf-btn-primary:active { filter: brightness(.95); }
.calf-btn-ghost { background: transparent; color: var(--text-muted,#6E6863); font-weight: 700; }
.calf-btn[disabled] { opacity: .45; cursor: default; }

.calf-input {
    width: 100%; max-width: 340px;
    padding: .9rem 1.1rem; border-radius: 16px;
    border: 2px solid var(--border-warm,#D8CEC5); background: var(--bg-card,#fff);
    font-family: inherit; font-size: var(--font-size-lg,1.125rem); text-align: center;
    color: var(--text-primary,#1F1F1F);
}
.calf-input:focus { outline: none; border-color: var(--coral,#C97B63); }

/* choice chips (questions) */
.calf-choices { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; max-width: 360px; }
.calf-chip {
    padding: .65rem 1rem; border-radius: 99px;
    border: 2px solid var(--border-warm,#D8CEC5); background: var(--bg-card,#fff);
    font-family: inherit; font-weight: 700; font-size: var(--font-size-sm,.9rem);
    color: var(--text-primary,#1F1F1F); cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, background .12s ease, color .12s ease;
}
.calf-chip:active { transform: scale(.96); }
.calf-chip.selected { background: var(--coral,#C97B63); border-color: var(--coral,#C97B63); color: #fff; }

/* focus grid (multi-select) */
.calf-focus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; width: 100%; max-width: 380px; }
.calf-focus-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .7rem .8rem; border-radius: 14px;
    border: 2px solid var(--border-warm,#D8CEC5); background: var(--bg-card,#fff);
    font-family: inherit; font-weight: 700; font-size: var(--font-size-sm,.9rem);
    color: var(--text-primary,#1F1F1F); cursor: pointer; text-align: left;
    transition: transform .12s ease, border-color .12s ease;
}
.calf-focus-item .ico { font-size: 1.2rem; }
.calf-focus-item.selected { border-color: var(--c, var(--coral,#C97B63)); box-shadow: inset 0 0 0 2px var(--c, var(--coral)); }

/* progress dots */
.calf-progress { display: flex; gap: .35rem; justify-content: center; padding-top: .4rem; }
.calf-progress span { width: 7px; height: 7px; border-radius: 50%; background: rgba(31,31,31,0.15); transition: background .2s ease, transform .2s ease; }
.calf-progress span.on { background: var(--coral,#C97B63); transform: scale(1.25); }

/* a sparkle burst on reveal */
.calf-sparkle { position: absolute; pointer-events: none; font-size: 1.4rem; opacity: 0; }
.calf-sparkle.go { animation: calfSparkle 1.1s ease forwards; }
@keyframes calfSparkle {
    0% { opacity: 0; transform: translate(0,0) scale(.3); }
    40% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx,0), var(--dy,-40px)) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
    .calf-welcome, .calf-stage-art, .calf-stork, .calf-cloud,
    .calf-stage-art.gentle-float, .calf-sparkle.go, .calf-pop.show,
    .calf-stage.calf-bounce, .calf-growth-fill {
        animation: none !important;
        transition: none !important;
    }
    .calf-stork { left: 32%; top: 30%; }
}