/* PRICING (homepage and pricing.html): three package cards standing on glass showroom podiums
   (assets/v5d/price-podiums.jpg), taller podium for the bigger plan, plus a hidden glass gift
   that opens to a Christmas voucher (assets/v5d/price-gift.jpg). */
.price{padding:clamp(70px,10vh,120px) 0 clamp(60px,9vh,110px)}
.pf-head{max-width:760px;margin:0 auto;text-align:center}
.pf-head h2{margin:18px 0 0;font-size:clamp(34px,4.6vw,66px);line-height:1.04;letter-spacing:-.04em;font-weight:600;color:#f2f7fc}
.pf-head h2 span{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;color:#57a6ff;text-shadow:0 0 30px rgba(47,143,255,.45)}
.pf-head p{margin:14px auto 0;color:#a9bccf;font-size:16px}

/* ---------- the showroom ---------- */
.pf-scene{position:relative;width:min(1200px,100%);aspect-ratio:1920/1086;margin:clamp(10px,2vw,30px) auto 0;container-type:inline-size;perspective:1400px}
.pf-room{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 86%,transparent);-webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 86%,transparent);mask-composite:intersect}

/* each card stands on its podium: Small on the low one, Business middle, Premium on the tallest; the gift on the fourth */
.pf-cards{position:absolute;inset:0;z-index:2}
.pf-card{--cx:15.2%;--top:64.2%;position:absolute;left:var(--cx);bottom:calc(100% - var(--top));width:20.5cqw;margin-left:-10.25cqw;
  display:flex;flex-direction:column;gap:.75cqw;padding:1.7cqw 1.7cqw 1.5cqw;border-radius:1.5cqw;color:#eaf2fb;text-decoration:none;overflow:hidden;isolation:isolate;text-align:center;
  background:linear-gradient(165deg,rgba(32,74,140,.9),rgba(8,20,44,.96) 60%);border:1px solid rgba(130,190,255,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 34px rgba(40,140,255,.3),0 24px 40px -18px rgba(0,0,0,.85);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:pfFloat 5s ease-in-out infinite;animation-delay:calc(var(--i) * -1.6s);
  transition:transform .55s cubic-bezier(.2,.9,.25,1),box-shadow .4s,border-color .4s}
.pf-card:nth-child(2){--cx:38.3%;--top:56.7%}
.pf-card:nth-child(3){--cx:61.8%;--top:48.9%}
.pf-mid{background:linear-gradient(165deg,rgba(47,110,200,.94),rgba(9,24,52,.96) 62%);border-color:rgba(150,205,255,.6)}
@keyframes pfFloat{0%,100%{transform:translateY(-.6cqw)}50%{transform:translateY(-1.5cqw)}}
.pf-card::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 45%,transparent 60%) -100% 0/250% 100% no-repeat;transition:background-position 1s}
.pf-card:hover,.pf-card:focus-visible{z-index:3;outline:none;animation:none;border-color:rgba(170,220,255,.9);
  transform:translateY(-3cqw) scale(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 60px rgba(60,160,255,.6),0 40px 70px -20px rgba(0,0,0,.9)}
.pf-card:hover::before,.pf-card:focus-visible::before{background-position:100% 0}
.pf-kick{font:500 max(9px,.95cqw)/1.3 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#8cc4ff}
.pf-card h3{margin:0;font-size:max(14px,2.1cqw);font-weight:600;letter-spacing:-.02em}
.pf-amt{white-space:nowrap;font-size:max(26px,3.7cqw);font-weight:800;letter-spacing:-.05em;line-height:1;background:linear-gradient(180deg,#fff 25%,#8cc4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.pf-amt small{font-size:.4em;font-weight:600;letter-spacing:0;vertical-align:middle;margin-right:.2em}
.pf-feat{padding-top:1cqw;border-top:1px solid rgba(150,200,255,.2);font-size:max(12px,1.35cqw);line-height:1.4;color:#d0deec}
.pf-sup{font-size:max(11px,1.15cqw);color:#94acc4}
.pf-go{margin-top:auto;font-weight:600;font-size:max(12px,1.3cqw);color:#7fbaff}

/* the gift stand: a closed glass gift on the fourth podium (it is in the picture). The button sits over it,
   with a glowing SKYSTAR tag; clicking opens the voucher. After Christmas the script switches to the
   three-podium picture and the .pf-three positions below. */
.pf-gift{position:absolute;z-index:4;left:75.5%;top:24%;width:19%;height:62%;padding:0;border:0;background:none;cursor:pointer;border-radius:24px;-webkit-tap-highlight-color:transparent}
.pf-halo{position:absolute;left:12%;right:12%;top:38%;height:42%;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse,rgba(90,180,255,.45),transparent 70%);opacity:.55;animation:pfHalo 2.8s ease-in-out infinite}
@keyframes pfHalo{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:.8;transform:scale(1.06)}}
.pf-tag{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.35cqw;padding:.8cqw 1.3cqw;border-radius:1cqw;white-space:nowrap;
  background:rgba(8,22,48,.82);border:1px solid rgba(150,210,255,.6);box-shadow:0 0 24px rgba(60,160,255,.55),inset 0 1px 0 rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:box-shadow .3s}
.pf-tag img{display:none}
.pf-tag b{font:700 max(12px,1.45cqw)/1 'JetBrains Mono',monospace;letter-spacing:.24em;color:#fff;text-shadow:0 0 12px #57a6ff}
.pf-tag small{font-size:max(10px,.95cqw);color:#a9cdf2}
.pf-gift:hover .pf-halo,.pf-gift:focus-visible .pf-halo{opacity:1;animation-duration:1.2s}
.pf-gift:hover .pf-tag,.pf-gift:focus-visible .pf-tag{box-shadow:0 0 40px rgba(90,190,255,.9),inset 0 1px 0 rgba(255,255,255,.3)}
.pf-gift:focus-visible{outline:2px dashed rgba(160,215,255,.7);outline-offset:4px}
/* after Christmas: three podiums only */
.pf-three .pf-card{--cx:19.4%;--top:64%;width:23cqw;margin-left:-11.5cqw}
.pf-three .pf-card:nth-child(2){--cx:50%;--top:56%}
.pf-three .pf-card:nth-child(3){--cx:80.8%;--top:47.4%}


/* ---------- the gift opens ---------- */
.pf-pop{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:20px;background:rgba(2,6,16,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:pfFade .4s both}
.pf-pop[hidden]{display:none}
.pf-pop-in{position:relative;width:min(520px,100%);text-align:center;color:#e8f2fc}
.pf-close{position:absolute;right:0;top:0;z-index:3;width:40px;height:40px;border-radius:50%;border:1px solid rgba(140,200,255,.4);background:rgba(8,20,42,.8);color:#cfe4f7;font-size:22px;line-height:1;cursor:pointer}
.pf-box{position:relative;width:min(400px,80vw);aspect-ratio:1;margin:0 auto;animation:pfPopIn .8s cubic-bezier(.2,1.2,.3,1) both}
.pf-box img{width:100%;height:100%;display:block;-webkit-mask-image:radial-gradient(circle,#000 55%,transparent 72%);mask-image:radial-gradient(circle,#000 55%,transparent 72%)}
/* the voucher rises out of the box */
.pf-voucher{position:absolute;left:50%;top:22%;width:38%;padding:5% 4% 6%;display:flex;flex-direction:column;align-items:center;gap:2px;border-radius:8px;color:#0b2348;
  background:linear-gradient(160deg,#ffffff,#d9e6f3 45%,#a9bfd6 70%,#eef4fa);box-shadow:0 0 0 2px rgba(255,255,255,.6) inset,0 0 40px rgba(110,190,255,.75),0 20px 40px rgba(0,0,0,.5);
  -webkit-mask:radial-gradient(circle 9px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 9px at 0 50%,transparent 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 9px at 100% 50%,transparent 98%,#000) right/51% 100% no-repeat;
  animation:pfRise 1.3s .55s cubic-bezier(.2,.9,.25,1) both}
.v-k{font:600 10px/1 'JetBrains Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:#2f5f9c}
.v-big{font-size:clamp(34px,8vw,52px);font-weight:800;letter-spacing:-.05em;line-height:1;margin-top:6px;background:linear-gradient(180deg,#123a73,#2f8fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.v-big small{display:block;font-size:.42em;letter-spacing:.08em;text-align:center}
.v-what{font-size:11px;font-weight:600;color:#26507f}
.v-code{margin-top:6px;padding:4px 8px;border:1px dashed #2f8fff;border-radius:4px;font:700 12px/1 'JetBrains Mono',monospace;letter-spacing:.18em;color:#0b2348}
.pf-pop h3{margin:10px 0 0;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(28px,4vw,40px);color:#8cc4ff;animation:pfFade .6s 1.2s both}
.pf-pop p{margin:10px auto 0;max-width:40ch;color:#c9d9e9;font-size:15.5px;line-height:1.5;animation:pfFade .6s 1.35s both}
.pf-pop p b{color:#fff;letter-spacing:.06em}
.pf-pop .btn{margin-top:18px;animation:pfFade .6s 1.5s both}
@keyframes pfFade{from{opacity:0}to{opacity:1}}
@keyframes pfPopIn{from{opacity:0;transform:scale(.4) rotate(-8deg)}to{opacity:1;transform:none}}
@keyframes pfRise{0%{opacity:0;transform:translate(-50%,80%) scale(.4) rotateY(0)}60%{opacity:1;transform:translate(-50%,-12%) scale(1.05) rotateY(360deg)}100%{opacity:1;transform:translate(-50%,0) scale(1) rotateY(360deg)}}

/* ---------- phones: showroom on top, cards listed below it ---------- */
@media (max-width:700px){
  .pf-scene{aspect-ratio:auto;container-type:normal;perspective:none}
  .pf-scene{overflow:hidden}
  .pf-room{position:relative;height:auto;width:118%;max-width:none;margin-left:-9%}
  .pf-cards{position:relative;inset:auto;display:grid;gap:14px;margin-top:-6%}
  .pf-card{position:relative;left:auto;bottom:auto;width:auto;height:auto;margin:0;transform:none!important;animation:none;gap:8px;padding:20px;border-radius:18px}
  .pf-kick{font-size:10.5px}.pf-card h3{font-size:20px}.pf-amt{font-size:38px}.pf-feat{font-size:14.5px;padding-top:10px}.pf-sup{font-size:13px}.pf-go{font-size:14px;margin-top:6px}
  .pf-gift{position:relative;left:auto;top:auto;width:100%;height:auto;margin-top:14px;border-radius:18px}
  .pf-halo{display:none}
  .pf-tag{position:relative;left:auto;transform:none;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px 12px;padding:14px 16px;border-radius:18px;white-space:normal;animation:none}
  .pf-tag img{display:block;width:46px;height:46px;border-radius:50%;object-fit:cover}
  .pf-tag b{font-size:15px}.pf-tag small{font-size:13px;width:100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){.pf-halo,.pf-tag,.pf-box,.pf-voucher,.pf-pop h3,.pf-pop p,.pf-pop .btn,.pf-pop{animation:none}.pf-card{transition:none}}
/* Let the pricing showroom fill the page instead of a narrow content column. */
@media(min-width:701px){
  .price{min-height:100svh;padding:72px 0 45px}
  .price>.container,.price>.wrap{width:96%;max-width:1840px}
  .price .pf-head{max-width:1240px}
  .price .pf-head h2{font-size:clamp(40px,4.5vw,76px)}
  .price .pf-head h2 span{white-space:nowrap}
  .price .pf-scene{width:100%;max-width:none;margin:20px auto 0}
}
@media(max-width:700px){.price{padding:70px 0 45px}.price .pf-scene{overflow:visible}.price .pf-cards{gap:30px}.price .pf-head h2 span{white-space:nowrap}}
/* A generous gift reveal that uses the available screen. */
.pf-pop{padding:24px;overflow-y:auto}
.pf-pop-in{width:min(1000px,94vw);display:grid;grid-template-columns:1.2fr 1fr;column-gap:36px;align-items:center;text-align:left}
.pf-box{grid-column:1;grid-row:1 / 4;width:min(58vw,650px);max-width:100%;margin:0}
.pf-pop h3{grid-column:2;align-self:end;font-size:clamp(36px,4.2vw,64px);line-height:1.05;margin:0 0 20px}
.pf-pop p{grid-column:2;align-self:start;font-size:18px;line-height:1.65;max-width:34ch;margin:0}
.pf-pop .btn{grid-column:2;justify-self:start;align-self:start;margin-top:26px;min-height:54px;padding:16px 28px;font-size:16px}
.pf-close{width:46px;height:46px;right:0;top:0}
.pf-voucher{border-radius:12px}.v-big{font-size:clamp(44px,6vw,76px)}.v-k{font-size:12px}.v-what{font-size:14px}.v-code{font-size:16px;padding:7px 12px}
@media(max-width:700px){.pf-pop{padding:18px}.pf-pop-in{display:block;width:100%;text-align:center}.pf-box{width:min(88vw,480px);margin:auto}.pf-pop h3{font-size:38px;margin:0 0 14px}.pf-pop p{font-size:16px;margin:auto}.pf-pop .btn{margin-top:22px}.pf-close{top:0;right:0}.v-big{font-size:clamp(42px,10vw,64px)}.v-k{font-size:10px}.v-what{font-size:12px}.v-code{font-size:13px}}

/* ---------- screen power-on intro (assets/v5d/pricing-home.js) ----------
   dark screen + blue grid + scan line -> floods brand blue, VIRTUALSKY. slams in with a floor reflection
   -> screen switches off into a line -> the cards drop onto their podiums */
.pf-screen{position:absolute;inset:0;z-index:6;border-radius:18px;overflow:hidden;pointer-events:none;
  background:linear-gradient(rgba(70,140,255,.13) 1px,transparent 1px) 0 0/4.2cqw 4.2cqw,linear-gradient(90deg,rgba(70,140,255,.13) 1px,transparent 1px) 0 0/4.2cqw 4.2cqw,radial-gradient(ellipse at 50% 40%,#0b1a36,#03070f 75%);
  box-shadow:inset 0 0 0 1px rgba(120,180,255,.18),inset 0 0 80px rgba(0,0,0,.8)}
.pf-scan{position:absolute;left:0;right:0;top:12%;height:3px;background:linear-gradient(90deg,transparent,#57a6ff 15%,#e9f4ff 50%,#57a6ff 85%,transparent);
  box-shadow:0 0 18px 4px rgba(87,166,255,.75),0 0 60px 12px rgba(47,143,255,.35);opacity:.4}
.pf-flood{position:absolute;inset:0;clip-path:inset(50% 0 50% 0);
  background:radial-gradient(ellipse at 50% 45%,#5fb0ff,#1f6fe0 45%,#0b3a8f 85%)}
.pf-brand{position:absolute;left:0;right:0;top:30%;display:flex;flex-direction:column;align-items:center;opacity:0;
  -webkit-box-reflect:below 1.2cqw linear-gradient(transparent 35%,rgba(255,255,255,.32))}
.pf-brand b{font-weight:800;font-size:11cqw;line-height:.9;letter-spacing:-.06em;color:#04122b}
.pf-brand em{margin-top:.6cqw;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:3.4cqw;color:#04122b}
.pf-intro .pf-card,.pf-intro .pf-gift{opacity:0;translate:0 -6cqw}
.pf-on .pf-scan{animation:pfScan 1.15s cubic-bezier(.5,0,.2,1) both}
.pf-on .pf-flood{animation:pfFlood .5s 1.1s cubic-bezier(.7,0,.2,1) both}
.pf-on .pf-brand{animation:pfSlam .7s 1.3s cubic-bezier(.2,1.3,.3,1) both}
.pf-done .pf-screen{animation:pfOff .75s cubic-bezier(.7,0,.3,1) both}
.pf-done .pf-card,.pf-done .pf-gift{opacity:1;translate:0 0;transition:opacity .5s,translate .9s cubic-bezier(.2,1.25,.3,1);transition-delay:calc(var(--i,3) * .14s + .45s)}
@keyframes pfScan{0%{top:6%;opacity:0}20%{opacity:1}75%{top:50%;opacity:1;height:3px}100%{top:50%;opacity:1;height:5px}}
@keyframes pfFlood{to{clip-path:inset(0 0 0 0)}}
@keyframes pfSlam{0%{opacity:0;transform:scale(1.5);filter:blur(10px)}100%{opacity:1;transform:none;filter:none}}
@keyframes pfOff{0%{transform:none;filter:none;opacity:1}55%{transform:scale(1,.006);filter:brightness(3);opacity:1}100%{transform:scale(0,.006);filter:brightness(3);opacity:0}}
@media (max-width:700px){
  .pf-screen{bottom:auto;aspect-ratio:1920/1086;border-radius:14px;container-type:inline-size}
  .pf-intro .pf-card,.pf-intro .pf-gift{translate:0 30px}
}
/* pricing.html: the full package cards are only the source for the podium-card pop-ups (assets/js/package-dialog.js), so the section itself stays hidden */
.pf-details-src{display:none!important}

/* On phones the glass package cards are the display; avoid empty miniature podiums. */
@media(max-width:700px){
  .price .pf-room{display:none}
  .price .pf-cards{margin-top:36px;gap:38px}
  .price .pf-three .pf-card{left:auto;bottom:auto;width:auto;margin-left:0}
}

.pf-swipe-hint{display:none}
@media(max-width:700px){
  .pf-swipe-hint{display:block;text-align:center;color:#9ad7ff;font-size:13px;margin:20px 0 0}
  .pf-showroom-scroll{overflow-x:auto;overflow-y:hidden;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-color:#4bbdff #08182b;padding-top:24px}
  .price .pf-scene{width:1150px;max-width:none;aspect-ratio:1920/1086;container-type:inline-size;perspective:1400px;margin:0;overflow:visible}
  .price .pf-room{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0}
  .price .pf-cards{position:absolute;inset:0;display:block;margin:0}
  .price .pf-card,.price .pf-three .pf-card{position:absolute;left:var(--cx);bottom:calc(100% - var(--top));width:20.5cqw;margin-left:-10.25cqw;gap:.75cqw;padding:1.7cqw;border-radius:1.5cqw}
  .price .pf-card h3{font-size:2.1cqw}.price .pf-amt{font-size:3.7cqw}.price .pf-feat{font-size:1.35cqw}.price .pf-sup{font-size:1.15cqw}.price .pf-go{font-size:1.3cqw}
  .price .pf-gift{position:absolute;left:75.5%;top:24%;width:19%;height:62%;margin:0}
  .price .pf-tag{position:absolute;left:50%;top:0;transform:translateX(-50%);width:auto;flex-direction:column;flex-wrap:nowrap;white-space:nowrap}
  .price .pf-tag img{display:none}.price .pf-tag small{width:auto}
}