/* /assets/style.css  — Light, cozy, non-pink palette */

/* ========== Animations (kept subtle) ========== */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes blink { 0%,55%{opacity:1} 56%,100%{opacity:.0} }
@keyframes sparkle { 0%,100%{transform:scale(0) rotate(0);opacity:0} 50%{transform:scale(1) rotate(180deg);opacity:1} }
@keyframes scroll { from{transform:translateX(100%)} to{transform:translateX(-100%)} }

/* ========== Cozy light theme tokens ========== */
:root{
  --paper: #faf7f0;        /* warm paper */
  --paper-2: #f3efe2;      /* eggshell */
  --panel: #ffffff;        /* card surface */
  --panel-2:#f7f3e8;       /* soft panel */
  --ink: #24323f;          /* slate text */
  --muted-ink:#5a6b78;     /* muted slate */
  --line:#e1dbcf;          /* soft ridge */
  --line-strong:#cfc6b6;   /* stronger outline */
  --blue:#6aa3c1;          /* soft denim */
  --sage:#2a7f62;          /* calm sage */
  --amber:#d99058;         /* warm amber */
  --butter:#ffe8b0;        /* pale butter highlight */
  --shadow: rgba(32,28,22,.08);
  --shadow-2: rgba(32,28,22,.14);
}

/* ========== Base ========== */
html, body {
  margin:0; padding:0;
  background:
    radial-gradient(14px 14px at 12% 18%, rgba(0,0,0,.015), transparent 60%),
    radial-gradient(12px 12px at 78% 62%, rgba(0,0,0,.015), transparent 60%),
    var(--paper);
  color: var(--ink);
  font-family: "Trebuchet MS", Segoe UI, system-ui, -apple-system, Arial, sans-serif;
  line-height: 1.5;
  cursor: auto;
}

/* Layout */
.main-table{
  width: 900px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 10px;
}

/* ========== Header ========== */
.header{
  background:
    linear-gradient(180deg, var(--panel), var(--panel-2));
  padding: 22px 20px;
  text-align: center;
  border: 3px ridge var(--line);
  box-shadow: 0 6px 20px var(--shadow);
}

.site-title{
  margin:0;
  font-size: 44px;
  color: var(--sage);
  text-shadow: 0 1px 0 #fff, 0 0 20px rgba(42,127,98,.08);
  animation: float 3s ease-in-out infinite;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  letter-spacing:.5px;
}

.tagline{
  color: var(--muted-ink);
  font-size: 18px;
  animation: blink 3.5s linear infinite;
}

/* ========== Sidebar ========== */
.sidebar{
  width:200px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 3px double var(--line);
  padding:15px;
  vertical-align: top;
  box-shadow: 0 4px 14px var(--shadow);
}

.nav-header{
  text-align:center;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 12px;
}

.nav-link{
  display:block;
  background: linear-gradient(180deg, #ffffff, #f6f2e9);
  color: var(--ink);
  text-decoration: none;
  padding:10px 8px;
  margin:6px 0;
  border: 2px outset var(--line);
  text-align:center;
  font-weight:600;
  transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
  box-shadow: inset 0 0 0 1px #fff;
  border-radius: 4px;
}
.nav-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 3px 10px var(--shadow-2);
  background: #fffdf7;
}

/* ========== Content ========== */
.content{
  background:
    repeating-linear-gradient(45deg, rgba(36,50,63,.03), rgba(36,50,63,.03) 2px, transparent 2px, transparent 6px),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 3px groove var(--line);
  padding:20px;
  vertical-align: top;
  position:relative;
  overflow:hidden;
}

.content::before{
  content:"✨";
  position:absolute;
  left:10px; top:10px;
  font-size:18px; opacity:.6;
  animation: sparkle 2.2s linear infinite;
}

.content-box{
  background: var(--panel);
  border: 2px ridge var(--line);
  padding:16px;
  margin-bottom:20px;
  box-shadow: inset 0 0 0 1px #fff, 0 2px 10px var(--shadow);
  border-radius: 6px;
}

.content h2{
  color: var(--blue);
  text-shadow: 0 1px 0 #fff;
  font-size: 26px;
  margin-top: 0;
}

p{ color: var(--ink); }

