/* "life" layer: motion and micro-interactions only. No colors or logos changed; uses existing palette variables. */

/* 4. hero: lines fade in one after another */
@keyframes life-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero-content h1 { animation: life-up .6s var(--ease) .05s backwards; }
.hero-content .subtitle { animation: life-up .6s var(--ease) .25s backwards; }
.hero-content .hero-cta { animation: life-up .6s var(--ease) .45s backwards; }
.hero-photo .timer-wrap { animation: life-up .6s var(--ease) .6s backwards; }
/* soft countdown: digit eases in when it changes (opacity only, keeps the existing scale) */
@keyframes life-tick { from { opacity: .45; } to { opacity: 1; } }
.timer-num.life-tick { animation: life-tick .45s ease-out; }

/* 1. scroll reveal (classes are added only by life.js, only below the fold, never with reduced motion) */
.life-rv { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.life-rv.life-in { opacity: 1; transform: none; }

/* 2. press / hover feedback */
.btn-gold, .btn-ghost, .btn-dark { transition: background .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease), box-shadow .16s var(--ease); }
@media (hover: hover) {
  .btn-gold:not([disabled]):hover, .btn-dark:not([disabled]):hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(58, 46, 24, .18); }
  .btn-ghost:not([disabled]):hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(58, 46, 24, .12); }
}
.btn-gold:not([disabled]):active, .btn-ghost:not([disabled]):active, .btn-dark:not([disabled]):active { transform: scale(.97); box-shadow: none; }
.candidate-card { animation-fill-mode: backwards; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
@media (hover: hover) {
  .candidate-card.card-clickable:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(58, 46, 24, .16); }
}
.candidate-card.card-clickable:active { transform: scale(.985); }
/* heart pop on "proposal sent" */
@keyframes life-pop { 0% { transform: scale(.3); opacity: 0; } 55% { transform: scale(1.35); opacity: 1; } 100% { transform: scale(1); } }
.heart-pop { display: inline-block; animation: life-pop .6s var(--ease) .1s backwards; }

/* 7. gentle photo zoom on candidate cards */
.candidate-card .card-bg .photo { transition: transform .7s var(--ease); will-change: transform; }
@media (hover: hover) {
  .candidate-card:hover .card-bg .photo { transform: scale(1.05); }
}
.candidate-card:active .card-bg .photo { transform: scale(1.03); }

/* 3. alternating tint (existing --paper-2) + small gold heart on the divider */
.section.life-tint {
  background: var(--paper-2);
  box-shadow: 0 0 0 100vmax var(--paper-2);
  clip-path: inset(0 -100vmax);
  padding-bottom: 32px;
}
.gold-divider {
  width: 96px; height: 16px; margin: 12px auto; background:
    linear-gradient(var(--bronze), var(--bronze)) left center / calc(50% - 14px) 2px no-repeat,
    linear-gradient(var(--bronze), var(--bronze)) right center / calc(50% - 14px) 2px no-repeat;
  text-align: center; line-height: 16px; font-size: 12px; color: var(--bronze);
}
.gold-divider::before { content: "\2665"; }

/* 5. real life signals */
.life-signal { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px auto 2px; font-size: 14px; font-weight: 600; color: var(--bronze-dark); }
.life-signal .life-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bronze); position: relative; flex: none; }
.life-signal .life-dot::after, .life-new::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--bronze); opacity: .5; animation: life-ring 2.2s ease-out infinite; }
@keyframes life-ring { from { transform: scale(1); opacity: .5; } to { transform: scale(3); opacity: 0; } }
.life-new { position: absolute; top: 18px; right: 16px; z-index: 4; width: 10px; height: 10px; border-radius: 50%; background: var(--bronze); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }

/* 6. "how it works" as compact step cards */
.steps { gap: 14px; }
.step {
  background: var(--card); border: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 14px;
  padding: 16px 14px 14px; box-shadow: var(--shadow); text-align: center; position: relative;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
@media (hover: hover) { .step:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(58, 46, 24, .12); } }
.step .step-ic { display: block; width: 28px; height: 28px; margin: 0 auto 6px; color: var(--bronze); }
.step .step-ic svg { width: 100%; height: 100%; display: block; }
.step .num {
  position: absolute; top: 10px; inset-inline-start: 12px; width: 24px; height: 24px; margin: 0; border-radius: 50%;
  background: var(--bronze); color: #fff; font-size: 13px; font-weight: 700; line-height: 24px; text-align: center;
}
.step h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.step p { line-height: 1.6; font-size: 14px; }

/* ---- all screens ---- */
@keyframes life-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#view.life-enter { animation: life-enter .4s var(--ease); }
/* panels and rows: soft lift, press feedback */
.panel, .stat-card, .plan-card, .flow-row, .proposal-row, .card-type-card { transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease), opacity .5s var(--ease); }
@media (hover: hover) {
  .plan-card:hover, .flow-row:hover, .card-type-card:hover, .stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(58, 46, 24, .12); }
  .panel:hover { box-shadow: 0 6px 20px rgba(58, 46, 24, .1); }
}
.flow-row:active, .card-type-card:active, .plan-card:active { transform: scale(.985); }
.life-rv.panel, .life-rv.stat-card, .life-rv.plan-card, .life-rv.flow-row, .life-rv.card-type-card { transition: transform .5s var(--ease), opacity .5s var(--ease); }
/* nav, small buttons, toggles */
.main-nav a, .mobile-menu a, .btn-sm, .pw-toggle, .modal-x { transition: color .16s var(--ease), background .16s var(--ease), transform .12s var(--ease); }
.main-nav a:active, .mobile-menu a:active, .btn-sm:active, .pw-toggle:active, .modal-x:active { transform: scale(.95); }
/* form fields: soft focus glow */
.field input, .field select, .field textarea { transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 3px rgba(147, 112, 42, .18); }
/* badge with a count breathes gently */
.nav-badge:not([data-hide="1"]), .unread-badge { animation: life-breathe 2.6s ease-in-out infinite; }
@keyframes life-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
/* avatars and photos in lists */
.flow-avatar { overflow: hidden; }
.flow-avatar img, .flow-avatar .photo { transition: transform .5s var(--ease); }
@media (hover: hover) { .flow-row:hover .flow-avatar img { transform: scale(1.08); } }

@media print { .life-rv { opacity: 1 !important; transform: none !important; } }
@media (prefers-reduced-motion: reduce) {
  .life-rv, .hero-content h1, .hero-content .subtitle, .hero-content .hero-cta, .hero-photo .timer-wrap, #view.life-enter, .nav-badge, .unread-badge { opacity: 1 !important; transform: none !important; animation: none !important; }
  .life-signal .life-dot::after, .life-new::after { animation: none; opacity: 0; }
}