/* ==========================================================================
   TineSH — link surface
   Dark-first minimal UI. Geist / Geist Mono. No framework, no icon library.
   Layout is a single narrow column: identity, then a list of destinations.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — dark is the default theme; light is an explicit opt-in.
   -------------------------------------------------------------------------- */
:root {
  color-scheme : dark;

  /* surfaces */
  --bg            : #09090b;
  --bg-tint       : #0d0d10;
  --surface       : #101013;
  --surface-hover : #17171c;

  /* lines */
  --border        : rgb(255 255 255 / 7%);
  --border-hover  : rgb(255 255 255 / 15%);
  --hairline      : rgb(255 255 255 / 9%);

  /* ink */
  --fg            : #fafafa;
  --fg-muted      : #a1a1aa;
  --fg-subtle     : #8b8b94;

  /* one accent, used functionally only: focus + confirmation */
  --accent        : #a3e635;
  --ring          : rgb(163 230 53 / 45%);

  /* effects */
  --spotlight     : rgb(255 255 255 / 7%);
  --shadow        : 0 1px 2px rgb(0 0 0 / 45%);
  --shadow-lift   : 0 6px 20px -8px rgb(0 0 0 / 65%);

  /* motion */
  --ease          : cubic-bezier(.16, 1, .3, 1);
  --ease-soft     : cubic-bezier(.4, 0, .2, 1);

  /* shape */
  --r-sm          : 8px;
  --r-md          : 10px;
  --r-lg          : 14px;
  --r-xl          : 18px;

  /* type */
  --sans          : 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono          : 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-theme='light'] {
  color-scheme : light;

  --bg            : #ffffff;
  --bg-tint       : #fafafa;
  --surface       : #ffffff;
  --surface-hover : #fafafa;

  --border        : rgb(9 9 11 / 9%);
  --border-hover  : rgb(9 9 11 / 18%);
  --hairline      : rgb(9 9 11 / 10%);

  --fg            : #09090b;
  --fg-muted      : #52525b;
  --fg-subtle     : #71717a;

  --accent        : #4d7c0f;
  --ring          : rgb(77 124 15 / 40%);

  --spotlight     : rgb(9 9 11 / 4%);
  --shadow        : 0 1px 2px rgb(9 9 11 / 6%);
  --shadow-lift   : 0 8px 24px -10px rgb(9 9 11 / 18%);
}

/* --------------------------------------------------------------------------
   2. Reset + base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing : border-box;
  margin     : 0;
  padding    : 0;
}

html {
  -webkit-text-size-adjust : 100%;
}

body {
  min-height              : 100svh;
  background              : var(--bg);
  color                   : var(--fg);
  font-family             : var(--sans);
  font-size               : 15px;
  line-height             : 1.5;
  font-feature-settings   : 'liga' 1;
  -webkit-font-smoothing  : antialiased;
  -moz-osx-font-smoothing : grayscale;
  transition              : background-color .3s var(--ease-soft), color .3s var(--ease-soft);
}

/* A single, barely-there vertical wash so the page has a top edge without a gradient wall. */
body::before {
  content        : '';
  position       : fixed;
  inset          : 0 0 auto 0;
  height         : 320px;
  pointer-events : none;
  z-index        : 0;
  background     : linear-gradient(180deg, var(--bg-tint), transparent);
}

a {
  color           : inherit;
  text-decoration : none;
}

img,
svg {
  display : block;
}

::selection {
  background : var(--fg);
  color      : var(--bg);
}

:focus-visible {
  outline        : 2px solid var(--accent);
  outline-offset : 2px;
  border-radius  : var(--r-sm);
}

* {
  scrollbar-width : thin;
  scrollbar-color : var(--border-hover) transparent;
}

.sr-only {
  position : absolute;
  width    : 1px;
  height   : 1px;
  margin   : -1px;
  padding  : 0;
  overflow : hidden;
  clip     : rect(0 0 0 0);
  border   : 0;
}

/* --------------------------------------------------------------------------
   3. Shell
   -------------------------------------------------------------------------- */
