/* Vib3s Connect, the link page. The brand kit (brand.css) carries the colours, type, buttons,
   ribbons and logos; this file lays out one column, phone first, and adds the moments: the cover,
   the gold name, the books on a rail, and the Get connected card.

   Every effect is an enhancement. Without scroll-driven animations, @property or a script, the
   page is still complete and readable; with reduced motion asked for, nothing moves. */

@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --sheen { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

:root {
  --gold-1: #A8741C; --gold-2: #EBB454; --gold-3: #FFF1C9; --gold-4: #C98F2E;
  --gold-text: linear-gradient(100deg, var(--gold-1) 0%, var(--gold-2) 22%, var(--gold-3) 34%, var(--gold-2) 46%, var(--gold-4) 70%, var(--gold-1) 100%);
  --rim: color-mix(in srgb, var(--gold-2) 38%, var(--line));
  --glass: color-mix(in srgb, var(--card) 78%, transparent);
  --gutter: 16px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
.connect { background: var(--page-bg, var(--ground)); overflow-x: clip; -webkit-tap-highlight-color: transparent; }
.bg-photo .bg-img { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.bg-photo::before { content: ""; position: fixed; inset: 0; z-index: 0; background: var(--veil); }
::selection { background: color-mix(in srgb, var(--gold-2) 40%, transparent); }

/* The FTV mark behind the page when the moving logos are not running. */
.logo-still { position: fixed; z-index: 0; width: min(78vmin, 560px); height: auto; left: 50%; top: 52%; transform: translate(-50%, -50%); opacity: .06; pointer-events: none; }
.logos.on ~ .logo-still { display: none; }

.top { padding-top: env(safe-area-inset-top); }
.top-in { max-width: 680px; }
.share { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.ico { flex: none; }

.page { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding: 0 var(--gutter) 24px; }

/* ---- the hero: his cover photo, full bleed, melting into the page ---- */

.hero { position: relative; text-align: center; padding-top: 28px; }
.hero.has-cover { padding-top: 0; }
.hero-media { position: relative; margin-inline: calc(-1 * var(--gutter)); height: min(74svh, 700px); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 52%, transparent 100%); }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transform-origin: 50% 30%; animation: settle 2.4s var(--ease) both; }
@keyframes settle { from { transform: scale(1.12); filter: saturate(.6) brightness(.7); } to { transform: scale(1); filter: none; } }
.hero-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 100%, color-mix(in srgb, var(--ground) 70%, transparent), transparent 70%); }

.hero-copy { position: relative; }
.has-cover .hero-copy { margin-top: -26svh; }

.medallion { display: block; width: 92px; height: 92px; margin: 0 auto 6px; filter: drop-shadow(0 0 18px var(--glow-a)); }
.tagline { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--mint); }
.name { font-family: var(--display); font-weight: 800; line-height: .9; letter-spacing: -.035em; margin: 12px 0 0; font-size: clamp(52px, 15vw, 88px); }
.name-a, .name-b { display: block; }
.name-a { color: var(--ink); }
.name-b { background: var(--gold-text); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 7s linear infinite; padding-bottom: .06em; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -160% 0; } }
.bio { margin: 18px auto 0; max-width: 40ch; color: var(--soft); font-size: 17px; line-height: 1.55; text-wrap: pretty; }

.cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 26px; }
.book-call { min-height: 46px; font-size: 16px; }

/* Get connected: a living gold ring around a dark core, breathing light behind it. */
/* Three layers, back to front: the blurred glow, the turning gold ring, the dark core. (A child with
   a negative z-index paints above its parent's own background, so the core is a layer, not the
   button's background; VERIFIED 2026-10-11, the first version washed the label out.) */
.connect-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; width: min(100%, 360px); min-height: 62px; padding: 0 28px;
  border-radius: 999px; border: 0; background: none; text-decoration: none; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: .01em; color: var(--gold-3);
  transition: transform .35s var(--spring); }
