/* ==========================================================================
   samisee.design, SHELL: base, menubar, desktop icons, dock, sticker, boot.
   Reads tokens.css. Glass surfaces use glass.css (.lg, .lg--chip).
   ========================================================================== */

html, body { margin: 0; height: 100%; }
body {
  background: var(--os-sky-stop-1);
  color: var(--os-ink);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* keyboard focus: one clear ring on everything (WCAG 2.4.7), never shown for mouse or touch */
:focus-visible { outline: 2px solid var(--os-accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--os-selection); color: var(--os-selection-ink); }

/* everything on the desktop fades up once boot hands over */
.ui { opacity: 0; translate: 0 8px; transition: opacity var(--motion-enter) var(--ease-enter), translate var(--motion-enter) var(--ease-enter); }
body.is-live .ui { opacity: 1; translate: 0 0; }

/* ---- menubar: fully transparent, like macOS 26; text carries its own shadow ---- */
.menubar {
  position: fixed; z-index: var(--z-menu); top: 0; left: 0; right: 0; height: 34px;
  display: flex; align-items: center; gap: 22px; padding: 0 20px;
  text-shadow: 0 1px 10px var(--halo);
}
.menubar__slot { position: relative; display: inline-flex; }
.menubar__wm { font: 600 var(--text-lead)/1 var(--font-body); padding: 6px 2px; }
/* the front window's name, bold like a Mac's app menu */
.menubar__app { font-weight: 600; color: var(--os-ink); }
.menubar__icon { display: grid; place-items: center; padding: 4px 2px; }
.menubar__item { position: relative; font: 400 var(--text-lead)/1 var(--font-body); color: color-mix(in srgb, var(--os-ink) 78%, transparent); padding: 6px 2px; }
.menubar__item:hover, .menubar__item[aria-expanded="true"] { color: var(--os-ink); }
.menubar__right { margin-left: auto; display: flex; align-items: center; gap: 16px; font: 400 var(--text-body)/1 var(--font-mono); color: color-mix(in srgb, var(--os-ink) 78%, transparent); }
/* the language: shows the current one, a click switches (js/i18n.js) */
.menubar__lang { font: 500 var(--text-caption)/1 var(--font-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--os-ink); padding: 3px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--os-ink) 28%, transparent); }
.menubar__lang:hover { background: color-mix(in srgb, var(--os-ink) 10%, transparent); }
.menubar__right svg { width: 14px; height: 14px; color: var(--os-ink); filter: drop-shadow(0 1px 6px color-mix(in srgb, var(--shade) 50%, transparent)); }

.menu {
  position: absolute; top: calc(100% + 6px); left: -8px; min-width: 190px; padding: 6px;
  display: none; flex-direction: column; gap: 2px; --lg-r: 16px; --lg-tint: 70%; text-shadow: none;
}
[data-menu][aria-expanded="true"] + .menu { display: flex; }
.menu--right { left: auto; right: -8px; }
.menu button { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 8px 10px; border-radius: 10px; text-align: left; font: 400 var(--text-body)/1 var(--font-body); color: var(--os-ink); }
.menu button:hover { background: var(--os-wash); }
.menu button[aria-checked="true"]::after { content: "✓"; color: var(--os-accent); }
.menu button:disabled { color: var(--os-ink-faint); cursor: default; }
.menu button:disabled:hover { background: none; }
.menu small { font: 400 var(--text-caption)/1 var(--font-mono); color: var(--os-ink-dim); letter-spacing: var(--track-label); text-transform: uppercase; }
.menu hr { border: 0; height: 1px; margin: 4px 6px; background: var(--os-border); }

/* ---- desktop icons ---- */
/* .home wraps the icons and the widget so the phone can lay them out as one screen; on the desktop it has no box */
.home { display: contents; }
.icons .icon--phone { display: none; }
.icons { position: fixed; z-index: var(--z-icons); left: 26px; top: 70px; display: flex; flex-direction: column; gap: 24px; }
.icon { display: flex; flex-direction: column; align-items: center; gap: 9px; width: 112px; transition-delay: calc(var(--i) * 80ms + 120ms); }
.icon__tile { width: 62px; height: 62px; display: grid; place-items: center; }
/* app icons (symbols in index.html): ink outline, one accent detail, stroke only.
   Stroke is set per size so it renders at about 1.6px on the desktop and in the dock. */
