/* ==========================================================================
   Supply gaps: bento grid of 3D flip cards (porcelain front, gloss back)
   ========================================================================== */
.gp{position:relative;padding:clamp(4.5rem,3rem + 4vw,7rem) 0;overflow:clip}
.gp::before{content:"";position:absolute;right:-300px;top:-200px;width:800px;height:800px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(49,69,154,.10),transparent)}
.gp-head{display:grid;grid-template-columns:1fr minmax(0,440px);align-items:end;gap:1.2rem 3rem;margin-bottom:2.6rem}
.gp-title{font-size:clamp(2rem,1.2rem + 2.6vw,3.3rem);letter-spacing:-.035em;line-height:1.05;margin:.2rem 0 0;max-width:14ch}
.gp-head-side p{margin:0 0 .9rem;font-size:1.04rem}
.gp-hint{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;border-radius:999px;font-size:.82rem;font-weight:700;color:var(--brand);box-shadow:var(--press-sm)}
.gp-hint svg{animation:spinOnce 3s var(--soft) infinite}
@keyframes spinOnce{0%,60%{transform:none}80%,100%{transform:rotate(360deg)}}
:root[data-theme="dark"] .gp-hint{color:var(--mint)}

.gp-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:300px;gap:20px;margin:0;padding:0;list-style:none;perspective:1600px}
.gp-big{grid-column:span 2;grid-row:span 2}
.gp-ask{grid-column:span 2}

/* Entrance: cards tip up from the floor, one after another */
.gp-cell{opacity:0;transform:translate3d(0,70px,-60px) rotateX(28deg);transform-origin:50% 100%;
  transition:opacity .8s var(--soft),transform 1.1s var(--soft);transition-delay:calc(var(--c)*80ms)}
.gp-grid.gp-in .gp-cell{opacity:1;transform:none}

/* The flipping card */
.gp-card{position:relative;width:100%;height:100%;border-radius:30px;cursor:pointer;transform-style:preserve-3d;outline-offset:4px;
  transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(calc(var(--flip,0deg) + var(--ry,0deg)));
  transition:transform .9s cubic-bezier(.3,1.3,.4,1)}
.gp-card.is-tilting{transition:transform .12s linear}
.gp-card.is-flipped{--flip:180deg}
@media (hover:hover) and (pointer:fine){ .gp-card:hover{--flip:180deg} }
.gp-face{position:absolute;inset:0;border-radius:inherit;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}

/* Front: porcelain + photo window */
.gp-front{display:flex;flex-direction:column;padding:10px;background:var(--base);box-shadow:var(--raise)}
.gp-media{position:relative;flex:1 1 52%;min-height:0;border-radius:22px;overflow:hidden;box-shadow:var(--press-sm)}
.gp-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.4s var(--soft)}
.gp-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,12,36,0) 45%,rgba(6,12,36,.35))}
.gp-card:hover .gp-media img,.gp-card:focus-visible .gp-media img{transform:scale(1.14)}
.gp-dome{position:absolute;left:24px;top:calc(52% - 30px);z-index:2;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--base);box-shadow:var(--raise-sm)}
.gp-dome::before{content:"";position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 8%,rgba(255,255,255,0) 30%),linear-gradient(145deg,#3f5bc4,#31459A 45%,#1DB9C2);
  box-shadow:0 8px 18px rgba(29,100,180,.35),inset 0 -4px 8px rgba(6,20,60,.35)}
