/*
 * pravar.design design system: the shared chrome body (.chrome-*).
 *
 * One set of primitives for the two places that render "the footer, in a
 * sheet": the static pages' mobile footer and hamburger sheet (built by
 * scripts/sync-site-chrome.mjs, styled through /work/assets/css/engine.css)
 * and the orbit SPA's own BottomSheet (src/components/SiteHeader.tsx). Both
 * load THIS file, so the sheet can only be restyled in one place.
 *
 * Geometry is measured off the 400px reference frame (Footer m.svg): a 40px
 * brand mark, a 50px Resume pill, 14px uppercase section labels, and rows on
 * a 48px pitch (16px/20px text in 14px of padding).
 *
 * The sheet's own shell (.site-menu-backdrop / .site-menu-sheet) lives here
 * too, at the bottom of this file, so "the hamburger sheet" is one definition
 * everywhere rather than a React copy and a static copy that drift apart.
 */

/* ---------- Shared chrome content (.chrome-*) ----------
   The mobile hamburger sheet and the mobile footer show the same content --
   nav, selected work, contact, credit -- so both are built from this one set
   of primitives instead of two separately-tuned copies. The only place they
   differ is .chrome-mind (footer only). */
/* Brand block: same 40px mark and 24px wordmark as the desktop footer -- the
   400px frames use one brand lockup at both breakpoints. The dashed rule
   above it and below the Resume pill belong to the footer/sheet shell. */
