/* =========================================================
   The gate between the minimal site and the pirate site:
   a brass "Set sail" plaque in the nav, and a warning scroll that unrolls
   over a stormy sea before anyone crosses over.
   ========================================================= */

/* ---------- the plaque in the nav ---------- */
.pz-btn{position:relative;display:inline-flex;align-items:center;gap:9px;height:40px;margin-left:var(--s-2,8px);padding:0 18px 0 7px;border-radius:7px;overflow:hidden;isolation:isolate;
  font:700 12px/1 "Cinzel",Georgia,serif;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:#F6E2AE;
  background:radial-gradient(ellipse at 30% 0%,#4a3420,#1e140b 60%,#0e0905);
  box-shadow:inset 0 1px 0 #f6dfa255,inset 0 0 0 1px #c9974b,inset 0 0 0 3px #140d07,inset 0 0 0 4px #c9974b55,0 6px 16px #0006;
  transition:transform .3s,box-shadow .3s}
.pz-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 #f6dfa288,inset 0 0 0 1px #F0D49A,inset 0 0 0 3px #140d07,inset 0 0 0 4px #F0D49A88,0 8px 22px #0007,0 0 22px #e8a04a66}
.pz-btn::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;z-index:-1;background:linear-gradient(100deg,transparent,#ffe9b066,transparent);transform:skewX(-22deg);animation:pzShine 4.5s ease-in-out infinite}
@keyframes pzShine{0%,62%{left:-70%}100%{left:140%}}
.pz-btn .pz-t{background:linear-gradient(180deg,#FFF3CF 10%,#E6B866 60%,#B9853A);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 #000a)}
.pz-wheel{display:grid;place-items:center;width:28px;height:28px;flex:none}
.pz-wheel svg{width:28px;height:28px;animation:pzTurn 14s linear infinite;filter:drop-shadow(0 1px 1px #000)}
.pz-btn:hover .pz-wheel svg{animation-duration:2.2s}
@keyframes pzTurn{to{transform:rotate(360deg)}}
.pz-btn i{position:absolute;width:3px;height:3px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3c8,#7a5222 70%)}
.pz-btn i:nth-of-type(1){left:5px;top:5px}.pz-btn i:nth-of-type(2){right:5px;top:5px}.pz-btn i:nth-of-type(3){left:5px;bottom:5px}.pz-btn i:nth-of-type(4){right:5px;bottom:5px}
@media (max-width:760px){.pz-btn{padding:0 6px;margin-right:6px}.pz-btn .pz-t{display:none}}

/* ---------- the warning ---------- */
.pg{position:fixed;inset:0;z-index:6000;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;padding:84px 16px 28px;visibility:hidden;font-family:"EB Garamond",Georgia,serif}
.pg.open{visibility:visible}
.pg-sky{position:fixed;inset:0;overflow:hidden;background:#05070a;opacity:0;transition:opacity .7s}
.pg.open .pg-sky{opacity:1}
.pg-sky .ph{position:absolute;inset:-4%;background:url(../assets/voyage/hero.webp) center 60%/cover;filter:blur(3px) saturate(.8) brightness(.38);transform:scale(1.12);transition:transform 6s cubic-bezier(.2,.7,.2,1)}
.pg.open .pg-sky .ph{transform:scale(1.02)}
.pg-sky::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 20%,#000000d9 80%)}
.pg-fog{position:absolute;left:-40%;right:-40%;height:60%;opacity:.5;filter:blur(30px);pointer-events:none;
  background:radial-gradient(ellipse at 30% 50%,#6a6a7a40,transparent 60%),radial-gradient(ellipse at 75% 40%,#4a4a5a55,transparent 55%);animation:pgFog 22s ease-in-out infinite alternate}
.pg-fog.f1{bottom:-18%}.pg-fog.f2{top:-20%;opacity:.3;animation-duration:30s;animation-direction:alternate-reverse}
@keyframes pgFog{to{transform:translateX(16%)}}
.pg-flash{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 10%,#dfe8ff,#9fb4e0 30%,transparent 70%);opacity:0;mix-blend-mode:screen;animation:pgBolt 7s 1.6s infinite}
@keyframes pgBolt{0%,90%,100%{opacity:0}91%{opacity:.55}92%{opacity:.05}93.5%{opacity:.4}96%{opacity:0}}
.pg-embers{position:absolute;inset:0;width:100%;height:100%}

/* the scroll */
.pg-card{position:relative;flex:none;margin:auto;width:min(640px,100%);opacity:0;transition:opacity .3s .15s}
.pg.open .pg-card{opacity:1}
.pg-rod{position:absolute;left:-26px;right:-26px;height:28px;z-index:3;border-radius:14px;
  background:linear-gradient(180deg,#7a4a24 0%,#c8884a 22%,#8a5328 48%,#4a2a12 78%,#2a160a 100%);
  box-shadow:0 10px 20px #000c,inset 0 1px 0 #ffd9a055;transition:transform 1s cubic-bezier(.7,0,.2,1)}
.pg-rod::before,.pg-rod::after{content:"";position:absolute;top:-6px;width:40px;height:40px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff1c4,#d8a957 40%,#7a5222 75%,#3a2408);box-shadow:0 4px 8px #000a,inset 0 0 0 2px #5a3a14}
.pg-rod::before{left:-14px}.pg-rod::after{right:-14px}
.pg-rod.top{top:-14px}.pg-rod.bot{bottom:-14px}
.pg-card.rolled .pg-rod.top{transform:translateY(var(--half))}
.pg-card.rolled .pg-rod.bot{transform:translateY(calc(var(--half) * -1))}
.pg-paper{position:relative;z-index:2;padding:64px clamp(26px,7vw,78px) 54px;text-align:center;color:#2b1a0a;
  background:url(../assets/voyage/parchment-tile-a.webp) center top/100% auto repeat-y;
  clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.7,0,.2,1)}
.pg-paper::before{content:"";position:absolute;inset:0 3%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 50%,#6a3a1255 85%,#3a1a0688 100%)}
.pg-card.rolled .pg-paper{clip-path:inset(50% 0 50% 0)}

/* contents arrive after it unrolls */
.pg-in>*{opacity:0;transform:translateY(12px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.pg.shown .pg-in>*{opacity:1;transform:none}
.pg.shown .pg-in>*:nth-child(2){transition-delay:.08s}.pg.shown .pg-in>*:nth-child(3){transition-delay:.16s}
.pg.shown .pg-in>*:nth-child(4){transition-delay:.26s}.pg.shown .pg-in>*:nth-child(5){transition-delay:.36s}
.pg.shown .pg-in>*:nth-child(6){transition-delay:.46s}.pg.shown .pg-in>*:nth-child(7){transition-delay:.56s}

.pg-skull{position:absolute;left:50%;top:-74px;z-index:4;width:132px;height:auto;transform:translateX(-50%) scale(1.5);opacity:0;
  filter:drop-shadow(0 12px 18px #000c) drop-shadow(0 0 30px #e8a04a55);transition:transform .7s cubic-bezier(.3,1.6,.5,1),opacity .4s}
.pg.shown .pg-skull{transform:translateX(-50%) scale(1);opacity:1}
.pg-kick{display:block;margin-top:22px;font:700 12px "Cinzel",serif;letter-spacing:.32em;color:#8a1e14}
.pg-h{margin:10px 0 0;font:900 clamp(34px,6vw,54px)/1.02 "Cinzel Decorative","Cinzel",serif;letter-spacing:.02em;color:#2b1a0a;text-shadow:0 1px 0 #f7ecd0}
.pg-p{max-width:430px;margin:16px auto 0;font-size:clamp(18px,2.2vw,20px);line-height:1.5;color:#3a2410}
.pg-p b{font-weight:600;color:#2b1a0a}

/* the compass that stops working */
.pg-warn{display:flex;align-items:center;gap:18px;max-width:440px;margin:22px auto 0;padding:14px 18px;text-align:left;
  border:1px solid #8a1e1466;background:linear-gradient(90deg,#8a1e1412,transparent);box-shadow:inset 3px 0 0 #8a1e14}
.pg-compass{flex:none;width:76px;height:76px;filter:drop-shadow(0 4px 6px #3a241088)}
.pg-needle{transform-box:view-box;transform-origin:50px 50px}
.pg-warn p{margin:0;font-size:18px;line-height:1.35;color:#2b1a0a}
.pg-warn p b{display:block;font:700 15px "Cinzel",serif;letter-spacing:.06em;color:#8a1e14}
.pg-q{display:block;margin-top:24px;font:italic 21px "EB Garamond",serif;color:#3a2410}

.pg-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:16px}
.pg-go{position:relative;display:inline-flex;align-items:center;gap:12px;padding:17px 30px;border:0;border-radius:4px;cursor:pointer;overflow:hidden;isolation:isolate;
  font:700 15px/1 "Cinzel",serif;letter-spacing:.16em;text-transform:uppercase;color:#2a1a0c;
  background:linear-gradient(180deg,#F6DFA2 0%,#D8A957 38%,#A9752F 62%,#E2B76A 100%);
  box-shadow:inset 0 1px 0 #fff6d6,inset 0 -2px 0 #6e4a1c,0 0 0 1px #4a2f12,0 0 0 4px #1a120bcc,0 0 0 5px #b8893f88,0 10px 24px #000a;transition:transform .25s,box-shadow .25s}
.pg-go::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;background:linear-gradient(100deg,transparent,#fff8e0cc,transparent);transform:skewX(-20deg);animation:pzShine 3.2s ease-in-out infinite}
.pg-go:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff6d6,inset 0 -2px 0 #6e4a1c,0 0 0 1px #4a2f12,0 0 0 4px #1a120bcc,0 0 0 5px #F0D9A4,0 16px 30px #000c,0 0 34px #e8a04a88}
.pg-go svg{width:20px;height:20px;fill:none;stroke:#2a1a0c;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pg-stay{padding:16px 24px;border:1px solid #3a2410;border-radius:4px;background:transparent;cursor:pointer;font:600 14px/1 "Cinzel",serif;letter-spacing:.14em;text-transform:uppercase;color:#3a2410;transition:background .25s,color .25s}
.pg-stay:hover{background:#3a2410;color:#f1e2bf}
.pg-note{display:block;margin-top:22px;font-size:15px;font-style:italic;color:#6e5232}

.pg-seal{position:absolute;right:clamp(14px,5vw,40px);bottom:22px;z-index:4;width:62px;height:62px;display:grid;place-items:center;border-radius:50%;
  font:700 17px "Cinzel",serif;color:#f7d9b8;background:radial-gradient(circle at 35% 30%,#d0533c,#8a1e14 65%,#5a1008);
  box-shadow:0 4px 8px #3a0a0499,inset 0 0 0 4px #7a1810,inset 0 0 0 5px #d0533c66;transform:rotate(-14deg) scale(2.2);opacity:0;transition:transform .45s cubic-bezier(.3,1.5,.5,1) .7s,opacity .2s .7s}
.pg.shown .pg-seal{transform:rotate(-14deg) scale(1);opacity:1}
@media (max-width:560px){.pg-seal{display:none}.pg-skull{width:104px;top:-58px}.pg-warn{gap:12px}.pg-compass{width:60px;height:60px}}

/* leaving: the sea goes dark before the pirate site loads */
.pg-black{position:fixed;inset:0;z-index:10;background:#000;opacity:0;pointer-events:none;transition:opacity .6s}
.pg.leaving .pg-black{opacity:1}

@media (prefers-reduced-motion:reduce){
  .pg *,.pz-btn *,.pz-btn::after{animation:none!important;transition:none!important}
}
@media (max-width:560px){.pg-rod{left:-8px;right:-8px}.pg-rod::before{left:-6px}.pg-rod::after{right:-6px}.pg-card{width:calc(100% - 20px)}}
@media (max-width:560px){
  .pg{padding:78px 14px 24px}
  .pg-paper{padding:52px 34px 36px}
  .pg-h{font-size:34px}.pg-p{font-size:17px}.pg-q{margin-top:18px;font-size:19px}
  .pg-warn{padding:12px}.pg-warn p{font-size:16px}
  .pg-go,.pg-stay{width:100%;justify-content:center}
}