/*
 * Motion and polish for the Rent vs. Buy comparison, About, Trust, Security & Compliance and Camera
 * Cyber Lockdown (public/site/lendl-pages.js marks the blocks; .is-in arrives when one scrolls into view).
 * Brand red #d51c2a, ink #121212; everything eases out, nothing bounces more than a touch.
 */
:root { --ap-ease: cubic-bezier(.2, .8, .2, 1); --ap-red: #d51c2a; --ap-red-soft: rgba(213, 28, 42, .08); }

@keyframes ap-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ap-left { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes ap-right { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes ap-pop { 0% { opacity: 0; transform: scale(.6); } 65% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ap-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ap-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(213, 28, 42, .0), 0 24px 50px -30px rgba(213, 28, 42, .45); } 50% { box-shadow: 0 0 0 6px rgba(213, 28, 42, .07), 0 30px 60px -28px rgba(213, 28, 42, .55); } }
@keyframes ap-drop { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes ap-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes ap-drift { 0%, 100% { transform: translate(-10%, -6%) scale(1); } 50% { transform: translate(8%, 6%) scale(1.15); } }

/* ---------- shared: hidden until the block is seen ---------- */
[data-ap="cards"] > *, [data-ap="steps"] > *, [data-ap="pop"] > *, [data-ap="panel"],
[data-ap="rows"] .cmp-row, [data-ap="rows"] tbody tr, [data-ap="list"] li, [data-ap="hero"] > * { opacity: 0; }
[data-ap="cards"] > *, [data-ap="steps"] > *, [data-ap="rows"] .cmp-row, [data-ap="rows"] tbody tr, [data-ap="list"] li, [data-ap="hero"] > * { transform: translateY(22px); }

[data-ap="cards"].is-in > * { animation: ap-rise .7s var(--ap-ease) calc(var(--k, 0) * 90ms) both; }
[data-ap="hero"].is-in > *, [data-ap="hero"] > * { animation: ap-rise .8s var(--ap-ease) calc(var(--k, 0) * 110ms + 80ms) both; }
[data-ap="rows"].is-in .cmp-row, [data-ap="rows"].is-in tbody tr { animation: ap-left .6s var(--ap-ease) calc(var(--k, 0) * 80ms) both; }
[data-ap="list"].is-in li { animation: ap-left .6s var(--ap-ease) calc(var(--k, 0) * 90ms) both; }
[data-ap="pop"].is-in > * { animation: ap-pop .55s var(--ap-ease) calc(var(--k, 0) * 110ms) both; }
[data-ap="panel"].is-in { animation: ap-rise .8s var(--ap-ease) .1s both; }

/* ---------- Rent vs. Buy ---------- */
[data-ap="versus"] .rvb__col { opacity: 0; }
[data-ap="versus"] .rvb__row { opacity: 0; transform: translateY(10px); }
[data-ap="versus"] .rvb__row svg { transform: scale(0); }
[data-ap="versus"].is-in .rvb__col:not(.is-lendl) { animation: ap-left .75s var(--ap-ease) both; }
[data-ap="versus"].is-in .rvb__col.is-lendl { animation: ap-right .75s var(--ap-ease) .15s both, ap-glow 3.2s ease-in-out 1.8s infinite; }
[data-ap="versus"].is-in .rvb__row { animation: ap-rise .5s var(--ap-ease) calc(.35s + var(--r, 0) * 110ms) both; }
[data-ap="versus"].is-in .rvb__col.is-lendl .rvb__row { animation-delay: calc(.5s + var(--r, 0) * 110ms); }
[data-ap="versus"].is-in .rvb__row svg { animation: ap-pop .45s var(--ap-ease) calc(.5s + var(--r, 0) * 110ms) both; }
[data-ap="versus"].is-in .rvb__col.is-lendl .rvb__row svg { animation-delay: calc(.65s + var(--r, 0) * 110ms); }
[data-ap="versus"].is-in .rvb__col.is-lendl::before { animation: ap-drop .5s var(--ap-ease) 1s both; }
.rvb__col { transition: transform .35s var(--ap-ease), box-shadow .35s var(--ap-ease); }
.rvb__col:not(.is-lendl) .rvb__row { color: #5b5f66; }
.rvb__col.is-lendl .rvb__row svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--ap-red-soft); }
.rvb__row { position: relative; transition: background-color .25s ease, padding-left .25s var(--ap-ease); }
@media (hover: hover) {
  .rvb__col:hover { transform: translateY(-4px); }
  .rvb__col:not(.is-lendl):hover { box-shadow: 0 20px 44px -30px rgba(15, 18, 24, .35); }
  .rvb__col.is-lendl .rvb__row:hover { background: var(--ap-red-soft); padding-left: 10px; }
  .rvb__col:not(.is-lendl) .rvb__row:hover { background: #f6f6f7; padding-left: 10px; }
}

/* ---------- step rows: numbers pop in turn, the connecting lines draw ---------- */
[data-ap="steps"].is-in > * { animation: ap-rise .65s var(--ap-ease) calc(var(--k, 0) * 160ms) both; }
[data-ap="steps"] .hiw-step-num, [data-ap="steps"] .tsc__hop-num, [data-ap="steps"] .ccl__step-num { transform: scale(.6); opacity: 0; }
[data-ap="steps"].is-in .hiw-step-num, [data-ap="steps"].is-in .tsc__hop-num, [data-ap="steps"].is-in .ccl__step-num { animation: ap-pop .55s var(--ap-ease) calc(var(--k, 0) * 160ms + 120ms) both; }
[data-ap="steps"] .tsc__hop-line, [data-ap="steps"] .ccl__step-line { transform: scaleX(0); transform-origin: left center; }
[data-ap="steps"].is-in .tsc__hop-line, [data-ap="steps"].is-in .ccl__step-line { animation: ap-draw .6s var(--ap-ease) calc(var(--k, 0) * 160ms + 320ms) both; }
.hiw-step, .tsc__hop, .ccl__step { transition: transform .35s var(--ap-ease); }
@media (hover: hover) { .hiw-step:hover, .tsc__hop:hover, .ccl__step:hover { transform: translateY(-4px); } }

/* ---------- cards: lift, and their icons float on hover ---------- */
.story-card, .wwsf-card, .trust-card, .stat-card, .mtt-card, .tsc__card, .tsc__cert, .tsc__stat, .ccl__card, .tsc__pillars > *, .ccl__grid3 > * {
  transition: transform .35s var(--ap-ease), box-shadow .35s var(--ap-ease), border-color .35s ease; }
@media (hover: hover) {
  .story-card:hover, .wwsf-card:hover, .trust-card:hover, .stat-card:hover, .mtt-card:hover, .tsc__card:hover, .tsc__cert:hover, .tsc__stat:hover, .ccl__card:hover, .tsc__pillars > *:hover, .ccl__grid3 > *:hover {
    transform: translateY(-6px); box-shadow: 0 24px 48px -30px rgba(15, 18, 24, .4); }
  .story-card:hover .story-card-icon, .wwsf-card:hover .wwsf-icon, .trust-card:hover .trust-card-icon,
  .tsc__card:hover .ic, .ccl__card:hover .ic, .tsc__pillars > *:hover .ic, .ccl__grid3 > *:hover .ic { animation: ap-float 1.6s ease-in-out infinite; }
}
.mtt-photo-wrap { overflow: hidden; }
.mtt-photo-wrap img { transition: transform .6s var(--ap-ease); }
@media (hover: hover) { .mtt-card:hover .mtt-photo-wrap img { transform: scale(1.06); } }

/* ---------- comparison tables: the Lend'L column stands out ---------- */
.cmp-cell--lendl, .ccl__compare .lendl-col, .ccl__compare th.is-lendl { background: var(--ap-red-soft); }
.cmp-head .cmp-cell--lendl, .ccl__compare th.is-lendl { color: var(--ap-red); font-weight: 700; }
.cmp-row, .ccl__compare tbody tr, .tsc__table tbody tr { transition: background-color .25s ease; }
@media (hover: hover) { .cmp-row:not(.cmp-head):hover, .ccl__compare tbody tr:hover, .tsc__table tbody tr:hover { background-color: #fafafb; } }

/* ---------- heroes: a slow drifting glow behind the headline ---------- */
.about-hero, .tsc__hero, .ccl__hero { position: relative; overflow: hidden; isolation: isolate; }
.about-hero::before, .tsc__hero::before, .ccl__hero::before { content: ''; position: absolute; z-index: -1; top: -30%; left: 20%; width: 60%; height: 140%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(213, 28, 42, .09), rgba(213, 28, 42, 0)); animation: ap-drift 14s ease-in-out infinite; }
.about-hero__title { color: #121212 !important; }

/* ---------- FAQ ---------- */
.tsc__faq details, .ccl__faq details { transition: border-color .25s ease, box-shadow .25s ease; }
.tsc__faq details > :not(summary), .ccl__faq details > :not(summary) { overflow: hidden; }
.tsc__faq summary, .ccl__faq summary { cursor: pointer; list-style: none; position: relative; padding-right: 34px; }
.tsc__faq summary::-webkit-details-marker, .ccl__faq summary::-webkit-details-marker { display: none; }
.tsc__faq summary::after, .ccl__faq summary::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 22px; line-height: 1; color: var(--ap-red); transition: transform .3s var(--ap-ease); }
.tsc__faq details[open] > summary::after, .ccl__faq details[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.tsc__faq details[open], .ccl__faq details[open] { box-shadow: 0 16px 36px -28px rgba(15, 18, 24, .35); }

@media (prefers-reduced-motion: reduce) {
  [data-ap] *, [data-ap] { animation: none !important; opacity: 1 !important; transform: none !important; }
  .about-hero::before, .tsc__hero::before, .ccl__hero::before { animation: none; }
}
@media print { [data-ap] *, [data-ap] { opacity: 1 !important; transform: none !important; animation: none !important; } }
