/* ---------- About page ---------- */
/* Deliberately its own stylesheet rather than more additions to style.css --
this page is a one-off marketing/intro page with its own layout rhythm and
animations that the actual app screens never need. It still leans on
style.css for the CSS variables, fonts, and .btn classes so it stays
visually consistent with the rest of the app. */

.about-body {
background: var(--bg);
}

.about-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
max-width: 1080px;
margin: 0 auto;
}

.about-topbar .brand {
text-decoration: none;
color: var(--text);
}

.about-signin-btn { text-decoration: none; }

.about-main {
max-width: 1080px;
margin: 0 auto;
padding: 0 24px 40px;
}

/* ---------- Reveal-on-scroll ---------- */
/* Elements start slightly lower + transparent, and settle into place once
they cross into view. Purely a polish touch -- everything is still fully
readable with no JS at all, since the .reveal class alone doesn't hide
content (see the no-js/reduced-motion fallback below). */
.reveal {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Hero ---------- */
.about-hero {
text-align: center;
padding: 56px 0 24px;
}

.hero-badge {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: #eef2ff;
color: var(--primary);
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
margin: 0 0 20px;
}

.about-hero h1 {
font-size: clamp(28px, 5vw, 44px);
line-height: 1.15;
margin: 0 0 16px;
letter-spacing: -0.01em;
}

.hero-sub {
max-width: 560px;
margin: 0 auto 28px;
color: var(--text-muted);
font-size: 16.5px;
line-height: 1.6;
}

.hero-ctas {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 48px;
}

.hero-cta { text-decoration: none; }

/* ---------- Hero demo mock ---------- */
.hero-demo {
display: flex;
justify-content: center;
}

.demo-card {
width: 100%;
max-width: 420px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 16px;
text-align: left;
}

.demo-add-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 10px;
margin-bottom: 14px;
background: var(--bg);
}

.demo-input {
flex: 1;
font-size: 13.5px;
color: var(--text);
white-space: nowrap;
overflow: hidden;
min-height: 1.2em;
}

.demo-cursor {
display: inline-block;
width: 1px;
height: 14px;
background: var(--primary);
margin-left: 1px;
vertical-align: -2px;
animation: demo-blink 1s step-end infinite;
}

.demo-add-btn {
flex-shrink: 0;
background: var(--primary);
color: #fff;
font-size: 12.5px;
font-weight: 600;
padding: 6px 12px;
border-radius: 8px;
opacity: 0.5;
transition: opacity 0.2s ease, transform 0.15s ease;
}

.demo-add-btn.demo-active {
opacity: 1;
transform: scale(0.96);
}

.demo-tasks {
display: flex;
flex-direction: column;
gap: 8px;
}

.demo-task {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border: 1px solid var(--border);
border-radius: 9px;
font-size: 13px;
transition: opacity 0.5s ease, transform 0.5s ease, max-height 0.5s ease, margin 0.5s ease, padding 0.5s ease;
}

.demo-checkbox {
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid var(--border);
flex-shrink: 0;
position: relative;
transition: background 0.25s ease, border-color 0.25s ease;
}

.demo-checkbox::after {
content: "";
position: absolute;
left: 4px;
top: 0px;
width: 4px;
height: 7px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
opacity: 0;
transition: opacity 0.2s ease;
}

.demo-task-text { flex: 1; transition: color 0.3s ease, text-decoration-color 0.3s ease; }

.demo-pill {
flex-shrink: 0;
font-size: 10.5px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
}

.demo-pill-red { background: #fee2e2; color: var(--must-do); }
.demo-pill-blue { background: #dbeafe; color: var(--good-to-have); }

.demo-task-new {
border-color: var(--primary);
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.12);
}

.demo-task-done .demo-checkbox { background: var(--completed); border-color: var(--completed); }
.demo-task-done .demo-checkbox::after { opacity: 1; }
.demo-task-done .demo-task-text { color: var(--text-muted); text-decoration: line-through; }

.demo-task-collapsing {
opacity: 0;
transform: scale(0.98);
max-height: 0;
margin: 0;
padding-top: 0;
padding-bottom: 0;
overflow: hidden;
border-width: 0;
}

.demo-task-entering {
opacity: 0;
transform: translateY(-6px);
}

@keyframes demo-blink {
0%, 50% { opacity: 1; }
50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
.demo-cursor { animation: none; }
}

/* ---------- Principles ---------- */
.principles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 32px 0 56px;
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}

.principle { text-align: center; padding: 0 12px; }

.principle-icon {
width: 48px;
height: 48px;
margin: 0 auto 14px;
}

.principle h3 {
font-size: 15.5px;
margin: 0 0 8px;
}

.principle p {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.55;
margin: 0;
}

/* ---------- Features ---------- */
.features { padding: 56px 0 8px; text-align: center; }

.features h2 {
font-size: clamp(24px, 4vw, 32px);
margin: 0 0 12px;
}

.features-sub {
max-width: 520px;
margin: 0 auto 36px;
color: var(--text-muted);
font-size: 15px;
line-height: 1.6;
}

.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
text-align: left;
}

.feature-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px 20px;
box-shadow: var(--shadow);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 14px rgba(16, 24, 40, 0.09);
}

.feature-icon {
width: 48px;
height: 48px;
margin-bottom: 14px;
}

.feature-card h3 {
font-size: 15.5px;
margin: 0 0 8px;
}

.feature-card p {
font-size: 13.5px;
color: var(--text-muted);
line-height: 1.55;
margin: 0;
}

.garden-bar-track {
margin-top: 14px;
height: 6px;
border-radius: 999px;
background: var(--bg);
overflow: hidden;
}

.garden-bar-fill {
height: 100%;
width: 8%;
border-radius: 999px;
background: linear-gradient(90deg, #16a34a, #4ade80);
animation: garden-grow 5s ease-in-out infinite;
}

@keyframes garden-grow {
0% { width: 8%; }
55% { width: 92%; }
80% { width: 92%; }
100% { width: 8%; }
}

@media (prefers-reduced-motion: reduce) {
.garden-bar-fill { animation: none; width: 60%; }
.feature-card:hover { transform: none; }
}

/* ---------- Closing CTA ---------- */
.closing-cta {
text-align: center;
padding: 64px 0 40px;
}

.closing-cta h2 {
font-size: clamp(24px, 4vw, 32px);
margin: 0 0 12px;
}

.closing-cta p {
color: var(--text-muted);
font-size: 15px;
margin: 0 0 24px;
}

/* ---------- Footer ---------- */
.about-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 24px;
color: var(--text-muted);
font-size: 13px;
border-top: 1px solid var(--border);
}

@media (max-width: 760px) {
.principles { grid-template-columns: 1fr; gap: 28px; }
.feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
.about-topbar { padding: 14px 16px; }
.about-hero { padding: 36px 0 16px; }
.feature-grid { grid-template-columns: 1fr; }
}