/* Campfire motion — warm, handmade, a little playful. Also loaded by Merit Badge (v5) and Trail Poster (v6). */

@keyframes cf-rise { from { opacity: 0; transform: translateY(0.55em) rotate(2.5deg); } to { opacity: 1; transform: none; } }
@keyframes cf-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes cf-pop { 0% { opacity: 0; transform: scale(0.55) rotate(-14deg); } 70% { opacity: 1; transform: scale(1.06) rotate(2deg); } 100% { opacity: 1; transform: none; } }
@keyframes cf-draw { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } }
@keyframes cf-deal { from { opacity: 0; transform: translateX(22px) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes cf-unveil { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes cf-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cf-flicker { 0%, 100% { filter: brightness(1) saturate(1); } 18% { filter: brightness(1.05) saturate(1.05); } 34% { filter: brightness(0.98); } 52% { filter: brightness(1.07) saturate(1.08); } 70% { filter: brightness(1.01); } 86% { filter: brightness(1.04); } }
@keyframes cf-bob { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-4px); } }

/* ── Hero build ── */
.hero { overflow: hidden; }
.fireflies { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-content { z-index: 1; }
.campfire .wrap { position: relative; z-index: 1; }
html[data-motion="on"] .hero-content .eyebrow { animation: cf-up 0.8s 0.15s both; }
html[data-motion="on"] .hero-content h1 .wi { animation: cf-rise 0.9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(0.3s + var(--i) * 75ms); }
html[data-motion="on"] .hero-content .hero-sub { animation: cf-up 0.9s calc(0.45s + var(--words, 8) * 75ms) both; }
html[data-motion="on"] .hero-content .search { animation: cf-up 0.9s calc(0.65s + var(--words, 8) * 75ms) both; }
html[data-motion="on"] .hero-content .stamp { animation: cf-pop 1s cubic-bezier(.3,1.3,.5,1) 1.4s both; }

/* Squiggle arrows draw themselves (dash values inherit into the <use> shadow tree) */
.eyebrow svg { stroke-dasharray: 80; stroke-dashoffset: 0; }
html[data-motion="on"] .hero .eyebrow svg { animation: cf-draw 1.1s ease 0.7s both; }
html[data-motion="on"] .reveal .eyebrow svg { stroke-dashoffset: 80; }
html[data-motion="on"] .reveal.is-in .eyebrow svg { animation: cf-draw 1.1s ease 0.25s both; }

/* ── Stats badges pop in, one after another ── */
html[data-motion="on"] .facts-row[data-anim] .fact { opacity: 0; }
html[data-motion="on"] .facts-row.is-in .fact { animation: cf-up 0.7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 90ms); }
html[data-motion="on"] .facts-row.is-in .fact-badge { animation: cf-pop 0.8s cubic-bezier(.3,1.3,.5,1) both; animation-delay: calc(var(--i, 0) * 90ms + 0.1s); }
.fact-badge { transition: transform 0.5s cubic-bezier(.3,1.3,.5,1); }
.fact:hover .fact-badge { transform: rotate(18deg) scale(1.06); }

/* ── Photo grid unveils ── */
html[data-motion="on"] .photo-grid.reveal { opacity: 1; transform: none; }
html[data-motion="on"] .photo-grid.reveal:not(.is-in) img { opacity: 0; }
html[data-motion="on"] .photo-grid.is-in img { animation: cf-unveil 1.2s cubic-bezier(.2,.8,.2,1) both; }
html[data-motion="on"] .photo-grid.is-in button:nth-child(2) img { animation-delay: 0.12s; }
html[data-motion="on"] .photo-grid.is-in button:nth-child(3) img { animation-delay: 0.22s; }
html[data-motion="on"] .photo-grid.is-in button:nth-child(4) img { animation-delay: 0.32s; }
html[data-motion="on"] .photo-grid.is-in button:nth-child(5) img { animation-delay: 0.42s; }

/* ── Booking card: the handwritten note writes itself on ── */
html[data-motion="on"] .book-card[data-anim] .hand { clip-path: inset(0 100% 0 0); }
html[data-motion="on"] .book-card.is-in .hand { animation: cf-write 1.4s steps(18) 0.6s both; }

/* ── Live blocks (animate as soon as data reveals them) ── */
html[data-motion="on"] .wknd:not([hidden]) .wknd-lead { animation: cf-up 0.7s both; }
html[data-motion="on"] .wknd:not([hidden]) .hh-wk { animation: cf-deal 0.6s cubic-bezier(.2,.8,.2,1) both; }
/* Guest book: waits until it's scrolled into view (main.js adds .is-in), then the score pops in while the
   rating counts up and the stars fill, and the review cards rise in one after another */
html[data-motion="on"] .gbook:not(.is-in) .hh-review, html[data-motion="on"] .gbook:not(.is-in) .gbook-score { opacity: 0; }
html[data-motion="on"] .gbook.is-in .hh-review { animation: cf-up 0.8s cubic-bezier(.2,.8,.2,1) both; }
html[data-motion="on"] .gbook.is-in .hh-review:nth-child(1) { animation-delay: 0.35s !important; }
html[data-motion="on"] .gbook.is-in .hh-review:nth-child(2) { animation-delay: 0.5s !important; }
html[data-motion="on"] .gbook.is-in .hh-review:nth-child(3) { animation-delay: 0.65s !important; }
html[data-motion="on"] .gbook.is-in .hh-review:nth-child(4) { animation-delay: 0.8s !important; }
html[data-motion="on"] .gbook.is-in .hh-review:nth-child(5) { animation-delay: 0.95s !important; }
html[data-motion="on"] .gbook.is-in .hh-review:nth-child(6) { animation-delay: 1.1s !important; }
html[data-motion="on"] .gbook.is-in .gbook-score { animation: cf-pop 0.9s cubic-bezier(.3,1.3,.5,1) both; }
.gbook-stars.is-filling { background: linear-gradient(90deg, var(--honey) var(--fill, 100%), rgba(255, 249, 238, 0.28) var(--fill, 100%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hh-wk:nth-child(2), .hh-review:nth-child(2) { animation-delay: 0.08s !important; }
.hh-wk:nth-child(3), .hh-review:nth-child(3) { animation-delay: 0.16s !important; }
.hh-wk:nth-child(4), .hh-review:nth-child(4) { animation-delay: 0.24s !important; }
.hh-wk:nth-child(5), .hh-review:nth-child(5) { animation-delay: 0.32s !important; }
.hh-wk:nth-child(6), .hh-review:nth-child(6) { animation-delay: 0.4s !important; }
.hh-wk:nth-child(7) { animation-delay: 0.48s !important; }
.hh-wk:nth-child(8) { animation-delay: 0.56s !important; }

/* ── Ambient loops ── */
html[data-motion="on"] .campfire-bg img { animation: cf-flicker 5.5s ease-in-out infinite; }
html[data-motion="on"] .rating-patch, html[data-motion="on"] .gbook-score:hover { animation-name: cf-bob; animation-duration: 4s; animation-iteration-count: infinite; }