/* ============== TERKA.IO — design tokens ============== */
:root {
  --bg-0: #f6e9ec;
  --bg-1: #ffd5dd;
  --bg-2: #ffb1c1;
  --bg-3: #ff7aa2;
  --ink:  #1a1416;
  --ink-2:#3a2c30;
  --ink-3:#6b5a5e;
  --paper:#fffafb;
  --hot:  #ff2e63;        /* hot accent */
  --lime: #d6ff5c;        /* surprise accent */
  --blue: #4d7cff;        /* msg blue */
  --glass: rgba(255,255,255,.5);
  --glass-2: rgba(255,255,255,.32);
  --glass-3: rgba(255,255,255,.72);
  --glass-stroke: rgba(255,255,255,.55);
  --glass-stroke-soft: rgba(255,255,255,.28);
  /* iOS-style layered: inset top highlight + soft mid + deep ground */
  --shadow:
    0 1px 0 inset rgba(255,255,255,.7),
    0 0 0 .5px inset rgba(255,255,255,.18),
    0 1px 2px rgba(20, 8, 16, .04),
    0 14px 30px -14px rgba(122, 30, 60, .22),
    0 30px 60px -20px rgba(122, 30, 60, .28);
  --shadow-strong:
    0 1px 0 inset rgba(255,255,255,.8),
    0 0 0 .5px inset rgba(255,255,255,.22),
    0 2px 8px rgba(20, 8, 16, .06),
    0 22px 44px -16px rgba(122, 30, 60, .32),
    0 42px 80px -22px rgba(122, 30, 60, .38);
  --radius: 28px;
  --radius-sm: 16px;
  --radius-lg: 36px;
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --sans:    "Inter", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><circle cx='14' cy='14' r='6' fill='%23ff2e63'/></svg>") 14 14, auto;
}
a { color: inherit; }

/* ----- glass (iOS-style frosted) ----- */
.glass {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.18)),
    var(--glass);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.glass-tint {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.28)),
    rgba(255,255,255,.2);
  backdrop-filter: blur(36px) saturate(180%);
  -webkit-backdrop-filter: blur(36px) saturate(180%);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.glass-strong {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.32)),
    rgba(255,255,255,.35);
  backdrop-filter: blur(40px) saturate(200%);
  -webkit-backdrop-filter: blur(40px) saturate(200%);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-strong);
  isolation: isolate;
}
.glass-dark {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    rgba(26, 20, 22, .55);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  color: var(--paper);
  box-shadow:
    0 1px 0 inset rgba(255,255,255,.12),
    0 0 0 .5px inset rgba(255,255,255,.05),
    0 14px 30px -14px rgba(0, 0, 0, .55),
    0 30px 60px -20px rgba(0, 0, 0, .55);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* graceful fallback for browsers without backdrop-filter */
  .glass, .glass-tint, .glass-strong { background: rgba(255,255,255,.85); }
  .glass-dark { background: rgba(26,20,22,.92); }
}

/* ----- typography ----- */
.display {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.mono { font-family: var(--mono); font-feature-settings: "ss01"; }
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ----- buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s, background .25s;
  white-space: nowrap;
  user-select: none;
}
.btn:focus-visible {
  outline: 2px solid var(--hot);
  outline-offset: 3px;
}
.btn-primary {
  background: linear-gradient(180deg, #2a2024, var(--ink));
  color: var(--paper);
  box-shadow:
    0 1px 0 inset rgba(255,255,255,.18),
    0 8px 22px -8px rgba(0,0,0,.5),
    0 22px 44px -16px rgba(0,0,0,.35);
}
.btn-primary:hover {
  transform: translateY(-2px) rotate(-1deg);
  background: linear-gradient(180deg, #ff4477, var(--hot));
  box-shadow:
    0 1px 0 inset rgba(255,255,255,.3),
    0 14px 28px -10px rgba(255,46,99,.55),
    0 28px 56px -18px rgba(255,46,99,.45);
}
.btn-ghost {
  background: rgba(255,255,255,.6);
  border-color: rgba(255,255,255,.45);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  color: var(--ink);
  box-shadow:
    0 1px 0 inset rgba(255,255,255,.7),
    0 8px 22px -10px rgba(122,30,60,.18);
}
.btn-ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,.85); }
.btn-pill {
  background: white; color: var(--ink);
  padding: 8px 14px; font-size: 13px;
}

/* ----- chrome shapes ----- */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

/* ----- shared layout ----- */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; position: relative; }

/* ----- noisy texture ----- */
.noise::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .25;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ----- chat bubbles ----- */
.bubble {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 22px;
  font-size: 15px;
  line-height: 1.35;
  max-width: 380px;
  position: relative;
}
.bubble.in  { background: white; color: var(--ink); border-bottom-left-radius: 6px; }
.bubble.out { background: var(--ink); color: var(--paper); border-bottom-right-radius: 6px; }
.bubble.pink{ background: var(--hot); color: white; border-bottom-right-radius: 6px; }
.bubble.lime{ background: var(--lime); color: var(--ink); border-bottom-left-radius: 6px; }

/* ----- emoji wobble ----- */
@keyframes wobble {
  0%,100% { transform: rotate(-6deg) translateY(0); }
  50%     { transform: rotate(8deg) translateY(-4px); }
}
.wobble { display: inline-block; animation: wobble 3.2s ease-in-out infinite; transform-origin: 50% 80%; }

/* ----- floating ----- */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-12px); }
}
.float { animation: float 6s ease-in-out infinite; }
.float-slow { animation: float 9s ease-in-out infinite; }

/* ----- marquee ----- */
@keyframes marq {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee {
  display: flex; gap: 48px; width: max-content;
  animation: marq 40s linear infinite;
}

/* ----- selection ----- */
::selection { background: var(--hot); color: white; }

/* ----- focus styles (iOS-like halo) ----- */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--hot) !important;
  box-shadow: 0 0 0 4px rgba(255,46,99,.18) !important;
}
button:focus-visible {
  outline: 2px solid var(--hot);
  outline-offset: 3px;
}
a:focus-visible {
  outline: 2px solid var(--hot);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ----- scrollbar polish ----- */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(122, 30, 60, .15);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 46, 99, .35);
  background-clip: padding-box;
  border: 3px solid transparent;
}

/* ----- real photos: hover animations ----- */
/* round avatar with pop + glow ring on hover */
.ava {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  background: linear-gradient(135deg, #ff8fb1, #ffd1a3);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.5), box-shadow .35s;
  will-change: transform;
}
.ava img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2,.9,.3,1.2), filter .4s;
}
.ava:hover {
  transform: translateY(-2px) scale(1.06) rotate(-3deg);
  box-shadow: 0 0 0 3px rgba(255,46,99,.25), 0 12px 24px -8px rgba(255,46,99,.5);
  z-index: 2;
}
.ava:hover img { transform: scale(1.14); filter: saturate(1.2) contrast(1.05); }

/* big photo card with ken-burns zoom on hover */
.photo-zoom { overflow: hidden; }
.photo-zoom img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .5s;
  will-change: transform;
}
.photo-zoom:hover img { transform: scale(1.13) rotate(.5deg); filter: saturate(1.12) contrast(1.04); }

/* subtle live "breathing" loop for hero photo cards */
@keyframes photoBreathe {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.04); }
}
.photo-breathe img { animation: photoBreathe 9s ease-in-out infinite; }
.photo-breathe:hover img { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .photo-breathe img { animation: none; }
}

/* scroll-triggered reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.9,.3,1.2); }
.reveal.in { opacity: 1; transform: none; }

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