.chrome-brand{ display:flex; flex-direction:column; align-items:flex-start; }
.chrome-brand__mark{ display:inline-flex; align-items:center; gap:14px; text-decoration:none; margin-bottom:17px; }
.chrome-brand__mark svg{ width:40px; height:40px; flex:0 0 auto; }
.chrome-brand__word{ font-family:var(--sans); font-size:24px; font-weight:400; letter-spacing:.25em; text-transform:uppercase; color:#fff; }
.chrome-brand__tagline{ color:#fff; font-size:16px; line-height:24px; margin:0; }
.chrome-brand__cta{
  display:inline-flex; align-items:center; gap:10px; margin-top:17px;
  height:50px; padding:0 19px; border-radius:25px; border:1px solid rgba(255,255,255,.28);
  color:#fff; font-size:16px; font-weight:600; line-height:20px; text-decoration:none !important;
}
.chrome-brand__cta:hover{ border-color:#00FF73; color:#00FF73 !important; }

/* Beyond the Horizon -- full-bleed inside the column, 200px tall, sitting
   directly under the Contact list in both the footer and the sheet. */
.chrome-mind{ display:block; width:100%; height:200px; margin:0; }

.chrome-label{
  color:#cfcfd0; font-family:var(--sans); font-size:14px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; line-height:20px; margin:0 0 14px;
}

/* One row = "Name · qualifier" on the left, a go-arrow pinned right. */
.chrome-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  color:#fff; font-family:var(--sans); font-size:16px; font-weight:400; line-height:20px;
  text-decoration:none; padding:14px 0; background:none; border:0; text-align:left;
  cursor:pointer; width:100%;
}
/* Takes the row's slack itself, so justify-content:space-between has nothing
   left to distribute and the trailing copy/hairline/arrow stay a tight
   cluster at the right edge instead of being spread across the row. */
.chrome-row__t{ min-width:0; flex:1 1 auto; }
.chrome-row small{ color:#cfcfd0; font-weight:400; font-size:16px; }
.chrome-row__go{ flex:0 0 auto; color:#cfcfd0; font-size:16px; transition:color .2s var(--ease); }
.chrome-row:hover, .chrome-row:hover .chrome-row__go, .chrome-row:hover small{ color:#00FF73; }
.chrome-row--plain{ color:#999; cursor:default; }
.chrome-row--contact{ align-items:center; gap:8px; }
.chrome-row__pipe{ flex:0 0 auto; width:1px; height:16px; background:rgba(255,255,255,.2); }
/* Colours just the one word inside <small> that the equivalent desktop
   footer cell highlights (highlight-green in this file's own footer CSS) --
   e.g. only "Live" in "Live @ LinkedPhone" -- not the whole trailing label. */
.chrome-accent{ color:#00FF73; }
.chrome-contact__copy{
  flex:0 0 auto; width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; color:#cfcfd0; cursor:pointer; padding:0;
  transition:color .2s var(--ease);
}
.chrome-contact__copy:hover{ color:#00FF73; }

/* Section separators, measured off the 400px frames: 1px at 7.8% white, and
   the dashed variant is a 6px dash on an 8px pitch. Solid between the link
   groups, dashed around the brand block and the credit. */
.chrome-hr{ height:1px; background:rgba(255,255,255,.078); margin:10px 0 20px; border:0; }
.chrome-hr--dashed{
  background:none;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.078) 0 6px, transparent 6px 8px);
  margin:10px 0 20px;
}
.chrome-hr--solid{ background:rgba(255,255,255,.078); margin:23px 0 20px; }
/* The dashed rule above the credit is its own .chrome-hr element in the
   markup, so this block only carries the gap below it. */
.chrome-credit{
  margin-top:0; padding-top:6px;
  display:flex; flex-direction:column; gap:16px;
}
.chrome-credit__designed{ color:#868686; font-size:16px; line-height:20px; text-decoration:none; }
.chrome-credit__designed:hover{ color:#00FF73; }
.chrome-credit__copy{ display:flex; align-items:center; gap:10px; color:#999; font-size:16px; line-height:20px; }
.chrome-credit__pipe{ display:inline-block; width:1px; height:14px; background:rgba(255,255,255,.2); }

/* ---- Beyond the Horizon card ---- */
/* The glow sits on the wrapper, not the card itself: the card clips its own
   image to round off its corners (overflow:hidden), which would clip a glow
   living inside it too. */
.footer-mind-wrap { position: relative; }

.footer-mind-wrap::before {
  content: '';
  position: absolute;
  inset: -80px -60px -80px -140px;
  background: radial-gradient(480px 320px at 60% 30%, rgba(0, 255, 115, .16), transparent 70%);
  z-index: -1;
  pointer-events: none;
}
/* On desktop the wash reaches well left of the card, across the brand block --
   measured off Footer d.svg, where the green is still readable at x200 of the
   1000px column. Kept tight at mobile, where the card is full-bleed already. */
@media (min-width: 1024px) {
  .footer-mind-wrap::before {
    inset: -80px -60px -80px -430px;
    background: radial-gradient(650px 380px at 48% 26%, rgba(0, 255, 115, .13), transparent 76%);
  }
}
@media (max-width: 1023px) {
  .footer-mind-wrap::before { content: none; }
  .chrome-brand { position: relative; }
  .chrome-brand::before {
    content: '';
    position: absolute;
    left: -80px; right: -80px; top: -70px;
    height: 380px;
    background: radial-gradient(520px 300px at 28% 18%, rgba(0, 255, 115, .16), transparent 72%);
    z-index: -1;
    pointer-events: none;
  }
}

.footer-mind-card-banner {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  height: 200px;
  box-sizing: border-box;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .10);
  transition: border-color .3s var(--ease);
}
@media (min-width: 1024px) {
  .footer-mind-card-banner {
    width: 449px;
    height: 200px;
    border-radius: 20px;
  }
}
.footer-mind-card-banner:hover { border-color: rgba(0, 255, 115, .45); }
.footer-mind-banner-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* The banner is 514x200 and every card is narrower, so `cover` crops the
     sides. Centred (the default) it pushed the black hole hard against the
     card's right edge and clipped its glow. 97% lands the hole where both
     reference frames put it -- ~83% across the desktop card, ~79% across the
     mobile one -- which is the same value at either width. */
  object-position: 97% center;
  transition: transform .5s var(--ease);
}
.footer-mind-card-banner:hover .footer-mind-banner-img { transform: scale(1.03); }
.footer-mind-title-banner {
  position: relative; z-index: 1;
  margin: 0 0 0 24px;
  padding-top: 132px;
  font-size: 17px; font-weight: 400; line-height: 22px; color: #ffffff;
}
.footer-mind-arrow { margin-left: 4px; }
.footer-mind-desc-banner {
  position: relative; z-index: 1;
  margin-left: 24px;
  font-size: 15px; line-height: 20px; color: #cfcfd0;
}

/* ---------- The hamburger sheet's shell ----------
   Shared by the static pages' generated markup (scripts/sync-site-chrome.mjs)
   and the orbit SPA's BottomSheet (src/components/BottomSheet.tsx), which
   renders these exact class names rather than restyling a panel of its own.
   `--ease` comes from engine.css on the static pages; the fallback keeps the
   SPA on the same curve without it. */
.site-menu-backdrop{
  position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease, cubic-bezier(.25,1,.5,1));
}
.site-menu-backdrop.is-open{ opacity:1; pointer-events:auto; }

.site-menu-sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:95;
  background:rgba(10,10,12,.98); backdrop-filter:blur(28px);
  border-top:1px solid rgba(255,255,255,.1); border-inline:1px solid rgba(255,255,255,.1);
  border-radius:32px 32px 0 0;
  box-shadow:0 -12px 45px rgba(0,0,0,.9);
  max-height:82vh; display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(100%); opacity:0; pointer-events:none;
  transition:transform .3s cubic-bezier(.25,1,.5,1), opacity .3s cubic-bezier(.25,1,.5,1);
  overscroll-behavior:contain;
}
.site-menu-sheet.is-open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.site-menu-sheet.is-dragging{ transition:none; }

/* Vertical only, never horizontal. overflow-x:hidden alone is not enough --
   a hidden axis is still a scrollable one, just without a scrollbar, and
   overflow-x:clip computes back to hidden as soon as the other axis scrolls.
   So the overflow is removed at its source below instead, and these are the
   belt-and-braces on top. */
.site-menu-sheet__scroll{
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  touch-action:pan-y; overflow-wrap:break-word;
  flex:1; padding:24px 20px 28px;
}
/* The close button is position:absolute (top:16px right:16px on the sheet
   itself, independent of this scroll container's own flow), so it doesn't
   push the brand block's text out of its way the way a normal sibling
   would. Reserve its width + a gap on the right so the tagline can never
   run underneath it, regardless of viewport width or how the text wraps. */
.site-menu-sheet__scroll .chrome-brand{ padding-right:52px; }
.site-menu-sheet__close{
  position:absolute; top:16px; right:16px; z-index:5;
  width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.1);
  background:#0a0a0c; color:rgba(255,255,255,.6);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:color .2s var(--ease, cubic-bezier(.25,1,.5,1));
}
.site-menu-sheet__close:hover{ background:rgba(255,255,255,.1); color:#fff; }

.footer-mobile .footer-mind-wrap{ padding-top:4px; }

/* Gutters and opening gap measured off Footer m.svg: content runs 20..380
   in the 400px frame, with the brand mark's top at y41 under the footer's
   own 1px top hairline. That hairline is .site-footer's border-top (full
   bleed), so this block paints no rule of its own. */
.footer-mobile{
  display:none; padding:40px 20px 26px;
}

@media (min-width:1024px){ .site-menu-backdrop, .site-menu-sheet{ display:none; } }

/* The brand block's green wash hangs 80px off each side of .chrome-brand. In
   the footer that is free, but inside the sheet the scroll container is the
   scrollport, so the right-hand 80px became 60px of scrollable width at a
   360px phone -- enough to drag the whole sheet's contents sideways.
   Pulling that edge back to the panel's own edge (the scroll container's 20px
   padding) removes the overflow without changing what you see: everything
   past the panel edge was already clipped by .site-menu-sheet's overflow.
   The gradient's centre is re-expressed against the narrower box so it lands
   on the same pixel it did before. */
.site-menu-sheet__scroll .chrome-brand::before{
  right:-20px;
  background: radial-gradient(520px 300px at 32% 18%, rgba(0, 255, 115, .16), transparent 72%);
}