/* ==========================================================================
   AI Planter · homepage visual layer 2026-11
   One photograph in the hero and one example of what the analyzer does with
   it. Everything else on the page stays quiet around that.

   Loaded on the homepage after redesign.css and motion-2026-11.css. Every
   animation sits behind prefers-reduced-motion: no-preference, and nothing
   here waits for a script: without JS the page is a finished still.
   ========================================================================== */

.home-page {
    --vz-paper: #f7faf4;
    --vz-ink: #17281f;
    --vz-ink-soft: #4c5a52;
    --vz-moss: #2c6248;
    --vz-moss-deep: #1d4735;
    --vz-line: rgba(60, 84, 66, 0.15);
    --vz-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ==========================================================================
   1 · Hero
   The text column sits on paper; the photograph fills the right side at its
   own aspect ratio, so the match frame can be placed on the leaf in percent
   and stays on it at every size.
   ========================================================================== */

.home-page .botanical-hero {
    background: var(--vz-paper);
    background-image: none;
    height: auto;
    min-height: 0;
    max-height: none;
    padding-bottom: 0;
    display: block;
    overflow: hidden;
    isolation: isolate;
}
.home-page .botanical-hero::before,
.home-page .botanical-hero::after { content: none; display: none; }

.home-page .botanical-hero .hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    /* the photograph is sized from this height, so the hero is sized from
       the viewport width: the plant always takes the right ~55% */
    min-height: clamp(580px, 48.5vw, 790px);
    padding-top: 40px;
    padding-bottom: 48px;
}
.home-page .botanical-hero .hero-text {
    max-width: min(590px, 47%);
    padding: 0;
}
.home-page .botanical-hero .hero-title { font-size: clamp(48px, 4.9vw, 74px); }
.home-page .botanical-hero .hero-subtitle { font-size: 19px; max-width: 520px; }
.home-page .botanical-hero .hero-cta { margin-bottom: 36px; }
.home-page .botanical-hero .hero-trust { margin-bottom: 0; }

.hero-photo {
    position: absolute;
    z-index: 1;
    top: var(--header-height);
    right: 0;
    height: calc(100% - var(--header-height));
    width: auto;
    aspect-ratio: 1095 / 948;
    margin: 0;
    pointer-events: none;
}
/* paper wash: the headline never sits on foliage */
.hero-photo::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 34%;
    z-index: 1;
    background: linear-gradient(90deg,
        var(--vz-paper) 0%,
        rgba(247, 250, 244, 0.85) 30%,
        rgba(247, 250, 244, 0.35) 66%,
        rgba(247, 250, 244, 0) 100%);
    pointer-events: none;
}
.hero-photo-canvas { position: absolute; inset: 0; }
.hero-photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 72% 42%;
}

/* the match: a frame on the large monstera leaf and the card it opens */
.hero-match {
    position: absolute;
    z-index: 2;
    left: 40.2%;
    top: 18%;
    width: 38.6%;
    height: 45.5%;
    pointer-events: auto;
    color: inherit;
    text-decoration: none;
}
.hero-match-frame {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 8px;
    filter: drop-shadow(0 1px 1.5px rgba(8, 28, 18, 0.45));
}
.hero-match-frame i {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid #fff;
    transition: transform 360ms var(--vz-ease);
}
.hero-match-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; --cx: -1; --cy: -1; }
.hero-match-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; --cx: 1; --cy: -1; }
.hero-match-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; --cx: -1; --cy: 1; }
.hero-match-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; --cx: 1; --cy: 1; }
/* one pass of the scan line, the same gesture the analyzer makes */
.hero-match-scan {
    position: absolute;
    inset: 0;
    border-bottom: 2px solid rgba(255, 255, 255, 0.9);
    background: linear-gradient(to top, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 36%);
    opacity: 0;
}
.hero-match-tag {
    position: absolute;
    left: 0;
    top: calc(100% + 14px);
    display: grid;
    gap: 3px;
    min-width: 222px;
    padding: 12px 16px 13px;
    background: rgba(251, 253, 248, 0.95);
    border: 1px solid #fff;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(20, 40, 28, 0.08), 0 18px 36px -20px rgba(20, 40, 28, 0.45);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: box-shadow 260ms ease, transform 260ms var(--vz-ease);
}
.hero-match-k {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5b685f;
}
.hero-match-v {
    font-family: var(--font-display);
    font-size: 21px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--vz-ink);
}
.hero-match-l {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vz-moss);
}
.hero-match-l span { transition: transform 220ms ease; }
.hero-match:hover .hero-match-tag { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(20, 40, 28, 0.08), 0 24px 44px -20px rgba(20, 40, 28, 0.5); }
.hero-match:hover .hero-match-l span { transform: translateX(3px); }
.hero-match:hover .hero-match-frame i { transform: translate(calc(var(--cx) * 3px), calc(var(--cy) * 3px)); }
.hero-match:focus-visible { outline: none; }
.hero-match:focus-visible .hero-match-tag { outline: 2px solid var(--vz-moss); outline-offset: 3px; }