.icon-defs { position: absolute; width: 0; height: 0; }
.ico { fill: none; stroke: var(--ico-ink, var(--os-ink)); stroke-width: var(--ico-sw, 1.75); stroke-linecap: round; stroke-linejoin: round; --ico-accent: var(--os-accent); overflow: visible; }
.dock__item .ico { --ico-sw: 2.15; }
.ico__acc { stroke: var(--ico-accent); }
/* hover: the accent detail comes alive, one motion per icon, still at rest */
.ico__fx { transform-box: fill-box; transform-origin: center; }
/* only where something can actually hover: on touch a tap would leave it stuck mid-motion */
@media (hover: hover) { :is(.icon, .dock__item):hover .ico__fx { animation: var(--fx); } }
.ico[data-ico="readme"] .ico__fx { --fx: ico-bob 1.1s ease-in-out infinite; }
.ico[data-ico="folio"] .ico__fx, .ico[data-ico="night"] .ico__fx { --fx: ico-twinkle 1.4s ease-in-out infinite; }
.ico[data-ico="testimonials"] .ico__fx { --fx: ico-beat 2.4s ease-out infinite; }
.ico[data-ico="terminal"] .ico__fx { --fx: ico-blink 1s steps(1) infinite; }
.ico[data-ico="help"] .ico__fx { --fx: ico-bob 1.1s ease-in-out infinite; }
.ico[data-ico="patch-notes"] .ico__fx { stroke-dasharray: 1; --fx: ico-draw 1.6s ease-out infinite; }
.ico[data-ico="sunset"] .ico__fx { --fx: ico-rise 1.6s ease-in-out infinite; }
.ico[data-ico="day"] .ico__fx { --fx: ico-turn 2.4s linear infinite; }
.ico[data-ico="stickers"] .ico__fx { transform-origin: 0 0; --fx: ico-peel 1.2s ease-in-out infinite; }
@keyframes ico-bob { 50% { translate: 0 1.5px; } }
@keyframes ico-twinkle { 0%, 100% { scale: 1; rotate: 0deg; } 40% { scale: .55; } 70% { scale: 1.2; rotate: 90deg; } }
/* the heartbeat's double thump (heartbeat.js SWELL), softened for a small heart */
@keyframes ico-beat { 0%, 28%, 100% { scale: 1; } 8% { scale: 1.28; } 14% { scale: 1.06; } 20% { scale: 1.2; } }
@keyframes ico-blink { 50% { opacity: 0; } }
@keyframes ico-draw { 0% { stroke-dashoffset: 1; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes ico-rise { 50% { translate: 0 -1.5px; opacity: .45; } }
@keyframes ico-turn { to { rotate: 45deg; } }
@keyframes ico-peel { 50% { scale: 1.25; translate: -1px -1px; } }
@media (prefers-reduced-motion: reduce) { :is(.icon, .dock__item):hover .ico__fx { animation: none; } }
.icon svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--shade) 35%, transparent)); }
.icon__label { font: 400 var(--text-body)/1.2 var(--font-mono); color: var(--os-ink); text-align: center; text-shadow: 0 1px 8px var(--halo); padding: 2px 6px; border-radius: 6px; }
.icon:focus-visible { outline: none; }   /* the label lights up instead (next rule) */
.icon:focus-visible .icon__label, .icon.is-selected .icon__label { background: var(--os-accent-wash); }