/* Accent text (toned down) */
.glitter{
  background: linear-gradient(90deg, var(--sage), var(--blue), var(--amber));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

/* Small accent chip */
.accent-chip{ color: var(--sage); font-weight:700; }

/* ========== Counter & Music ========== */
.counter{
  background: #fffdf6;
  color: #2d4a3f;
  font-family: "Courier New", ui-monospace, monospace;
  padding:6px 10px;
  border: 2px inset var(--line-strong);
  display:inline-block;
  margin:10px 0;
  box-shadow: inset 0 0 10px rgba(0,0,0,.05);
  border-radius: 4px;
}

.music-player{
  background: #fffdf6;
  color: #2d4a3f;
  padding: 10px;
  border: 2px inset var(--line-strong);
  margin: 15px 0;
  font-family: "Courier New", ui-monospace, monospace;
  text-align:center;
  border-radius: 4px;
}

/* ========== Marquee ========== */
.marquee-container{
  background: linear-gradient(180deg, #fff8e7, #fff2d5);
  border: 2px solid var(--line-strong);
  padding:6px;
  margin:14px 0;
  overflow: hidden; white-space: nowrap;
  border-radius: 4px;
}
.marquee-text{
  display:inline-block;
  animation: scroll 14s linear infinite;
  color: #6b4a2d;            /* warm brown text */
  font-weight:700;
}

/* ========== Guestbook Form ========== */
.guestbook-form{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 3px ridge var(--line);
  padding:15px;
  margin-top: 18px;
  border-radius: 6px;
}
.form-input{
  width:100%;
  padding:8px 10px;
  margin:8px 0;
  border: 2px inset var(--line-strong);
  background: #fffefa;
  color: var(--ink);
  border-radius: 4px;
}
.submit-btn{
  background: linear-gradient(180deg, #e9f4ff, #dbeefc);
  color: #133447;
  border: 3px outset var(--line);
  padding: 10px 18px;
  font-weight: 800;
  cursor: pointer;
  border-radius: 6px;
  animation: float 2.2s ease-in-out infinite;
}
.submit-btn:hover{ border-style: inset; transform: scale(1.02); }

/* ========== Webring ========== */
.webring{
  text-align:center;
  margin-top:20px;
  padding:10px;
  background: linear-gradient(180deg, #eef6fb, #e9f2f7);
  border: 2px solid var(--line-strong);
  border-radius: 6px;
}
.webring a.webring-link{
  color: var(--sage);
  text-decoration: none;
  font-weight:700;
}
.webring a.webring-link:hover{ text-decoration: underline; }

/* ========== Decorations & Badges ========== */
.gif-decoration{
  display:inline-block;
  width:50px; height:50px;
  background:
    radial-gradient(circle at 35% 35%, var(--blue), transparent 60%),
    radial-gradient(circle at 70% 70%, var(--amber), transparent 60%),
    radial-gradient(circle at 55% 55%, rgba(255,255,255,.5), transparent 55%);
  animation: float 3s ease-in-out infinite;
  margin: 0 10px;
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(0,0,0,.08);
}

.construction{
  background: var(--butter);
  color: #5c4023;
  padding:6px 10px;
  border: 3px dashed #5c4023;
  text-align:center;
  font-weight: 800;
  animation: blink 1.8s linear infinite;
  margin: 12px 0;
  border-radius: 4px;
}

.awards{ text-align:center; margin-top:18px; }
.award-badge{
  display:inline-block;
  width:88px; height:31px;
  background: linear-gradient(180deg, #ffffff, #f2eee4);
  color: #5c6c78;
  border: 2px solid var(--line-strong);
  margin:5px;
  line-height:31px; font-size:10px; font-weight:800;
  text-align:center; border-radius:3px;
  box-shadow: 0 1px 0 #fff, 0 2px 8px var(--shadow);
}

/* ========== Links ========== */
.links-list{ list-style:none; padding:0; margin:0; }
.link-item{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 2px outset var(--line);
  padding:10px; margin:10px 0;
  transition: transform .2s ease, box-shadow .2s ease;
  border-radius: 6px;
}
.link-item:hover{ transform: translateX(8px); box-shadow: 0 4px 12px var(--shadow-2); }
.link-a{ color: var(--blue); font-weight:700; text-decoration:none; }
.link-a:hover{ text-decoration: underline; color: var(--sage); }

/* ========== Recent messages box ========== */
.recent-messages{
  margin-top: 16px;
  padding: 10px;
  background: #fffef8;
  border: 1px dashed var(--line-strong);
  color: var(--muted-ink);
  border-radius: 6px;
}

/* ========== Responsive tweak ========== */
@media (max-width: 960px){
  .main-table{ width:96%; }
}