/* =========================================================
   Davidovic Detailing — Shared Stylesheet
   Werkstatt-Look: Graphit, Papier, Lack-Rot.
   ========================================================= */

:root{
    --ink:#15130F;
    --ink-2:#1C1914;
    --ink-3:#242019;
    --paper:#EEE9DE;
    --paper-dim:#C7BFAC;
    --red:#B3231C;
    --red-dim:#7E1914;
    --line:rgba(238,233,222,0.12);
    --muted:#9C9484;
    --green:#5C8A4A;
    --amber:#C08A2E;
}

*{ -webkit-font-smoothing:antialiased; }

html{ background:var(--ink); }

body{
    font-family:'Work Sans', sans-serif;
    background:var(--ink);
    color:var(--paper);
}

.font-display{ font-family:'Big Shoulders Display', sans-serif; }
.tabular{ font-variant-numeric:tabular-nums; }

/* Feines Metall-Korn — ein einzelner, dezenter Akzent statt Dekoration überall */
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    opacity:0.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.plate{ border:1px solid var(--line); background:var(--ink-2); }
.plate-hover:hover{ border-color:rgba(179,35,28,0.55); background:var(--ink-3); }
.hairline{ border-color:var(--line); }

.btn-primary{
    background:var(--red);
    color:var(--paper);
    transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover{
    background:#9c1e18;
    transform:translateY(-1px);
    box-shadow:0 10px 24px -12px rgba(179,35,28,0.6);
}
.btn-primary:active{ transform:translateY(0); }

.btn-secondary{ border:1px solid var(--line); color:var(--paper); transition:border-color .2s ease, background .2s ease; }
.btn-secondary:hover{ border-color:var(--paper-dim); background:var(--ink-2); }

.btn-ghost:hover{ background:var(--ink-3); }

input,select,textarea{ background:var(--ink-2); color:var(--paper); border:1px solid var(--line); }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--red); }

:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

::selection{ background:var(--red); color:var(--paper); }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:var(--ink-3); border-radius:99px; }
::-webkit-scrollbar-track{ background:transparent; }

.dot{ width:6px; height:6px; border-radius:999px; display:inline-block; }
.modal-backdrop{ background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); }

/* =========================================================
   Hero-Ladesequenz — ein einziger orchestrierter Moment.
   Jedes Element erscheint gestaffelt beim Laden der Seite,
   nicht bei jedem Scroll erneut.
   ========================================================= */
.reveal{
    opacity:0;
    transform:translateY(14px);
    animation:reveal-in .7s cubic-bezier(.16,.8,.3,1) forwards;
}
.reveal-1{ animation-delay:.05s; }
.reveal-2{ animation-delay:.18s; }
.reveal-3{ animation-delay:.31s; }
.reveal-4{ animation-delay:.44s; }
.reveal-image{
    opacity:0;
    clip-path:inset(0 0 100% 0);
    animation:reveal-image-in .9s cubic-bezier(.16,.8,.3,1) forwards;
    animation-delay:.2s;
}

@keyframes reveal-in{
    to{ opacity:1; transform:translateY(0); }
}
@keyframes reveal-image-in{
    to{ opacity:1; clip-path:inset(0 0 0% 0); }
}

@media (prefers-reduced-motion: reduce){
    .reveal, .reveal-image{ animation:none; opacity:1; transform:none; clip-path:none; }
}