/* ═══════════════════════════════════════════════════
   BASE.CSS — Variables, Reset, Typographie, Utilitaires
═══════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────── */
:root {
  --bg:         #131210;
  --bg2:        #1A1917;
  --bg3:        #222019;
  --bg4:        #2A2820;
  --accent:     #E8682A;
  --accent-h:   #F07840;
  --accent-dim: rgba(232,104,42,0.12);
  --text:       #F0EBE0;
  --text2:      #9A9080;
  --text3:      #5A554C;
  --border:     rgba(240,235,224,0.08);
  --border-h:   rgba(232,104,42,0.3);
  --grad-hero:  radial-gradient(ellipse 80% 60% at 50% 0%, rgba(232,104,42,0.18) 0%, transparent 65%);
  --grad-glow:  radial-gradient(ellipse 40% 35% at 50% 100%, rgba(232,104,42,0.1) 0%, transparent 70%);
  --ease-out:   cubic-bezier(0.16,1,0.3,1);
  --ease-in:    cubic-bezier(0.76,0,0.24,1);
  --ease-inout: cubic-bezier(0.23,1,0.32,1);
}

/* ── RESET ───────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a { color:inherit; text-decoration:none; cursor:none; }
img { display:block; max-width:100%; }
button { cursor:none; border:none; background:none; font-family:inherit; }
ul { list-style:none; }

/* ── ANIMATED GRID ───────────────────────────────── */
.bg-grid {
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:.07;
}
.bg-grid::before {
  content:''; position:absolute; inset:-50%;
  background-image:
    linear-gradient(rgba(240,235,224,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,235,224,.12) 1px, transparent 1px);
  background-size:60px 60px;
  animation:grid-drift 18s ease-in-out infinite alternate;
  transform-origin:center center;
}
@keyframes grid-drift {
  0%   { transform:perspective(600px) rotateX(12deg) rotateY(-3deg) scale(1.2); }
  50%  { transform:perspective(600px) rotateX(8deg) rotateY(3deg) scale(1.25); }
  100% { transform:perspective(600px) rotateX(14deg) rotateY(-2deg) scale(1.2); }
}

/* ── DIAGONAL LINES ──────────────────────────────── */
.bg-diag {
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; opacity:0.025;
}
.bg-diag::before {
  content:''; position:absolute; inset:-100%;
  background:repeating-linear-gradient(
    -45deg, var(--accent) 0px, var(--accent) 1px, transparent 1px, transparent 55px
  );
  animation:diag-scroll 35s linear infinite;
}
@keyframes diag-scroll {
  from { transform:translate(-55px,-55px); }
  to   { transform:translate(0,0); }
}

/* ── ORB SOURIS ──────────────────────────────────── */
.orb {
  position:fixed;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(232,104,42,.10) 0%, transparent 70%);
  filter:blur(70px); pointer-events:none; z-index:0;
  top:0; left:0;
  will-change:transform;
}

/* ── MONOCHROME ICONS ────────────────────────────── */
.tool-icon {
  width:44px; height:44px; object-fit:contain;
  filter:grayscale(1) brightness(1.3) contrast(.9);
  opacity:.7;
  transition:filter .3s ease, opacity .3s ease, transform .25s ease;
}
.tool-icon:hover {
  filter:grayscale(0) brightness(1) contrast(1);
  opacity:1; transform:scale(1.12) translateY(-2px);
}

/* ── BACKGROUND GRID UNIVERSEL ───────────────────── */
body::after {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(240,235,224,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,235,224,.04) 1px, transparent 1px);
  background-size:55px 55px;
  animation:bg-grid-drift 20s ease-in-out infinite alternate;
  transform-origin:center center;
}
@keyframes bg-grid-drift {
  0%   { transform:perspective(700px) rotateX(10deg) rotateY(-4deg) scale(1.18) translateZ(0); }
  33%  { transform:perspective(700px) rotateX(6deg)  rotateY(4deg)  scale(1.22) translateZ(0); }
  66%  { transform:perspective(700px) rotateX(13deg) rotateY(-2deg) scale(1.19) translateZ(0); }
  100% { transform:perspective(700px) rotateX(8deg)  rotateY(3deg)  scale(1.21) translateZ(0); }
}

/* ── GRAIN TEXTURE ───────────────────────────────── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:99998; pointer-events:none;
  opacity:0.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ── BG WATERMARK ────────────────────────────────── */
.bg-text-watermark {
  position:fixed; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; overflow:hidden;
  font-family:'Playfair Display',serif;
  font-size:clamp(120px,22vw,320px);
  font-weight:700; font-style:italic;
  color:transparent;
  -webkit-text-stroke:1px rgba(232,104,42,0.06);
  letter-spacing:-0.04em;
  white-space:nowrap;
  user-select:none;
  will-change:transform;
}

/* ── GRADIENT HERO ───────────────────────────────── */
.bg-grad-hero {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:var(--grad-hero);
}

