/* ============================================================================
   holo6.css — מסך 9 המאוחד (9+10) · סבב נסיה 23.07 לילה
   קלפים שמתהפכים לגילוי המשפט שמאחוריהם · בועת זכוכית אחת לטלפון+CTA
   בצבע הקריסטל שנבחר. כל הגוונים ורוד-פסטל — כלל המותג של נסיה.
   Flip-to-reveal cards; one crystal-tinted glass bubble for phone + CTA.
   All hues pastel pink — Nesya's brand rule.
   ============================================================================ */

.h6s09 .stack { justify-content: center; gap: calc(var(--air) * 1.5); }

/* ═══ הקופי — שתי שורות בדיוק כפי שנסיה כתבה אותן ═══ */
.h6-copy { display: grid; gap: calc(var(--air) * .6); }
.h6-copy i {
  display: block; font-style: normal; text-wrap: balance;
  font-size: calc(var(--fs-body) * 1.04);
  opacity: 0; animation: riseIn 620ms var(--ease-enter) forwards;
  animation-delay: calc(260ms + var(--i) * 300ms);
}
.h6-ask {
  font-size: calc(var(--fs-greet) * .8);
  margin-top: calc(var(--air) * 1.2);
  opacity: 0; animation: riseIn 680ms 980ms var(--ease-enter) forwards;
}