.gp-ico{position:relative;width:24px;height:24px;color:#fff;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gp-ico-sm{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.gp-front-body{display:grid;gap:.15rem;padding:2.1rem .9rem .4rem}
.gp-num{font-family:var(--font-head);font-weight:800;font-size:.76rem;color:var(--teal)}
.gp-name{font-family:var(--font-head);font-weight:700;font-size:1.12rem;letter-spacing:-.015em;color:var(--ink)}
.gp-text{font-size:.88rem;color:var(--ink-faint)}
.gp-turn{position:absolute;right:22px;top:22px;z-index:2;display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .8rem;border-radius:999px;font-size:.74rem;font-weight:700;color:#fff;
  background:rgba(10,20,60,.42);border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .3s}
.gp-card:hover .gp-turn{background:rgba(29,185,194,.6)}
.gp-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 45%,transparent 60%);transform:translateX(-120%);mix-blend-mode:soft-light}
.gp-grid.gp-in .gp-shine{animation:shine 1.6s var(--soft) both;animation-delay:calc(var(--c)*80ms + .6s)}
@keyframes shine{to{transform:translateX(120%)}}

.gp-big .gp-media{flex-basis:66%}
.gp-big .gp-dome{top:calc(66% - 34px);width:68px;height:68px}
.gp-big .gp-dome .gp-ico{width:28px;height:28px}
.gp-big .gp-front-body{padding-top:2.6rem}
.gp-big .gp-name{font-size:clamp(1.4rem,1rem + 1vw,1.9rem)}
.gp-big .gp-text{font-size:1rem}

/* Back: deep glass with the answer */
.gp-back{transform:rotateY(180deg);display:flex;flex-direction:column;gap:.55rem;padding:1.4rem;color:#fff;
  background:radial-gradient(120% 90% at 100% 0%,rgba(29,185,194,.55),transparent 55%),linear-gradient(150deg,#16246a,#22398f 55%,#136f7a);
  box-shadow:0 30px 60px rgba(14,26,80,.35),inset 0 1px 0 rgba(255,255,255,.25)}
.gp-back::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0) 35%)}
.gp-back-tag{align-self:flex-start;padding:.3rem .7rem;border-radius:999px;font-size:.72rem;font-weight:700;color:#06231f;background:linear-gradient(135deg,#9ff7e8,#5ff0d9)}
.gp-back .gp-name{color:#fff}
.gp-detail{margin:0;font-size:.86rem;line-height:1.5;color:rgba(226,236,255,.86);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.gp-points{display:grid;gap:.35rem;margin:.2rem 0 0;padding:0;list-style:none}
.gp-points li{display:flex;align-items:flex-start;gap:.5rem;font-size:.84rem;font-weight:600;color:#e8efff;line-height:1.35}
.gp-points svg{width:18px;height:18px;padding:3px;border-radius:50%;background:rgba(95,240,217,.2);color:var(--mint)}
.gp-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.1rem;border-radius:999px;font-weight:700;font-size:.86rem;color:var(--brand);background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.25);transition:transform .4s var(--spring)}
.gp-cta:hover{transform:translateY(-2px) scale(1.03)}
.gp-cta svg{transition:transform .4s var(--spring)}
.gp-cta:hover svg{transform:translateX(3px)}
.gp-big .gp-back{padding:2rem;gap:.8rem}
.gp-big .gp-detail{font-size:1rem;-webkit-line-clamp:5}
.gp-big .gp-points li{font-size:.95rem}
/* Small cards: keep the back readable */
.gp-cell:not(.gp-big) .gp-detail{display:none}

/* Ask card */
.gp-ask-card{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;gap:.6rem;padding:1.6rem 2rem;border-radius:30px;background:var(--base);box-shadow:var(--press);overflow:hidden}
.gp-ask-card strong{font-family:var(--font-head);font-size:clamp(1.3rem,1rem + .8vw,1.7rem);letter-spacing:-.02em}
.gp-ask-card p{margin:0;max-width:44ch}
.gp-ask-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-top:.6rem}
.gp-ask-link{font-weight:700;color:var(--brand);border-bottom:2px solid rgba(29,185,194,.4)}
:root[data-theme="dark"] .gp-ask-link{color:var(--mint)}
.gp-ask-orb{position:absolute;right:-50px;top:-50px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(255,255,255,.2) 35%,rgba(29,185,194,.25) 70%);box-shadow:var(--raise);animation:orb 8s ease-in-out infinite}

