/* =====================================================================
   CragAdvisor v3 sample (boss Line #6158, 2026-10-22):
   the LIVE look, kept — richer light sections + animations.
   Live palette + fonts only: newsprint / black / red / arrow-yellow;
   Anton, Archivo Black, Lora, Permanent Marker, Special Elite.
   Route lines + mountain silhouettes stay OFF (boss design pass 2026-06-11).
   Motion = transform / opacity / stroke-dashoffset only; html.motion gates it.
   ===================================================================== */
:root { --yellow: #ffeb3b; --tape: rgba(236, 226, 190, .88); --paper-dark: #e3dfd5; }

/* ---------- shared bits: masking tape ---------- */
.tape {
  position: absolute; z-index: 4; width: 92px; height: 26px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 7px),
    var(--tape);
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 4% 94%, 0 50%);
}
.tape-top { top: -13px; left: 50%; margin-left: -46px; transform: rotate(-3deg); }
.tape-tl  { top: -10px; left: -22px; transform: rotate(-38deg); }
.tape-tr  { top: -10px; right: -22px; transform: rotate(38deg); }
.tape-bl  { bottom: -10px; left: -22px; transform: rotate(38deg); }
.tape-br  { bottom: -10px; right: -22px; transform: rotate(-38deg); }

/* ---------- caution-tape ticker under the hero ---------- */
.crag-ticker-wrap { position: relative; z-index: 6; overflow: hidden; margin-top: -30px; padding: 18px 0 14px; }
.crag-ticker {
  position: relative; z-index: 6; overflow: hidden; white-space: nowrap;
  background: var(--red); color: var(--white);
  border-top: 3px solid var(--black); border-bottom: 3px solid var(--black);
  transform: rotate(-1.2deg); margin: 0 -24px; padding: 9px 0;
  box-shadow: 0 6px 0 rgba(0,0,0,.18);
}
.crag-ticker-track { display: inline-flex; gap: 0; font-family: 'Archivo Black', sans-serif; font-size: 17px; letter-spacing: 2px; text-transform: uppercase; }
.crag-ticker-track span { padding: 0 22px; }
.crag-ticker-track span.star { color: var(--yellow); padding: 0; }
html.motion .crag-ticker-track { animation: ticker 38s linear infinite; }
.crag-ticker:hover .crag-ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- featured section: torn paper + halftone + chalk ---------- */
.v3-paper { isolation: isolate; }
.v3-paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 92% 12%, rgba(20,20,20,.16) 1.6px, transparent 1.8px) 0 0 / 11px 11px,
    radial-gradient(circle at 8% 88%, rgba(214,40,40,.18) 1.6px, transparent 1.8px) 0 0 / 11px 11px;
  -webkit-mask-image: radial-gradient(ellipse 34% 46% at 88% 8%, #000, transparent 70%), radial-gradient(ellipse 30% 40% at 6% 96%, #000, transparent 70%);
          mask-image: radial-gradient(ellipse 34% 46% at 88% 8%, #000, transparent 70%), radial-gradient(ellipse 30% 40% at 6% 96%, #000, transparent 70%);
  -webkit-mask-composite: source-over; mask-composite: add;
}
.section-header h2 { position: relative; }
.tape-label {
  position: relative; display: inline-block; vertical-align: middle; margin-left: 18px; top: -6px;
  font-family: 'Permanent Marker', cursive; font-size: 15px; letter-spacing: .5px; text-transform: none; color: var(--black);
  padding: 4px 16px; transform: rotate(-4deg);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 2px, transparent 2px 7px), var(--tape);
  clip-path: polygon(2% 0, 98% 8%, 100% 50%, 97% 100%, 3% 92%, 0 50%);
}

