/* TRIP-TIP · polish.css · שכבת עיצוב תלת-ממדית · פותח ומתוחזק על ידי רוני שניידר · v1.1 */
:root {
  --depth1: 0 1px 0 rgba(255,255,255,.18) inset, 0 -1px 0 rgba(0,0,0,.25) inset, 0 2px 4px rgba(0,0,0,.18), 0 10px 24px rgba(3,8,26,.35);
  --depth2: 0 1px 0 rgba(255,255,255,.22) inset, 0 -2px 0 rgba(0,0,0,.25) inset, 0 6px 12px rgba(0,0,0,.22), 0 24px 60px rgba(3,8,26,.5);
  --glassHi: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04) 45%, rgba(255,255,255,.02));
  --rimGrad: linear-gradient(135deg, rgba(255,255,255,.45), rgba(255,255,255,.06) 40%, rgba(46,230,197,.35) 100%);
}

html, body { overflow-x: clip; max-width: 100%; }
.scene { overflow: clip; overflow-clip-margin: 40px; }

/* ---------- רקע עם עומק ---------- */
.sky { perspective: 900px; }
.sky > * { transition: transform .6s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.sky::after { content: ''; position: absolute; inset: auto 0 0 0; height: 45vh; background: linear-gradient(180deg, transparent, rgba(7,13,32,.85)); pointer-events: none; }
.sky::before { content: ''; position: absolute; left: -10%; right: -10%; bottom: -8vh; height: 40vh; transform: rotateX(70deg); transform-origin: bottom; background-image: linear-gradient(rgba(46,230,197,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(46,230,197,.18) 1px, transparent 1px); background-size: 60px 60px; mask-image: linear-gradient(180deg, transparent, #000 70%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); animation: gridmove 6s linear infinite; z-index: 1; }
@keyframes gridmove { to { background-position: 0 60px, 0 0; } }

/* ---------- סרגל עליון ---------- */
.topbar { background: linear-gradient(180deg, rgba(14,26,60,.82), rgba(11,21,48,.55)); box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.08) inset; }
.brand-txt { display: grid; line-height: 1; }
.brand .by { font-family: Heebo, sans-serif; font-size: 11px; letter-spacing: .5px; color: var(--mute); font-weight: 500; margin-top: 4px; }
.logo { box-shadow: 0 0 0 3px rgba(255,255,255,.12), 0 6px 18px rgba(255,122,89,.55), 0 -3px 6px rgba(0,0,0,.25) inset, 0 3px 6px rgba(255,255,255,.4) inset; animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: scaleX(-1) translateY(-3px) rotate(-6deg); } }

/* ---------- כפתורים תלת-ממדיים ---------- */
.cta { position: relative; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 -3px 0 rgba(150,50,20,.35) inset, 0 6px 0 #c4502f, 0 14px 30px rgba(255,122,89,.5); transform: translateY(-3px); transition: transform .15s, box-shadow .15s; overflow: hidden; }
.cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: sheen 4.5s ease-in-out infinite; }
@keyframes sheen { 60%, 100% { transform: translateX(120%); } }
.cta:hover { transform: translateY(-5px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 -3px 0 rgba(150,50,20,.35) inset, 0 8px 0 #c4502f, 0 20px 40px rgba(255,122,89,.6); }
.cta:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 1px 0 #c4502f, 0 6px 14px rgba(255,122,89,.4); }
.ghost { background: var(--glassHi), var(--glass); box-shadow: var(--depth1); transition: transform .15s, box-shadow .15s, background .2s; }
.ghost:hover { transform: translateY(-2px); }
.ghost:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0,0,0,.3); }

/* ---------- זכוכית עם שוליים מוארים ---------- */
.choice, .dest, .feat div, .panel, .day, .kpis div, .verdict-box, .tabs a {
  background: var(--glassHi), rgba(16,30,70,.55);
  box-shadow: var(--depth1);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.choice, .dest, .feat div, .panel, .day { position: relative; border-color: transparent; }
.choice::before, .dest::before, .feat div::before, .panel::before, .day::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: var(--rimGrad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.choice.on, .dest.on { box-shadow: 0 0 0 2px var(--coral), 0 0 30px rgba(255,122,89,.45), var(--depth2); }
.choice .ic { transform: translateZ(30px); filter: drop-shadow(0 10px 14px rgba(0,0,0,.45)); transition: transform .25s; }
.choice:hover .ic { transform: translateZ(40px) scale(1.12); }

/* ---------- אפקט הטיה (נשלט ב-fx.js) ---------- */
.tilt { transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0)); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; will-change: transform; }
.tilt.hot { --lift: -6px; transition: transform .08s linear, box-shadow .2s; box-shadow: var(--depth2); }
.tilt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), transparent 45%); }
.tilt.hot::after { opacity: 1; }
.choice:hover, .dest:hover { transform: none; }
.choice.tilt:hover, .dest.tilt:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0)); }

