/* Partner promotions — live logos from the partner sites + cards, banner, splash */
:root { --gold: #bca362; --gold-2: #e8cf86; --k2r: #14637f; --cyan: #22c3e6; --navy: #0a1628; }

/* ---------- Andronike's Villa: golden glow + shine sweep (as on kefalonia2rent.villas) ---------- */
.glow-logo { position: relative; display: inline-block; line-height: 0; }
.glow-logo img { width: auto; display: block; animation: glow 3.2s ease-in-out infinite; }
.glow-logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,250,225,.95) 47%, #fff 50%, rgba(255,250,225,.95) 53%, transparent 70%) 0 0 / 300% 100% no-repeat;
  animation: shine 4.5s ease-in-out infinite;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}
.glow-logo.flash::after { animation: shine 1.1s ease-in-out 1, shine 4.5s ease-in-out 1.1s infinite; }
@keyframes shine { 0% { background-position: 100% 0; } 60%, 100% { background-position: -50% 0; } }
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(240,210,140,.55)) drop-shadow(0 0 14px rgba(188,163,98,.45)) drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
  50% { filter: drop-shadow(0 0 9px rgba(255,225,150,.95)) drop-shadow(0 0 28px rgba(212,180,100,.75)) drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
}

/* ---------- logo tiles ---------- */
.sfx-tile { flex: none; width: 112px; height: 112px; border-radius: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 0; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px -12px rgba(0,0,0,.5); }
.sfx-tile-k2r { background: radial-gradient(120% 90% at 30% 20%, #2b8fb5 0%, #14637f 55%, #0b4258 100%); }
.sfx-tile-sfx { background: radial-gradient(110% 90% at 50% 30%, #13284a 0%, #0a1628 70%); }
.sfx-tile svg { display: block; overflow: visible; }
.sfx-tile.mini { width: 58px; height: 58px; border-radius: 12px; }

/* ---------- Kefalonia2Ride: scooter riding the "2" ---------- */
.sfx-two { filter: drop-shadow(0 5px 10px rgba(0,0,0,.35)); cursor: pointer; }
.sfx-track { fill: none; stroke: #f4c43b; stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
.sfx-tread { fill: none; stroke: #b8891a; stroke-width: 7; stroke-dasharray: 3 5; opacity: .55; }
.sfx-wheel { transform-box: fill-box; transform-origin: center; }
.sfx-moving .sfx-wheel { animation: sfxSpin .35s linear infinite; }
.sfx-moving .sfx-bike { animation: sfxBounce .32s ease-in-out infinite alternate; }
.sfx-puffs circle { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sfx-parked .sfx-puffs circle { animation: sfxPuff 1.1s ease-out infinite; }
.sfx-parked .sfx-puffs .p2 { animation-delay: .37s; }
.sfx-parked .sfx-puffs .p3 { animation-delay: .74s; }

/* ---------- Sfalagi Systems: spider, legs draw in, packets orbit ---------- */
.sfx-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sfx-pop { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sfx-in .sfx-draw { animation: sfxDraw 1.6s cubic-bezier(.6,0,.2,1) forwards; }
.sfx-in .sfx-pop { animation: sfxPop .45s ease-out forwards; }
.sfx-pulse { transform-box: fill-box; transform-origin: center; animation: sfxPulse 2.6s ease-out infinite; }

@keyframes sfxSpin { to { transform: rotate(360deg); } }
@keyframes sfxBounce { to { transform: translateY(-2px) rotate(-.6deg); } }
@keyframes sfxPuff { 0% { transform: translate(0,0) scale(.4); opacity: .85; } 100% { transform: translate(-26px,-8px) scale(1.9); opacity: 0; } }
@keyframes sfxDraw { to { stroke-dashoffset: 0; } }
@keyframes sfxPop { 0% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes sfxPulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }

/* ---------- partners tab ---------- */
.partners { display: grid; gap: 16px; max-width: 560px; margin: 0 auto; }
.partners-eyebrow { text-align: center; }
.pcard { border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); color: var(--fg); text-decoration: none; }
.pbody { padding: 16px 18px 18px; display: grid; gap: 8px; }
.pbody p { margin: 0; color: var(--muted); }
.pbody h3 { margin: 0; font: 26px/1.1 var(--font-display); }
.eyebrow.gold { color: var(--gold); } .eyebrow.cyan { color: var(--cyan); }

.pcard.villa { background: #14110c; border-color: #3a3122; color: #f3ead6; }
.pcard.villa .pbody p { color: #cdbf9f; }
.gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; aspect-ratio: 3 / 2; max-width: 100%; }
.gallery::-webkit-scrollbar { display: none; }
.gallery figure { flex: 0 0 100%; margin: 0; scroll-snap-align: center; position: relative; background: linear-gradient(135deg, #2a2418, #14110c); }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery figcaption { position: absolute; left: 12px; bottom: 12px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(20,17,12,.6); padding: 4px 8px; border-radius: 6px; }
.dots { display: flex; justify-content: center; gap: 6px; padding: 10px 0 0; }
.dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: #5a4d33; cursor: pointer; transition: width .25s, background .25s; }
.dots button.on { width: 22px; border-radius: 4px; background: var(--gold); }
.villa-logo-band { display: flex; justify-content: center; padding: 26px 0 6px; cursor: pointer; background: radial-gradient(60% 80% at 50% 50%, #2a2213, #14110c); }

.pcard.ride, .pcard.sfalagi { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 4px; align-items: center; padding: 16px 0 0 16px; }
.pcard.ride .pbody, .pcard.sfalagi .pbody { padding-top: 0; }
.pcard.ride .btn, .pcard.sfalagi .btn { grid-column: 1 / -1; }
.pcard.ride h3 span { color: #f4c43b; display: inline-block; animation: twoBob 1.6s ease-in-out infinite; }
@keyframes twoBob { 50% { transform: translateY(-4px); } }
.pcard.sfalagi { background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--cyan) 10%, var(--surface))); }
@media (max-width: 420px) {
  .pcard.ride, .pcard.sfalagi { grid-template-columns: 1fr; justify-items: center; padding: 18px 0 0; text-align: center; }
  .pcard.ride .pbody, .pcard.sfalagi .pbody { padding-top: 10px; width: 100%; }
}
.btn.gold { background: linear-gradient(135deg, #a8761d, #e8cf86 50%, #a8761d); background-size: 200% 100%; border: 0; color: #1d150a; animation: goldBtn 4s ease-in-out infinite; }
@keyframes goldBtn { 50% { background-position: 100% 0; } }
.btn.sun { background: #f4c43b; border-color: #f4c43b; color: #2a1d00; }
.btn.cyan { background: var(--cyan); border-color: var(--cyan); color: var(--navy); }
.tap-hint { text-align: center; color: var(--muted); font-size: 12px; margin: 0; }

/* ---------- banner inside a site sheet ---------- */
.sbanner { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; text-decoration: none; margin-top: 6px; }
.sbanner b { display: block; font-size: 14px; }
.sbanner small { display: block; font-size: 12px; opacity: .8; }
.sbanner.villa { background: #14110c; color: #f3ead6; }
.sbanner.villa .glow-logo img { height: 46px; }
.sbanner.ride { background: linear-gradient(120deg, #0b4258, #14637f); color: #fff; }
.sbanner::after { content: "→"; margin-left: auto; font-weight: 700; }

/* ---------- splash: Sfalagi Systems only ---------- */
.splash { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: radial-gradient(110% 80% at 50% 30%, #13284a, #0a1628 70%); color: #f2f6fa; transition: opacity .5s; padding: 24px; }
.splash.out { opacity: 0; pointer-events: none; }
.splash-in { display: grid; justify-items: center; gap: 14px; text-align: center; }
.splash-spider { width: 190px; height: 190px; border-radius: 34px; animation: up .6s ease-out; }
.splash h1 { margin: 6px 0 0; font: 800 30px/1.1 var(--font-body); letter-spacing: .03em; }
.splash-langs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.splash-langs li { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #8fb2cf; opacity: 0; animation: langIn .45s ease-out forwards; animation-delay: calc(.5s + var(--i) * .16s); }
.splash-langs li.cur { color: #22c3e6; font-weight: 700; }
@keyframes langIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .splash-langs li { opacity: 1; }
  .sfx-draw { stroke-dashoffset: 0; } .sfx-pop { opacity: 1; }
}

.splash .splash-by { margin: 0; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: #22c3e6; font-weight: 700; animation: langIn .5s ease-out .5s both; }

/* ---------- sponsors page ---------- */
.sp-head { text-align: center; display: grid; justify-items: center; gap: 6px; padding: 8px 8px 4px; }
.sp-head svg { width: 34px; height: 34px; color: #e2546a; animation: beat 1.8s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.1); } }
.sp-head h2 { margin: 0; font: 28px/1.1 var(--font-display); }
.sp-head p { margin: 0; color: var(--muted); max-width: 40ch; text-wrap: balance; }
.sp-tier { text-align: center; margin: 6px 0 -4px; }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.sp-card { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 14px; }
.sp-card img { max-width: 100%; height: 64px; object-fit: contain; }
.sp-card.big img { height: 110px; }
.sp-card b { display: block; } .sp-card small { display: block; color: var(--muted); font-size: 12.5px; }
.sp-mono { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: var(--surface-2); font: 28px var(--font-display); }
.sp-become { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px; border: 2px dashed var(--line); background: transparent; box-shadow: none; }
.sp-become .btn { grid-column: 1 / -1; justify-self: stretch; }
.sp-become b { display: block; font: 19px/1.2 var(--font-display); }
.sp-become small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.sp-plus { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; color: var(--aqua); border: 2px solid var(--aqua); }
.sp-become:hover { border-color: var(--aqua); }