/* ==========================================================================
   Frigate Yacht Partners - seal and motion components - v8 - September 2026
   Every class is prefixed fyp-seal- or fyp-fx-. No libraries. No external
   files. Works from file:// and inside a sandboxed page.
   Palette: navy #0A1A3F, gold #D4AF37, cream #F7F3EB, warm #F0EFEC, muted #6A6A6A
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. THE SEAL
   Ring lettering turns; the frigatebird, FYP and year stay upright and still.
   -------------------------------------------------------------------------- */
.fyp-seal{
  --fyp-seal-size:132px;
  --fyp-seal-turn:48s;                          /* one full turn of the ring */
  --fyp-seal-face:#0A1A3F;                      /* disc behind the lettering */
  --fyp-seal-rim:#D4AF37;                       /* heavy rules */
  --fyp-seal-rim-fine:rgba(212,175,55,.62);     /* fine rules */
  --fyp-seal-text:#F7F3EB;                      /* ring lettering */
  --fyp-seal-star:#D4AF37;                      /* separators */
  --fyp-seal-disc:#0A1A3F;                      /* medallion */
  --fyp-seal-ticks:rgba(212,175,55,.42);
  --fyp-seal-bird:#D4AF37;
  --fyp-seal-mono:#F7F3EB;                      /* FYP */
  --fyp-seal-year:#D4AF37;                      /* MMXXVI */
  display:inline-block;position:relative;flex:none;
  width:var(--fyp-seal-size);height:var(--fyp-seal-size);
  line-height:0;vertical-align:middle;
}
.fyp-seal--light{
  --fyp-seal-face:transparent;
  --fyp-seal-rim:#C39F2F;
  --fyp-seal-rim-fine:rgba(195,159,47,.7);
  --fyp-seal-text:#0A1A3F;
  --fyp-seal-star:#C39F2F;
}
.fyp-seal-svg{display:block;width:100%;height:100%;overflow:visible}
.fyp-seal-face{fill:var(--fyp-seal-face)}
.fyp-seal-rim{fill:none;stroke:var(--fyp-seal-rim)}
.fyp-seal-rim-fine{fill:none;stroke:var(--fyp-seal-rim-fine)}
.fyp-seal-t{fill:var(--fyp-seal-text);font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-weight:600}
.fyp-seal-star{fill:var(--fyp-seal-star)}
.fyp-seal-disc{fill:var(--fyp-seal-disc)}
.fyp-seal-ticks{fill:none;stroke:var(--fyp-seal-ticks)}
.fyp-seal-bird{fill:var(--fyp-seal-bird)}
.fyp-seal-mono{fill:var(--fyp-seal-mono);font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:700}
.fyp-seal-year{fill:var(--fyp-seal-year);font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-weight:500}
.fyp-seal-year-rule{fill:none;stroke:var(--fyp-seal-year)}

.fyp-seal-ring{
  transform-box:view-box;transform-origin:50% 50%;
  animation:fyp-seal-turn var(--fyp-seal-turn) linear infinite;
}
@keyframes fyp-seal-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.fyp-seal.fyp-seal-is-off .fyp-seal-ring{animation-play-state:paused}

/* The owner asked for the seal to keep turning. Under reduced motion it keeps
   turning, slower. The !important beats a page-wide "animation:none". */
@media (prefers-reduced-motion:reduce){
  .fyp-seal .fyp-seal-ring{animation:fyp-seal-turn 120s linear infinite !important}
  .fyp-seal.fyp-seal-is-off .fyp-seal-ring{animation-play-state:paused !important}
}

/* --------------------------------------------------------------------------
   B. LOCKUP - seal beside the wordmark (hero, top left, on navy)
   -------------------------------------------------------------------------- */