/* Responsive */
@media (max-width:1100px){
  .gp-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:290px}
  .gp-big{grid-column:span 2;grid-row:span 2}
  .gp-ask{grid-column:span 2}
}
@media (max-width:640px){
  .gp-head{grid-template-columns:1fr}
  .gp-grid{grid-template-columns:1fr;grid-auto-rows:300px;gap:16px}
  .gp-big{grid-column:auto;grid-row:span 1;}
  .gp-big .gp-media{flex-basis:56%}
  .gp-big .gp-dome{top:calc(56% - 30px);width:58px;height:58px}
  .gp-big .gp-detail{-webkit-line-clamp:2;font-size:.88rem}
  .gp-big .gp-back{padding:1.4rem}
  .gp-ask{grid-column:auto;grid-row:auto}
  .gp-ask-card{padding:1.4rem}
  .gp-grid{grid-auto-rows:auto}
  .gp-cell:not(.gp-ask){height:310px}
}
@media (prefers-reduced-motion:reduce){
  .gp-cell{opacity:1;transform:none;transition:none}
  .gp-card{transition:none}
  .gp-hint svg,.gp-shine,.gp-ask-orb{animation:none}
}

/* ==========================================================================
   Live motion: bouncing 3D icon bubbles, drifting photos, breathing cards.
   Runs only while the section is on screen (.gp-live set by flow.js).
   ========================================================================== */
.gp-dome{animation:gpBounce 2.8s cubic-bezier(.45,0,.3,1) infinite;animation-delay:calc(var(--c,0) * -.4s);animation-play-state:paused}
.gp-dome::after{content:"";position:absolute;left:18%;right:18%;bottom:-14px;height:8px;border-radius:50%;background:rgba(20,40,110,.28);filter:blur(3px);
  animation:gpShadow 2.8s cubic-bezier(.45,0,.3,1) infinite;animation-delay:calc(var(--c,0) * -.4s);animation-play-state:paused}
.gp-dome .gp-ico{animation:gpWobble 2.8s ease-in-out infinite;animation-delay:calc(var(--c,0) * -.4s);animation-play-state:paused}
@keyframes gpBounce{
  0%,100%{transform:translateY(0) scale(1,1)}
  10%{transform:translateY(0) scale(1.08,.92)}
  35%{transform:translateY(-16px) scale(.96,1.05)}
  55%{transform:translateY(-18px) scale(1,1)}
  80%{transform:translateY(0) scale(1.06,.94)}
  90%{transform:translateY(-3px) scale(1,1)}}
@keyframes gpShadow{0%,100%,80%{transform:scale(1);opacity:1}35%,55%{transform:scale(.6);opacity:.45}}
@keyframes gpWobble{0%,100%{transform:rotate(0)}35%{transform:rotate(-10deg)}55%{transform:rotate(8deg)}}
.gp-media img{animation:gpDrift 14s ease-in-out infinite alternate;animation-play-state:paused}
@keyframes gpDrift{from{object-position:50% 40%}to{object-position:50% 60%}}
.gp-cell:not(.gp-ask) .gp-card{animation:gpBreathe 6s ease-in-out infinite;animation-delay:calc(var(--c,0) * -.9s);animation-play-state:paused}
@keyframes gpBreathe{50%{translate:0 -6px}}
.gp-turn svg{animation:spinOnce 3.2s var(--soft) infinite;animation-delay:calc(var(--c,0) * .3s);animation-play-state:paused}
.gp-ask-orb{animation-play-state:paused}
.gp.gp-live .gp-dome,.gp.gp-live .gp-dome::after,.gp.gp-live .gp-dome .gp-ico,.gp.gp-live .gp-media img,.gp.gp-live .gp-card,.gp.gp-live .gp-turn svg,.gp.gp-live .gp-ask-orb{animation-play-state:running}
.gp-card:hover .gp-dome,.gp-card.is-flipped .gp-dome{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .gp-dome,.gp-dome::after,.gp-dome .gp-ico,.gp-media img,.gp-card,.gp-turn svg{animation:none}
}