.shell {
  position  : relative;
  z-index   : 1;
  max-width : 33rem;
  margin    : 0 auto;
  padding   : clamp(2.75rem, 9vh, 5.5rem) 1.25rem 3.5rem;
}

/* --------------------------------------------------------------------------
   4. Theme toggle
   -------------------------------------------------------------------------- */
.theme-btn {
  position        : fixed;
  top             : 1rem;
  right           : 1rem;
  z-index         : 20;
  width           : 38px;
  height          : 38px;
  display         : grid;
  place-items     : center;
  border          : 1px solid var(--border);
  border-radius   : var(--r-md);
  background      : var(--surface);
  color           : var(--fg-muted);
  cursor          : pointer;
  -webkit-appearance : none;
  appearance      : none;
  transition      : border-color .2s var(--ease-soft),
                    color .2s var(--ease-soft),
                    background-color .2s var(--ease-soft),
                    transform .25s var(--ease);
}

.theme-btn:hover {
  color        : var(--fg);
  border-color : var(--border-hover);
  background   : var(--surface-hover);
}

.theme-btn:active {
  transform : scale(.94);
}

/* Sun and moon share one box and cross-rotate — a swap, not a blink. */
.theme-btn .ico {
  position   : absolute;
  width      : 17px;
  height     : 17px;
  transition : opacity .3s var(--ease-soft), transform .4s var(--ease);
}

.theme-btn .ico-moon {
  opacity   : 1;
  transform : rotate(0) scale(1);
}

.theme-btn .ico-sun {
  opacity   : 0;
  transform : rotate(-90deg) scale(.5);
}

:root[data-theme='light'] .theme-btn .ico-moon {
  opacity   : 0;
  transform : rotate(90deg) scale(.5);
}

:root[data-theme='light'] .theme-btn .ico-sun {
  opacity   : 1;
  transform : rotate(0) scale(1);
}

/* --------------------------------------------------------------------------
   5. Identity
   -------------------------------------------------------------------------- */
.identity {
  display       : flex;
  align-items   : center;
  gap           : 1rem;
  margin-bottom : 1.15rem;
}

.identity-avatar {
  flex          : none;
  display       : block;
  padding       : 5px;
  border        : 1px solid var(--border);
  border-radius : var(--r-xl);
  background    : var(--surface);
  box-shadow    : var(--shadow);
  transition    : border-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft);
}

.identity-avatar:hover {
  border-color : var(--border-hover);
  box-shadow   : var(--shadow-lift);
}

.identity-avatar img {
  width         : 64px;
  height        : 64px;
  border-radius : 13px;
  object-fit    : cover;
}

.identity-name {
  font-size      : 1.4rem;
  font-weight    : 600;
  letter-spacing : -.025em;
  line-height    : 1.15;
}

.identity-role {
  margin-top     : .3rem;
  font-size      : .8125rem;
  color          : var(--fg-muted);
  letter-spacing : -.005em;
}

.identity-role .sep {
  color   : var(--fg-subtle);
  opacity : .6;
  margin  : 0 .3em;
}

.bio {
  max-width     : 44ch;
  margin-bottom : 2.5rem;
  color         : var(--fg-muted);
  font-size     : .9375rem;
  line-height   : 1.6;
  text-wrap     : pretty;
}

/* --------------------------------------------------------------------------
   6. Section label — mono micro-caps with a fading hairline
   -------------------------------------------------------------------------- */
.label {
  display        : flex;
  align-items    : center;
  gap            : .8rem;
  margin-bottom  : .7rem;
  font-family    : var(--mono);
  font-size      : 10.5px;
  font-weight    : 500;
  letter-spacing : .15em;
  text-transform : uppercase;
  color          : var(--fg-subtle);
}

.label::after {
  content    : '';
  flex       : 1;
  height     : 1px;
  background : linear-gradient(90deg, var(--hairline), transparent);
}

.block + .block {
  margin-top : 2.25rem;
}

/* --------------------------------------------------------------------------
   7. Link rows
   -------------------------------------------------------------------------- */
.rows {
  display : grid;
  gap     : 8px;
}

.row-wrap {
  position : relative;
}

