/* ==========================================================================
   Portfolio add-ons: small, optional effects that sit on top of your existing design.
   Nothing here changes how a page looks until you opt in with a class or data-attribute.
   Uses your own variables (--accent, --ink, --paper) with fallbacks.
   ========================================================================== */
:root {
  --ao-accent: var(--accent, #a8501f);
  --ao-ink: var(--ink, #1c1a16);
  --ao-paper: var(--paper, #faf7f1);
  --ao-ghost: #d9d2c3;      /* word-fill: unread words */
  --ao-panel: #f2ede2;      /* .ao-curve section background (a shade off --paper so the curve reads) */
  --ao-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 1. Cursor dot ------------------------------------------------------------ */
.ao-cursor { position: fixed; left: 0; top: 0; z-index: 500; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ao-accent); pointer-events: none; opacity: 0; transition: width .3s var(--ao-ease), height .3s var(--ao-ease), margin .3s var(--ao-ease), opacity .3s; }
.ao-cursor.on { opacity: 1; }
.ao-cursor.big { width: 54px; height: 54px; margin: -27px 0 0 -27px; mix-blend-mode: multiply; opacity: .85; }
@media (hover: none), (pointer: coarse) { .ao-cursor { display: none; } }

/* 2. Scroll progress line --------------------------------------------------- */
.ao-progress { position: fixed; left: 0; top: 0; right: 0; z-index: 450; height: 2px; background: var(--ao-accent); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* 3. Fade-up on scroll: add data-reveal to anything ------------------------- */
.ao-js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ao-ease), transform 1.1s var(--ao-ease); }
.ao-js [data-reveal].is-in { opacity: 1; transform: none; }
.ao-js [data-reveal="2"] { transition-delay: .12s; }
.ao-js [data-reveal="3"] { transition-delay: .24s; }

/* 4. Word-by-word fill: add data-fill to a heading or paragraph ------------- */
[data-fill] .ao-w { color: var(--ao-ghost); transition: color .6s ease; }
[data-fill] .ao-w.on { color: inherit; }

/* 5. Curved section edge + hero recede ---------------------------------------
   Put class "ao-curve" on the section that should slide over the one above.
   Put data-recede on the element above (it should be position: sticky; top: 0). */
.ao-curve { border-top: 0 !important; position: relative; z-index: 2; background: var(--ao-panel); margin-top: 8vh; }
.ao-curve::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 9vh; background: var(--ao-panel); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
[data-recede] { transform-origin: 50% 0; will-change: transform, opacity; }

/* 6. Marquee ticker: <div class="ao-marquee"><div class="ao-marquee__track"><span>Editing</span>...</div></div> */
.ao-marquee { overflow: hidden; border-block: 1px solid var(--line, #ddd6c7); padding: 18px 0; white-space: nowrap; }
.ao-marquee__track { display: inline-flex; gap: 0; animation: ao-marquee var(--ao-marquee-time, 38s) linear infinite; will-change: transform; }
.ao-marquee__track span { font: 500 clamp(1.4rem, 3vw, 2.4rem)/1 var(--display, Georgia, serif); padding-right: 1.2em; }
.ao-marquee__track span::after { content: "\2726"; color: var(--ao-accent); padding-left: 1.2em; font-size: .6em; vertical-align: .2em; }
.ao-marquee:hover .ao-marquee__track { animation-play-state: paused; }
@keyframes ao-marquee { to { transform: translateX(-50%); } }

/* 7. Hover-shift rows: <ul class="ao-rows"><li><a>..</a></li></ul> ------------- */
.ao-rows { list-style: none; margin: 0; padding: 0; }
.ao-rows > li { border-top: 1px solid var(--line, #ddd6c7); }
.ao-rows > li:last-child { border-bottom: 1px solid var(--line, #ddd6c7); }
.ao-rows > li > a, .ao-rows > li > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 22px 0; transition: transform .5s var(--ao-ease), color .4s; }
.ao-rows > li > a:hover, .ao-rows > li > a:focus-visible { transform: translateX(14px); color: var(--ao-accent); }
.ao-rows small { font: 600 11px/1 var(--body, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #726b5e); }

@media (prefers-reduced-motion: reduce) {
  .ao-js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .ao-marquee__track { animation: none; }
}

/* Sections after a [data-recede] hero must cover it completely (:where keeps your own backgrounds in charge) */
:where([data-recede] ~ section) { position: relative; z-index: 2; background: var(--ao-paper); }
:where([data-recede] ~ section.ao-curve) { background: var(--ao-panel); }

/* 8. Card deck (portfolio galleries; see deck.js) ---------------------------------- */
.tile-grid.is-deck { display: block; position: relative; padding: 18px 26px 0; }
.deck-stage { position: relative; width: min(100%, 440px); margin: 0 auto; aspect-ratio: 4 / 4.7; touch-action: pan-y; user-select: none; }
.deck-stage .tile { position: absolute; inset: 0; aspect-ratio: auto; transform-origin: 50% 100%; box-shadow: 0 22px 44px -24px rgba(28, 26, 22, .55), 0 0 0 1px rgba(28, 26, 22, .12); transition: transform var(--deck-ms, .6s) var(--ao-ease), opacity var(--deck-ms, .6s) ease; }
.deck-stage img, .deck-stage video { pointer-events: none; -webkit-user-drag: none; }
.deck-stage .tile[inert] { pointer-events: none; }
.deck-stage .tile.is-flying { transition-duration: .56s; }
.deck-stage .tile:active { scale: 1; }
.deck-ctrl { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 56px; font: 600 11px/1 var(--body, sans-serif); letter-spacing: .16em; color: var(--muted, #726b5e); }
.deck-btn { width: 40px; height: 40px; border: 1px solid var(--line, #ddd6c7); border-radius: 50%; display: inline-grid; place-items: center; font-size: 16px; color: var(--ao-ink); transition: color .3s, border-color .3s, background .3s; }
.deck-btn:hover, .deck-btn:focus-visible { color: var(--ao-accent); border-color: var(--ao-accent); }
@media (max-width: 480px) { .tile-grid.is-deck { padding: 14px 18px 0; } }
@media (prefers-reduced-motion: reduce) { .deck-stage .tile { transition: none; } }

/* the page-transition curtain was removed; this keeps a stale cached copy of it from ever showing */
.ao-curtain { display: none !important; }