/* ========================================
   RESET & BASE
   ======================================== */
*, *::before, *::after {
  margin: 0; padding: 0;
  box-sizing: border-box;
}
:root {
  --gold:       #C9A84C;
  --gold-light: #F0C96B;
  --purple:     #8B5CF6; /* TODDY moon-violet */
  --brown:      #1A0A00;
  --brown2:     #2C1500;
  --brown3:     #3d1900;
  --trunk:      #5C3317;
  --trunk-dark: #3B2008;
  --leaf:       #2D5A1B;
  --leaf-dark:  #1A3A0E;
  --cherry:     #8B1A1A;
  --cherry-hi:  #C0392B;
  --black:      #050505;
  --white:      #ffffff;
}

html, body {
  min-height: 100vh;
  background-color: var(--brown);
  background-image: url('assets/linktree-bg-toddy-night-jungle.webp');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: 'Playfair Display', serif;
  color: var(--white);
  overflow-x: hidden;
}

/* Ambient glow */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at 20% 60%,
      rgba(139,92,246,0.07) 0%,
      transparent 55%),
    radial-gradient(ellipse at 80% 20%,
      rgba(201,168,76,0.05) 0%,
      transparent 55%);
  pointer-events: none; z-index: 0;
}

/* Sparkle canvas */
#lt-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

/* ========================================
   PAGE WRAPPER
   ======================================== */
.lt-wrap {
  position: relative; z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  padding: 44px 24px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ========================================
   HEADER
   ======================================== */
.lt-logo {
  width: 82px; height: 82px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  box-shadow:
    0 0 0 6px rgba(201,168,76,0.1),
    0 0 28px rgba(201,168,76,0.4);
  margin-bottom: 14px;
  object-fit: cover;
}
.lt-name {
  font-family: 'Cinzel', serif;
  font-size: 1.8rem; font-weight: 700;
  color: var(--gold); margin-bottom: 5px;
  text-align: center; letter-spacing: 1px;
}
.lt-tagline {
  font-size: 0.88rem; opacity: 0.65;
  text-align: center; font-style: italic;
  line-height: 1.5; margin-bottom: 6px;
}
.lt-divider {
  width: 50px; height: 2px;
  background: linear-gradient(
    90deg, transparent,
    var(--gold), transparent);
  margin-bottom: 32px; border-radius: 2px;
}

/* ========================================
   TREE LABEL
   ======================================== */
.lt-tree-label {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  color: rgba(201,168,76,0.6);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 14px;
  text-align: center;
}

/* ========================================
   COFFEE TREE + TODDY INTERACTION STAGE
   ======================================== */
.lt-social-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  min-height: 430px;
  margin: 0 auto 6px;
  overflow: visible;
}

.lt-tree-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

/* The tree SVG scales with the container */
.lt-tree-svg {
  width: 100%;
  max-width: 440px;
  height: auto;
  overflow: visible;
  /* Gentle sway on the whole canopy */
  animation: treeSway 6s
    ease-in-out infinite;
  transform-origin: 50% 95%;
}

@keyframes treeSway {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(0.8deg); }
  75%       { transform: rotate(-0.8deg); }
}

/* ========================================
   CHERRY LINKS — the clickable fruits
   Each <a> wraps a branded <circle> + <svg logo>
   ======================================== */
.cherry-link {
  cursor: pointer;
}

