/* ==========================================================================
   css/gempack7.css: de Gem Pack Vol. 7-banner op de homepage

   Een paneel in de deck (DECK_PANELS in js/main.js, en de paneellijsten in
   css/style.css), direct na de 30th-banner: precies één scherm, net als die.
   De scène zelf (lucht, zee, kaarten, pack) is een WebGL-canvas uit
   js/gempack7.js; zonder WebGL blijft de verloopachtergrond hieronder met
   het pack als gewone afbeelding staan.

   Licht in plaats van donker: de 30th-banner erboven is een nachtlucht, en
   het promobeeld van Vol. 7 is een zonnige kust. Daarom donkerblauwe tekst
   op de lucht, en de roze kleur van het 宝石包-logo als accent.

   Specificiteit: alles hangt onder .gp7-banner, omdat .wish-btn en .btn in
   style.css anders winnen (zie de les over .c30-* in de hero-memory).
   ========================================================================== */
.gp7-banner{
  --gp7-ink:#0b2a55;
  --gp7-ink-soft:rgba(11,42,85,.78);
  --gp7-pink:#e0157c;
  --gp7-hor:64%;
  --edge:#0d4f8f;      /* de onderkant van de zee (initEdgeColour in main.js) */
  position:relative;
  height:100svh; min-height:560px;
  overflow:hidden; isolation:isolate;
  color:var(--gp7-ink);
  /* De terugval en meteen de kleur onder het canvas zolang dat nog laadt:
     dezelfde lucht en dezelfde horizon als de scène. */
  background:
    radial-gradient(ellipse 38% 30% at 64% 34%, rgba(255,244,214,.75), rgba(255,244,214,0) 70%),
    linear-gradient(180deg, #3f86d8 0%, #8cc6f0 34%, #d9edf9 calc(var(--gp7-hor) - .2%), #2a9cbc var(--gp7-hor), #1878ad 76%, #0d4f8f 100%);
}
.gp7-stage{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.gp7-canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity .9s ease;
}
.gp7-banner.is-gl .gp7-canvas{ opacity:1; }
.gp7-fallback-pack{
  position:absolute; left:66%; top:22%; height:62%; width:auto;
  transform:translateX(-50%);
  filter:drop-shadow(0 26px 40px rgba(8,40,90,.35));
}
.gp7-banner.is-gl .gp7-fallback-pack{ display:none; }

/* --- de tekst ---------------------------------------------------------------
   In de lucht, links, tussen de header en de horizon. */
.gp7-copy{
  position:absolute; z-index:2;
  left:max(28px, calc((100% - var(--container, 1180px)) / 2 + 28px));
  top:77px; height:calc(var(--gp7-hor) - 77px);
  width:min(540px, 44%);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  gap:18px;
  pointer-events:none;
}
.gp7-copy > *{ pointer-events:auto; }
.gp7-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  margin:0; padding:8px 15px 8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.8);
  box-shadow:0 8px 24px rgba(16,70,140,.14);
  font:600 13.5px/1 var(--font-body);
  color:var(--gp7-ink);
}
.gp7-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--gp7-pink);
  box-shadow:0 0 0 0 rgba(224,21,124,.45);
  animation:gp7Pulse 2.4s ease-out infinite;
}
@keyframes gp7Pulse{
  0%{ box-shadow:0 0 0 0 rgba(224,21,124,.45); }
  70%,100%{ box-shadow:0 0 0 9px rgba(224,21,124,0); }
}
.gp7-banner .gp7-title{
  margin:0;
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(58px, 7.4vw, 120px); line-height:.86; letter-spacing:-.012em;
  color:var(--gp7-ink);
  text-shadow:0 2px 34px rgba(255,255,255,.6);
}
.gp7-title em{ font-style:italic; color:var(--gp7-pink); white-space:nowrap; }
.gp7-lead{
  margin:0; max-width:38ch;
  font-size:clamp(15px, 1.18vw, 18px); line-height:1.55;
  color:var(--gp7-ink-soft);
  text-shadow:0 1px 14px rgba(255,255,255,.7);
}
.gp7-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; }
.gp7-banner .gp7-save{
  padding:16px 22px; gap:10px;
  border-radius:10px;
  border:1px solid rgba(11,42,85,.16);
  background:rgba(255,255,255,.74);
  color:var(--gp7-ink);
  font-family:var(--font-body); font-size:15px; font-weight:500;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(16,70,140,.12);
}
.gp7-banner .gp7-save svg{ width:19px; height:19px; }
.gp7-banner .gp7-save:hover,
.gp7-banner .gp7-save:focus-visible{ background:#fff; color:var(--gp7-ink); border-color:var(--gold); transform:translateY(-2px); }
.gp7-banner .gp7-save.on{ color:var(--gp7-ink); border-color:rgba(224,21,124,.4); }
.gp7-banner .gp7-save.on svg{ color:var(--gp7-pink); fill:var(--gp7-pink); }
.gp7-note{
  margin:0;
  font-size:13.5px; line-height:1.5;
  color:var(--gp7-ink-soft);
  text-shadow:0 1px 12px rgba(255,255,255,.7);
}
.gp7-note a{
  color:var(--gp7-ink); font-weight:600;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
.gp7-note a:hover{ color:var(--gp7-pink); }

/* Touch: hetzelfde als de 30th-banner. Het paneel is 100vh hoog en de
   inhoud schuift de helft van de browserbalk op (--deck-bar, js/main.js). */
@media (pointer:coarse){
  .gp7-banner{ height:100vh; }
  .gp7-copy{ transform:translateY(calc(var(--deck-bar, 0px) / -2)); }
}

/* Telefoon: de tekst gecentreerd bovenin, het pack eronder boven de zee.
   De horizon zakt wat (js/gempack7.js rekent met dezelfde 62%). */
@media (max-width:760px){
  .gp7-banner{ --gp7-hor:62%; }
  .gp7-copy{
    left:50%; width:calc(100% - 40px); max-width:460px;
    top:calc(77px + 26px); height:auto;
    transform:translateX(-50%);
    justify-content:flex-start; align-items:center; text-align:center;
    gap:12px;
  }
  .gp7-banner .gp7-title{ font-size:clamp(46px, 13.5vw, 66px); }
  .gp7-lead{ font-size:14.5px; max-width:34ch; }
  .gp7-actions{ flex-wrap:nowrap; width:100%; max-width:400px; gap:10px; justify-content:center; }
  .gp7-actions .btn{ flex:1 1 0; min-width:0; padding:13px 12px; font-size:clamp(12.5px, 3.8vw, 14.5px); }
  .gp7-note{ font-size:12.5px; }
  .gp7-fallback-pack{ left:50%; top:46%; height:38%; }
}
@media (max-width:760px) and (pointer:coarse){
  .gp7-copy{ transform:translate(-50%, calc(var(--deck-bar, 0px) / -2)); }
}
/* Een laag scherm (liggende telefoon, klein laptopvenster): de lead weg,
   anders loopt de tekst over de horizon. */
@media (max-height:620px){
  .gp7-lead{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .gp7-dot{ animation:none; }
  .gp7-canvas{ transition:none; }
}