/* =========================================================================
   Senyak Industries LLC
   Ported 1:1 from the Claude Design prototype "Senyak Industries Site.dc.html".
   Every measurement below matches the prototype's renderVals() output at its
   saved tweak values: blur 10px, lift 120px min, duration 0.7s, hero shrink
   0.8, hierarchy on, dot grid on, accent dot off, body font Sora.
   ========================================================================= */

:root {
  /* --- motion (prototype "Reveal" tweaks) --- */
  --dur: .7s;          /* duration */
  --blur: 10px;        /* blurAmount */
  --shrink: .8;        /* heroShrink */
  --lift-floor: 120px; /* liftAmount: the minimum the hero rises by */
  --lift: 120px;       /* app.js raises this to centre the hero above the shelf */
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* --- palette --- */
  --ink: #141414;
  --grey: #666;
  --grey-2: #999;
  --line: #e6e6e6;
  --dash: #d4d4d4;
  --body-ink: #444;
  --paper: #fff;

  /* Accent dot next to "Live". Prototype default is off — see .status-dot. */
  --accent: transparent;
  --accent-halo: transparent;

  /* --- type ---
     The prototype ships a "Body font" toggle. Its saved value is Sora
     everywhere; the alternative pairing is Sora for the wordmark and
     Space Grotesk for body text — swap --font-body to use it. */
  --font-name: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* --font-body: 'Space Grotesk', system-ui, -apple-system, sans-serif; */

  /* --- responsive scale (desktop >= 960px) --- */
  --pad: 56px;
  --icon: 112px;
  --rad: 26px;
  --item-w: 190px;
  --bof-w: 161px;
  --bof-h: 142px;
  --header-pad: 36px 56px;
  --hero-gap: 40px;
  --hero-name: 96px;
  --mark-w: 180px;
  --mark-h: 170px;
  --shelf-gap: 48px;
  --shelf-bottom: 120px;
  --cue-bottom: 112px;
  --item-gap: 12px;
  --tagline-size: 22px;
  --tagline-top: 28px;
  --page-pad: 140px 56px 200px;
  --page-h1: 44px;
  --email-size: 24px;
  --tag-size: 12px;
  --next-plus: 28px;
  --nav-gap: 28px;
  --nav-size: 14px;
}

@media (max-width: 959px) { /* tablet */
  :root {
    --pad: 40px;
    --icon: 96px;
    --rad: 22px;
    --item-w: 150px;
    --bof-w: 138px;
    --bof-h: 122px;
    --header-pad: 28px 40px;
    --hero-gap: 28px;
    --hero-name: 64px;
    --mark-w: 130px;
    --mark-h: 123px;
    --shelf-gap: 24px;
  }
}

@media (max-width: 639px) { /* phone */
  :root {
    --pad: 24px;
    --icon: 72px;
    --rad: 17px;
    --item-w: 100px;
    --bof-w: 104px;
    --bof-h: 91px;
    --header-pad: 20px 24px;
    --hero-gap: 20px;
    --hero-name: 44px;
    --mark-w: 96px;
    --mark-h: 91px;
    --shelf-gap: 8px;
    --shelf-bottom: 48px;
    --cue-bottom: 40px;
    --item-gap: 8px;
    --tagline-size: 16px;
    --tagline-top: 20px;
    --page-pad: 96px 24px 80px;
    --page-h1: 32px;
    --email-size: 17px;
    --tag-size: 11px;
    --next-plus: 22px;
    --nav-gap: 18px;
    --nav-size: 13px;
  }
}

/* ---------------------------------------------------------------- shell -- */

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }

a { color: inherit; }

[hidden] { display: none !important; }

.svg-defs { position: absolute; }

.stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--paper);
}

/* Keyboard focus. The prototype had none; the content brief requires a
   visible focus ring, and it never paints unless a key was used. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------- header -- */

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--header-pad);
  font-weight: 400;
  font-size: var(--nav-size);
  line-height: 1;
  z-index: 3;
}

/* Subpages scroll beneath the fixed stage, so give the header an opaque
   surface and a divider. Without this, legal copy can visually run beneath
   the navigation while the reader scrolls. */
html:not(.route-home) .header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.mark-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  opacity: 1;
  transition: opacity calc(var(--dur) * .6) ease;
}
/* The mark is the "back home" affordance, so it is absent on home itself. */
html.route-home .mark-link {
  opacity: 0;
  pointer-events: none;
}

.mark-label {
  font: 600 16px/1 var(--font-name);
  letter-spacing: -.03em;
  color: var(--ink);
}
@media (max-width: 639px) { .mark-label { display: none; } }