.connect-btn::before, .connect-btn::after { content: ""; position: absolute; z-index: -1; border-radius: inherit; }
.connect-btn::before { inset: 0; background: conic-gradient(from var(--spin), var(--gold-1), var(--gold-3), #7FC5A8, var(--gold-2), var(--gold-1)); animation: spin-ring 4.5s linear infinite; }
.connect-btn::after { inset: 2px; background: radial-gradient(120% 160% at 50% 0%, #22201A, #101115 70%); box-shadow: inset 0 1px 0 rgba(255, 241, 201, .12); }
.connect-btn:active { transform: scale(.96); }
.connect-glow { position: absolute; inset: -10px; z-index: -2; border-radius: inherit; filter: blur(18px); opacity: .55;
  background: conic-gradient(from var(--spin), var(--gold-2), #7FC5A8, var(--gold-3), var(--gold-2)); animation: spin-ring 4.5s linear infinite, breathe 3.2s ease-in-out infinite; }
.connect-label { background: var(--gold-text); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 5s linear infinite; }
@keyframes spin-ring { to { --spin: 360deg; } }
@keyframes breathe { 0%, 100% { opacity: .35; transform: scale(.96); } 50% { opacity: .7; transform: scale(1.03); } }
[data-theme="day"] .connect-btn::before { background: conic-gradient(from var(--spin), var(--gold-1), var(--gold-3), #1F6B52, var(--gold-2), var(--gold-1)); }

/* ---- sections ---- */

.group { margin-top: 34px; }
.group-title { display: flex; align-items: center; gap: 12px; font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--mint); margin: 0 0 14px 2px; }
.group-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--rim), transparent); }
.items { display: grid; gap: 10px; }

.item { position: relative; display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 14px 18px; border-radius: 18px; text-decoration: none; color: var(--ink);
  background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  transition: transform .3s var(--spring), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.item:hover, .item:focus-visible { transform: translateY(-2px); border-color: var(--rim); box-shadow: 0 16px 34px -20px var(--gold-2); }
.item:active { transform: scale(.985); }
.item-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.item-label { font-weight: 700; font-size: 17px; }
.item-sub { color: var(--soft); font-size: 14px; line-height: 1.4; }
.item-go { width: 9px; height: 9px; border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); transform: rotate(45deg); flex: none; margin-right: 4px; transition: transform .3s var(--spring); }
.item:hover .item-go { transform: translateX(3px) rotate(45deg); }
.item-price { flex: none; font-weight: 800; font-family: var(--display); font-size: 17px; color: var(--brand); padding: 4px 12px; border-radius: 999px; border: 1px solid var(--rim); }
.aff { display: inline-block; align-self: flex-start; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); border: 1px dashed var(--line); border-radius: 6px; padding: 1px 6px; }

/* The featured card: a slow light passing across it. */
.item.featured { min-height: 104px; padding: 22px; overflow: hidden; border-color: var(--rim);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold-2) 18%, var(--card)), var(--glass) 70%); }
.item.featured::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--gold-3) 22%, transparent) 50%, transparent 65%);
  transform: translateX(var(--sheen)); animation: pass 6s var(--ease) infinite; pointer-events: none; }
@keyframes pass { 0% { --sheen: -120%; } 45%, 100% { --sheen: 120%; } }
.item.featured .item-label { font-family: var(--display); font-size: 24px; letter-spacing: -.01em; }

/* ---- the readings: books on a rail, turning to face you as they reach the middle ---- */

.rail { list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter) 18px; display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; perspective: 1000px; }
.rail::-webkit-scrollbar { display: none; }
.book { flex: 0 0 min(64%, 260px); scroll-snap-align: center; }
.book-in { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); }
.book-cover { position: relative; display: block; aspect-ratio: 636 / 900; border-radius: 4px 12px 12px 4px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 26px 40px -22px rgba(0, 0, 0, .85), 0 0 0 1px color-mix(in srgb, var(--gold-2) 22%, transparent);
  transition: transform .45s var(--spring), box-shadow .45s var(--ease); }