/* ---------- cards: pinned polaroids ---------- */
.magazine-spread { padding-top: 10px; }
.v3-card { transform: rotate(var(--tilt, 0deg)); transition: transform .35s cubic-bezier(.2,.8,.2,1.2); will-change: transform; }
.v3-card:hover { transform: rotate(0deg) translate(-4px, -6px); }
.v3-card.crag-card:hover::after { transform: translate(4px, 4px); }
.crag-card::after, .feature-card::before { transition: transform .35s; }
.v3-card.feature-card:hover::before { transform: translate(5px, 5px); }
.v3-card .crag-card-img img, .v3-card .feature-card-img img { transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .5s; }
.v3-card:hover .crag-card-img img, .v3-card:hover .feature-card-img img { transform: scale(1.06); }

.crag-stats {
  font-family: 'Special Elite', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--black); margin: -4px 0 10px; display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline;
}
.crag-stats b { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 17px; color: var(--red); letter-spacing: 1px; }
.crag-stats .dot { opacity: .35; padding: 0 2px; }
.feature-card .crag-stats { font-size: 13px; margin: 0 0 14px; }
.feature-card .crag-stats b { font-size: 22px; }

.photo-credit {
  position: absolute; z-index: 3; right: 0; bottom: 0; max-width: 92%;
  font-family: 'Special Elite', monospace; font-size: 10px; color: var(--white);
  background: rgba(20,20,20,.72); padding: 3px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
img.standin { filter: grayscale(1) contrast(1.15) brightness(.9); }
.v3-card:hover img.standin { filter: none; }
.standin-stamp {
  position: absolute; z-index: 3; top: 16%; left: 50%; transform: translateX(-50%) rotate(-9deg);
  font-family: 'Archivo Black', sans-serif; font-size: 22px; letter-spacing: 3px; color: var(--red);
  border: 4px double var(--red); padding: 2px 12px; background: rgba(248,246,241,.94); white-space: nowrap;
}
.standin-note {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  font-family: 'Special Elite', monospace; font-size: 10.5px; line-height: 1.3; color: var(--white);
  background: rgba(20,20,20,.8); padding: 5px 8px;
}
.feature-card-img .standin-stamp { font-size: 30px; }
.new-sticker {
  position: absolute; z-index: 5; top: -14px; right: -12px; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; transform: rotate(12deg);
  background: var(--yellow); color: var(--black); border: 3px solid var(--black);
  font-family: 'Permanent Marker', cursive; font-size: 15px; box-shadow: 3px 3px 0 var(--black);
}

/* ---------- THE BELGIAN STASH (river map, live ink style) ---------- */
.v3-stash { position: relative; }
.stash-count { font-family: 'Special Elite', monospace; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.stash-count b { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 22px; color: var(--red); }
.stash-note { font-family: 'Permanent Marker', cursive; font-size: 20px; color: var(--red); transform: rotate(-1.5deg); margin: 4px 0 40px; padding-left: 28px; }
.stash-map {
  position: relative; margin: 0; padding: 22px 22px 12px; background: var(--white);
  border: 3px solid var(--black); box-shadow: 8px 8px 0 var(--black); transform: rotate(.4deg);
}
.stash-map::before { /* halftone wash in the paper */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(circle, rgba(20,20,20,.12) 1px, transparent 1.3px) 0 0 / 7px 7px;
  -webkit-mask-image: linear-gradient(135deg, #000, transparent 45%); mask-image: linear-gradient(135deg, #000, transparent 45%);
}
.stash-map svg { width: 100%; height: auto; display: block; overflow: visible; position: relative; }
.stash-map figcaption { font-family: 'Special Elite', monospace; font-size: 11px; opacity: .6; margin-top: 8px; text-transform: uppercase; letter-spacing: .5px; }
.st-river { fill: none; stroke: var(--black); stroke-linecap: round; stroke-linejoin: round; }
.st-river.major { stroke-width: 3.4; }
.st-river.minor { stroke-width: 1.8; }
.st-rname { font-family: 'Permanent Marker', cursive; font-size: 22px; fill: var(--black); opacity: .55; }
.st-town { font-family: 'Special Elite', monospace; font-size: 13px; fill: var(--black); opacity: .6; text-transform: uppercase; }
.st-pin { cursor: pointer; }
.stash-map .hit { fill: transparent; }
.st-pin .dot { fill: var(--red); stroke: var(--black); stroke-width: 3.5; transition: r .2s; }
.st-pin text {
  font-family: 'Archivo Black', sans-serif; font-size: 14px; fill: var(--black); text-transform: uppercase;
  paint-order: stroke; stroke: var(--white); stroke-width: 4px; stroke-linejoin: round;
}
.st-pin .hover-only { display: none; }
.st-pin:hover .hover-only, .st-pin:focus .hover-only, .st-pin.on .hover-only { display: inline; }
.st-pin:hover .dot, .st-pin.on .dot { r: 10; fill: var(--yellow); }
.st-pin:focus-visible { outline: none; }
.st-pin:focus-visible .dot { stroke: var(--red); stroke-width: 4; }
.stash-card {
  position: absolute; z-index: 6; width: 250px; pointer-events: none;
  background: var(--white); border: 3px solid var(--black); box-shadow: 5px 5px 0 var(--red); padding: 12px 14px;
  transition: opacity .15s, transform .15s;
}
.stash-card.enter { opacity: 0; transform: translateY(4px) rotate(-1deg); }
.stash-card h4 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 24px; line-height: 1; text-transform: uppercase; margin-bottom: 6px; }
.stash-card p { font-family: 'Special Elite', monospace; font-size: 12px; text-transform: uppercase; margin: 0; }
.stash-card p b { font-family: 'Anton', sans-serif; font-weight: 400; color: var(--red); font-size: 17px; }
.stash-card a { pointer-events: auto; color: var(--red); font-family: 'Permanent Marker', cursive; display: inline-block; margin-top: 6px; }

/* ---------- community CTA: darker paper, giant SEND IT, doodles ---------- */
.v3-cta { position: relative; isolation: isolate; overflow: hidden; }
.v3-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -2; background: var(--paper-dark);
}
.v3-cta::after { /* halftone rising from the bottom */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(20,20,20,.16) 1.4px, transparent 1.7px) 0 0 / 9px 9px;
  -webkit-mask-image: linear-gradient(0deg, #000, transparent 55%); mask-image: linear-gradient(0deg, #000, transparent 55%);
}
.cta-bgword {
  position: absolute; z-index: -1; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(-6deg);
  font-family: 'Anton', sans-serif; font-size: clamp(120px, 22vw, 340px); line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 2px rgba(214,40,40,.16); pointer-events: none; user-select: none;
}
.v3-cta .cta-card { position: relative; }
.v3-cta .cta-card:nth-child(1) { transform: rotate(-1deg); }
.v3-cta .cta-card:nth-child(2) { transform: rotate(.8deg); }
.v3-cta .cta-card:nth-child(3) { transform: rotate(-.6deg); }
.v3-cta .cta-card:hover { transform: rotate(0) translate(-3px, -4px); box-shadow: 8px 8px 0 var(--red); }
.cta-icon { height: 64px; margin-bottom: 18px; }
.doodle { width: 80px; height: 64px; display: inline-block; overflow: visible; }
.doodle .ink { fill: none; stroke: var(--black); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.doodle .ink.red { stroke: var(--red); }
.doodle .ink.dash { stroke-dasharray: 5 5; }
.cta-card:hover .doodle { animation: wiggle .5s ease-in-out; }
@keyframes wiggle { 25% { transform: rotate(-6deg); } 75% { transform: rotate(5deg); } }
.dirtbag-quote { position: relative; display: inline-block; border-left: 0; padding-left: 0; }
.dirtbag-quote::after { /* marker underline */
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -10px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C 80 2, 160 11, 240 5 S 360 3, 397 7' fill='none' stroke='%23141414' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: left center;
}

/* =====================================================================
   MOTION (html.motion only; html.ready = webfonts in)
   ===================================================================== */
html.motion:not(.ready) .hero *, html.motion:not(.ready) .crag-ticker * { animation-play-state: paused !important; }

/* hero copy */
html.motion .hero-tagline { opacity: 0; animation: v3-slide-r .6s .05s cubic-bezier(.2,.8,.2,1) forwards; }
.hero h1 i.h1-a { font-style: normal; display: inline-block; }
html.motion .hero h1 i.h1-a { opacity: 0; transform-origin: left bottom; }
html.motion .hero h1 > span { opacity: 0; transform-origin: left bottom; }
html.motion .hero h1 i.h1-a { animation: v3-stamp .55s .2s cubic-bezier(.3,1.5,.5,1) forwards; }
html.motion .hero h1 > span { animation: v3-stamp .55s .42s cubic-bezier(.3,1.5,.5,1) forwards; }
html.motion .hero-content > p { opacity: 0; animation: v3-up .6s .7s ease-out forwards; }
html.motion .search-box { opacity: 0; animation: v3-up .6s .85s ease-out forwards; }
html.motion .search-doodle { clip-path: inset(0 100% 0 0); animation: v3-write .7s 1.25s steps(14) forwards; }
html.motion .quick-links { opacity: 0; animation: v3-up .5s 1.05s ease-out forwards; }
/* hero photo settles; the arrow writes itself */
html.motion .hero-image img { transform: scale(1.08); animation: v3-settle 1.8s .1s cubic-bezier(.2,.8,.2,1) forwards; }
html.motion .hero-arrow-text { opacity: 0; transform: scale(.4) rotate(-8deg); animation: v3-pop .45s 1.25s cubic-bezier(.3,1.6,.5,1) forwards; }
html.motion .hero-arrow-svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.motion .hero-arrow-svg path:nth-child(1) { animation: v3-draw .8s 1.55s cubic-bezier(.6,0,.3,1) forwards; }
html.motion .hero-arrow-svg path:nth-child(2) { animation: v3-draw .25s 2.3s ease-out forwards; }
html.motion .rocky-sticker { opacity: 0; animation: v3-slap .4s 2.6s cubic-bezier(.3,1.6,.5,1) forwards; }
html.motion .crag-ticker { transform: rotate(-1.2deg) translateX(-110%); animation: v3-tape .7s 1.6s cubic-bezier(.2,.8,.2,1) forwards; }

@keyframes v3-slide-r { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes v3-stamp { 0% { opacity: 0; transform: scale(1.6) rotate(-4deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes v3-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes v3-write { to { clip-path: inset(0 0 0 0); } }
@keyframes v3-settle { to { transform: scale(1); } }
@keyframes v3-pop { to { opacity: 1; transform: none; } }
@keyframes v3-draw { to { stroke-dashoffset: 0; } }
@keyframes v3-slap { 0% { opacity: 0; transform: rotate(-30deg) scale(2.2); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
@keyframes v3-tape { to { transform: rotate(-1.2deg) translateX(0); } }

/* scroll reveals */
html.motion .rv { opacity: 0; transform: translateY(22px); transition: opacity .6s ease-out, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--sd, 0s); }
html.motion .rv.in { opacity: 1; transform: none; }
/* cards: pinned down onto the page */
html.motion .v3-card.rv { transform: translateY(-36px) rotate(calc(var(--tilt, 0deg) + 7deg)); transition: opacity .45s ease-out, transform .75s cubic-bezier(.3,1.35,.5,1); transition-delay: var(--sd, 0s); }
html.motion .v3-card.rv.in { transform: rotate(var(--tilt, 0deg)); }
html.motion .v3-card.rv.in:hover { transform: rotate(0deg) translate(-4px, -6px); transition-delay: 0s; }
html.motion .rv .tape, html.motion .rv.tape-label, html.motion .rv .tape-label { transform-origin: left center; }
html.motion .v3-card.rv .tape { opacity: 0; transition: opacity .2s; transition-delay: calc(var(--sd, 0s) + .55s); }
html.motion .v3-card.rv.in .tape { opacity: 1; }
html.motion .tape-label { clip-path: inset(0 100% 0 0); transition: clip-path .5s .35s ease-out; }
html.motion .in .tape-label, html.motion .section-header.in .tape-label { clip-path: polygon(2% 0, 98% 8%, 100% 50%, 97% 100%, 3% 92%, 0 50%); }
/* doodles draw; quote underline draws */
html.motion .doodle .ink { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.motion .doodle .ink.dash { stroke-dasharray: none; opacity: 0; transition: opacity .4s 1.1s; }
html.motion .in .doodle .ink { animation: v3-draw .9s cubic-bezier(.5,0,.3,1) forwards; animation-delay: calc(var(--sd, 0s) + .25s); }
html.motion .in .doodle .ink.red { animation-delay: calc(var(--sd, 0s) + .7s); }
html.motion .in .doodle .ink.dash { opacity: 1; animation: none; }
html.motion .dirtbag-quote::after { transform: scaleX(0); transition: transform .8s .3s cubic-bezier(.6,0,.3,1); }
html.motion .dirtbag-quote.in::after { transform: scaleX(1); }
html.motion .cta-bgword { opacity: 0; transition: opacity 1.2s ease-out, transform 1.6s cubic-bezier(.2,.8,.2,1); transform: translate(-50%, -40%) rotate(-6deg); }
html.motion .cta-bgword.in { opacity: 1; transform: translate(-50%, -50%) rotate(-6deg); }
/* map */
html.motion .stash-map.rv { transform: translateY(30px) rotate(-1.5deg); }
html.motion .stash-map.rv.in { transform: rotate(.4deg); }
html.motion .st-river { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
html.motion .stash-map.in .st-river { animation: v3-draw-len .55s linear forwards; animation-delay: var(--rd, 0s); }
@keyframes v3-draw-len { to { stroke-dashoffset: 0; } }
html.motion .st-pin { opacity: 0; }
html.motion .stash-map.in .st-pin { animation: v3-pin .5s cubic-bezier(.3,1.5,.5,1) forwards; animation-delay: var(--d, 0s); }
@keyframes v3-pin { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
html.motion .st-rname, html.motion .st-town { opacity: 0; transition: opacity .8s 1.5s; }
html.motion .stash-map.in .st-rname { opacity: .55; }
html.motion .stash-map.in .st-town { opacity: .6; }

/* ---------- mobile ---------- */
.say-tap { display: none; }
@media (max-width: 768px) {
  .say-hover { display: none; } .say-tap { display: inline; }
  .v3-stash .section-header { flex-wrap: wrap; align-items: baseline; }
  .v3-stash .section-header h2 { width: 100%; }
  .stash-count { margin-top: 6px; }
  .crag-ticker-track { font-size: 14px; }
  .tape-label { display: block; width: max-content; margin: 8px 0 0; top: 0; font-size: 13px; }
  .v3-card { --tilt: 0deg !important; }
  .stash-map { padding: 12px 0 10px; margin: 0 -8px; }
  .stash-pan { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .stash-pan::-webkit-scrollbar { display: none; }
  .stash-pan svg { width: 760px; max-width: none; }
  .stash-card { position: static; width: auto; margin: 10px 10px 0; pointer-events: auto; }
  .stash-map figcaption { padding: 0 10px; }
  .stash-note { font-size: 17px; }
  .tape-tl, .tape-tr, .tape-bl, .tape-br { width: 64px; height: 20px; }
  .tape-tl, .tape-bl { left: -10px; } .tape-tr, .tape-br { right: -10px; }
}

@media (prefers-reduced-motion: reduce) {
  .crag-ticker-track { animation: none !important; }
  .v3-card, .v3-card:hover { transition: none; }
}

/* tilt makes each card a stacking context: keep the offset shadow BEHIND the paper */
.v3-card { display: flex; flex-direction: column; }
.v3-card .feature-card-content, .v3-card .crag-card-content { background: var(--white); position: relative; z-index: 1; flex: 1; }
.v3-card .feature-card-img, .v3-card .crag-card-img { position: relative; z-index: 1; flex: none; }