/* ── CURSOR ──────────────────────────────────────── */
#cursor {
  position:fixed; width:10px; height:10px;
  background:var(--accent); border-radius:50%;
  pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%);
  transition:width .22s ease, height .22s ease, opacity .22s ease, background .2s ease, border .2s ease;
}
#cursor.big { width:36px; height:36px; opacity:0.28; }
#cursor.text { width:60px; height:60px; opacity:0.12; background:transparent; border:1.5px solid var(--accent); }

/* ── LAYOUT ──────────────────────────────────────── */
.page-wrap { position:relative; z-index:2; }
.section-inner {
  max-width:1340px; margin:0 auto;
  padding:0 clamp(1.5rem,5vw,4rem);
}

/* ── TYPOGRAPHIE ─────────────────────────────────── */
.section-label {
  font-size:0.72rem; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:1.5rem;
}
.section-heading {
  font-family:'Inter',sans-serif;
  font-size:clamp(2.2rem,6vw,5.5rem);
  font-weight:800; text-transform:uppercase;
  letter-spacing:-0.02em; line-height:1; color:var(--text);
}
.section-heading em { font-family:'Playfair Display',serif; font-style:italic; font-weight:700; text-transform:none; color:var(--accent); }

/* ── SCROLL REVEAL ───────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(32px);
  transition:opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay:calc(var(--i,0)*90ms);
}
.reveal.visible { opacity:1; transform:none; }
.reveal-left {
  opacity:0; transform:translateX(-28px);
  transition:opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay:calc(var(--i,0)*90ms);
}
.reveal-left.visible { opacity:1; transform:none; }
.reveal-right {
  opacity:0; transform:translateX(28px);
  transition:opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay:calc(var(--i,0)*90ms);
}
.reveal-right.visible { opacity:1; transform:none; }
.reveal-stagger > * {
  opacity:0; transform:translateY(20px);
  transition:opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.reveal-stagger.visible > *:nth-child(1){opacity:1;transform:none;transition-delay:0ms}
.reveal-stagger.visible > *:nth-child(2){opacity:1;transform:none;transition-delay:80ms}
.reveal-stagger.visible > *:nth-child(3){opacity:1;transform:none;transition-delay:160ms}
.reveal-stagger.visible > *:nth-child(4){opacity:1;transform:none;transition-delay:240ms}
.reveal-stagger.visible > *:nth-child(5){opacity:1;transform:none;transition-delay:320ms}
.reveal-stagger.visible > *:nth-child(6){opacity:1;transform:none;transition-delay:400ms}

/* ── WORD MASK ───────────────────────────────────── */
.word-mask { overflow:hidden; display:block; }
.wl { display:inline-block; will-change:transform; transform:translateY(110%); }
.wl.up { transform:translateY(0); transition:transform 0.75s var(--ease-out); }

/* ── PILLS ───────────────────────────────────────── */
.pill {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:6px; padding:5px 12px;
  font-size:12px; font-weight:500;
  letter-spacing:0.04em; color:var(--text2);
  transition:border-color .2s ease, color .2s ease;
  display:inline-block;
}
.pill:hover { border-color:var(--accent); color:var(--accent); }

/* ── BOUTONS ─────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 26px; border-radius:999px;
  font-size:0.82rem; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  transition:transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn-primary {
  background:var(--accent); color:#fff;
}
.btn-primary:hover { box-shadow:0 10px 28px rgba(232,104,42,.35); }
.btn-ghost {
  border:1.5px solid var(--border-h); color:var(--text2);
}
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

/* ── TICKER ──────────────────────────────────────── */
.ticker {
  background:var(--accent); padding:14px 0;
  overflow:hidden; white-space:nowrap;
  position:relative; z-index:2;
}
.ticker-inner {
  display:inline-flex; gap:0;
  animation:ticker-scroll 22s linear infinite;
}
.ticker-inner span {
  font-family:'Inter',sans-serif; font-size:0.82rem;
  font-weight:600; color:#fff; padding:0 2rem;
  letter-spacing:0.08em;
}

/* ── FOOTER ──────────────────────────────────────── */
footer {
  padding:2rem clamp(1.5rem,5vw,4rem);
  border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
  position:relative; z-index:2;
}
footer p { font-size:0.75rem; color:var(--text3); letter-spacing:0.04em; }
footer a { color:var(--accent); }
.footer-links { display:flex; gap:2rem; }
.footer-links a { font-size:0.75rem; color:var(--text3); transition:color .2s ease; }
.footer-links a:hover { color:var(--accent); }

/* ── REDUCED MOTION ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
  .wl, .loader-line { transform:none !important; opacity:1 !important; }
  #loader { display:none !important; }
  #cursor { display:none !important; }
}

/* ── MOBILE ──────────────────────────────────────── */
@media(max-width:600px) {
  body { cursor:auto; }
  #cursor { display:none; }
  a, button { cursor:pointer; }
}