/* ============================================================
   Falcon Law Office PLLC — About page
   Full-screen slides that change with the mouse wheel (after
   apricode.agency/about). On touch screens, small screens, or with
   reduced motion, the slides simply stack and scroll normally.
   ============================================================ */

.muted-ink { color: var(--ink-soft); }
.ab-eyebrow { display: block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-dark); }
.ab-fine { margin-top: 14px; font-size: 0.8rem; color: var(--muted); }
.ab-h { font-size: clamp(2.2rem, 4.6vw, 4rem); margin: 16px 0 0; max-width: 20ch; }

/* ---------- Slides: base (stacked) ---------- */
.slide { position: relative; padding: 120px 0 80px; background: var(--cream); }
.s-beige { background: var(--beige); }
.s-text h2 { margin-bottom: 22px; }
.s-two { display: grid; gap: 36px; }
@media (min-width: 900px) { .s-two { grid-template-columns: 4fr 7fr; gap: 72px; align-items: start; } }
.s-two .lede + p, .s-two p + p { margin-top: 16px; }
.ab-big-num { display: block; margin-top: 12px; font-family: var(--display); font-weight: 200; font-size: clamp(4rem, 9vw, 8rem); line-height: 1; letter-spacing: -0.05em; color: var(--taupe); }

/* Intro: name left, cut-out portrait right */
.s-intro { background: radial-gradient(55% 70% at 75% 55%, #FFFFFF 0%, #F6EFE3 55%, #EBDFCB 100%); overflow: hidden; padding-bottom: 0; }
.s-intro-grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .s-intro-grid { grid-template-columns: 7fr 4fr; gap: 56px; } }
.s-intro-copy { padding-bottom: 72px; }
.ab-name { font-size: clamp(3rem, 6.4vw, 5.8rem); font-weight: 300; line-height: 0.92; letter-spacing: -0.045em; margin-top: 18px; }
.ab-name span { display: block; }
.ab-cred { margin-top: 18px; font-size: 1.05rem; color: var(--ink-soft); }
.ab-cred em { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-dark); }
.ab-sub { margin-top: 22px; max-width: 46ch; color: var(--ink-soft); }
.ab-punch { margin-top: 10px; font-weight: 500; }
.ab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 30px; }
/* Photo is shown near its native size (292 x 442) so it stays sharp */
.ab-cutout { position: relative; align-self: center; justify-self: start; width: min(100%, 300px); }
.ab-cutout img {
  position: relative; z-index: 1; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 84%, transparent 100%);
  filter: drop-shadow(0 30px 40px rgba(26, 24, 20, 0.18));
}

/* Photo scenes */
.s-scene { min-height: 88vh; padding: 0; overflow: hidden; isolation: isolate; color: var(--white); background: #1d1b17; }
.s-scene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(0.75) sepia(0.12); }
.s-scene::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 17, 14, 0.75) 0%, rgba(18, 17, 14, 0.25) 60%, rgba(18, 17, 14, 0.05) 100%); }
.s-scene-txt { position: absolute; left: clamp(24px, 6vw, 96px); bottom: clamp(96px, 14vh, 150px); max-width: 600px; }
.s-scene-txt small { display: block; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; color: #E8C983; margin-bottom: 18px; }
.s-scene-txt h2 { color: var(--white); font-size: clamp(2.8rem, 7vw, 6.6rem); line-height: 0.95; letter-spacing: -0.04em; }
.s-scene-txt p { margin-top: 22px; color: rgba(255, 255, 255, 0.86); font-size: 1.08rem; max-width: 38ch; }

/* Facts, steps */
.ab-facts { list-style: none; margin-top: 28px; border-top: 1px solid var(--line); }
.ab-facts li { display: grid; gap: 4px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.ab-facts small { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dark); }
.bio-text p { color: var(--ink-soft); }
.bio-text p + p { margin-top: 16px; }
.ab-steps { display: grid; gap: 32px; margin-top: 56px; }
@media (min-width: 900px) { .ab-steps { grid-template-columns: repeat(3, 1fr); } }
.ab-step { border-top: 1px solid var(--ink); padding-top: 22px; }
.ab-step span { font-size: 0.78rem; color: var(--gold-dark); letter-spacing: 0.1em; }
.ab-step h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 300; margin: 18px 0 14px; letter-spacing: -0.025em; }
.ab-step p { color: var(--ink-soft); font-size: 0.96rem; }

/* Trust types rail */
.ab-types-head { display: grid; gap: 18px; align-items: end; }
@media (min-width: 900px) { .ab-types-head { grid-template-columns: 1fr auto; } }
.ab-rail-meta { display: flex; align-items: center; gap: 18px; font-size: 0.8rem; color: var(--muted); }
.ab-rail-count { font-variant-numeric: tabular-nums; color: var(--ink); }
.ab-rail-nav { display: inline-flex; gap: 8px; }
.ab-rail-nav button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); font-size: 1.05rem; transition: background var(--dur), color var(--dur); }
.ab-rail-nav button:hover { background: var(--ink); color: var(--white); }
.ab-rail {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 36px max(24px, calc((100vw - var(--max-w)) / 2 + 24px)) 12px; cursor: grab; outline: none;
}
.ab-rail::-webkit-scrollbar { display: none; }
.ab-rail.drag { cursor: grabbing; scroll-snap-type: none; }
.ab-rail.drag .ab-card { pointer-events: none; }
.ab-card {
  flex: 0 0 clamp(240px, 24vw, 310px); min-height: 330px; scroll-snap-align: start;
  display: flex; flex-direction: column; padding: 26px; border-radius: 20px;
  background: var(--white); border: 1px solid var(--line-soft); user-select: none;
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
.ab-card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -34px rgba(26, 24, 20, 0.4); }
.ab-card:nth-child(4n+1) { background: var(--ink); color: var(--white); }
.ab-card:nth-child(4n+1) h3 { color: var(--white); }
.ab-card:nth-child(4n+1) p { color: rgba(255, 255, 255, 0.7); }
.ab-card small { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.ab-card h3 { margin-top: auto; font-size: 1.55rem; font-weight: 300; }
.ab-card p { margin-top: 10px; font-size: 0.9rem; color: var(--ink-soft); }
.ab-rail:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }

