/* Taylor's Table — "The Farmstand Awning" (companion to motion.js) */
/* Pre-paint cover: the inline head script flags a first-visit home load
   before first paint, so the cream cover (with its awning stripe) is
   already up when the page renders — no flash of the site before the
   intro. motion.js removes the flag the moment the real veil takes
   over; the failsafe clears it by 5s regardless. */
html.tt-awning-pending body::before {
  content: ""; position: fixed; inset: 0; z-index: 89; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, #B0512B 0 26px, #FBF4E4 26px 52px) top / 100% 16px no-repeat,
    radial-gradient(120% 90% at 50% 30%, #FDFAF1 0%, #FBF4E4 62%, #F0E2C4 100%);
  animation: tt-precover-failsafe .6s ease 4.4s forwards;
}
@keyframes tt-precover-failsafe { to { opacity: 0; visibility: hidden; } }

.awning-veil {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 30%, #FDFAF1 0%, #FBF4E4 62%, #F0E2C4 100%);
  display: flex; align-items: flex-start; justify-content: center;
  transition: opacity .7s ease, transform .7s ease;
}
.awning-veil.awning-lift { opacity: 0; transform: translateY(-3%); }
.awning-top {
  position: absolute; top: 0; left: 0; right: 0; height: 15vh; min-height: 92px;
  background: repeating-linear-gradient(90deg, #B0512B 0 34px, #FBF4E4 34px 68px);
  border-bottom: 5px solid #8A3B1D;
  transform-origin: top center;
  animation: awning-unfurl .8s cubic-bezier(.3,.8,.4,1) both;
  box-shadow: 0 14px 30px rgba(58,42,30,.25);
}
@keyframes awning-unfurl { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.awning-stage { margin-top: calc(15vh + 6px); text-align: center; }
.awning-sign { transform-origin: 50% -30px; animation: sign-swing 2.1s cubic-bezier(.25,.7,.3,1) .45s both; }
@keyframes sign-swing {
  0% { transform: rotate(7deg); opacity: 0; }
  18% { opacity: 1; }
  38% { transform: rotate(-4.5deg); }
  58% { transform: rotate(2.6deg); }
  76% { transform: rotate(-1.3deg); }
  100% { transform: rotate(0deg); opacity: 1; }
}
.awning-sign-strings { display: flex; justify-content: space-between; padding: 0 34px; height: 34px; }
.awning-sign-strings i { width: 2px; background: #8A6A54; display: block; }
.awning-sign-board {
  background: #FFFDF6; border: 3px solid #43331F; border-radius: 18px;
  padding: 18px 14px 14px; box-shadow: 0 18px 36px rgba(58,42,30,.28);
}
.awning-sign-board img { width: 96px; height: 96px; border-radius: 50%; display: block; margin: 0 auto; }
.awning-sign-name { font-family: 'Fraunces', Georgia, serif; font-size: 1.65rem; color: #3A2A1E; margin-top: 8px; }
.awning-sign-script {
  font-family: 'Caveat', cursive; font-size: 1.7rem; color: #B0512B;
  opacity: 0; animation: sign-script 1s ease 1.55s forwards;
}
@keyframes sign-script { to { opacity: 1; } }

.site-header { position: relative; }
.open-charm {
  position: absolute; left: 12px; top: 100%; z-index: 60;
  background: none; border: 0; padding: 0; cursor: pointer;
  transform-origin: 50% -6px;
}
.open-charm-sign {
  display: block; background: #77894F; color: #FBF4E4; border: 2px solid #43331F;
  border-radius: 8px; padding: 2px 10px 3px; font-family: 'Fraunces', Georgia, serif;
  font-size: .8rem; letter-spacing: .14em; box-shadow: 0 4px 8px rgba(58,42,30,.3);
}
.open-charm::before { content: ""; display: block; width: 2px; height: 8px; background: #8A6A54; margin: 0 auto; }
.open-charm.swinging { animation: charm-swing 1.1s cubic-bezier(.25,.7,.3,1) 1; }
@keyframes charm-swing { 0% { transform: rotate(0); } 25% { transform: rotate(9deg); } 55% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } 100% { transform: rotate(0); } }

.success-tag { display: flex; justify-content: center; margin: 12px 0 2px; }
.success-tag-card {
  display: inline-block; background: #FFFDF6; border: 2px solid #B0512B; color: #8A3B1D;
  border-radius: 10px; padding: 8px 16px; text-align: center;
  font-family: 'Caveat', cursive; font-size: 1.25rem; line-height: 1.15;
  transform-origin: 50% -8px; animation: tag-drop .8s cubic-bezier(.25,.7,.3,1) both;
  box-shadow: 0 8px 16px rgba(58,42,30,.18);
}
@keyframes tag-drop { 0% { transform: rotate(6deg) translateY(-8px); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-1.5deg) translateY(0); opacity: 1; } }

/* ---- V2 fix: the flavor marquee actually scrolls. The base theme only
   animates .marquee-track under html[data-motion="3"], but farmcream runs
   at motion level 2, so the track sat static (Josh caught it 2026-11-09).
   This file loads after the theme CSS, so animating it here — gated on
   no-preference, so reduced-motion visitors still get a static bar —
   fixes it at every motion level. The track holds two identical halves
   (see site.tsx), so translateX(-50%) loops seamlessly. ---- */
@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: tt-marquee 28s linear infinite; }
}
@keyframes tt-marquee { to { transform: translateX(-50%); } }

/* ---- V2 spruce: gentle float on the hero photo frame ---- */
@media (prefers-reduced-motion: no-preference) {
  .arch { animation: tt-hero-float 7s ease-in-out infinite; }
}
@keyframes tt-hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ---- V2 spruce: scroll-reveal fallback (JS-driven where the CSS
   scroll-timeline reveal in the theme is unsupported). Elements are
   visible by default; motion.js adds .rv-watch only when it can observe
   them, and a failsafe reveals everything, so no-JS and reduced-motion
   visitors always see the full page. ---- */
.rv-watch { opacity: 0; transform: translateY(22px); }
.rv-watch.rv-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .rv-watch { opacity: 1; transform: none; } }

/* ---- V2 spruce: gallery lightbox ---- */
.tt-lightbox { position: fixed; inset: 0; z-index: 120; background: rgba(38,26,16,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; cursor: zoom-out; animation: tt-lb-in .25s ease both; }
@keyframes tt-lb-in { from { opacity: 0; } to { opacity: 1; } }
.tt-lightbox img { max-width: min(92vw, 900px); max-height: 80vh; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.5); object-fit: contain; }
.tt-lightbox figcaption { color: #FBF4E4; font-family: 'Caveat', cursive; font-size: 1.5rem; text-align: center; }
.tt-lightbox-close { position: absolute; top: 16px; right: 20px; background: #FFFDF6; color: #3A2A1E; border: 0; border-radius: 999px; width: 42px; height: 42px; font-size: 1.3rem; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .awning-top, .awning-sign, .awning-sign-script, .open-charm.swinging, .success-tag-card { animation: none; }
  .awning-sign-script { opacity: 1; }
  .tt-lightbox { animation: none; }
}