.nav {
  display: flex;
  gap: var(--nav-gap);
  color: var(--grey);
  position: relative;
  padding-bottom: 6px;
}

.nav a {
  text-decoration: none;
  color: inherit;
  transition: color .2s ease;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }

/* One underline that measures the active link and slides between items. */
.nav-bar {
  position: absolute;
  bottom: 0;
  height: 1.5px;
  background: var(--ink);
  left: var(--bar-left, 0);
  width: var(--bar-width, 0);
  opacity: 0;
  transition:
    left calc(var(--dur) * .5) var(--ease),
    width calc(var(--dur) * .5) var(--ease),
    opacity .2s ease;
}
html:not(.route-home) .nav-bar { opacity: 1; }
/* Arriving from home there is no previous position worth animating from,
   so the bar jumps to the target and only fades in. */
html.no-slide .nav-bar { transition: opacity .25s ease; }

/* ----------------------------------------------------------------- home -- */

.home {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(var(--blur));
  pointer-events: none;
  transition:
    opacity calc(var(--dur) * .25) ease,
    filter calc(var(--dur) * .25) ease;
}
html.route-home .home {
  opacity: 1;
  filter: blur(0px);
  pointer-events: auto;
  transition:
    opacity calc(var(--dur) * .45) ease calc(var(--dur) * .1),
    filter calc(var(--dur) * .45) ease calc(var(--dur) * .1);
}

.hero-anchor {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: flex;
  justify-content: center;
}

.hero {
  transform: translateY(-50%);
  transition:
    transform var(--dur) var(--ease),
    opacity var(--dur) ease,
    filter var(--dur) ease;
  will-change: transform;
}
html.is-open .hero {
  transform: translateY(calc(-50% - var(--lift))) scale(var(--shrink));
}

.hero-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--hero-gap);
}
@media (max-width: 639px) {
  .hero-row { flex-direction: column; padding: 0 24px; }
}

.mark-lg {
  width: var(--mark-w);
  height: var(--mark-h);
  color: var(--ink);
  flex: none;
}

.hero-name {
  margin: 0;
  font: 600 var(--hero-name)/.95 var(--font-name);
  letter-spacing: -.04em;
  text-align: left;
}
@media (max-width: 639px) { .hero-name { text-align: center; } }

.tagline {
  margin: var(--tagline-top) 0 0;
  text-align: center;
  font-weight: 400;
  font-size: var(--tagline-size);
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--grey);
  opacity: 0;
  transition: opacity var(--dur) ease;
}
@media (max-width: 639px) { .tagline { padding: 0 24px; } }
html.is-open .tagline { opacity: 1; }

.cue {
  position: absolute;
  bottom: var(--cue-bottom);
  left: 50%;
  transform: translateX(-50%);
  font-family: inherit;
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey-2);
  background: none;
  border: 0;
  padding: 8px 12px;
  cursor: pointer;
  opacity: 1;
  transition: opacity .4s ease;
}
html.is-open .cue { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- shelf -- */

.shelf-pos {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--shelf-bottom);
  display: flex;
  justify-content: center;
  padding: 0 var(--pad);
}

.dot-grid {
  position: absolute;
  left: 0;
  right: 0;
  top: -72px;
  bottom: -48px;
  background-image: radial-gradient(var(--dash) 1px, transparent 1px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 55% 80% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 55% 80% at 50% 50%, #000 40%, transparent 100%);
  opacity: 0;
  transform: translateY(64px);
  pointer-events: none;
  /* Rides the same slide as the shelf; the fade is shorter so the grid does
     not linger after the blur has already hidden the icons. */
  transition:
    opacity calc(var(--dur) * .6) var(--ease),
    transform var(--dur) var(--ease);
}
html.is-open .dot-grid { opacity: 1; transform: translateY(0); }

.shelf {
  opacity: 0;
  filter: blur(var(--blur));
  transform: translateY(64px);
  pointer-events: none;
  transition:
    transform var(--dur) var(--ease),
    opacity var(--dur) ease,
    filter var(--dur) ease;
  will-change: transform, opacity, filter;
}
html.is-open .shelf {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
  pointer-events: auto;
}

.shelf-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.shelf-label {
  margin: 0;
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grey);
}

.shelf-row {
  display: flex;
  gap: var(--shelf-gap);
  align-items: flex-start;
  justify-content: center;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--item-gap);
  width: var(--item-w);
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
@media (max-width: 639px) { .item { white-space: normal; } }

