/* ============================================================
   LUCI — lucidesigner.art
   Editorial brutalism × Apple-grade air. Light premium base,
   single vermilion accent, grotesque + high-contrast antiqua.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400;1,6..96,500&display=swap');

:root{
  /* base */
  --paper:        oklch(0.972 0.006 85);
  --paper-2:      oklch(0.945 0.008 85);
  --ink:          oklch(0.175 0.012 60);
  --ink-soft:     oklch(0.46 0.012 60);
  --ink-faint:    oklch(0.66 0.010 60);
  --line:         oklch(0.175 0.012 60 / 0.14);
  --line-strong:  oklch(0.175 0.012 60 / 0.55);

  /* accent (tweakable) */
  --accent:       oklch(0.635 0.215 33);   /* vermilion */
  --accent-ink:   oklch(0.99 0 0);

  /* type */
  --grotesk: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --antiqua: 'Bodoni Moda', Georgia, 'Times New Roman', serif;

  /* metrics */
  --gut: clamp(20px, 4.5vw, 64px);
  --maxw: 1560px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

[data-theme="dark"]{
  --paper:        oklch(0.165 0.010 60);
  --paper-2:      oklch(0.205 0.012 60);
  --ink:          oklch(0.965 0.006 85);
  --ink-soft:     oklch(0.74 0.012 70);
  --ink-faint:    oklch(0.55 0.012 70);
  --line:         oklch(0.97 0.006 85 / 0.16);
  --line-strong:  oklch(0.97 0.006 85 / 0.55);
  --accent-ink:   oklch(0.14 0.01 60);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--grotesk);
  font-weight:400;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .6s var(--ease), color .6s var(--ease);
}

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

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
img{ display:block; max-width:100%; }

/* hide native cursor on fine-pointer; custom light cursor takes over */
@media (hover:hover) and (pointer:fine){
  body.has-cursor, body.has-cursor *{ cursor:none; }
}

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.rule{ height:1px; background:var(--line); border:0; }

.eyebrow{
  font-size:clamp(11px,0.78vw,13px);
  font-weight:500;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.serif{ font-family:var(--antiqua); font-weight:500; }
.serif-it{ font-family:var(--antiqua); font-style:italic; font-weight:500; }
.accent-c{ color:var(--accent); }

/* ---------- custom cursor (the "luci" light) ---------- */
.cursor{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:14px; height:14px; border-radius:50%;
  background:var(--accent);
  mix-blend-mode:normal;
  transform:translate(-50%,-50%);
  transition:width .28s var(--ease), height .28s var(--ease), background .3s var(--ease);
}
.cursor.is-lit{
  width:64px; height:64px;
  background:oklch(from var(--accent) l c h / 0.16);
  box-shadow:0 0 0 1px var(--accent) inset;
}
.cursor-label{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--accent-ink); background:var(--accent);
  padding:5px 10px; border-radius:100px;
  transform:translate(-50%,-180%) scale(0.6);
  opacity:0; transition:opacity .25s var(--ease), transform .25s var(--ease);
  white-space:nowrap;
}
.cursor-label.show{ opacity:1; transform:translate(-50%,-180%) scale(1); }
@media (hover:none),(pointer:coarse){ .cursor,.cursor-label{ display:none; } }

/* ---------- reveal (CSS scroll-driven; visible fallback, no JS dependency) ---------- */
@keyframes revealIn{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    [data-reveal]{
      animation:revealIn linear both;
      animation-timeline:view();
      animation-range:entry 2% entry 46%;
    }
  }
}