.fyp-seal-lockup{display:flex;align-items:center;gap:clamp(14px,2.2vw,26px);color:#F7F3EB;text-align:left}
.fyp-seal-lockup .fyp-seal{--fyp-seal-size:clamp(90px,11.5vw,136px)}   /* a little bigger, Chris, 12 Sep */
.fyp-seal-lockup-divider{flex:none;align-self:stretch;width:1px;margin:6px 0;
  background:linear-gradient(180deg,rgba(212,175,55,0),rgba(212,175,55,.85) 22%,rgba(212,175,55,.85) 78%,rgba(212,175,55,0))}
.fyp-seal-lockup-text{display:flex;flex-direction:column;gap:clamp(7px,1vw,11px);min-width:0}
.fyp-seal-lockup-name{display:block;font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:700;
  font-size:clamp(15px,1.95vw,22px);line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:#FFFFFF}
.fyp-seal-lockup-line{display:block;font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-weight:500;
  font-size:clamp(9.5px,1.05vw,11px);line-height:1.4;letter-spacing:.26em;text-transform:uppercase;color:#D4AF37}
.fyp-seal-lockup-dot{color:rgba(247,243,235,.55);padding:0 .15em}
.fyp-seal-lockup{min-width:0;max-width:100%}
@media (max-width:520px){
  .fyp-seal-lockup{gap:12px}
  .fyp-seal-lockup .fyp-seal{--fyp-seal-size:84px}
  .fyp-seal-lockup-name{font-size:14px;letter-spacing:.13em}
  .fyp-seal-lockup-line{font-size:9px;letter-spacing:.12em}
}

/* --------------------------------------------------------------------------
   C. FOOTER - light seal turning above the sign-off line
   -------------------------------------------------------------------------- */
.fyp-seal-footer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:12px 0 30px}
.fyp-seal-footer .fyp-seal{--fyp-seal-size:116px}
.fyp-seal-footer-rule{display:block;width:44px;height:1px;background:#D4AF37;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.fyp-seal-footer-est{font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:700;font-size:15px;line-height:1.4;
  letter-spacing:.22em;text-transform:uppercase;color:#0A1A3F;margin-right:-.22em}
.fyp-seal-footer-dot{color:#C39F2F;padding:0 .1em}
@media (max-width:520px){.fyp-seal-footer-est{font-size:13px;letter-spacing:.16em;margin-right:-.16em}}

/* --------------------------------------------------------------------------
   D. MOTION SNIPPETS - all optional, all pause off screen
   Starting states only apply once component.js has added .fyp-fx-ready to
   <html>, so a page without the script shows everything in its final state.
   -------------------------------------------------------------------------- */

/* D1. Count-up figures ---------------------------------------------------- */
.fyp-fx-count-block{display:grid !important}          /* beats host rules such as .facts b{display:block} */
.fyp-fx-count-inline{display:inline-grid !important}
.fyp-fx-count-ghost,.fyp-fx-count-live{display:block;grid-area:1/1;font-variant-numeric:tabular-nums}
.fyp-fx-count-ghost{visibility:hidden}
.fyp-fx-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* D2. Gold hairline that draws itself, then catches the light once -------- */
.fyp-fx-rule{display:block;position:relative;overflow:hidden;
  width:var(--fyp-fx-rule-width,72px);height:var(--fyp-fx-rule-weight,2px);margin:var(--fyp-fx-rule-margin,0);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.fyp-fx-rule::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background:linear-gradient(90deg,#B8912B 0%,#D4AF37 38%,#E9CF7A 72%,#D4AF37 100%);transform-origin:0 50%}
.fyp-fx-rule::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;opacity:0;
  background:linear-gradient(90deg,rgba(255,249,228,0),rgba(255,249,228,.95) 50%,rgba(255,249,228,0));transform:translateX(-110%)}
.fyp-fx-rule--center{margin-left:auto;margin-right:auto}
.fyp-fx-rule--center::before{transform-origin:50% 50%}
.fyp-fx-ready .fyp-fx-rule::before{transform:scaleX(0);transition:transform 1.5s cubic-bezier(.19,1,.22,1) .08s}
.fyp-fx-ready .fyp-fx-rule.fyp-fx-in::before{transform:scaleX(1)}
.fyp-fx-ready .fyp-fx-rule.fyp-fx-in::after{animation:fyp-fx-glint 1.7s cubic-bezier(.45,0,.2,1) 1.15s 1 both}
@keyframes fyp-fx-glint{0%{transform:translateX(-110%);opacity:0}18%{opacity:1}100%{transform:translateX(240%);opacity:0}}

/* D3. Slow sheen across gold labels such as SHEET 01 ---------------------- */
.fyp-fx-sheen{--fyp-fx-sheen-base:#D4AF37;--fyp-fx-sheen-hi:#FFF1BF}
.fyp-fx-sheen--on-light{--fyp-fx-sheen-base:#C39F2F;--fyp-fx-sheen-hi:#F3D77A}
.fyp-fx-ready .fyp-fx-sheen{
  background-image:linear-gradient(105deg,var(--fyp-fx-sheen-base) 0%,var(--fyp-fx-sheen-base) 40%,var(--fyp-fx-sheen-hi) 50%,var(--fyp-fx-sheen-base) 60%,var(--fyp-fx-sheen-base) 100%);
  background-size:320% 100%;background-position:100% 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.fyp-fx-ready .fyp-fx-sheen.fyp-fx-in{animation:fyp-fx-sheen 8s cubic-bezier(.5,0,.25,1) .4s infinite}
.fyp-fx-ready .fyp-fx-sheen.fyp-fx-off{animation-play-state:paused}
@keyframes fyp-fx-sheen{0%{background-position:100% 0}24%{background-position:0% 0}100%{background-position:0% 0}}

/* D4. Compass: the needle swings, settles on north, then barely breathes -- */
.fyp-fx-compass{display:block;width:var(--fyp-fx-compass-size,168px);height:auto;aspect-ratio:1/1;overflow:visible;
  --fyp-fx-c-line:#0A1A3F;--fyp-fx-c-fine:rgba(10,26,63,.35);--fyp-fx-c-gold:#D4AF37;--fyp-fx-c-deep:#0A1A3F;
  --fyp-fx-c-half:#E9E4D8;--fyp-fx-c-text:#0A1A3F;--fyp-fx-c-pin:#F7F3EB}
.fyp-fx-compass--on-dark{--fyp-fx-c-line:#D4AF37;--fyp-fx-c-fine:rgba(247,243,235,.35);--fyp-fx-c-deep:#F7F3EB;
  --fyp-fx-c-half:rgba(247,243,235,.16);--fyp-fx-c-text:#F7F3EB;--fyp-fx-c-pin:#0A1A3F}
.fyp-fx-compass-rim{fill:none;stroke:var(--fyp-fx-c-line)}
.fyp-fx-compass-fine{fill:none;stroke:var(--fyp-fx-c-fine)}
.fyp-fx-compass-gold{fill:var(--fyp-fx-c-gold)}
.fyp-fx-compass-deep{fill:var(--fyp-fx-c-deep)}
.fyp-fx-compass-half{fill:var(--fyp-fx-c-half)}
.fyp-fx-compass-letter{fill:var(--fyp-fx-c-text);font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-weight:500}
.fyp-fx-compass-pin{fill:var(--fyp-fx-c-pin);stroke:var(--fyp-fx-c-gold)}
.fyp-fx-compass-needle{transform-box:view-box;transform-origin:50% 50%}
.fyp-fx-ready .fyp-fx-compass:not(.fyp-fx-in) .fyp-fx-compass-needle{transform:rotate(-42deg)}
.fyp-fx-ready .fyp-fx-compass.fyp-fx-in .fyp-fx-compass-needle{
  animation:fyp-fx-settle 3.6s ease-in-out both,fyp-fx-breathe 12s ease-in-out 3.6s infinite}
.fyp-fx-ready .fyp-fx-compass.fyp-fx-off .fyp-fx-compass-needle{animation-play-state:paused}
@keyframes fyp-fx-settle{
  0%{transform:rotate(-42deg)}20%{transform:rotate(24deg)}38%{transform:rotate(-13deg)}
  54%{transform:rotate(6.5deg)}69%{transform:rotate(-3deg)}84%{transform:rotate(1.2deg)}100%{transform:rotate(0deg)}}
@keyframes fyp-fx-breathe{0%,100%{transform:rotate(0deg)}30%{transform:rotate(1.6deg)}70%{transform:rotate(-1.1deg)}}

/* D5. Wave hairline under the hero: two swells drifting past each other --- */
.fyp-fx-wave{position:relative;display:block;height:18px;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.fyp-fx-wave::before,.fyp-fx-wave::after{content:"";position:absolute;top:0;bottom:0;left:0;width:calc(100% + 480px);background-repeat:repeat-x;background-position:0 50%}
.fyp-fx-wave::before{background-size:160px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='18' viewBox='0 0 160 18'%3E%3Cpath d='M0 9C20 4.5 60 4.5 80 9S140 13.5 160 9' fill='none' stroke='%23D4AF37' stroke-width='1.1'/%3E%3C/svg%3E")}
.fyp-fx-wave::after{background-size:240px 18px;opacity:.5;left:-240px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='18' viewBox='0 0 240 18'%3E%3Cpath d='M0 9C30 12 90 12 120 9S210 6 240 9' fill='none' stroke='%23F7F3EB' stroke-width='.9'/%3E%3C/svg%3E")}
.fyp-fx-wave--on-light::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='18' viewBox='0 0 240 18'%3E%3Cpath d='M0 9C30 12 90 12 120 9S210 6 240 9' fill='none' stroke='%230A1A3F' stroke-width='.9'/%3E%3C/svg%3E")}
.fyp-fx-ready .fyp-fx-wave.fyp-fx-in::before{animation:fyp-fx-drift-a 16s linear infinite}
.fyp-fx-ready .fyp-fx-wave.fyp-fx-in::after{animation:fyp-fx-drift-b 26s linear infinite}
.fyp-fx-ready .fyp-fx-wave.fyp-fx-off::before,.fyp-fx-ready .fyp-fx-wave.fyp-fx-off::after{animation-play-state:paused}
@keyframes fyp-fx-drift-a{from{transform:translateX(0)}to{transform:translateX(-160px)}}
@keyframes fyp-fx-drift-b{from{transform:translateX(0)}to{transform:translateX(240px)}}

/* D6. Scroll cue: a gold bead travels down a hairline; fades once you move - */
a.fyp-fx-scroll,.fyp-fx-scroll{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:9px;padding:6px 10px;
  color:rgba(247,243,235,.74);text-decoration:none;border:0;background:none;
  font-family:'IBM Plex Mono',ui-monospace,Consolas,monospace;font-weight:500;font-size:9.5px;line-height:1;
  letter-spacing:.34em;text-transform:uppercase;transition:opacity .7s ease}
a.fyp-fx-scroll:hover,a.fyp-fx-scroll:focus-visible{color:#F7F3EB;border:0}
.fyp-fx-scroll--static{position:relative;left:auto;bottom:auto;transform:none}
.fyp-fx-scroll-label{margin-right:-.34em}
.fyp-fx-scroll-line{position:relative;display:block;width:1px;height:40px;overflow:hidden;background:rgba(247,243,235,.22)}
.fyp-fx-scroll-line::after{content:"";position:absolute;left:0;top:0;width:1px;height:15px;
  background:linear-gradient(180deg,rgba(212,175,55,0),#D4AF37);transform:translateY(-15px)}
.fyp-fx-ready .fyp-fx-scroll.fyp-fx-in .fyp-fx-scroll-line::after{animation:fyp-fx-fall 2.8s cubic-bezier(.65,0,.35,1) .6s infinite}
.fyp-fx-ready .fyp-fx-scroll.fyp-fx-off .fyp-fx-scroll-line::after{animation-play-state:paused}
@keyframes fyp-fx-fall{0%{transform:translateY(-15px)}72%,100%{transform:translateY(40px)}}
.fyp-fx-scroll.fyp-fx-gone{opacity:0;pointer-events:none}

/* Reduced motion: the snippets stand still in their finished state.
   (The seal is the one exception, handled above.) */
@media (prefers-reduced-motion:reduce){
  .fyp-fx-ready .fyp-fx-rule::before{transform:none;transition:none}
  .fyp-fx-ready .fyp-fx-rule.fyp-fx-in::after{animation:none}
  .fyp-fx-ready .fyp-fx-sheen.fyp-fx-in{animation:none}
  .fyp-fx-ready .fyp-fx-compass .fyp-fx-compass-needle,
  .fyp-fx-ready .fyp-fx-compass.fyp-fx-in .fyp-fx-compass-needle{animation:none;transform:none}
  .fyp-fx-ready .fyp-fx-wave.fyp-fx-in::before,.fyp-fx-ready .fyp-fx-wave.fyp-fx-in::after{animation:none}
  .fyp-fx-ready .fyp-fx-scroll.fyp-fx-in .fyp-fx-scroll-line::after{animation:none;transform:translateY(12px)}
}

/* --------------------------------------------------------------------------
   PRINT - everything static, in its finished state
   -------------------------------------------------------------------------- */
@media print{
  .fyp-seal,.fyp-seal-lockup,.fyp-seal-footer,.fyp-fx-compass,.fyp-fx-rule,.fyp-fx-wave{break-inside:avoid;page-break-inside:avoid}
  .fyp-seal .fyp-seal-ring{animation:none !important;transform:none !important}
  .fyp-fx-rule::before{transform:none !important;transition:none !important}
  .fyp-fx-rule::after{display:none !important}
  .fyp-fx-sheen{animation:none !important;background:none !important;color:var(--fyp-fx-sheen-base) !important;-webkit-text-fill-color:var(--fyp-fx-sheen-base) !important}
  .fyp-fx-count-live{visibility:hidden !important}
  .fyp-fx-count-ghost{visibility:visible !important}
  .fyp-fx-compass-needle{animation:none !important;transform:none !important}
  .fyp-fx-wave::before,.fyp-fx-wave::after{animation:none !important;transform:none !important}
  .fyp-fx-scroll{display:none !important}
}