/* ---------- מסך פתיחה תלת-ממדי ---------- */
.hero3d { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 20px; text-align: right; padding: 7vh 0 5vh; }
.hero3d .hero-txt { position: relative; z-index: 2; }
.hero3d .lead { margin: 18px 0 30px; }
.hero3d h1 { text-shadow: 0 2px 0 rgba(0,0,0,.25), 0 14px 40px rgba(0,0,0,.45); }
.hero3d .feat, .hero3d .types-strip { grid-column: 1 / -1; }
.hero3d .feat { max-width: none; margin-top: 30px; }
.hero3d .feat div { padding: 20px 10px; transform-style: preserve-3d; }
.hero3d .feat b { font-size: 34px; transform: translateZ(26px); filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
.hero-badge { background: var(--glassHi), rgba(16,30,70,.6); box-shadow: var(--depth1); }

.scene { position: relative; height: 460px; perspective: 1100px; }
.scene-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--sx, 8deg)) rotateY(var(--sy, -10deg)); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.halo { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px; border-radius: 50%; background: radial-gradient(circle, rgba(46,230,197,.35), rgba(140,123,255,.18) 45%, transparent 70%); filter: blur(20px); transform: translateZ(-120px); animation: pulse 5s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .6; transform: translateZ(-120px) scale(1.08); } }
.sphere { position: absolute; left: 50%; top: 50%; width: 280px; height: 280px; margin: -140px; transform-style: preserve-3d; animation: spin 26s linear infinite; }
@keyframes spin { from { transform: rotateX(-18deg) rotateY(0); } to { transform: rotateX(-18deg) rotateY(360deg); } }
.sphere .core { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #bff6ff 0%, #39b7e8 18%, #1c5fb8 45%, #0b2a6b 75%, #061638 100%); box-shadow: 0 0 60px rgba(46,230,197,.45), inset -30px -40px 70px rgba(0,0,0,.55), inset 18px 14px 40px rgba(255,255,255,.25); animation: counter 26s linear infinite; }
.sphere .core::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse 30% 18% at 40% 38%, rgba(61,220,151,.75), transparent 70%), radial-gradient(ellipse 22% 30% at 64% 58%, rgba(61,220,151,.6), transparent 70%), radial-gradient(ellipse 16% 10% at 28% 66%, rgba(255,209,102,.55), transparent 70%); mix-blend-mode: screen; animation: land 13s linear infinite; }
@keyframes counter { from { transform: rotateY(0) rotateX(18deg); } to { transform: rotateY(-360deg) rotateX(18deg); } }
@keyframes land { from { background-position: 0 0, 0 0, 0 0; transform: translateX(-6%); } 50% { transform: translateX(6%); } to { transform: translateX(-6%); } }
.mer { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(160,240,255,.35); transform: rotateY(var(--a)); box-shadow: 0 0 10px rgba(46,230,197,.25); }
.par { position: absolute; left: 50%; top: 50%; --s: calc(1 - (var(--t) * var(--t)) / 4200); width: calc(280px * var(--s)); height: calc(280px * var(--s)); margin-left: calc(-140px * var(--s)); margin-top: calc(-140px * var(--s)); border-radius: 50%; border: 1.5px solid rgba(255,209,102,.3); transform: rotateX(90deg) translateZ(calc(var(--t) * 2.1px)); }
.ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.28); transform-style: preserve-3d; }
.ring.r1 { width: 400px; height: 400px; margin: -200px; animation: orbit1 12s linear infinite; }
.ring.r2 { width: 340px; height: 340px; margin: -170px; border-color: rgba(255,122,89,.35); animation: orbit2 18s linear infinite; }
@keyframes orbit1 { from { transform: rotateX(72deg) rotateZ(0); } to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes orbit2 { from { transform: rotateY(65deg) rotateZ(360deg); } to { transform: rotateY(65deg) rotateZ(0); } }
.ring .jet, .ring .pin { position: absolute; top: -16px; left: 50%; margin-left: -14px; font-size: 26px; transform: rotateX(-72deg); filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)); }
.ring .pin { transform: rotateY(-65deg); }
.float-card { position: absolute; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; font-size: 14px; font-weight: 700; white-space: nowrap; background: var(--glassHi), rgba(16,30,70,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.2); box-shadow: var(--depth2); }
.float-card b { font-size: 22px; }
.fc1 { top: 8%; right: 2%; transform: translateZ(140px); animation: hover1 6s ease-in-out infinite; }
.fc2 { bottom: 12%; right: 10%; transform: translateZ(90px); animation: hover2 7s ease-in-out infinite; }
.fc3 { top: 44%; left: 6%; transform: translateZ(170px); animation: hover3 8s ease-in-out infinite; }
@keyframes hover1 { 50% { transform: translateZ(140px) translateY(-14px); } }
@keyframes hover2 { 50% { transform: translateZ(90px) translateY(12px); } }
@keyframes hover3 { 50% { transform: translateZ(170px) translateY(-10px); } }

