/* Marc J Gilbert: version 8, Classic. After the Trajanic Ventures site. */

@font-face {
  font-family: 'Sorts Mill Goudy';
  src: url('../assets/fonts/sorts-mill-goudy-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --night: #0B1226;
  --ink: #0F1830;
  --teal: #356768;
  --grey: #999999;
  --blue: #34689a;
  --sky: #8DB6DE;
  --ice: #D6E9FA;
  --ivory: #F4F1EA;
  --muted: #C3C8D2;
  --dim: #8E97AB;
  --line: rgba(52, 104, 154, 0.45);
  --gutter: clamp(20px, 5vw, 80px);
  --logo-w: min(900px, 84vw); /* the hero logo and the intro's logo share this, so the hand-off is a glide, not a zoom */
  --serif: 'Sorts Mill Goudy', 'Palatino Linotype', Palatino, Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; background: var(--ink); } /* the page mustn't shift when the intro hides the scrollbar */
html.intro-open { overflow: hidden; background: var(--night); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 4px; }

.wrap { width: min(1280px, calc(100% - 2 * var(--gutter))); margin-inline: auto; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(15, 24, 48, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { height: 80px; display: flex; align-items: center; }
.brand {
  display: flex; align-items: center; gap: 16px; min-width: 0;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--ivory);
}
/* The MJG mark turns all the way round on its own GPU layer, like a thin coin: one image,
   backface visible, so from behind it shows the true mirror image, as a real plate would. */
.brand-mark {
  display: block; flex: none; width: 40px;
  will-change: transform;
  animation: mjgSpin 6s linear infinite;
}
.brand-mark img { width: 100%; }
@keyframes mjgSpin { from { transform: perspective(400px) rotateY(0deg); } to { transform: perspective(400px) rotateY(360deg); } }
.brand-name { font-size: 19px; letter-spacing: 0.3em; line-height: 1; white-space: nowrap; padding-top: 2px; }
.brand-name b { font-weight: 400; color: var(--sky); }

@media (max-width: 760px) {
  .site-header .wrap { height: 68px; }
  .brand { gap: 14px; }
  .brand-mark { width: 34px; }
  .brand-name { font-size: 16px; letter-spacing: 0.26em; }
}
/* The full name always shows; on the narrowest phones it tightens up rather than losing any of it */
@media (max-width: 360px) {
  .brand { gap: 11px; }
  .brand-mark { width: 30px; }
  .brand-name { font-size: 15px; letter-spacing: 0.22em; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: calc(100svh - 80px);
  display: flex; align-items: center;
  padding: 72px 0;
  text-align: center;
}
@media (max-width: 760px) { .hero { min-height: calc(100svh - 68px); } }
.hero-title { margin: 0; }
.hero-logo { width: var(--logo-w); margin: 0 auto; }
.tagline {
  margin: clamp(28px, 4.5vh, 44px) 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2em 0.6em;
  font-size: clamp(16px, 2vw, 22px); letter-spacing: 0.04em; color: var(--ivory);
}
.tagline i { font-style: normal; color: var(--sky); }
/* Phones: "Sales & Business Coach" over "Consultant · Speaker", rather than a stray last word */
@media (max-width: 520px) {
  .tagline > :first-child { flex-basis: 100%; }
  .tagline > i:nth-child(2) { display: none; }
}
.motto { margin: 0.45em 0 0; font-size: clamp(17px, 2.1vw, 23px); font-style: italic; color: var(--sky); }
.motto em { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.link-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: clamp(20px, 4vh, 36px);
  background: none; border: 0; padding: 0 4px; cursor: pointer;
  color: var(--dim); font-size: 14px; letter-spacing: 0.25em;
}
.link-btn:hover { color: var(--ivory); }

/* The 1-8 version switcher, tucked in at the top of the hero */
.hero-tools { position: absolute; top: 16px; left: 0; right: 0; }
.versions { display: flex; flex-wrap: wrap; gap: 6px; opacity: 0.75; transition: opacity 0.3s ease; }
.versions:hover, .versions:focus-within { opacity: 1; }
.versions a {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--muted);
  font-size: 15px; line-height: 1; text-decoration: none;
  font-variant-numeric: lining-nums tabular-nums; /* Goudy's old-style figures read as undersized here */
  transition: border-color 0.2s, background 0.2s;
}
.versions a:hover, .versions a:focus-visible { border-color: var(--sky); color: #fff; outline: none; }
.versions a[aria-current="page"] { border-color: var(--sky); background: rgba(52, 104, 154, 0.35); color: #fff; }
@media (max-width: 360px) { .versions { gap: 4px; } .versions a { width: 30px; height: 30px; } }

/* ---------- Footer ---------- */

.site-footer { padding: 40px 0 44px; border-top: 1px solid var(--line); }
.foot-brand { display: flex; align-items: center; gap: 14px; }
.foot-brand .brand-mark { width: 34px; }
.foot-brand .brand-name { font-size: 16px; letter-spacing: 0.26em; }
.foot-copy { margin: 16px 0 0; color: var(--dim); font-size: 15px; }
@media (max-width: 360px) {
  .foot-brand { gap: 11px; }
  .foot-brand .brand-mark { width: 30px; }
  .foot-brand .brand-name { font-size: 15px; letter-spacing: 0.22em; }
}

/* ---------- Opening sequence ---------- */

.intro {
  position: fixed; inset: 0; z-index: 100;
  background: var(--night);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity 0.7s ease, background-color 0.8s ease;
}
.intro[hidden] { display: none; }
.intro.out { opacity: 0; pointer-events: none; }
/* Handing over to the page: the backdrop clears while the logo glides into place (see closeIntro) */
.intro.out.handoff { opacity: 1; background-color: rgba(11, 18, 38, 0); }
html.intro-handoff .hero-logo { visibility: hidden; }
.i-stage { position: relative; display: flex; justify-content: center; }
.i-logo {
  position: relative; display: block;
  width: var(--logo-w);
  aspect-ratio: 750 / 150;
  padding: 0; margin: 0; border: 0; background: transparent; cursor: pointer;
}
.i-logo > * { pointer-events: none; }
.i-glow {
  position: absolute; left: 50%; top: 50%; width: 120vmax; height: 120vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(52, 104, 154, 0.26), rgba(52, 104, 154, 0) 60%);
}
/* A faint vertical seam of light down the line the J drops along (J's centre is at 340 of 750) */
.i-seam {
  position: absolute; left: 45.333%; top: -100vh; bottom: -100vh; width: 2px; margin-left: -1px;
  background: linear-gradient(transparent, rgba(200, 228, 255, 0.55) 30%, rgba(200, 228, 255, 0.55) 70%, transparent);
  transform-origin: top; opacity: 0;
}

/* The blocks, each with its word: full-size copies of the wordmark, each cropped to its own block
   (Marc 0-309 · J 309-371 · Gilbert 371-750 of 750), so they meet exactly where the file's do */
.i-blocks { position: absolute; inset: 0; }
.i-block { position: absolute; inset: 0; width: 100%; height: 100%; }
.i-m { clip-path: inset(0 58.8% 0 0); }
.i-j { clip-path: inset(0 calc(50.5333% - 1px) 0 calc(41.2% - 1px)); } /* a hair wider, under its neighbours, so no seam shows */
.i-g { clip-path: inset(0 0 0 49.4667%); }

.i-flash {
  position: absolute; left: var(--x); top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px;
  border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #FFFFFF 0%, rgba(200, 230, 255, 0.9) 30%, rgba(120, 180, 255, 0) 70%);
}
/* A long horizontal flare from each landing block, out past both ends of the logo (it runs behind the blocks) */
.i-streak {
  position: absolute; left: var(--x); top: 50%; width: 280vw; height: 3px; margin: -1.5px 0 0 -140vw;
  background: linear-gradient(90deg, rgba(120, 180, 255, 0), rgba(120, 180, 255, 0.4) 30%, rgba(240, 248, 255, 1) 50%, rgba(120, 180, 255, 0.4) 70%, rgba(120, 180, 255, 0));
  opacity: 0;
}
.i-streak::before {
  content: ""; position: absolute; left: 25%; right: 25%; top: -36px; bottom: -36px;
  background: radial-gradient(closest-side, rgba(140, 195, 255, 0.4), rgba(140, 195, 255, 0));
}
/* A starburst of fine rays at each landing block, two uneven sets so it doesn't look machined */
.i-rays {
  position: absolute; left: var(--x); top: 50%; width: 80vmin; height: 80vmin; margin: -40vmin 0 0 -40vmin;
  background:
    repeating-conic-gradient(from 4deg, rgba(225, 240, 255, 0.85) 0deg 0.7deg, rgba(225, 240, 255, 0) 1.6deg 17deg),
    repeating-conic-gradient(from 11deg, rgba(150, 200, 255, 0.6) 0deg 0.5deg, rgba(150, 200, 255, 0) 1.2deg 29deg);
  -webkit-mask: radial-gradient(closest-side, #000, rgba(0, 0, 0, 0.5) 30%, transparent);
  mask: radial-gradient(closest-side, #000, rgba(0, 0, 0, 0.5) 30%, transparent);
  mix-blend-mode: screen;
  opacity: 0;
}
/* Block-shaped shockwaves: as each block lands, its outline, in a luminous tint of its own colour,
   flies outward from its centre with a soft glow */
.i-burst {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 0 3px rgba(190, 225, 255, 0.9)) drop-shadow(0 0 12px rgba(90, 160, 255, 0.6));
}
.i-burst g {
  fill: none; stroke-width: 4; stroke-linejoin: miter;
  transform-box: view-box; transform-origin: var(--ox) 75px;
  opacity: 0;
}
.i-burst rect { vector-effect: non-scaling-stroke; }
.i-burst .bm { stroke: #7FD6D7; }
.i-burst .bj { stroke: #F2F2F2; }
.i-burst .bg { stroke: #86C0FF; }
/* Each block's centre (Marc 0-309, J 309-371, Gilbert 371-750 of 750) and the moment it lands */
.fx-m { --x: 20.6%;   --ox: 154.5px; --land: 1.3s; }
.fx-j { --x: 45.333%; --ox: 340px;   --land: 2.05s; }
.fx-g { --x: 74.733%; --ox: 560.5px; --land: 2.8s; }
.i-sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.i-word { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The closing wipe of light, after Prism II: a slim white bar sweeps across behind the logo
   while a band of light, clipped to the logo, brightens it as it passes, with a faint rainbow fringe. */
.i-beam {
  position: absolute; top: -140%; bottom: -140%; left: -15%; width: 140px; margin-left: -70px;
  background: linear-gradient(90deg, rgba(214, 233, 250, 0) 0%, rgba(141, 182, 222, 0.08) 30%, rgba(250, 252, 255, 0.92) 49.3%, rgba(250, 252, 255, 0.92) 50.7%, rgba(141, 182, 222, 0.08) 70%, rgba(214, 233, 250, 0) 100%);
  -webkit-mask: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  mask: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  opacity: 0;
}
/* The band's centre travels -15% → 115% of the logo, in step with the bar:
   a background 2.3× the logo's width, slid from 100% to 0%. */
.i-shine {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 44%, rgba(90, 150, 255, 0.35) 46%, rgba(120, 230, 255, 0.45) 47.8%,
    rgba(255, 255, 255, 0.95) 50%,
    rgba(255, 210, 110, 0.45) 52.2%, rgba(255, 120, 190, 0.35) 54%, rgba(255, 255, 255, 0) 56%);
  background-size: 230% 100%;
  background-position: 100% 0;
  mix-blend-mode: screen;
  opacity: 0;
}

.i-skip {
  position: absolute; right: clamp(16px, 3vw, 40px); top: clamp(16px, 3vw, 36px);
  height: 44px; padding: 0 18px;
  background: transparent; border: 1px solid rgba(141, 182, 222, 0.45); color: var(--muted);
  font-family: var(--serif); font-size: 13px; letter-spacing: 0.3em; cursor: pointer;
}
.i-skip:hover { color: var(--ivory); border-color: var(--sky); }

/* The timeline runs only while .play is set; removing and re-adding it replays.
   0.1 seam · Marc lands 1.3 · J lands 2.05 · Gilbert lands 2.8 (each with a jolt, its own shockwave,
   flash, flare and sparks) · 3.2 the whole wordmark takes over · 3.9 light wipe · 5.7 still */
.intro.play .i-glow       { animation: mjgFade 1.8s ease 1.3s both; }
.intro.play .i-seam       { animation: mjgSeam 2.6s cubic-bezier(.6, 0, .2, 1) .1s both; }
.intro.play .i-logo       { animation: mjgShake 1.9s linear 1.3s both; }
/* Each block arrives at speed and lands with a jolt: Marc, then J, then Gilbert */
.intro.play .i-m          { animation: mjgSlideL .9s cubic-bezier(.5, 0, .75, .45) .4s both; }
.intro.play .i-j          { animation: mjgDrop .65s cubic-bezier(.55, 0, .9, .45) 1.4s both; }
.intro.play .i-g          { animation: mjgSlideR .9s cubic-bezier(.5, 0, .75, .45) 1.9s both; }
.intro.play .i-flash      { animation: mjgFlash 1s ease-out calc(var(--land) - .05s) both; }
.intro.play .i-streak     { animation: mjgFlare 1.3s ease-out calc(var(--land) - .05s) both; }
.intro.play .i-rays       { animation: mjgRays 1s ease-out calc(var(--land) - .05s) both; }
.intro.play .i-burst g    { animation: mjgBurst 1.5s cubic-bezier(.2, .7, .3, 1) var(--land) both; }
/* Once the lock's jolt has settled, the whole wordmark swaps in over the three pieces (identical, so unseen) */
.intro.play .i-word       { animation: mjgShow 0s linear 3.2s both; }
.intro.play .i-blocks     { animation: mjgHide 0s linear 3.25s both; }
.intro.play .i-beam       { animation: mjgBeam 1.8s cubic-bezier(.45, 0, .55, 1) 3.9s both; }
.intro.play .i-shine      { animation: mjgShine 1.8s cubic-bezier(.45, 0, .55, 1) 3.9s both; }

@keyframes mjgFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes mjgSeam   { 0% { transform: scaleY(0); opacity: 1; } 40% { transform: scaleY(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes mjgSlideL { from { transform: translateX(-60vw); opacity: 0; } 50% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes mjgSlideR { from { transform: translateX(60vw); opacity: 0; } 50% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes mjgDrop   { from { transform: translateY(-60vh); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } }
/* Three jolts over 1.9 s, one as each block lands (1.3, 2.05, 2.8 s); the last, the lock, is the strongest */
@keyframes mjgShake  { 0%, 12%, 39.5%, 54.5%, 79%, 95%, 100% { transform: none; }
  3% { transform: translate(-2px, 1px); } 6% { transform: translate(2px, -1px); } 9% { transform: translate(-1px, 1px); }
  42.5% { transform: translate(-3px, 2px); } 45.5% { transform: translate(3px, -2px); } 48.5% { transform: translate(-2px, 1px); } 51.5% { transform: translate(1px, -1px); }
  82% { transform: translate(-4px, 2px); } 85% { transform: translate(4px, -2px); } 88% { transform: translate(-3px, 1px); } 91.5% { transform: translate(2px, -1px); } }
@keyframes mjgFlash  { 0% { opacity: 0; transform: scale(.2); } 8% { opacity: 1; transform: scale(2.6); } 100% { opacity: 0; transform: scale(4); } }
@keyframes mjgFlare  { 0% { opacity: 0; transform: scaleX(.05); } 6% { opacity: 1; transform: scaleX(.9); } 100% { opacity: 0; transform: scaleX(1.25); } }
@keyframes mjgRays   { 0% { opacity: 0; transform: scale(.3) rotate(0deg); } 8% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6) rotate(12deg); } }
@keyframes mjgBurst  { 0% { opacity: 0; transform: scale(1); } 8% { opacity: 1; } 100% { opacity: 0; transform: scale(var(--burst, 11)); } }
@keyframes mjgShow   { from { opacity: 0; } to { opacity: 1; } }
@keyframes mjgHide   { from { visibility: visible; } to { visibility: hidden; } }
@keyframes mjgBeam   { 0% { left: -15%; opacity: 0; } 20%, 80% { opacity: 1; } 100% { left: 115%; opacity: 0; } }
@keyframes mjgShine  { 0% { background-position: 100% 0; opacity: 0; } 50% { opacity: 1; } 100% { background-position: 0% 0; opacity: 0; } }

/* A wide, short logo on a tall phone: throw the outlines further so they still clear the screen */
@media (max-width: 600px) { .i-burst g { --burst: 18; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro *, .intro, .brand-mark { animation: none !important; transition: none !important; }
  .brand-mark { will-change: auto; }
}