/* css/refit.css — "Sailor Services is in for a refit" (js/views/refit.js):
   the new site's welcome while Sailor Services is being rebuilt, on the
   sign-in page and the home page. Goes, with refit.js and the pages' links to
   this file, when the work is done.

   .refit        the panel: a sail-plan drawing of a boat up on stands, its
                 headsail still being drawn, and the words. The drawing sits
                 beside the words from 576 px, above them where a page puts the
                 panel in a narrow column (account.css), and is left out on
                 phones, where the page matters more than the picture.
   .refit-strip  one line with "Don't show again", for the signed-in home. */

.refit {
  padding: 20px;
  border-top: 3px solid var(--orc-navy);
  background: var(--orc-tint);
}

@media (min-width: 576px) {
  .refit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    column-gap: 20px;
    align-items: center;
  }

  .refit-text { grid-column: 1; grid-row: 1; }
}

@media (min-width: 768px) {
  .refit { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 40px; padding: 30px; }
}

@media (min-width: 992px) {
  .refit { grid-template-columns: minmax(0, 1fr) 320px; }
}

.refit-chip { margin: 0 0 10px; }

.refit h2 { margin: 0 0 10px; }

.refit-text > p:not(.refit-chip, .refit-fb) { max-width: 44em; }

.refit-list {
  margin: 0 0 1em;
  padding-left: 18px;
}

.refit-list li + li { margin-top: 8px; }

.refit-fb {
  margin: 0;
  color: var(--sas-muted);
}

/* The drawing. */
.refit-art { display: none; }

@media (min-width: 576px) {
  .refit-art {
    display: block;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 0;
  }
}

.refit-ground {
  fill: none;
  stroke: var(--orc-navy);
  stroke-opacity: .35;
  stroke-width: 1;
}

.refit-line {
  fill: none;
  stroke: var(--orc-navy);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The hull hides the ladder behind it. */
.refit-hull { fill: var(--orc-tint); stroke-width: 2.25; }
.refit-mast { stroke-width: 2.5; }
.refit-main { fill: var(--orc-page); }
.refit-thin { stroke-width: 1; }
.refit-ladder { stroke-width: 1.25; stroke-opacity: .7; }
.refit-stands { stroke-width: 1.5; }

/* The headsail, not finished: a construction line. */
.refit-jib {
  fill: none;
  stroke: var(--orc-accent);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  stroke-linejoin: round;
}

/* P and E, the sail plan's measurements, as on a certificate. */
.refit-dim {
  fill: none;
  stroke: var(--orc-navy);
  stroke-opacity: .55;
  stroke-width: 1;
}

.refit-label {
  fill: var(--orc-navy);
  fill-opacity: .8;
  font-family: var(--orc-font-text);
  font-size: 11px;
  text-anchor: middle;
}

.refit-pencil {
  fill: var(--orc-white);
  stroke: var(--orc-navy);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

/* The boat draws itself once, then the headsail's dashes keep moving and the
   pencil keeps sketching — unless motion is reduced (sas.css then stops every
   animation, so the drawing's dashes are set only here). */
@media (prefers-reduced-motion: no-preference) {
  .refit-line,
  .refit-line path,
  .refit-dim path {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
    animation: refit-draw 1.4s cubic-bezier(.4, 0, .2, 1) forwards;
  }

  .refit-line.refit-mast { animation-delay: .5s; }
  .refit-line.refit-thin { animation-delay: .8s; }
  .refit-dim path { animation-delay: 1.4s; }

  .refit-line.refit-main {
    animation:
      refit-draw 1.4s .8s cubic-bezier(.4, 0, .2, 1) forwards,
      refit-fill .6s 1.8s both;
  }

  .refit-label {
    opacity: 0;
    animation: refit-show .6s 1.6s forwards;
  }

  .refit-jib {
    opacity: 0;
    animation:
      refit-show .6s 1.6s forwards,
      refit-march 1.2s 2.2s linear infinite;
  }

  .refit-pencil {
    opacity: 0;
    animation:
      refit-show .6s 1.6s forwards,
      refit-sketch 2.4s 2.2s ease-in-out infinite;
  }
}

@keyframes refit-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes refit-fill {
  from { fill-opacity: 0; }
}

@keyframes refit-show {
  to { opacity: 1; }
}

@keyframes refit-march {
  to { stroke-dashoffset: -11; }
}

@keyframes refit-sketch {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-6px, -4px); }
  50% { transform: translate(-2px, -9px); }
  75% { transform: translate(-7px, -6px); }
}

/* The signed-in home's line. */
.refit-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin: 0 0 30px;
  padding: 12px 20px;
  border-left: 4px solid var(--orc-accent);
  background: var(--orc-tint);
}

.refit-strip p {
  flex: 1 1 24em;
  margin: 0;
}

.refit-strip .btn { flex: none; }

@media print {
  .refit,
  .refit-strip { display: none; }
}