.book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The spine: a soft fold on the left edge, as a printed book has. */
.book-cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 9%; background: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(255, 255, 255, .12) 45%, transparent); z-index: 1; }
.book-shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%); transform: translateX(-110%); transition: transform .9s var(--ease); }
.book-in:hover .book-cover, .book-in:focus-visible .book-cover { transform: translateY(-6px) rotateY(-8deg); box-shadow: 0 34px 50px -24px rgba(0, 0, 0, .9), 0 0 0 1px var(--rim); }
.book-in:hover .book-shine { transform: translateX(110%); }
.book-label { font-family: var(--display); font-weight: 800; font-size: 18px; line-height: 1.15; margin-top: 8px; }
.book-sub { color: var(--soft); font-size: 14px; line-height: 1.4; }
.book-price { align-self: flex-start; margin-top: 4px; font-weight: 800; font-family: var(--display); color: var(--brand); padding: 3px 12px; border-radius: 999px; border: 1px solid var(--rim); }
.has-rail .items { margin-top: 6px; }

@supports (animation-timeline: view()) {
  .book-cover { animation: face-you linear both; animation-timeline: view(inline); }
  @keyframes face-you {
    0% { transform: rotateY(32deg) scale(.86); opacity: .5; }
    50% { transform: rotateY(0deg) scale(1); opacity: 1; }
    100% { transform: rotateY(-32deg) scale(.86); opacity: .5; }
  }
}

/* ---- socials, me and the brands ---- */

.social-group + .social-group { margin-top: 18px; }
.social-title { font-family: var(--body); font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--mint); margin: 0 0 10px 2px; }
/* One full-width column on a phone: two columns cut the brand names off at 375 px (VERIFIED
   2026-10-11, "Feel Thes..."). Two from 560 px up. */
.socials { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .socials { grid-template-columns: repeat(2, 1fr); } }
.social { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-decoration: none; color: var(--ink); background: var(--glass); border: 1px solid var(--line);
  transition: transform .3s var(--spring), border-color .3s var(--ease); min-width: 0; }