.row {
  position      : relative;
  display       : flex;
  align-items   : center;
  gap           : .8rem;
  padding       : .8rem .9rem;
  border        : 1px solid var(--border);
  border-radius : var(--r-lg);
  background    : var(--surface);
  box-shadow    : var(--shadow);
  overflow      : hidden;
  transition    : border-color .22s var(--ease-soft),
                  background-color .22s var(--ease-soft),
                  transform .3s var(--ease),
                  box-shadow .3s var(--ease);
}

/* Pointer-tracked highlight. Whisper level: it reads as the surface catching
   light, not as a glow effect. --mx/--my are set in rcs.js. */
.row::before {
  content        : '';
  position       : absolute;
  inset          : 0;
  pointer-events : none;
  opacity        : 0;
  transition     : opacity .3s var(--ease-soft);
  background     : radial-gradient(160px circle at var(--mx, 50%) var(--my, 50%),
                   var(--spotlight), transparent 72%);
}

.row:hover {
  border-color : var(--border-hover);
  background   : var(--surface-hover);
  transform    : translateY(-1px);
  box-shadow   : var(--shadow-lift);
}

.row:hover::before {
  opacity : 1;
}

.row:active {
  transform  : translateY(0) scale(.995);
  transition : transform .1s var(--ease-soft);
}

.row-icon {
  flex          : none;
  width         : 34px;
  height        : 34px;
  display       : grid;
  place-items   : center;
  border        : 1px solid var(--border);
  border-radius : var(--r-md);
  background    : var(--bg-tint);
  color         : var(--fg-muted);
  transition    : color .22s var(--ease-soft), border-color .22s var(--ease-soft);
}

.row-icon svg {
  width  : 16px;
  height : 16px;
}

.row:hover .row-icon {
  color        : var(--fg);
  border-color : var(--border-hover);
}

.row-text {
  min-width      : 0;
  display        : flex;
  flex-direction : column;
  gap            : 1px;
}

.row-title {
  font-size      : .9375rem;
  font-weight    : 500;
  letter-spacing : -.01em;
  white-space    : nowrap;
  overflow       : hidden;
  text-overflow  : ellipsis;
}

.row-host {
  font-family   : var(--mono);
  font-size     : 11.5px;
  color         : var(--fg-subtle);
  white-space   : nowrap;
  overflow      : hidden;
  text-overflow : ellipsis;
}

.row-arrow {
  flex       : none;
  margin-left : auto;
  width      : 15px;
  height     : 15px;
  color      : var(--fg-subtle);
  transition : color .22s var(--ease-soft), transform .3s var(--ease), opacity .22s var(--ease-soft);
  opacity    : .7;
}

.row-arrow svg {
  width  : 100%;
  height : 100%;
}

.row:hover .row-arrow {
  color   : var(--fg);
  opacity : 1;
}

.row:hover .row-arrow[data-dir='out'] {
  transform : translate(2px, -2px);
}

.row:hover .row-arrow[data-dir='in'] {
  transform : translateX(3px);
}

/* Copy affordance: sits over the row's right edge, only for the email entry. */
.row-wrap:has(.row-copy) .row {
  padding-right : 3.1rem;
}

.row-copy {
  position        : absolute;
  top             : 50%;
  right           : .65rem;
  z-index         : 2;
  transform       : translateY(-50%);
  width           : 30px;
  height          : 30px;
  display         : grid;
  place-items     : center;
  border          : 1px solid transparent;
  border-radius   : var(--r-sm);
  background      : transparent;
  color           : var(--fg-subtle);
  cursor          : pointer;
  -webkit-appearance : none;
  appearance      : none;
  opacity         : 0;
  transition      : opacity .22s var(--ease-soft),
                    color .22s var(--ease-soft),
                    border-color .22s var(--ease-soft),
                    background-color .22s var(--ease-soft);
}

.row-wrap:hover .row-copy,
.row-copy:focus-visible {
  opacity : 1;
}

.row-copy:hover {
  color        : var(--fg);
  border-color : var(--border-hover);
  background   : var(--bg-tint);
}