.icon-box {
  width: var(--icon);
  height: var(--icon);
  border-radius: var(--rad);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.icon-box--bof {
  background: var(--paper);
  border: 1px solid var(--line);
}

/* The MakeBOF lockup is wider than its tile and deliberately overhangs it. */
.bof-img {
  object-fit: contain;
  width: var(--bof-w);
  height: var(--bof-h);
  max-width: none;
}

.app-icon { display: block; object-fit: cover; }

.next-box {
  border: 2px dashed var(--dash);
  font-weight: 400;
  font-size: var(--next-plus);
  line-height: 1;
  color: var(--grey);
}

.item-name {
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
}
.item-name--muted { color: var(--grey); }

.item-tag {
  font-weight: 400;
  font-size: var(--tag-size);
  line-height: 1.35;
  color: var(--grey-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  max-width: 100%;
}

/* Status dot beside "Live". Off in the prototype's saved state; add
   class="accent-teal" or class="accent-blue" to <html> to bring it back. */
.status-dot {
  display: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-halo);
}
html.accent-teal { --accent: #3d8a94; --accent-halo: #3d8a9433; }
html.accent-blue { --accent: #1b42d8; --accent-halo: #1b42d833; }
html.accent-teal .status-dot,
html.accent-blue .status-dot { display: inline-block; }

/* Fallback tile shown if a remotely hosted product icon fails to load. */
.icon-fallback {
  background: #f4f4f4;
  border: 1px solid var(--line);
  color: var(--grey-2);
  font-weight: 600;
  font-size: calc(var(--icon) * .28);
  line-height: 1;
  letter-spacing: .02em;
}

/* -------------------------------------------------------------- subpage -- */

.page {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(16px);
  pointer-events: none;
  transition:
    opacity calc(var(--dur) * .25) ease,
    filter calc(var(--dur) * .25) ease,
    transform calc(var(--dur) * .25) ease;
}
html:not(.route-home):not(.is-swapping) .page {
  opacity: 1;
  filter: blur(0px);
  transform: translateY(0);
  transition:
    opacity calc(var(--dur) * .45) ease calc(var(--dur) * .1),
    filter calc(var(--dur) * .45) ease calc(var(--dur) * .1),
    transform calc(var(--dur) * .5) var(--ease) calc(var(--dur) * .1);
}
html:not(.route-home) .page { pointer-events: auto; }
/* Subpage to subpage: dip out fast, swap the content, blur back in. */
html.is-swapping .page {
  transition:
    opacity calc(var(--dur) * .15) ease,
    filter calc(var(--dur) * .15) ease,
    transform 0s;
}

.page-inner {
  /* The legal copy is intentionally readable, but should not occupy only a
     narrow central column on desktop. Keep generous side padding while
     allowing the text to use the available page width. */
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.page-h1 {
  margin: 0;
  font-weight: 600;
  font-size: var(--page-h1);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
}

.view--contact {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-lede {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-lede p {
  margin: 0;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--grey);
}

.email {
  align-self: flex-start;
  font-weight: 500;
  font-size: var(--email-size);
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 3px;
  word-break: break-all;
  transition: color .2s ease, border-color .2s ease;
}
.email:hover { color: var(--grey); border-color: var(--grey); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--grey);
}
.contact-grid > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (max-width: 639px) {
  .contact-grid { grid-template-columns: 1fr; gap: 24px; }
}

.field-label {
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey-2);
}

.view--legal {
  display: flex;
  flex-direction: column;
  gap: 36px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--body-ink);
}
.legal-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.legal-meta {
  margin: 0;
  font-size: 13px;
  color: var(--grey-2);
}
.view--legal section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.view--legal h2 {
  margin: 0;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink);
}
.view--legal p { margin: 0; }
.view--legal strong { color: var(--ink); font-weight: 500; }
.view--legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------- footer -- */

.footer {
  display: grid;
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 0;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  border-top: 1px solid var(--line);
  padding: 20px 0 28px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  background: var(--paper);
  z-index: 2;
  text-align: left;
}
@media (max-width: 639px) { .footer { display: none; } }
/* Legal/contact pages use their own scroll surface. Keep the persistent home
   footer from masking the last visible line while those pages are read. */
html:not(.route-home) .footer { display: none; }

.footer p { margin: 0; color: var(--grey); }
.foot-mid { text-align: center; }

.foot-mail {
  color: var(--grey);
  font-weight: 500;
  text-decoration: none;
  justify-self: end;
  align-self: start;
  border-bottom: 2px solid var(--grey);
  padding-bottom: 3px;
  transition: color .2s ease, border-color .2s ease;
}
.foot-mail:hover { color: var(--ink); border-color: var(--ink); }

/* ------------------------------------------------------------ a11y prefs -- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .home, .page, .shelf, .dot-grid { filter: none !important; }
}