/* ---- dock ---- */
.dock {
  position: fixed; z-index: var(--z-dock); bottom: 14px; left: 50%; translate: -50% 8px;
  display: flex; align-items: center; gap: 8px; padding: 9px; --lg-r: 26px; transition-delay: 440ms;
}
body.is-live .dock { translate: -50% 0; }
.dock__item { width: 48px; height: 48px; display: grid; place-items: center; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
@media (hover: hover) { .dock__item:hover { transform: translateY(-4px); } }
.dock__item svg { width: 24px; height: 24px; filter: drop-shadow(0 2px 5px color-mix(in srgb, var(--shade) 35%, transparent)); }
/* running windows: a dot under the icon, brighter and glowing for the front one */
.dock__item .dock__dot { position: absolute; left: 50%; bottom: -7px; translate: -50% 0; width: 4px; height: 4px; border-radius: 50%; background: var(--os-ink); opacity: 0; transition: opacity .25s, box-shadow .25s; }
.dock__item.is-running .dock__dot { opacity: .45; }
.dock__item.is-front .dock__dot { opacity: 1; box-shadow: 0 0 6px var(--os-accent), 0 0 2px var(--os-ink); }
.dock__sep { width: 1px; height: 32px; margin: 0 2px; background: var(--glass-edge); }

/* ---- sticker: drag it anywhere; it slaps down where you let go ---- */
.sticker {
  /* above the wallpaper and icons, under every window (windows start at --z-win) */
  position: fixed; z-index: calc(var(--z-win) - 1); left: 19%; bottom: 96px; rotate: var(--r, -6deg);
  font: var(--text-subhead)/1 var(--font-accent); padding: 8px 14px; border-radius: 999px;
  /* each word sticker brings its own gradient (stickers.js WORD_TONES) */
  --w1: #f4bf98; --w2: #c9b6ee; --wd: #6a3f6e;
  background: linear-gradient(120deg, var(--w1), var(--w2));
  color: #fff; isolation: isolate;
  box-shadow: 0 0 0 3px #fff, 0 6px 14px color-mix(in srgb, var(--shade) 44%, transparent);
  cursor: grab; touch-action: none; user-select: none; transition-delay: 600ms;
}
/* the letters' coloured edge: the same word again underneath, stroked. Works in every browser
   (paint-order on HTML text doesn't everywhere, and without it a stroke eats the white letters) */
.sticker[data-word]::before {
  content: attr(data-word); position: absolute; inset: 0; z-index: -1; padding: inherit;
  color: var(--wd); -webkit-text-stroke: 5px var(--wd); pointer-events: none;
}
.sticker.is-lifted { cursor: grabbing; scale: 1.08; box-shadow: 0 0 0 3px #fff, 0 16px 22px color-mix(in srgb, var(--shade) 66%, transparent); transition: scale .2s, box-shadow .2s; }
.sticker.is-slap { animation: slap .4s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes slap { 0% { scale: 1.12; } 55% { scale: .95; } 100% { scale: 1; } }

/* ---- the sticker sheet (js/stickers.js): printed stickers, the same in every look ---- */
.stk-item {
  position: fixed; z-index: calc(var(--z-win) - 1); width: 84px; height: 84px; rotate: var(--r, 0deg);
  cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
  filter: drop-shadow(0 6px 7px color-mix(in srgb, var(--shade) 42%, transparent));
  transition: opacity var(--motion-enter) var(--ease-enter) 600ms;
}
/* word stickers from the sheet wear the phoenix → vienna pill */
.sticker--word { transition: opacity var(--motion-enter) var(--ease-enter) 600ms; }
/* saved stickers wait for the boot, like the rest of the desktop */
body:not(.is-live) [data-stk] { opacity: 0; }
.stk { display: block; width: 100%; height: 100%; overflow: visible; }
.stk__die { fill: #fff; stroke: #fff; stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }
.stk-item.is-lifted { cursor: grabbing; scale: 1.08; filter: drop-shadow(0 16px 12px color-mix(in srgb, var(--shade) 60%, transparent)); transition: scale .2s, filter .2s; }
.stk-item.is-slap { animation: slap .4s cubic-bezier(.3, 1.6, .5, 1); }
:is(.stk-item, .sticker).is-pop { animation: stk-pop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes stk-pop { from { scale: 0; rotate: calc(var(--r, 0deg) - 30deg); } to { scale: 1; rotate: var(--r, 0deg); } }
/* the twinkle: four sparkles burst out and fade */
.stk-spark { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px; pointer-events: none; animation: stk-spark .8s ease-out both; }
.stk-spark svg { display: block; width: 100%; height: 100%; fill: #fff; filter: drop-shadow(0 0 4px var(--os-accent)); }
@keyframes stk-spark { 0% { translate: 0 0; scale: 0; opacity: 1; } 55% { scale: 1; opacity: 1; } 100% { translate: var(--dx) var(--dy); scale: .3; rotate: 90deg; opacity: 0; } }
.dock__stickers.is-empty .ico { opacity: .4; }
/* the two one-time tips, a glass bubble over the sticker */
.stk-tip {
  position: fixed; z-index: var(--z-toast); translate: -50% calc(-100% + 6px); padding: 8px 14px; --lg-r: 999px;
  font: 500 var(--text-body)/1 var(--font-body); color: var(--os-ink); white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 260ms var(--ease-standard), translate 260ms var(--ease-enter);
}
.stk-tip.is-on { opacity: 1; translate: -50% -100%; }

/* ---- boot: the signature writes itself, then glides to its resting spot ---- */
.boot { position: fixed; inset: 0; z-index: var(--z-boot); background: var(--os-sky-stop-1); transition: opacity 700ms var(--ease-standard); }
.boot.is-done { opacity: 0; pointer-events: none; }
.boot__log {
  position: absolute; left: 50%; top: calc(50% + min(9vw, 128px)); translate: -50% 0;
  width: min(560px, 88vw); min-height: 13lh;
  font: 400 var(--text-body)/1.75 var(--font-mono); color: var(--os-ink-dim); white-space: pre;
}
.boot__p { color: var(--os-accent); }
.boot__c { color: var(--os-ink); }
.boot__dim { color: var(--os-ink-dim); }
.boot__ok { color: var(--os-accent-2); }
.boot__caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 1px; vertical-align: -.18em; background: var(--os-accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
body.is-booting .wp-plate { z-index: calc(var(--z-boot) + 1); }

@media (prefers-reduced-motion: reduce) {
  .ui, .dock, .boot { transition: none; }
  .sticker.is-slap, .stk-item.is-slap, :is(.stk-item, .sticker).is-pop { animation: none; }
}