/* The corner navigation, the phone design, the date app, contact cards and
 * the portrait's depth. Tokens come from brana.css. */

/* ---------- Portrait depth ---------- */
/* an ink half-tone shadow, offset behind the figure */
#portraitShadow { image-rendering: pixelated; pointer-events: none; opacity: .32; mix-blend-mode: multiply }

/* ---------- The four corners: subtle glass over the manuscript ----------
   Translucent, so the moving letters show through; firmer on hover. */
.corner {
  background: color-mix(in srgb, var(--panel) 34%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg) 32%, transparent);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--rubric) 30%, transparent);
  padding: 9px 14px 11px; min-width: 140px; gap: 2px;
  transition: transform .2s ease, box-shadow .2s ease, opacity .7s ease;
  animation: corner-in .7s cubic-bezier(.2, .8, .3, 1.2) backwards;
}
.c1 { animation-delay: .1s } .c2 { animation-delay: .2s } .c3 { animation-delay: .3s } .c4 { animation-delay: .4s }
@keyframes corner-in { from { opacity: 0; transform: translateY(10px) scale(.96) } }
.corner:hover, .corner:focus-visible {
  transform: translate(-3px, -3px); background: color-mix(in srgb, var(--panel) 78%, transparent);
  border-color: var(--fg); box-shadow: 6px 6px 0 var(--rubric);
}
.corner:hover .t, .corner:focus-visible .t { transform: none; text-decoration: none; color: var(--rubric) }
.corner .n {
  display: inline-grid; place-items: center; width: 24px; height: 24px; margin-bottom: 2px;
  font-family: var(--geez); font-size: 13px; color: var(--bg); background: var(--rubric);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.corner .t { font-size: 30px }
.corner .f { opacity: .75 }
.corner .go { font-size: 11px; color: var(--ink-soft); letter-spacing: .12em; text-transform: uppercase; margin-top: 2px }
.corner:hover .go { color: var(--rubric) }
.corner .ci-ic, .corner .sub { display: none }   /* phones only */

/* ---------- Date app ---------- */
.dateapp p { max-width: 60ch }
.date-in { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px }
.date-in span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft) }
.date-in input { font: inherit; padding: 6px 8px; border: 2px solid var(--fg); background: var(--disc); color: var(--ink) }
.date-out { border-top: 1px dashed var(--line); padding-top: 12px }
.date-out.ink > * { animation: fadein .45s ease both }
.date-out.ink > *:nth-child(2) { animation-delay: .08s }
.date-out.ink > *:nth-child(3) { animation-delay: .16s }
.date-big { font-size: clamp(34px, 7vw, 54px); color: var(--rubric); line-height: 1.1; text-shadow: 2px 2px 0 var(--fg) }
.date-line { margin: 4px 0 10px; font-size: 14px }
.date-month { display: grid; grid-template-columns: repeat(12, 1fr) .25fr; gap: 3px; margin: 8px 0 4px; max-width: 420px }
.date-month span { height: 8px; background: var(--line) }
.date-month span.on { background: var(--rubric) }
.date-sub { font-size: 11px; color: var(--ink-soft); margin: 0 0 10px }
.date-note { border-left: 3px solid var(--ochre); padding: 2px 10px; margin: 0 0 8px }
.date-note b { color: var(--rubric); font-weight: 400; margin-right: 6px }