/* ---------- אשף ---------- */
.progress { height: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.35) inset; }
.progress .bar { box-shadow: 0 0 16px rgba(255,209,102,.6), 0 1px 0 rgba(255,255,255,.5) inset; border-radius: 9px; }
.dot { box-shadow: var(--depth1); }
.dot.cur { transform: translateY(-2px) scale(1.08); box-shadow: 0 0 0 4px rgba(255,122,89,.25), 0 8px 18px rgba(255,122,89,.5); }
.q-head h2 { text-shadow: 0 10px 30px rgba(0,0,0,.4); }

/* ---------- תיק טיול ---------- */
.d-hero { position: relative; box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.1); transform: perspective(1200px) rotateX(2deg); transform-origin: top; }
.d-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.12), transparent 35%); pointer-events: none; }
.kpis div { transition: transform .2s; }
.kpis div:hover { transform: translateY(-4px); box-shadow: var(--depth2); }
.tabs a.on { box-shadow: 0 0 0 1px rgba(255,122,89,.6), 0 8px 18px rgba(255,122,89,.35); }
.sec > h2 { text-shadow: 0 8px 24px rgba(0,0,0,.45); }
.day { box-shadow: var(--depth2); }

/* ---------- קרדיט ---------- */
.foot { display: grid; gap: 14px; justify-items: center; }
.credit { display: inline-flex; align-items: center; gap: 14px; padding: 14px 22px; border-radius: 18px; text-align: right; background: var(--glassHi), rgba(16,30,70,.7); border: 1px solid rgba(255,255,255,.16); box-shadow: var(--depth2); color: var(--ink); }
.credit b { display: block; font-size: 16px; font-family: 'Secular One', Heebo, sans-serif; font-weight: 400; letter-spacing: .3px; }
.credit small { display: block; color: var(--mute); font-size: 12px; margin-top: 3px; }
.credit-logo { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; font-family: 'Secular One'; font-size: 18px; color: #1b1030; background: linear-gradient(135deg, var(--gold), var(--coral)); box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 -3px 0 rgba(0,0,0,.2) inset, 0 4px 0 #c4502f, 0 10px 20px rgba(255,122,89,.45); transform: rotate(-6deg); }
.foot .src { font-size: 12px; }

/* ---------- נייד ---------- */
@media (max-width: 860px) {
  .hero3d { grid-template-columns: 1fr; text-align: center; padding-top: 4vh; }
  .hero3d .lead { margin: 16px auto 26px; }
  .scene { height: 340px; order: -1; margin-bottom: -10px; }
  .sphere, .ring.r1, .ring.r2 { zoom: .78; }
  .scene-in { --sx: 4deg; --sy: 0deg; }
  .halo { width: 300px; height: 300px; margin: -150px; }
  .fc1, .fc2, .fc3 { animation: none; transform: none; }
  .fc1 { top: 4%; right: 4%; } .fc2 { bottom: 6%; right: 8%; } .fc3 { top: 40%; left: 4%; }
  .float-card { font-size: 12px; padding: 8px 10px; }
  .credit { padding: 12px 14px; }
  .credit b { font-size: 14px; }
}

/* ---------- נגישות: בלי תנועה ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tilt { transform: none !important; }
}
@media print { .scene, .sky, .credit-logo { display: none !important; } }