/* ===========================================================
   YUser.fun — Shared stylesheet
   Cream / terracotta editorial system, used on every page.
   =========================================================== */

:root{
  --cream:        #F5EFE6;
  --cream-soft:   #FAF7F2;
  --cream-border: #EADFCF;
  --accent:       #DE5D35;
  --accent-dark:  #B94A29;
  --ink:          #161514;
  --ink-muted:    #635E59;
}

html{ scroll-behavior:smooth; }

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
}

.font-serif-display{ font-family:'Instrument Serif', serif; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

::selection{ background:var(--accent); color:var(--cream-soft); }

/* Focus visibility (accessibility floor) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Nav underline hover ---------- */
.nav-link{ position:relative; color:var(--ink); }
.nav-link::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-4px;
  height:1.5px; background:var(--accent);
  transform:scaleX(0); transform-origin:right;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }

/* ---------- Pill buttons ---------- */
.btn-dark{
  background:var(--ink); color:var(--cream-soft);
  transition:background .3s ease, transform .3s ease;
}
.btn-dark:hover{ background:var(--accent); }

.btn-outline{
  border:1.5px solid var(--ink); color:var(--ink);
  transition:background .3s ease, color .3s ease;
}
.btn-outline:hover{ background:var(--ink); color:var(--cream-soft); }

.arrow-nudge{ display:inline-block; transition:transform .3s cubic-bezier(.4,0,.2,1); }
.btn-dark:hover .arrow-nudge,
.btn-outline:hover .arrow-nudge{ transform:translate(3px,-3px); }

/* ---------- Hero ambient background (canvas replaces stock video) ---------- */
#hero-canvas-wrap{
  position:absolute; inset:0; overflow:hidden; background:var(--cream-soft);
}
#hero-canvas-wrap canvas{ width:100%; height:100%; display:block; }

.hero-grain{
  position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Floating tool-glyph chips drifting inside the hero art */
.float-chip{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  background:rgba(250,247,242,.9);
  border:1px solid var(--cream-border);
  border-radius:1.1rem;
  box-shadow:0 10px 30px -12px rgba(22,21,20,.25);
  animation:drift 9s ease-in-out infinite;
  backdrop-filter:blur(2px);
}
.float-chip:nth-child(2){ animation-duration:11s; animation-delay:.6s; }
.float-chip:nth-child(3){ animation-duration:7.5s; animation-delay:1.2s; }
.float-chip:nth-child(4){ animation-duration:10s; animation-delay:.3s; }

@keyframes drift{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-16px) rotate(-3deg); }
}

/* ---------- One orchestrated hero entrance (not per-card) ---------- */
.hero-reveal > *{
  opacity:0; transform:translateY(16px);
  animation:heroIn .8s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-reveal > *:nth-child(1){ animation-delay:.05s; }
.hero-reveal > *:nth-child(2){ animation-delay:.16s; }
.hero-reveal > *:nth-child(3){ animation-delay:.27s; }
.hero-reveal > *:nth-child(4){ animation-delay:.38s; }
.hero-reveal > *:nth-child(5){ animation-delay:.49s; }
@keyframes heroIn{ to{ opacity:1; transform:translateY(0); } }

/* ---------- Scroll reveal (single subtle utility, used sparingly) ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* ---------- Tool card ---------- */
.tool-card{
  background:var(--cream-soft);
  border:1px solid var(--cream-border);
  border-radius:1.25rem;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.tool-card:hover{
  border-color:var(--accent);
  transform:translateY(-4px);
  box-shadow:0 18px 38px -20px rgba(22,21,20,.35);
}
.tool-glyph{
  width:2.75rem; height:2.75rem; border-radius:.85rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--cream); border:1px solid var(--cream-border);
  color:var(--accent);
}

/* ---------- Category chip ---------- */
.cat-chip{
  border:1px solid var(--cream-border);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.cat-chip.is-active, .cat-chip:hover{
  background:var(--ink); color:var(--cream-soft); border-color:var(--ink);
}

/* ---------- Marquee (trust logos) ---------- */
.marquee-track{
  display:flex; gap:3.5rem; width:max-content;
  animation:marquee 28s linear infinite;
}
.marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(22,21,20,.55);
  backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
  z-index:60;
}
.modal-backdrop.is-open{ opacity:1; pointer-events:auto; }
.modal-panel{
  transform:translateY(24px) scale(.97); opacity:0;
  transition:transform .4s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.modal-backdrop.is-open .modal-panel{ transform:translateY(0) scale(1); opacity:1; }

/* ---------- Mobile drawer ---------- */
.drawer{ transform:translateX(100%); transition:transform .4s cubic-bezier(.16,1,.3,1); }
.drawer.is-open{ transform:translateX(0); }
.drawer-backdrop{ opacity:0; pointer-events:none; transition:opacity .3s ease; }
.drawer-backdrop.is-open{ opacity:1; pointer-events:auto; }

/* ---------- Ad slot placeholder (swap for real <ins class="adsbygoogle"> unit) ---------- */
.ad-slot{
  border:1px dashed var(--cream-border);
  background:var(--cream-soft);
  color:var(--ink-muted);
  border-radius:.9rem;
}

/* ---------- Prose (article pages) ---------- */
.prose-article{ color:var(--ink); max-width:70ch; }
.prose-article h2{ font-size:1.5rem; font-weight:700; margin-top:2.25rem; margin-bottom:.75rem; }
.prose-article p{ color:var(--ink-muted); line-height:1.8; margin-bottom:1.25rem; }
.prose-article ul{ color:var(--ink-muted); line-height:1.8; margin-bottom:1.25rem; padding-left:1.25rem; list-style:disc; }
.prose-article a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-9999px; top:auto;
  background:var(--ink); color:var(--cream-soft); padding:.75rem 1.25rem; border-radius:.5rem; z-index:100;
}
.skip-link:focus{ left:1rem; top:1rem; }