/* LunchLuxe visual enhancements: readability, highlights and motion */
:root {
  --saffron: #e9a23b;
  --saffron-soft: #fdecc8;
  --ink-soft: #3f473d;
  --muted: #5b6358;
  --glow: 0 18px 45px rgba(0, 153, 76, .18);
}

/* ---------- Readability ---------- */
body { font-size: 16px; line-height: 1.6; text-rendering: optimizeLegibility; }
.main-nav a { font-size: 14px; }
.city-select { font-size: 13px; }
.button { font-size: 14px; letter-spacing: .01em; }
.eyebrow { font-size: 12px; letter-spacing: .16em; }
.hero-lead { max-width: 500px; color: var(--ink-soft); font-size: 18px; line-height: 1.75; }
.hero-stats li { color: var(--ink-soft); font-size: 12.5px; }
.hero-stats strong { font-size: 30px; }
.float-chip strong { font-size: 13px; }
.float-chip small { font-size: 11.5px; }
.ribbon-set span { font-size: 15px; letter-spacing: .02em; }
.section-head > p:last-child { color: var(--ink-soft); font-size: 17px; line-height: 1.7; }
.moment-time { font-size: 12px; }
.moment-copy h3 { font-size: 30px; }
.moment-copy > p:not(.eyebrow) { color: var(--ink-soft); font-size: 16px; line-height: 1.7; }
.pill-list li { padding: 7px 12px; color: var(--ink-soft); font-size: 12.5px; font-weight: 600; background: #f6f8f1; }
.step h3 { font-size: 20px; }
.step > p { color: #e3ebdf; font-size: 15px; line-height: 1.65; }
.step-num { width: 38px; height: 38px; font-size: 13px; }
.phone-top, .phone-label { font-size: 10px; }
.plan-badge { font-size: 11px; }
.plan-top h3 { font-size: 22px; }
.plan-top p { font-size: 13px; }
.plan-price strong { font-size: 36px; }
.plan-price span, .plan-per-day { font-size: 13px; }
.plan-per-day b { color: var(--ink); }
.check-list li { color: var(--ink-soft); font-size: 14.5px; }
.pricing-note { font-size: 13px; }
.delivery-copy > p:not(.eyebrow) { color: var(--ink-soft); font-size: 16px; }
.route-row strong { font-size: 15px; }
.route-row small { font-size: 13px; }
.why-feature h2 { font-size: 32px; }
.why-item h3 { font-size: 17px; }
.why-item p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.value-card h3 { font-size: 26px; }
.value-card p { color: var(--ink-soft); font-size: 15px; }
.cta-card > p:not(.eyebrow) { color: var(--ink-soft); font-size: 17px; }
.footer-tagline, .footer-column a, .footer-order p { font-size: 13.5px; }
.footer-location, .footer-bottom { font-size: 12.5px; }
.meal-col li { font-size: 14.5px; }
.menu-footnote { font-size: 13px; }
.addon-card p { font-size: 13px; }
strong, b { font-weight: 700; color: inherit; }
.moment-copy strong, .step strong, .section-head strong { color: var(--green-dark); }
.process .step strong { color: #fff; }

/* ---------- Key-point highlight (animated marker sweep) ---------- */
mark.hl {
  padding: 0 .15em;
  margin: 0 -.05em;
  border-radius: .25em;
  color: inherit;
  font-weight: 700;
  background: linear-gradient(104deg, rgba(233,162,59,0) .9%, rgba(233,162,59,.38) 2.4%, rgba(252,214,140,.55) 97%, rgba(233,162,59,0) 99%) no-repeat 0 85% / 0% 55%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1s cubic-bezier(.2,.7,.2,1);
}
mark.hl.is-lit, html:not(.js) mark.hl { background-size: 100% 55%; }
.cta-card mark.hl, .hero-lead mark.hl { color: var(--ink); }

/* ---------- Hero ---------- */
.hero { background: radial-gradient(1200px 500px at 85% 10%, #eaf3dd 0%, transparent 60%), var(--cream); }
.hero-glow { animation: glow-drift 12s ease-in-out infinite alternate; background: radial-gradient(circle, rgba(233,162,59,.22), rgba(218,230,201,.4) 55%, transparent 70%); filter: blur(10px); }
.hero-blob { animation: blob-morph 14s ease-in-out infinite; background: linear-gradient(135deg, #dbe8cf, #f3e3bf); }
.hero-title em { color: var(--green); }
.scribble path { stroke-dasharray: 320; stroke-dashoffset: 320; animation: draw 1.1s .65s cubic-bezier(.6,.1,.2,1) forwards; }
.float-chip { animation: float 6s ease-in-out infinite; transition: transform .3s, box-shadow .3s; }
.float-chip:hover { box-shadow: var(--glow); }
.chip-2 { animation-delay: -2s; }
.chip-3 { animation-delay: -4s; }
.hero-badge { animation: pulse-ring 2.8s ease-out infinite; }
.dot { animation: dot-pulse 1.8s ease-in-out infinite; }
.hero-frame img { animation: ken-burns 18s ease-in-out infinite alternate; }

/* Floating food particles */
.hero-particles { position: absolute; z-index: 0; inset: 0; pointer-events: none; overflow: hidden; }
.hero-particles span { position: absolute; bottom: -40px; font-size: 20px; opacity: 0; animation: rise 14s linear infinite; }

/* ---------- Buttons ---------- */
.button { position: relative; overflow: hidden; isolation: isolate; }
.button::after { position: absolute; z-index: -1; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(110deg, transparent, rgba(255,255,255,.45), transparent); content: ""; transform: skewX(-20deg); transition: left .7s; }
.button:hover::after { left: 140%; }
.button:hover { box-shadow: 0 12px 26px rgba(0,153,76,.25); }
.button span[aria-hidden="true"] { display: inline-block; transition: transform .25s; }
.button:hover span[aria-hidden="true"] { transform: translateX(4px); }
.hero-ctas .button-green { animation: cta-breathe 3s ease-in-out infinite; }

/* ---------- Section heads ---------- */
.section-head h2 em { position: relative; white-space: nowrap; }
.section-head h2 em::after { position: absolute; right: 0; bottom: -2px; left: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--saffron), var(--green)); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .9s .35s cubic-bezier(.2,.7,.2,1); }
.section-head.is-visible h2 em::after, html:not(.js) .section-head h2 em::after { transform: scaleX(1); }

/* ---------- Ribbon ---------- */
.ribbon { background: var(--green); }
.ribbon-set i { display: inline-block; color: var(--saffron-soft); animation: rotate 6s linear infinite; }

/* ---------- Timeline ---------- */
.timeline-fill { height: var(--timeline, 0%); background: linear-gradient(var(--saffron), var(--green)); transition: height .15s linear; }
.moment-node { transition: transform .4s cubic-bezier(.3,1.6,.5,1), box-shadow .4s; }
.moment.is-active .moment-node { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(0,153,76,.15), 0 10px 25px rgba(0,0,0,.12); }
.moment-media { transition: box-shadow .4s, transform .4s; }
.moment-media:hover { transform: translateY(-4px); box-shadow: 0 24px 45px rgba(44,59,35,.18); }
.moment-time { color: var(--green-dark); box-shadow: 0 4px 12px rgba(0,0,0,.1); }

/* ---------- How it works ---------- */
.process { background: var(--green); }
.steps-path path { stroke-dashoffset: 600; transition: stroke-dashoffset 2.2s ease-out; }
.steps.is-drawn .steps-path path { stroke-dashoffset: 0; animation: dash-flow 30s linear infinite; }
.step-visual { transition: transform .4s, box-shadow .4s; }
.step:hover .step-visual { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 28px 45px rgba(0,0,0,.35); }
.step-num { background: rgba(255,255,255,.06); transition: background .3s, color .3s, transform .3s; }
.step:hover .step-num { background: white; border-color: white; color: var(--green); transform: scale(1.12); }
.phone-card.is-picked { animation: pick 2.4s ease-in-out infinite; }

/* ---------- Plans ---------- */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }
.plan-card { transition: transform .2s ease-out, box-shadow .3s; }
.plan-card::before { position: absolute; z-index: 2; inset: 0; border-radius: inherit; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.35), transparent 45%); content: ""; opacity: 0; pointer-events: none; transition: opacity .3s; }
.plan-card:hover::before { opacity: 1; }
.plan-card:hover { box-shadow: 0 26px 50px rgba(44,50,39,.16); }
.plan-featured { background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--green) border-box; border: 2px solid transparent; }
.plan-badge { background: linear-gradient(90deg, var(--saffron), #f4c06a); color: #3a2a0c; box-shadow: 0 6px 16px rgba(233,162,59,.35); animation: badge-bob 2.6s ease-in-out infinite; }
.plan-icon { transition: transform .5s cubic-bezier(.3,1.6,.5,1); }
.plan-card:hover .plan-icon { transform: rotate(-12deg) scale(1.15); }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* ---------- Delivery route ---------- */
.route-dot { animation: route-travel 3.2s ease-in-out infinite; box-shadow: 0 0 0 5px rgba(0,153,76,.2); }
.route-row .route-icon { transition: transform .3s; }
.route-row:hover .route-icon { transform: scale(1.18) rotate(-8deg); }
.route-row:nth-child(2) .route-icon { animation: scoot 2.4s ease-in-out infinite; }

/* ---------- Why / values ---------- */
.why-item, .value-card { position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s, border-color .3s; }
.why-item:hover, .value-card:hover { transform: translateY(-5px); border-color: var(--green); box-shadow: var(--glow); }
.why-item::after, .value-card::after { position: absolute; right: -40px; bottom: -40px; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle, rgba(233,162,59,.18), transparent 70%); content: ""; transition: transform .5s; }
.why-item:hover::after, .value-card:hover::after { transform: scale(2.2); }
.why-icon { transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.why-item:hover .why-icon { transform: scale(1.2) rotate(8deg); }
.value-number { font-size: 34px; background: linear-gradient(135deg, var(--green), var(--saffron)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.why-feature > img { transition: transform 1.2s; }
.why-feature:hover > img { transform: scale(1.06); }

/* ---------- CTA ---------- */
.cta-card { background: linear-gradient(135deg, var(--green-soft), var(--cream)); }
.cta-ring { animation: ring-spin 18s linear infinite; border-style: dashed; }
.cta-ring.r2 { animation-direction: reverse; }

/* ---------- Menu & add-ons ---------- */
.meal-col { transition: transform .3s, box-shadow .3s; }
.meal-col:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(32,40,32,.08); }
.day-panel { animation: panel-in .45s cubic-bezier(.2,.7,.2,1); }
.addon-card.is-selected { animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
.addon-icon { transition: transform .3s; }
.addon-card:hover .addon-icon { transform: scale(1.12) rotate(-6deg); }

/* ---------- Reveal: stagger and blur ---------- */
.js [data-reveal] { filter: blur(6px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease; transition-delay: var(--delay, 0s); }
.js [data-reveal].is-visible { filter: none; }
.js [data-reveal="zoom"] { transform: scale(.9); }

/* ---------- Back to top ---------- */
.to-top { position: fixed; z-index: 30; bottom: 24px; left: 24px; width: 46px; height: 46px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--green-dark); font-size: 20px; box-shadow: 0 8px 24px rgba(0,0,0,.15); cursor: pointer; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .3s, transform .3s; }
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--green); color: #fff; }
.scroll-progress span { background: linear-gradient(90deg, var(--green), var(--saffron)); }

/* ---------- Keyframes ---------- */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes blob-morph { 0%, 100% { border-radius: 46% 54% 43% 57% / 51% 39% 61% 49%; transform: rotate(-7deg); } 50% { border-radius: 58% 42% 55% 45% / 42% 58% 42% 58%; transform: rotate(4deg) scale(1.03); } }
@keyframes glow-drift { to { transform: translate(80px, 60px) scale(1.15); } }
@keyframes gradient-pan { to { background-position: 300% 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(103,164,27,.45), 0 8px 24px rgba(0,0,0,.2); } 80%, 100% { box-shadow: 0 0 0 18px rgba(103,164,27,0), 0 8px 24px rgba(0,0,0,.2); } }
@keyframes dot-pulse { 50% { box-shadow: 0 0 0 8px rgba(0,153,76,.12); } }
@keyframes ken-burns { to { transform: scale(1.08) translate(-1.5%, 1%); } }
@keyframes rise { 0% { opacity: 0; transform: translateY(0) rotate(0); } 10% { opacity: .55; } 90% { opacity: .4; } 100% { opacity: 0; transform: translateY(-640px) rotate(200deg); } }
@keyframes cta-breathe { 50% { box-shadow: 0 0 0 8px rgba(0,153,76,.12), 0 10px 22px rgba(0,153,76,.25); } }
@keyframes dash-flow { to { stroke-dashoffset: -600; } }
@keyframes pick { 50% { transform: scale(1.06); box-shadow: 0 4px 12px rgba(0,153,76,.25); } }
@keyframes border-spin { to { --angle: 360deg; } }
@keyframes badge-bob { 50% { transform: translateY(-3px); } }
@keyframes route-travel { 0% { top: 12%; } 50% { top: 85%; } 100% { top: 12%; } }
@keyframes scoot { 50% { transform: translateX(5px); } }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop { 50% { transform: scale(1.04); } }

@media (max-width: 760px) {
  .hero-lead { font-size: 16px; }
  .hero-stats li { font-size: 11px; }
  .hero-stats strong { font-size: 24px; }
  .section-head > p:last-child { font-size: 15px; }
  .moment-copy > p:not(.eyebrow) { font-size: 15px; }
  .main-nav a { font-size: 15px; }
  .header-actions .button { font-size: 12px; }
  .why-item p { font-size: 13.5px; }
  .section-head h2 em { white-space: normal; }
  .to-top { bottom: 18px; left: 16px; }
}
@media (max-width: 390px) {
  .hero-stats li { font-size: 10px; }
  .header-actions .button { font-size: 11px; }
  .why-item h3 { font-size: 15px; }
  .why-item p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-particles { display: none; }
  .js [data-reveal] { filter: none; }
  mark.hl { background-size: 100% 55%; transition: none; }
  .scribble path { stroke-dashoffset: 0; }
  .steps-path path { stroke-dashoffset: 0; }
}