/* ═══ מניפת חמשת הקלפים — הפריסה שנסיה אישרה, ללא שינוי ═══ */
.h6-fan {
  position: relative;
  width: min(94vw, calc(var(--u) * 118));
  aspect-ratio: 15 / 11;
  max-height: 40vh;
  margin-inline: auto;
  perspective: 1100px;
}
.h6-card {
  position: absolute; top: 50%; left: 50%;
  width: 27%;
  padding: 0; border: 0; background: none;
  z-index: var(--z, 3);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform: translate(-50%, -50%)
             translate(calc(var(--tx) * 1%), calc(var(--ty) * 1%))
             rotate(calc(var(--rot) * 1deg));
  transition: transform 620ms var(--ease-spring), filter 460ms ease;
  filter: drop-shadow(0 10px 22px rgba(178, 106, 134, .32));
  opacity: 0;
  animation: h6Deal 640ms var(--fd, 0ms) var(--ease-spring) forwards;
}
@keyframes h6Deal {
  from { opacity: 0; transform: translate(-50%, -40%) rotate(0deg) scale(.74); }
  to   { opacity: 1;
         transform: translate(-50%, -50%)
                    translate(calc(var(--tx) * 1%), calc(var(--ty) * 1%))
                    rotate(calc(var(--rot) * 1deg)); }
}
/* ההיפוך עצמו — הצד השני של הקלף, בדיוק כמו שנסיה תיארה */
.h6-inner {
  position: relative; display: block; width: 100%;
  aspect-ratio: 2 / 3;
  transform-style: preserve-3d;
  transition: transform 640ms var(--ease-hero);
}
.h6-face {
  position: absolute; inset: 0;
  border-radius: 9px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.h6-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* הגב — נייר שמנת עם מסגרת זהב והמשפט שהוסתר */
.h6-back {
  transform: rotateY(180deg);
  display: grid; align-content: center; justify-items: center;
  gap: calc(var(--air) * .55);
  padding: calc(var(--air) * 1.6) calc(var(--air) * 1.2);
  text-align: center;
  background: linear-gradient(166deg, #FFFDF8, #FBF1E6);
  border: 1.4px solid rgba(190, 152, 84, .85);
}
.h6-back b {
  font-weight: 400;
  font-size: clamp(11px, calc(var(--u) * 3.4), 15px);
  color: #A2622F;
}
.h6-back i {
  display: block; width: 52%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190,152,84,.8), transparent);
}
.h6-back span {
  font-size: clamp(8.5px, calc(var(--u) * 2.6), 12px);
  line-height: 1.45;
  color: var(--lw-ink-strong);
  text-wrap: balance;
}
/* הקלף הפתוח — מתהפך, מתיישר ומתקרב */
.h6-card.flipped {
  z-index: 20;
  transform: translate(-50%, -54%) rotate(0deg) scale(1.72);
  filter: drop-shadow(0 18px 38px rgba(178, 106, 134, .48));
}
.h6-card.flipped .h6-inner { transform: rotateY(180deg); }
.h6-fan.has-open .h6-card:not(.flipped) {
  filter: drop-shadow(0 10px 22px rgba(178,106,134,.3)) brightness(.86) saturate(.88);
}
.h6-card:focus-visible { outline: 3px solid #FFF3DC; outline-offset: 5px; border-radius: 10px; }

/* ═══ בועת הזכוכית — טלפון ו-CTA יחד, בצבע הקריסטל שנבחר ═══
   ⚠️ בקשה מפורשת של נסיה למסך הזה: "שהכפתור יהיה ביחד עם מילוי המספר
   ולא בנפרד, ושזה יהיה בועת זכוכית שקופה לפי הצבע של כל קריסטל".
   הגוון מגיע מ---c-glow/--c-primary ולכן משתנה חי עם הבחירה שלה. */
.h6-bubble {
  position: relative;
  width: min(90%, calc(var(--u) * 86));
  margin: calc(var(--air) * 1.4) auto 0;
  padding: calc(var(--air) * 2) calc(var(--air) * 2.2) calc(var(--air) * 2.2);
  display: grid; gap: calc(var(--air) * .85); justify-items: center;
  border-radius: calc(var(--u) * 6);
  background:
    radial-gradient(120% 130% at 50% 0%, var(--c-glow), transparent 70%),
    rgba(255, 250, 252, .3);
  border: 1px solid rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 10px 30px var(--c-glow), inset 0 1px 0 rgba(255,255,255,.85);
  opacity: 0; animation: riseIn 680ms 1900ms var(--ease-enter) forwards;
}
/* טבעת אור עדינה בצבע הקריסטל — הבועה "שייכת" לבחירה שלה */
.h6-bubble::before {
  content: ''; position: absolute; inset: -1px;
  border-radius: calc(var(--u) * 6); padding: 1.2px;
  background: linear-gradient(160deg, var(--c-primary), rgba(255,255,255,.7), var(--c-primary));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: .7;
}
.h6-ask-phone {
  font-size: calc(var(--fs-body) * .96);
  color: #FFFDF9; text-wrap: balance; text-align: center;
  text-shadow: 0 1px 2px rgba(122, 58, 82, .8), 0 0 12px rgba(122, 58, 82, .4);
}
.h6-phone {
  width: 100%;
  font: inherit; font-size: calc(var(--fs-body) * 1.04);
  text-align: center; letter-spacing: .06em;
  padding: calc(var(--air) * 1.15) calc(var(--air) * 1.2);
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: calc(var(--u) * 2.6);
  background: rgba(255, 253, 250, .92);
  color: var(--lw-ink-strong);
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
.h6-phone:focus {
  outline: 0; border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-glow);
}
.h6-nudge {
  font-size: calc(var(--fs-micro) * .96);
  color: #FFF6EF; text-wrap: balance; text-align: center;
  text-shadow: 0 1px 2px rgba(122, 58, 82, .72);
}
.h6-go {
  width: 100%;
  margin-top: calc(var(--air) * .8);
  min-height: 52px;
  padding: .45em 1.6em .55em;
  border: 1.5px solid var(--lw-gold-line);
  border-radius: 999px;
  background: linear-gradient(175deg, #FFFDF8, #F7ECD9);
  color: var(--c-ink);
  font: inherit; font-size: var(--fs-cta); line-height: 1.15;
  -webkit-text-stroke: var(--stroke-heavy) currentColor;
  box-shadow: 0 6px 20px var(--c-glow), inset 0 1px 0 #fff;
  cursor: pointer;
}
.h6-bubble.bad .h6-phone { border-color: #C05A7E; box-shadow: 0 0 0 3px rgba(192,90,126,.24); }
.h6-bubble.bad { animation: h6Shake 420ms ease; }
@keyframes h6Shake {
  0%,100% { transform: translateX(0) } 25% { transform: translateX(-5px) }
  50% { transform: translateX(5px) } 75% { transform: translateX(-3px) }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .h6-bubble { background: rgba(255, 246, 250, .8); }
}

@media (prefers-reduced-motion: reduce) {
  .h6-card, .h6-copy i, .h6-ask, .h6-bubble { animation-duration: 1ms; }
  .h6-inner { transition-duration: 1ms; }
}