/* pirates.css -- loaded only by /pirates. Split out of fanpages.css. */

.potc-sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: radial-gradient(90% 70% at 50% 0%, #1c1710 0%, #100d0a 48%, #070605 100%);
}

.potc-sky::before {                 /* chart hatching */
  content: ""; position: absolute; inset: -10%;
  background-image:
    repeating-linear-gradient(28deg, rgba(216,176,106,.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(-28deg, rgba(216,176,106,.04) 0 1px, transparent 1px 62px);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 20%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, #000 20%, transparent 88%);
}

.potc-rose {                        /* compass rose, turning slowly */
  position: absolute; right: 6%; top: 14%;
  width: clamp(200px, 30vw, 430px); aspect-ratio: 1; opacity: .14;
  color: #d8b06a;
  animation: potc-turn 200s linear infinite;
}

/* a moon over open water */
.potc-moon {
  position: absolute; left: 16%; top: 11%;
  width: clamp(60px, 7vw, 110px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #f6ecd0, #d8c398 58%, #9f8d6a 100%);
  box-shadow: 0 0 80px 22px rgba(232,214,170,.14), 0 0 200px 70px rgba(216,176,106,.07);
  opacity: .5;
}

/* the sea: a dark plane under a moonlit road */
.potc-sea {
  position: absolute; inset: 56% 0 0 0;
  background:
    linear-gradient(180deg, rgba(120,150,170,.10) 0 1px, transparent 1px),
    radial-gradient(58% 70% at 16% 0%, rgba(232,214,170,.11), transparent 68%),
    linear-gradient(180deg, #0b1015 0%, #070a0e 55%, #05070a 100%);
}

/* rolling swell: two bands of long shallow crests, drifting opposite ways */
.potc-swell {
  position: absolute; inset: 56% -20% 0 -20%;
  background-image:
    repeating-linear-gradient(92deg, rgba(160,190,210,.05) 0 2px, transparent 2px 90px),
    repeating-linear-gradient(88deg, rgba(140,175,200,.04) 0 2px, transparent 2px 130px);
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  animation: potc-roll 26s linear infinite;
}

/* the moon's reflection breaking up on the water */
.potc-glint {
  position: absolute; left: 8%; right: 62%; top: 56%; bottom: 0;
  background-image:
    repeating-linear-gradient(180deg, rgba(240,226,186,.16) 0 2px, transparent 2px 11px);
  mask-image: radial-gradient(ellipse 50% 80% at 50% 0%, #000 10%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 50% 80% at 50% 0%, #000 10%, transparent 80%);
  animation: potc-glint 7s ease-in-out infinite alternate;
}

/* something under black sail, a very long way off */
.potc-far {
  position: absolute; right: 12%; top: 45%;
  width: clamp(120px, 15vw, 230px); opacity: .3;
  animation: potc-sail 30s ease-in-out infinite alternate;
}

.potc-far svg { width: 100%; height: auto; display: block; }

.potc-far-ship path { fill: #05070a; }

/* fog rolling across the whole thing */
.potc-fog {
  position: absolute; inset: 40% -30% 0 -30%;
  background:
    radial-gradient(48% 40% at 20% 60%, rgba(150,170,185,.06), transparent 70%),
    radial-gradient(40% 34% at 62% 45%, rgba(160,180,195,.05), transparent 72%),
    radial-gradient(52% 30% at 88% 70%, rgba(140,165,180,.05), transparent 74%);
  filter: blur(8px);
  animation: potc-fogdrift 64s ease-in-out infinite alternate;
}

/* the cutlass and the compass, under the Pearl */
.potc-kit { margin-top: -0.6rem; }

.pk-steel path   { fill: #b9c2cc; stroke: #6d7783; stroke-width: 2; stroke-linejoin: round; }

.pk-brass        { fill: #b8913f; stroke: #7a5c22; stroke-width: 1.8; stroke-linejoin: round; }

.pk-brass path   { stroke: #b8913f; }

.pk-grip path    { fill: none; stroke: #4a3520; stroke-width: 2.4; stroke-linecap: round; }

.potc-cutlass    { filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }

.pc-case   { fill: #6f5526; stroke: #c9a24a; stroke-width: 3; }

.pc-ring   { fill: none; stroke: #e0c070; stroke-width: 2; opacity: .7; }

.pc-face   { fill: #17110a; stroke: #8a6d30; stroke-width: 1.6; }

.pc-lid    { fill: #6f5526; stroke: #c9a24a; stroke-width: 2.6; stroke-linejoin: round; opacity: .9; }

.pc-ticks  { fill: none; stroke: #d8b06a; stroke-width: 2; stroke-linecap: round; }

.pc-rose   { fill: #d8b06a; opacity: .45; }

.pc-pin    { fill: #e8d09a; }

/* it does not point north. It points at what you want most, and it never settles */
.pc-needle {
  fill: #e04a3a;
  transform-box: view-box; transform-origin: 374px 106px;
  animation: potc-needle 13s cubic-bezier(.5, 0, .5, 1) infinite;
  filter: drop-shadow(0 0 5px rgba(224,74,58,.6));
}

.pearl-hull  { fill: #14100c; stroke: #a8875a; stroke-width: 2.4; stroke-linejoin: round; }

.pearl-sails { fill: #191512; stroke: #8f7448; stroke-width: 2; stroke-linejoin: round; }

.pearl-rig   { fill: none; stroke: #a8875a; stroke-width: 1.6; opacity: .55; stroke-linecap: round; }

.pearl-trim  { fill: #a8875a; stroke: #a8875a; stroke-width: 1.4; opacity: .5; }

.pearl-trim path { fill: none; }

.pearl-flag  { fill: #191512; stroke: #a8875a; stroke-width: 2; stroke-linejoin: round; }

.pearl-lantern circle {
  fill: #f0c86a;
  filter: drop-shadow(0 0 7px rgba(240,200,106,.95)) drop-shadow(0 0 18px rgba(216,150,60,.6));
  animation: potc-lantern 4.4s ease-in-out infinite alternate;
}

.pearl-water { fill: none; stroke: #6f8fa0; stroke-width: 2.2; opacity: .35; stroke-linecap: round; }

.fan-art--potc svg { animation: potc-heave 9s ease-in-out infinite alternate; }