/* ==========================================================================
   2 · Light: the spectrum band inside the tools section
   ========================================================================== */

.lx-band {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 56px;
    align-items: center;
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid var(--vz-line);
}
.lsx-k {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vz-moss);
    margin-bottom: 14px;
}
.lx-title {
    font-family: var(--font-display);
    font-size: clamp(26px, 2.1vw, 34px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--vz-ink);
    margin-bottom: 14px;
    max-width: 22ch;
}
.lx-p {
    font-size: 15.5px;
    line-height: 1.7;
    color: #5c665f;
    max-width: 46ch;
    margin-bottom: 18px;
}
.lx-a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vz-moss);
    border-bottom: 1px solid rgba(44, 98, 72, 0.32);
    padding-bottom: 2px;
    transition: border-color 200ms ease, color 200ms ease;
}
.lx-a:hover { color: var(--vz-moss-deep); border-color: var(--vz-moss-deep); }
.lx-a span { transition: transform 220ms ease; }
.lx-a:hover span { transform: translateX(3px); }

.lx-meter { position: relative; }
.lx-gauge { position: relative; }
.lx-read {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 20px;
    align-items: start;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--vz-line);
}
.lx-read-k {
    grid-column: 1;
    grid-row: 1;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6f7a72;
}
.lx-read-v {
    grid-column: 1;
    grid-row: 2;
    margin-top: 6px;
    min-height: 27px;
    font-family: var(--font-display);
    font-size: clamp(20px, 1.7vw, 24px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--vz-ink);
}
.lx-read-n {
    grid-column: 1;
    grid-row: 3;
    margin-top: 5px;
    min-height: 18px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #5f6a63;
}
.lx-read-f {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 0.9;
    color: var(--vz-ink);
    font-variant-numeric: tabular-nums;
}
.lx-read-f b { font-weight: 400; }
.lx-read-f span { font-size: 17px; color: #8c968d; }

/* the spectrum: pale shade on the left, full sun on the right */
.lx-track {
    position: relative;
    height: 112px;
    margin-top: 32px;
}
.lx-grad {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 62%),
        linear-gradient(90deg, #e8efdd 0%, #dce8d0 16%, #cfdfc4 32%, #b4cbae 50%, #93b398 68%, #6f9a7d 84%, #4a7558 100%);
    box-shadow: inset 0 0 0 1px rgba(40, 62, 46, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.lx-cut {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(24, 42, 31, 0.2);
}
.lx-cut.c1 { left: 25%; }
.lx-cut.c2 { left: 50%; }
.lx-cut.c3 { left: 75%; }

/* the needle: a line and a bead, reading against the spectrum */
.lx-needle {
    position: absolute;
    top: -14px;
    bottom: 0;
    left: calc(var(--lx-p, 56) * 1%);
    width: 0;
    border-left: 1.5px solid var(--vz-ink);
    pointer-events: none;
}
.lx-needle-head {
    position: absolute;
    top: -6px;
    left: -5.5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--vz-ink);
    box-shadow: 0 0 0 3px var(--vz-paper);
}

/* the four bands, hung from the picture as annotations */
.lx-zones {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}
.lx-zone {
    position: relative;
    padding-right: 18px;
    color: #6f7a72;
    transition: color 260ms ease;
}
.lx-zone::before {
    content: "";
    position: absolute;
    left: 0;
    top: -18px;
    width: 1px;
    height: 18px;
    background: rgba(24, 42, 31, 0.17);
    transition: background 260ms ease;
}
.lx-zone:first-child::before { background: transparent; }
.lx-zone b {
    display: block;
    min-height: 34px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}
.lx-zone em {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    line-height: 1.45;
    color: #7f8981;
    transition: color 260ms ease;
}
.lx-zone.is-on { color: var(--vz-ink); }
.lx-zone.is-on em { color: #5c685f; }
.lx-zone.is-on::before { background: var(--vz-moss-deep); }
.lx-note {
    margin-top: 22px;
    font-size: 11.5px;
    line-height: 1.55;
    color: #6f7a72;
    max-width: 52ch;
}

/* ==========================================================================
   3 · Encyclopedia: six care records, shown by their photographs
   ========================================================================== */

.pg-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 16px;
}
.pg-card {
    display: block;
    color: inherit;
    text-decoration: none;
}
.pg-photo {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 12px;
    background: #dfe8d6;
    box-shadow: inset 0 0 0 1px rgba(40, 62, 46, 0.08);
}
.pg-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms var(--vz-ease);
}
.pg-name {
    display: block;
    margin-top: 10px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--vz-ink);
    transition: color 200ms ease;
}
.pg-sci {
    display: block;
    margin-top: 1px;
    font-size: 12.5px;
    font-style: italic;
    color: #5f6a63;
}
.pg-card:hover .pg-photo img { transform: scale(1.045); }
.pg-card:hover .pg-name { color: var(--vz-moss); }
.pg-card:focus-visible { outline-offset: 4px; border-radius: 12px; }
.pg-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid rgba(60, 84, 66, 0.2);
}
.pg-foot-k { font-size: 12.5px; color: #5f6a63; }
.pg-foot-v {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--vz-moss);
}
.pg-foot-v span { transition: transform 220ms ease; }
.pg-foot-v:hover span { transform: translateX(3px); }