.row-copy svg {
  width      : 14px;
  height     : 14px;
  position   : absolute;
  transition : opacity .2s var(--ease-soft), transform .3s var(--ease);
}

.row-copy .ico-check {
  opacity   : 0;
  transform : scale(.6);
}

.row-copy.copied {
  color   : var(--accent);
  opacity : 1;
}

.row-copy.copied .ico-copy {
  opacity   : 0;
  transform : scale(.6);
}

.row-copy.copied .ico-check {
  opacity   : 1;
  transform : scale(1);
}

/* Touch: no hover state to reveal the button, so keep it visible. */
@media (hover: none) {
  .row-copy {
    opacity : 1;
  }
}

/* --------------------------------------------------------------------------
   8. Socials
   -------------------------------------------------------------------------- */
.socials {
  display   : flex;
  flex-wrap : wrap;
  gap       : 8px;
}

.social {
  --brand       : var(--fg);
  width         : 44px;
  height        : 44px;
  display       : grid;
  place-items   : center;
  border        : 1px solid var(--border);
  border-radius : var(--r-lg);
  background    : var(--surface);
  color         : var(--fg-muted);
  box-shadow    : var(--shadow);
  transition    : color .22s var(--ease-soft),
                  border-color .22s var(--ease-soft),
                  background-color .22s var(--ease-soft),
                  transform .3s var(--ease),
                  box-shadow .3s var(--ease);
}

.social svg {
  width  : 18px;
  height : 18px;
}

.social:hover {
  color        : var(--brand);
  border-color : color-mix(in srgb, var(--brand) 32%, var(--border));
  background   : var(--surface-hover);
  transform    : translateY(-2px);
  box-shadow   : var(--shadow-lift);
}

.social:active {
  transform  : translateY(0);
  transition : transform .1s var(--ease-soft);
}

.social[data-id='whatsapp']  { --brand : #25d366; }
.social[data-id='telegram']  { --brand : #229ed9; }
.social[data-id='saweria']   { --brand : #fea400; }
.social[data-id='github']    { --brand : var(--fg); }

/* --------------------------------------------------------------------------
   9. Footer + noscript
   -------------------------------------------------------------------------- */
.footer {
  margin-top     : 3.25rem;
  padding-top    : 1.25rem;
  border-top     : 1px solid var(--hairline);
  font-family    : var(--mono);
  font-size      : 11px;
  letter-spacing : .04em;
  color          : var(--fg-subtle);
}

.noscript {
  display       : block;
  padding       : .8rem .9rem;
  border        : 1px solid var(--border);
  border-radius : var(--r-lg);
  background    : var(--surface);
  color         : var(--fg-muted);
  font-size     : .875rem;
}

/* --------------------------------------------------------------------------
   10. Motion — one entrance keyframe, staggered by --i
   -------------------------------------------------------------------------- */
@keyframes rise {
  from {
    opacity   : 0;
    transform : translateY(10px);
  }

  to {
    opacity   : 1;
    transform : translateY(0);
  }
}

.identity,
.bio,
.label,
.row-wrap,
.social,
.footer,
.noscript {
  animation       : rise .62s var(--ease) both;
  animation-delay : calc(var(--i, 0) * 55ms + 60ms);
}

/* The row lift on hover must not be overridden by the entrance transform. */
.row-wrap {
  animation-fill-mode : both;
}

/* View Transitions handle the theme swap when the browser supports it. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration : .32s;
  animation-timing-function : var(--ease-soft);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration        : .01ms !important;
    animation-iteration-count : 1 !important;
    transition-duration       : .01ms !important;
    scroll-behavior           : auto !important;
  }

  .row:hover,
  .social:hover,
  .identity-avatar:hover {
    transform : none;
  }
}

/* --------------------------------------------------------------------------
   11. Narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .shell {
    padding : 2.25rem 1rem 3rem;
  }

  .identity {
    gap : .875rem;
  }

  .identity-avatar img {
    width  : 56px;
    height : 56px;
  }

  .identity-name {
    font-size : 1.28rem;
  }

  .bio {
    margin-bottom : 2rem;
    font-size     : .9rem;
  }

  .row {
    padding : .75rem .8rem;
  }
}