.s-end { padding: 110px 0 0; }
.deck-bar { display: none; }

/* ---------- Deck mode (desktop, mouse) ---------- */
html.deck-on, html.deck-on body { height: 100%; overflow: hidden; }
html.deck-on .deck { position: fixed; inset: 0; overflow: hidden; }
html.deck-on .slide {
  position: absolute; inset: 0; min-height: 0; padding: 0;
  display: flex; flex-direction: column; justify-content: center;
  visibility: hidden; z-index: 1;
  clip-path: inset(0 0 0 0);
}
html.deck-on .slide.s-text, html.deck-on .slide.s-end { padding-top: 96px; }
html.deck-on .slide.s-intro { padding: 90px 0 78px; justify-content: center; }
html.deck-on .s-intro-grid { width: 100%; }
html.deck-on .s-intro-copy { padding-bottom: 0; }
html.deck-on .slide.s-end { justify-content: flex-start; overflow-y: auto; }
html.deck-on .s-end .site-footer { margin-top: 40px; }
html.deck-on .slide.is-active { visibility: visible; z-index: 3; }
html.deck-on .slide.is-leaving { visibility: visible; z-index: 2; }

/* Enter: wipe up from the bottom (or down from the top when going back) */
html.deck-on .slide.enter-down { animation: wipeUp 1000ms var(--ease-out) both; }
html.deck-on .slide.enter-up { animation: wipeDown 1000ms var(--ease-out) both; }
html.deck-on .slide.leave-down { animation: sinkAway 1000ms var(--ease-out) both; }
html.deck-on .slide.leave-up { animation: riseAway 1000ms var(--ease-out) both; }
@keyframes wipeUp { from { clip-path: inset(100% 0 0 0 round 28px 28px 0 0); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes wipeDown { from { clip-path: inset(0 0 100% 0 round 0 0 28px 28px); } to { clip-path: inset(0 0 0 0 round 0); } }
@keyframes sinkAway { to { transform: translateY(-10%) scale(0.96); opacity: 0.35; } }
@keyframes riseAway { to { transform: translateY(10%) scale(0.96); opacity: 0.35; } }

/* Content inside the arriving slide rises in */
html.deck-on .slide .wrap, html.deck-on .slide .s-scene-txt, html.deck-on .slide .ab-rail { opacity: 0; transform: translateY(40px); }
html.deck-on .slide.is-active .wrap, html.deck-on .slide.is-active .s-scene-txt, html.deck-on .slide.is-active .ab-rail {
  opacity: 1; transform: none;
  transition: opacity 900ms var(--ease-out) 350ms, transform 1100ms var(--ease-out) 300ms;
}
html.deck-on .slide.is-active .ab-rail { transition-delay: 500ms; }
html.deck-on .s-scene.is-active > img { animation: settle 2400ms var(--ease-out) both; }
@keyframes settle { from { transform: scale(1.12); } to { transform: scale(1); } }
html.deck-on .s-end .wrap, html.deck-on .s-end .site-footer .wrap { opacity: 1; transform: none; }

/* Deck bar: chapters, counter, scroll hint */
html.deck-on .deck-bar {
  display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 28px;
  position: fixed; left: 28px; right: 28px; bottom: 22px; z-index: 50; pointer-events: none;
}
.deck-chapters { display: grid; grid-template-columns: repeat(4, minmax(0, 170px)); gap: 14px; pointer-events: auto; }
.deck-chapters a { padding-top: 10px; border-top: 1px solid rgba(26, 24, 20, 0.2); text-decoration: none; font-size: 0.8rem; color: var(--muted); transition: color var(--dur), border-color var(--dur); }
.deck-chapters a small { display: block; font-size: 0.66rem; color: var(--taupe); }
.deck-chapters a:hover, .deck-chapters a.on { color: var(--ink); border-color: var(--ink); }
.deck-count { font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.deck-cur { color: var(--ink); }
.deck-hint { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.wheel { width: 18px; height: 28px; border-radius: 10px; border: 1.5px solid currentColor; position: relative; }
.wheel i { position: absolute; left: 50%; top: 5px; width: 2px; height: 6px; margin-left: -1px; border-radius: 2px; background: currentColor; animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(9px); opacity: 0; } 100% { opacity: 0; } }
/* light bar over dark photo slides */
html.deck-on.on-dark .deck-chapters a { color: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.35); }
html.deck-on.on-dark .deck-chapters a.on { color: var(--white); border-color: var(--white); }
html.deck-on.on-dark .deck-chapters a small, html.deck-on.on-dark .deck-count, html.deck-on.on-dark .deck-hint { color: rgba(255, 255, 255, 0.75); }
html.deck-on.on-dark .deck-cur { color: var(--white); }
html.deck-on.at-end .deck-bar { opacity: 0; transition: opacity 400ms; }

@media (max-width: 899px) {
  .s-intro-copy { padding-bottom: 0; }
  .ab-cutout { width: min(86%, 380px); }
  .s-scene { min-height: 78vh; }
}