﻿/* Corner strokes lead the image reveal in section 02. */
#farm-life .land-story-visual::before{animation:none!important;clip-path:inset(0 calc((1 - var(--corner-progress,0))*100%) 0 0)!important}
#farm-life .land-story-visual::after{animation:none!important;clip-path:inset(0 0 0 calc((1 - var(--corner-progress,0))*100%))!important}
/* Top-hinged, two-sided cards. The back uses the inverse palette. */
#how-it-works .journey-grid{perspective:1400px}
#how-it-works .journey-grid article{padding:0;overflow:visible;background:var(--color-transparent);border:0;min-height:350px;perspective:1100px;cursor:pointer;outline-offset:5px}
#how-it-works .journey-grid article:after{display:none}
.journey-flipper{position:relative;min-height:350px;height:100%;transform-style:preserve-3d;transform-origin:center top;transition:transform 1.1s cubic-bezier(.22,1,.36,1);transform:rotateX(var(--flip-angle,0deg))}
.journey-face{position:absolute;inset:0;padding:30px 25px 36px;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--color-hex-d8bf7440);border-radius:2px;background:linear-gradient(155deg,var(--color-hex-135243),var(--color-hex-003e33));overflow:hidden}
.journey-face:after{content:'';position:absolute;bottom:0;left:25px;height:2px;width:65%;background:linear-gradient(90deg,var(--color-hex-e6c674),var(--color-transparent))}
.journey-back{transform:rotateX(180deg);background:var(--color-hex-f5edda);border-color:var(--color-hex-d3b36c)}
#how-it-works .journey-face>span:first-child{font:400 64px/1 Georgia,serif;color:var(--color-hex-e6c674);display:block;letter-spacing:-3px;margin-bottom:40px}
#how-it-works .journey-back>span:first-child{color:var(--color-hex-95701e)}
#how-it-works .journey-back h3{color:var(--color-ink-green)}#how-it-works .journey-back p{color:var(--color-hex-557062)}#how-it-works .journey-back .journey-mark{color:var(--color-brand-green);border-color:var(--color-hex-ad852e66)}
#how-it-works .journey-grid article:focus-visible{outline:2px solid var(--color-hex-e6c674)}
/* Referral activity is illustrative; no record is updated by this animation. */
.timeline li{--milestone:0}.timeline li i svg{width:19px;height:19px;fill:none;stroke:var(--color-current);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.timeline li i svg path{stroke-dasharray:24;stroke-dashoffset:0}
.timeline li:not(:last-child):before{transform-origin:top}
.timeline-running .timeline li:not(:last-child):before{animation:referral-line 9s linear infinite;animation-delay:calc(var(--milestone)*1.25s)}
.timeline-running .timeline li.done i svg path{animation:referral-tick 9s ease infinite;animation-delay:calc(var(--milestone)*1.25s)}
.timeline-running .timeline li.done i{animation:referral-node 9s ease infinite;animation-delay:calc(var(--milestone)*1.25s)}
.timeline-running .timeline li.current i{animation:referral-pulse 2.7s ease-in-out infinite;box-shadow:0 0 0 0 var(--color-hex-ad852e00)}
@keyframes referral-line{0%,7%{transform:scaleY(0)}22%,92%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes referral-tick{0%,4%{stroke-dashoffset:24}14%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:24}}
@keyframes referral-node{0%,4%{background:var(--color-hex-f5f1e6);color:var(--color-hex-ac852d)}16%,92%{background:var(--color-hex-e3e9dc);color:var(--color-brand-green)}100%{background:var(--color-hex-f5f1e6);color:var(--color-hex-ac852d)}}
@keyframes referral-pulse{0%,100%{box-shadow:0 0 0 0 var(--color-hex-ad852e00)}50%{box-shadow:0 0 0 7px var(--color-hex-ad852e22)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:700px){.journey-flipper,#how-it-works .journey-grid article{min-height:330px}.journey-face{padding:23px 17px 30px}#how-it-works .journey-face>span:first-child{font-size:48px;margin-bottom:32px}}
@media(prefers-reduced-motion:reduce){.journey-flipper{transition:none}.timeline li:before,.timeline li i,.timeline li i svg path{animation:none!important}.timeline li i svg path{stroke-dashoffset:0}}

.journey-flipper{transform:rotateX(0deg);transition:none}.journey-back{transform:none;opacity:0}.card-inverse .journey-front{opacity:0}.card-inverse .journey-back{opacity:1}

/* Cloned text stays visible and reverses with its ivory card face. */
#how-it-works .journey-back h3,#how-it-works .journey-back h3 .text-token{color:var(--color-ink-green)!important}
#how-it-works .journey-back p,#how-it-works .journey-back p .text-token{color:var(--color-hex-557062)!important}
#how-it-works .journey-back .text-token{opacity:1!important;transform:none!important;transition:none!important}
#how-it-works .journey-back>span:first-child{color:var(--color-hex-95701e)!important}

/* Section 02: draw both corner legs together with the image reveal. */
#farm-life .land-story-visual::before{clip-path:polygon(0 0,calc(var(--corner-progress,0)*100%) 0,calc(var(--corner-progress,0)*100%) 2px,2px 2px,2px calc(var(--corner-progress,0)*100%),0 calc(var(--corner-progress,0)*100%))!important}
#farm-life .land-story-visual::after{clip-path:polygon(100% 100%,calc((1 - var(--corner-progress,0))*100%) 100%,calc((1 - var(--corner-progress,0))*100%) calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) calc((1 - var(--corner-progress,0))*100%),100% calc((1 - var(--corner-progress,0))*100%))!important}