/* ---------- Contact: each platform with its own mark ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; margin: 12px 0 }
.ccard {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-width: 0;
  border: 1.5px solid var(--fg); background: color-mix(in srgb, var(--fg) 4%, var(--panel)); color: var(--fg); text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.ccard:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--rubric) }
.ccard .ci { width: 36px; height: 36px; display: grid; place-items: center; background: var(--rubric); color: var(--parchment); flex: none; transition: background .2s }
.ccard .ci .ic { width: 18px; height: 18px }
.ccard > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 12.5px }
.ccard small { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft) }
.ccard .go { color: var(--ink-soft); transition: transform .15s, color .15s }
.ccard .go .ic { width: 16px; height: 16px }
.ccard:hover .go { transform: translateX(3px); color: var(--rubric) }
/* on hover each mark takes its platform's colour */
.ccard.linkedin:hover .ci { background: #0a66c2; color: #fff }
.ccard.telegram:hover .ci { background: #229ed9; color: #fff }
.ccard.github:hover .ci { background: #24292f; color: #fff }

/* the row of marks at the end of About */
.about-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.about-links a { display: grid; place-items: center; width: 40px; height: 40px; color: var(--fg); border: 1.5px solid var(--fg); transition: transform .15s, box-shadow .15s, color .15s }
.about-links a:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--rubric); color: var(--rubric) }
.about-links .ic { width: 18px; height: 18px }
.about-links .cta { margin: 0 0 0 auto }
.sv-contact .visit { display: inline-flex; align-items: center; gap: 8px }
.sv-contact .visit .ic { width: 15px; height: 15px }
.copy-mail { font-size: 12px; border: 1px solid var(--fg); padding: 4px 10px }
.copy-mail:hover { background: var(--fg); color: var(--bg) }
.textlink { color: var(--rubric); text-decoration: underline; text-underline-offset: 3px }
.textlink:hover { text-decoration-thickness: 2px }

/* ---------- Word toasts and the jebena ---------- */
.t-word { font-size: 22px !important; color: var(--word) !important }
.t-mean { font-family: var(--serif); font-style: italic; font-size: 17px }
.jebena-inline { display: inline-block; width: 26px; height: 26px; vertical-align: middle }
.jebena-inline .jebena-icon { width: 26px; height: 26px }
.jsteam path { fill: none; stroke: var(--ink-soft); stroke-width: 1.4; opacity: 0 }
.jebena-inline:hover .jsteam path, .jebena-icon:hover .jsteam path { animation: smoke 1.6s ease-out infinite }

/* ---------- The dock (phones) ---------- */
#dock { display: none }

/* ======================================================================
   Phones: the same OS, designed for a thumb
   ====================================================================== */
@media (max-width: 760px) {
  #desk { padding-bottom: 96px; -webkit-touch-callout: none }
  /* the medallion takes the finger (to spin the ring); the rest of the page scrolls */
  .tilt { touch-action: none }
  .corner {
    min-width: 0; padding: 10px 12px 11px; animation-delay: calc(var(--i, 0) * 70ms);
    background: color-mix(in srgb, var(--panel) 30%, transparent);
    border: 1px solid color-mix(in srgb, var(--fg) 30%, transparent);
    box-shadow: 2px 2px 0 color-mix(in srgb, var(--rubric) 30%, transparent);
  }
  .corner .t { font-size: 23px; margin-top: 6px }
  .corner .f, .corner .go { display: none }
  .corner .n { width: 20px; height: 20px; font-size: 11px }
  /* each card: its numeral, its icon, its name in both scripts, and one line */
  .corner { min-height: 112px; justify-content: flex-start; transition: transform .15s ease, background .2s }
  .corner:active { transform: scale(.97); background: color-mix(in srgb, var(--panel) 70%, transparent) }
  .corner .ci-ic { display: grid; position: absolute; right: 11px; top: 11px; color: var(--rubric) }
  .corner .ci-ic .ic { width: 22px; height: 22px }
  .corner .sub { display: flex; align-items: center; margin-top: auto; padding-top: 6px; font-size: 10.5px; letter-spacing: .02em; color: var(--ink-soft) }
  .corner .sub.avail { color: var(--green) }
  .corner .sub .dot { margin-right: 6px; width: 6px; height: 6px }

  /* the dock: five apps under your thumb */
  #dock {
    display: flex; position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 15;   /* under open windows */
    justify-content: space-around; padding: 8px 6px 6px;
    background: color-mix(in srgb, var(--panel) 62%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid color-mix(in srgb, var(--fg) 40%, transparent);
    box-shadow: 3px 3px 0 color-mix(in srgb, var(--rubric) 45%, transparent);
  }
  #dock .count { font-family: var(--mono) }

  /* windows become sheets that slide up, with a handle; swipe down to close */
  .win, .win.wide, .win.tall, .win.rewardwin {
    inset: auto 0 0 0 !important; top: 7vh !important; width: 100%; height: auto; max-height: none;
    border: 2px solid var(--fg); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px var(--shadow) !important;
    animation: sheet-in .38s cubic-bezier(.2, .9, .3, 1) both; z-index: 50;
  }
  .win.dragging { transition: none }
  .win.settle { transition: transform .25s ease }
  .win.closing { animation: sheet-out .22s ease-in forwards }
  @keyframes sheet-in { from { transform: translateY(100%) } }
  @keyframes sheet-out { to { transform: translateY(100%) } }
  .tbar { height: 44px; border-radius: 14px 14px 0 0; padding-top: 10px; position: relative; touch-action: none; cursor: grab }
  .tbar::before { content: ""; position: absolute; left: 50%; top: 6px; width: 44px; height: 4px; translate: -50% 0; border-radius: 2px; background: var(--fg); opacity: .45 }
  .tbar .x { width: 30px; height: 30px; font-size: 16px }
  #toast { bottom: 86px; width: calc(100vw - 28px) }

  /* iPhones: ask once for motion, so the medallion can follow the phone */
  .motion-ask {
    position: absolute; left: 0; top: 0; z-index: 4; display: flex; align-items: center; gap: 4px;
    padding: 5px 9px 5px 6px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--fg); background: color-mix(in srgb, var(--panel) 80%, transparent); border: 1px solid var(--fg);
    box-shadow: 2px 2px 0 var(--rubric); animation: fadein .6s ease both;
  }
  .motion-ask .ic { width: 18px; height: 18px; color: var(--rubric); animation: rock 2.4s ease-in-out infinite }
  .motion-ask[hidden] { display: none }
  @keyframes rock { 25% { rotate: -14deg } 75% { rotate: 14deg } }
  .board8 { transform: scale(1.12); transform-origin: left top; margin-bottom: 26px }
}