/* Branded circular social buttons replace the old red cherry discs. */
.cherry-base {
  fill: var(--social-color, #242424);
  stroke: rgba(255,255,255,0.72);
  stroke-width: 1.5;
  transition: all 0.3s ease;
  filter: drop-shadow(0 4px 9px rgba(0,0,0,0.55));
}
.cherry-website   { --social-color: #A98122; }
.cherry-twitter   { --social-color: #080808; }
.cherry-telegram  { --social-color: #229ED9; }
.cherry-instagram { --social-color: #C13584; }
.cherry-tiktok    { --social-color: #111111; }
.cherry-medium    { --social-color: #080808; }
.cherry-reddit    { --social-color: #FF4500; }
.cherry-discord   { --social-color: #5865F2; }

/* Cherry logo icon inside */
.cherry-icon {
  fill: rgba(255,255,255,0.9);
  pointer-events: none;
}

/* Cherry hover — via SVG class toggle
   We use CSS :hover on the <a> wrapper */
.cherry-link:hover .cherry-base {
  fill: var(--gold);
  stroke: var(--gold-light);
  stroke-width: 2;
  filter:
    drop-shadow(0 0 14px rgba(201,168,76,0.8))
    drop-shadow(0 3px 8px rgba(0,0,0,0.5));
  transform-origin: center;
}

.cherry-link:hover .cherry-icon {
  fill: var(--black);
}

/* Platform-specific hover colours */
.cherry-twitter:hover .cherry-base {
  fill: #000000; stroke: #ffffff;
  filter:
    drop-shadow(0 0 14px rgba(255,255,255,0.5))
    drop-shadow(0 3px 8px rgba(0,0,0,0.5));
}
.cherry-twitter:hover .cherry-icon {
  fill: #ffffff;
}

.cherry-telegram:hover .cherry-base {
  fill: #0088cc; stroke: #4dcaf7;
  filter:
    drop-shadow(0 0 14px rgba(0,136,204,0.7))
    drop-shadow(0 3px 8px rgba(0,0,0,0.5));
}

.cherry-instagram .cherry-base {
  fill: url(#instagramGradient);
}
.cherry-instagram:hover .cherry-base {
  fill: url(#instagramGradient); stroke: #ffffff;
  filter:
    drop-shadow(0 0 14px rgba(225,48,108,0.7))
    drop-shadow(0 3px 8px rgba(0,0,0,0.5));
}

.cherry-tiktok:hover .cherry-base {
  fill: #010101; stroke: #69c9d0;
  filter:
    drop-shadow(0 0 14px rgba(105,201,208,0.7))
    drop-shadow(0 3px 8px rgba(0,0,0,0.5));
}
.cherry-tiktok:hover .cherry-icon {
  fill: #69c9d0;
}

.cherry-medium:hover .cherry-base {
  fill: #000000; stroke: rgba(255,255,255,0.6);
  filter:
    drop-shadow(0 0 14px rgba(255,255,255,0.3))
    drop-shadow(0 3px 8px rgba(0,0,0,0.5));
}
.cherry-medium:hover .cherry-icon {
  fill: #ffffff;
}

.cherry-reddit:hover .cherry-base {
  fill: #ff4500; stroke: #ff8060;
  filter:
    drop-shadow(0 0 14px rgba(255,69,0,0.7))
    drop-shadow(0 3px 8px rgba(0,0,0,0.5));
}

.cherry-discord:hover .cherry-base {
  fill: #5865f2; stroke: #8fa1ff;
  filter:
    drop-shadow(0 0 14px rgba(88,101,242,0.7))
    drop-shadow(0 3px 8px rgba(0,0,0,0.5));
}

.cherry-dex:hover .cherry-base {
  fill: var(--gold); stroke: var(--gold-light);
  filter:
    drop-shadow(0 0 14px rgba(201,168,76,0.8))
    drop-shadow(0 3px 8px rgba(0,0,0,0.5));
}
.cherry-dex:hover .cherry-icon {
  fill: var(--black);
}

/* ========================================
   TODDY SOCIAL INTERACTION GUIDE
   Toddy sits to the LEFT of the tree and reaches
   toward the lower-left Medium button.  The
   character is mirrored so the raised paw points
   inward toward the tree.
   ======================================== */
.lt-toddy-guide {
  position: absolute;
  left: -42px;
  top: 146px;
  width: 190px;
  margin: 0;
  z-index: 3;
  pointer-events: none;
}

.lt-toddy-guide img {
  display: block;
  width: 190px;
  height: auto;
  max-width: none;
  transform: scaleX(-1);
  transform-origin: center bottom;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.22));
}

/* Desktop: keep the tree centred as before; Toddy occupies the
   open lower-left space without sitting behind the trunk. */
@media (min-width: 769px) {
  .lt-social-stage {
    min-height: 430px;
  }

  .lt-tree-wrap {
    margin-bottom: 0;
  }

  .lt-tree-svg {
    max-width: 440px;
  }

  .lt-toddy-guide {
    left: -42px;
    top: 156px;
    width: 190px;
  }

  .lt-toddy-guide img {
    width: 190px;
  }
}

/* ========================================
   FOOTER
   ======================================== */
.lt-footer {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.lt-back {
  display: inline-flex;
  align-items: center; gap: 6px;
  color: var(--gold); text-decoration: none;
  font-size: 0.88rem; font-weight: 600;
  opacity: 0.72;
  border: 1px solid rgba(201,168,76,0.3);
  padding: 8px 20px; border-radius: 20px;
  transition: opacity 0.3s ease,
              background 0.3s ease;
}
.lt-back:hover {
  opacity: 1;
  background: rgba(201,168,76,0.1);
}

.lt-copyright {
  font-size: 0.76rem; opacity: 0.35;
}

/* ========================================
   TOOLTIP on cherry hover (CSS only)
   ======================================== */
.cherry-link {
  position: relative;
}

/* ========================================
   MOBILE SCALING
   The tree shifts slightly RIGHT so Toddy remains
   visible on the LEFT while the complete tree and
   all social buttons stay inside the viewport.
   Desktop layout is not affected.
   ======================================== */
@media (max-width: 480px) {
  .lt-wrap { padding: 36px 12px 48px; }
  .lt-logo { width: 68px; height: 68px; }
  .lt-name { font-size: 1.5rem; }

  .lt-social-stage {
    width: calc(100% + 24px);
    margin-left: -12px;
    min-height: 350px;
  }

  .lt-tree-wrap {
    width: calc(100% - 24px);
    margin-left: 24px;
    justify-content: center;
  }

  .lt-tree-svg {
    width: 100%;
    max-width: none;
  }

  .lt-toddy-guide {
    left: -32px;
    top: 136px;
    width: 150px;
  }

  .lt-toddy-guide img {
    width: 150px;
  }
}

@media (max-width: 360px) {
  .lt-social-stage {
    min-height: 330px;
  }

  .lt-toddy-guide {
    left: -28px;
    top: 128px;
    width: 138px;
  }

  .lt-toddy-guide img {
    width: 138px;
  }
}


/* ===================================================
   TODDY IMAGE DOWNLOAD PROTECTION — ADDITIVE ONLY
   Prevents casual drag/save gestures without changing
   image appearance, sizing, positioning or layout.
   =================================================== */
img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ========================================
   POLISH PASS — PERFORMANCE + ACCESSIBILITY
   ======================================== */
.lt-back:focus-visible,
.cherry-link:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 4px;
}

@media (max-width: 600px) {
  html, body {
    background-attachment: scroll;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lt-tree-svg {
    animation: none;
  }
  #lt-canvas {
    display: none;
  }
}


/* =========================================================
   PRODUCTION HARDENING PASS (2026-10-09) — additive only
   ========================================================= */
/* Skip link (shared with the main site) */
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 3000;
  transform: translateY(-150%);
  padding: 10px 14px; border-radius: 10px;
  background: #F5D783; color: #120D07;
  font-family: system-ui, sans-serif; font-weight: 800; text-decoration: none;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }
main:focus { outline: none; }

/* The page title is now a real <h1>; keep the old look. */
h1.lt-name { font-size: 1.8rem; line-height: 1.2; }

/* Text that sat directly on bright foliage was hard to read
   (measured contrast well under 4.5:1). */
.lt-tagline { opacity: .9; text-shadow: 0 1px 12px rgba(0,0,0,.9); }
.lt-tree-label {
  color: rgba(240,201,107,.95);
  text-shadow: 0 1px 12px rgba(0,0,0,.95);
}

.lt-notice {
  width: 100%; max-width: 480px; margin: 6px 0 22px;
  padding: 14px 18px; border-radius: 14px;
  border: 1px solid rgba(201,168,76,.35);
  background: rgba(5,5,5,.74);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: .82rem; line-height: 1.6; color: rgba(246,233,208,.94);
  text-align: center;
}
.lt-notice strong { color: #F0C96B; }

.lt-footer {
  padding: 16px 20px; border-radius: 18px;
  background: rgba(5,5,5,.7);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lt-back { opacity: 1; color: #F0C96B; }
.lt-legal {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: .8rem;
}
.lt-legal a {
  color: rgba(246,233,208,.9); text-underline-offset: 3px;
  padding: 8px 2px; min-height: 24px;
}
.lt-legal a:hover { color: #F0C96B; }
.lt-legal a:focus-visible {
  outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: 4px;
}
.lt-copyright { opacity: .86; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

/* Footer panel matches the safety-notice width so the two read as one column. */
.lt-footer { width: 100%; max-width: 480px; }