/* ==========================================================================
   4 · Visual reference: six photographs, so a 3 × 2 grid with no orphan
   ========================================================================== */

.home-page .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ==========================================================================
   5 · Motion — one entrance, played once
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .home-page .hero-text > * { animation: vzRise 700ms var(--vz-ease) both; }
    .home-page .hero-text > *:nth-child(1) { animation-delay: 40ms; }
    .home-page .hero-text > *:nth-child(2) { animation-delay: 100ms; }
    .home-page .hero-text > *:nth-child(3) { animation-delay: 180ms; }
    .home-page .hero-text > *:nth-child(4) { animation-delay: 250ms; }
    .home-page .hero-text > *:nth-child(5) { animation-delay: 320ms; }
    .home-page .hero-eyebrow::before { transform-origin: left center; animation: vzRule 800ms var(--vz-ease) 60ms both; }

    /* the photo is the LCP image: it settles in scale but is never hidden */
    .hero-photo-img { animation: heroSettle 1800ms var(--vz-ease) both; }
    .hero-match-frame i { animation: heroCorner 650ms var(--vz-ease) 650ms both; }
    .hero-match-scan { animation: heroScan 1200ms cubic-bezier(0.45, 0, 0.25, 1) 1000ms both; }
    .hero-match-tag { animation: vzRise 650ms var(--vz-ease) 1500ms both; }
}

@keyframes vzRise {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes vzRule {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}
@keyframes heroSettle {
    from { transform: scale(1.035); }
    to { transform: scale(1); }
}
@keyframes heroCorner {
    from { opacity: 0; transform: translate(calc(var(--cx) * 14px), calc(var(--cy) * 14px)); }
    to { opacity: 1; transform: translate(0, 0); }
}
@keyframes heroScan {
    0% { opacity: 0; transform: translateY(-100%); }
    18% { opacity: 1; }
    82% { opacity: 1; }
    100% { opacity: 0; transform: translateY(0); }
}

/* ==========================================================================
   6 · Responsive
   ========================================================================== */

/* 1024–1279: the full-bleed photo would run under the text, so it becomes
   a plate beside it, cropped to the plant so the frame keeps its leaf */
@media (max-width: 1279px) {
    .home-page .botanical-hero .hero-content { min-height: clamp(560px, 56vw, 680px); }
    .home-page .botanical-hero .hero-text { max-width: 50%; }
    .home-page .botanical-hero .hero-title { font-size: clamp(46px, 4.9vw, 60px); }
    .home-page .botanical-hero .hero-subtitle { font-size: 17px; }
    .hero-photo {
        top: calc(50% + var(--header-height) / 2);
        right: 40px;
        height: auto;
        width: 42%;
        aspect-ratio: 1.16;
        transform: translateY(-50%);
        overflow: hidden;
        border-radius: 18px;
    }
    .hero-photo::before { display: none; }
    .hero-photo-canvas {
        inset: auto;
        left: -24.4%;
        top: -10%;
        width: 124.4%;
        aspect-ratio: 1095 / 948;
    }
    .lx-band { gap: 36px; margin-top: 48px; }
    .pg-grid { gap: 18px 12px; }
}

/* below 1024px the plate moves under the text */
@media (max-width: 1023px) {
    .home-page .botanical-hero .hero-content {
        display: block;
        min-height: 0;
        padding-top: 36px;
        padding-bottom: 0;
    }
    .home-page .botanical-hero .hero-text { max-width: 640px; }
    .hero-photo {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        width: min(calc(100% - 56px), 720px);
        margin: 36px auto 0;
    }
    .lx-band { grid-template-columns: 1fr; gap: 32px; }
    .lx-title { max-width: none; }
}

@media (max-width: 719px) {
    .home-page .botanical-hero .hero-content { padding-top: 28px; }
    .home-page .botanical-hero .hero-title { font-size: clamp(38px, 10.6vw, 52px); }
    .home-page .botanical-hero .hero-subtitle { font-size: 16px; }
    .hero-photo { width: auto; margin: 28px 0 0; border-radius: 0; }
    .hero-match-frame i { width: 22px; height: 22px; }
    .hero-match-tag { min-width: 0; width: max-content; max-width: 230px; padding: 10px 13px 11px; top: calc(100% + 10px); }
    .hero-match-v { font-size: 18px; }
    .hero-match-l { font-size: 12px; }
    .lx-track { height: 84px; margin-top: 26px; }
    .lx-read-f { font-size: 36px; }
    .lx-zone b { min-height: 0; font-size: 11.5px; }
    .lx-zone em { display: none; }
    .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
    .home-page .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}