/* Landing: The Christmas Village at Brooklyn Bridge (The Kiosk). Builds on the site CSS. */
.landing .rows-3 { grid-template-columns: repeat(3, 1fr); }
.landing .hero-page .hero-aside .actions { margin-top: 4px; }
.landing .shop-grid h3 { margin-bottom: 6px; }
.landing .block-art { width: 100%; border-radius: 6px; }
.landing-foot { text-align: left; }
.landing-foot .foot-line-big { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: clamp(28px, 4vw, 52px); color: var(--limestone); margin-bottom: 10px; }
.landing-foot a { color: var(--brass); }
.cta-quiet { background: transparent; color: var(--limestone); box-shadow: inset 0 0 0 1px var(--brass); }
.hero-aside .actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 760px) { .landing .rows-3 { grid-template-columns: 1fr; } }
/* hero: title on one row, note + buttons on the row below */
.landing .hero-page .hero-text { grid-template-columns: 1fr; transform: translateY(72%); gap: 18px; }
.landing .hero-page .hero-aside { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.landing .hero-page .hero-note { max-width: 48ch; margin: 0; border-top: 0; padding-top: 0; }
.landing .page-body { padding-top: 300px; }
.landing .field select { color-scheme: dark; }
@media (max-width: 760px) {
  .landing .hero-page { height: auto; }
  .landing .hero-page .hero-media { position: relative; height: 300px; }
  .landing .hero-page .hero-text { position: relative; transform: none; left: auto; right: auto; bottom: auto; padding: 28px 16px 0; }
  .landing .page-body { padding-top: 32px; }
}
@media (max-width: 760px) { .landing .hero-page { background: var(--green); } }
.landing-foot .foot-legal { display: flex; gap: 24px; margin-top: 24px; font-size: 14px; color: var(--sage); }
.landing-foot .foot-legal a { color: var(--limestone); }
/* pasta in the sky on the landing hero: stay inside the illustration (hero image is 520-600px tall) */
.landing .sky-pasta { top: 76px; height: 46%; }
.landing .hand-note { font-family: var(--text); font-style: italic; font-size: 22px; color: var(--brass); }
.landing .feature .block-art { box-shadow: 0 0 0 1px rgba(233,228,216,.25); }
/* hero is now the dome interior: pasta only in a thin band above the heads */
.landing .sky-pasta { top: 70px; height: 96px; }
.landing .sky-pasta .fp { top: 6px !important; }
.landing .sky-pasta .fp img { width: calc(var(--w) * .55); }
.landing .sky-pasta .fp:nth-child(n+6) { display: none; }
@keyframes pasta-fly-flat { from { transform: translate(-16vw, 0); } to { transform: translate(112vw, 0); } }
.landing .sky-pasta .fp { animation-name: pasta-fly-flat; }
.landing .sky-pasta { top: 62px; height: 70px; }
.landing .sky-pasta .fp { top: 4px !important; }
.landing .sky-pasta .fp img { width: calc(var(--w) * .38); }
@media (min-width: 761px) { .landing .hero-page { height: 700px; } .landing .page-body { padding-top: 240px; } }
/* ---------- pasta that really floats: three directions, size = depth (Paolo, 17/10/2026) ---------- */
.landing .sky-pasta.depth { top: 62px; height: calc(100% - 62px - 330px); overflow: hidden; }
.landing .sky-pasta.depth .fq { position: absolute; left: var(--x); top: var(--y); animation: var(--dir-anim) var(--dur) linear var(--delay) infinite; }
.landing .sky-pasta.depth .fq img { display: block; width: var(--w); height: auto; mix-blend-mode: multiply; filter: blur(var(--blur)); opacity: var(--op);
  animation: pasta-spin var(--spin) linear infinite; }
.landing .sky-pasta.depth .fq:nth-child(odd) img { animation-direction: reverse; }
.landing .sky-pasta.depth .lr { --dir-anim: fly-lr; }
.landing .sky-pasta.depth .tb { --dir-anim: fly-tb; }
.landing .sky-pasta.depth .dg { --dir-anim: fly-dg; }
@keyframes fly-lr { from { transform: translate(-14vw, 0); } 50% { transform: translate(50vw, 26px); } to { transform: translate(112vw, 0); } }
@keyframes fly-tb { from { transform: translate(0, -180px); } 50% { transform: translate(28px, 120px); } to { transform: translate(0, 420px); } }
@keyframes fly-dg { from { transform: translate(-10vw, -140px); } to { transform: translate(70vw, 440px); } }
@media (prefers-reduced-motion: reduce) { .landing .sky-pasta.depth .fq, .landing .sky-pasta.depth .fq img { animation: none; } }
/* pasta only ABOVE the couple's heads (Paolo, 17/10/2026): one thin band, three directions inside it */
.landing .sky-pasta.depth { top: 62px; height: 120px; }
.landing .sky-pasta.depth .fq { top: calc(var(--y) * .4); }
@keyframes fly-tb { from { transform: translate(0, -40px); } 50% { transform: translate(28px, 46px); } to { transform: translate(0, -40px); } }
@keyframes fly-dg { from { transform: translate(-10vw, -30px); } to { transform: translate(70vw, 60px); } }
.landing .sky-pasta.depth .fq img { width: calc(var(--w) * .6); }
/* v3 motion: animate position (left / margin-top) — reliable on every browser, stays inside the band above the heads */
@keyframes fly-lr { from { left: -12%; margin-top: 0; } 50% { margin-top: 26px; } to { left: 108%; margin-top: 0; } }
@keyframes fly-tb { from { margin-top: -50px; } 50% { margin-top: 70px; } to { margin-top: -50px; } }
@keyframes fly-dg { from { left: -12%; margin-top: -40px; } to { left: 80%; margin-top: 90px; } }
.landing .sky-pasta.depth .fq { transform: none; }
.landing .sky-pasta.depth { position: absolute; left: 0; right: 0; width: 100%; z-index: 1; pointer-events: none; }
/* ---------- seamless perpetual loop (Paolo, 17/10/2026): every path starts and ends OUTSIDE the visible band, no direction snaps ---------- */
@keyframes fly-lr { from { left: -12%; margin-top: 0; } to { left: 108%; margin-top: 18px; } }
@keyframes fly-tb { from { margin-top: -90px; } to { margin-top: 170px; } }            /* enters from above, exits below the band */
@keyframes fly-dg { from { left: -12%; margin-top: -90px; } to { left: 72%; margin-top: 170px; } }

/* 17/10/2026: pasta in two bands, never across the faces (Paolo). Same size as the home.
   Upper band = above the heads, lower band = table / feet. All periods divide 24 s: seamless loop. */
.landing .pasta-band { position: absolute; left: 0; right: 0; width: 100%; overflow: hidden; z-index: 1; pointer-events: none; }
.landing .pasta-band.up { top: 0; height: 18%; }
.landing .pasta-band.low { top: 60%; height: 24%; }
.landing .pasta-band .fb { position: absolute; left: -12%; top: var(--y); animation: band-fly var(--dur) linear var(--delay) infinite; }
.landing .pasta-band .fb img { display: block; width: var(--w); height: auto; mix-blend-mode: multiply;
  animation: band-rock var(--rock) ease-in-out infinite; }
.landing .pasta-band.low .fb img { animation-name: band-spin; animation-timing-function: linear; }
.landing .pasta-band .fb:nth-child(even) img { animation-direction: reverse; }
@keyframes band-fly { from { left: -12%; } to { left: 108%; } }
@keyframes band-rock { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes band-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (max-width: 760px) { .landing .pasta-band .fb img { width: calc(var(--w) * .5); } .landing .pasta-band .fb { top: calc(var(--y) * .4); } }
@media (prefers-reduced-motion: reduce) { .landing .pasta-band .fb, .landing .pasta-band .fb img { animation: none; } .landing .pasta-band .fb { left: 12%; } .landing .pasta-band .fb:nth-child(2) { left: 46%; } .landing .pasta-band .fb:nth-child(3) { left: 78%; } }
/* phone: the lower pasta band would cross the hero text; keep only the band above the heads */
@media (max-width: 760px) { .landing .pasta-band.low { display: none; } }