.social:hover { transform: translateY(-2px); border-color: var(--rim); }
.social .ico { width: 38px; height: 38px; padding: 8px; border-radius: 12px; color: var(--gold-2); background: color-mix(in srgb, var(--gold-2) 12%, transparent); border: 1px solid var(--rim); }
.social-text { display: flex; flex-direction: column; min-width: 0; }
.social-label { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-sub { color: var(--soft); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.foot { position: relative; z-index: 1; max-width: 680px; margin: 30px auto 0; padding: 18px var(--gutter) calc(40px + env(safe-area-inset-bottom)); text-align: center; color: var(--soft); font-size: 13px; }
.foot p { margin: 4px 0; }

/* ---- the card: a portal opens from the button and a holographic card flies into your hand ---- */

.card-dialog { padding: 0; border: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; background: transparent; color: var(--ink); overflow: hidden; }
.card-dialog::backdrop { background: transparent; }
.portal { position: fixed; inset: 0; background: radial-gradient(circle at var(--ox, 50%) var(--oy, 70%), color-mix(in srgb, var(--gold-2) 26%, #0E0F12), #0E0F12 58%);
  clip-path: circle(0 at var(--ox, 50%) var(--oy, 70%)); transition: clip-path .75s cubic-bezier(.7, 0, .2, 1); }
.card-dialog.show .portal { clip-path: circle(var(--reach, 150vmax) at var(--ox, 50%) var(--oy, 70%)); }
.card-stage { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px var(--gutter); perspective: 1100px; }

.holo-wrap { width: min(88vw, 400px); opacity: 0; }
.card-dialog.show .holo-wrap { animation: arrive 1.15s var(--spring) .28s both; }
@keyframes arrive {
  0% { opacity: 0; transform: translateY(70px) rotateX(62deg) rotateZ(-10deg) scale(.4); filter: blur(10px); }
  55% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
.holo { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --px: 50%; --py: 50%;
  position: relative; aspect-ratio: 1.42; border-radius: 22px; overflow: hidden; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .12s linear;
  background: radial-gradient(120% 140% at 0% 0%, #2A2112, #121318 55%), #121318;
  border: 1px solid color-mix(in srgb, var(--gold-2) 55%, transparent);
  box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9), 0 0 60px -20px color-mix(in srgb, var(--gold-2) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, .08); }
.holo-face { position: absolute; inset: 0; padding: 20px 22px; display: flex; flex-direction: column; color: #F1EEE8; z-index: 1; }
.holo-top { display: flex; align-items: flex-start; justify-content: space-between; }
.holo-photo { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold-2); box-shadow: 0 0 0 4px rgba(235, 180, 84, .16); }
.holo-logo { width: 78px; height: 78px; margin: -10px -10px 0 0; filter: drop-shadow(0 0 10px rgba(235, 180, 84, .45)); }
.holo-name { margin: auto 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 7vw, 30px); letter-spacing: -.02em; line-height: 1; }
.holo-tag { margin: 6px 0 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #7FC5A8; font-weight: 700; }
.holo-brand { margin: 8px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; background: var(--gold-text); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
/* The foil: bands of gold, mint and violet that slide as the card tilts, burned into the card. */
.holo-foil { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: color-dodge; opacity: .5;
  background: repeating-linear-gradient(115deg, transparent 0%, rgba(235, 180, 84, .34) 6%, rgba(255, 241, 201, .2) 9%, rgba(127, 197, 168, .24) 13%, rgba(235, 180, 84, .16) 17%, transparent 23%);
  background-size: 260% 260%; background-position: var(--px) var(--py); }
.holo-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .5), transparent 48%); }

.card-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(88vw, 400px); opacity: 0; }
.card-dialog.show .card-actions { animation: rise .6s var(--ease) .85s both; }
.card-actions .save { grid-column: 1 / -1; min-height: 56px; font-size: 18px; }
.card-actions .btn.ghost { min-height: 46px; padding: 8px 10px; font-size: 15px; color: #F1EEE8; border-color: rgba(255, 255, 255, .18); }
.card-actions #card-share { grid-column: 1 / -1; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.card-close { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; min-height: 40px; padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(0, 0, 0, .35); color: #F1EEE8; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; opacity: 0; }
.card-dialog.show .card-close { animation: rise .5s var(--ease) .9s both; }

/* While the card is open, nothing behind it is drawn: the portal covers it, so the phone spends
   its effort on the card alone. */
body.card-open .waves, body.card-open .logos, body.card-open .glow, body.card-open .medallion { visibility: hidden; }

/* Sparks: thrown out of the portal's centre as it opens (connect.js makes them). */
.spark { position: absolute; left: var(--ox, 50%); top: var(--oy, 70%); width: 6px; height: 6px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #FFF1C9, #EBB454 60%, transparent 70%); box-shadow: 0 0 10px #EBB454;
  animation: fly 1.1s cubic-bezier(.15, .7, .3, 1) both; animation-delay: var(--d, 0s); }
@keyframes fly { 0% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); opacity: 0; } }

@media (min-width: 720px) {
  .hero-media { margin-inline: 0; border-radius: 0 0 32px 32px; }
  .book { flex-basis: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-img, .name-b, .connect-btn, .connect-glow, .connect-label, .item.featured::before, .book-cover { animation: none !important; }
  .item, .item:hover, .book-cover, .social { transition: none; transform: none; }
  .portal { transition: none; }
  .card-dialog.show .holo-wrap, .card-dialog.show .card-actions, .card-dialog.show .card-close { animation: none; opacity: 1; }
  .holo { transition: none; transform: none; }
  .spark { display: none; }
}