/* ============================================================
   penghu.design — Organic-Luxury layer
   Tailwind handles scaffolding; this file carries the soul:
   columnar-basalt geometry, gold illumination, slow craft motion.
   ============================================================ */

:root{
  --obsidian:#050507;
  --basalt:#0d0d10;
  --stone:#1a1a1f;
  --gold:#D4AF37;
  --gold-dim:#8a7430;
  --ink:#ece9e2;
  --muted:#7d786e;
  --ease:cubic-bezier(.19,1,.22,1);   /* expo-out: deliberate, settling */
}

html{scroll-behavior:smooth}
body{
  background:var(--obsidian);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- Film grain: one fixed, non-interactive layer ---- */
.grain::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* ---- Columnar basalt: faint vertical ruling behind sections ---- */
.basalt-columns{
  background-image:repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 86px,
    rgba(236,233,226,.035) 86px,
    rgba(236,233,226,.035) 87px
  );
}

/* ---- Hexagon section marker (basalt cross-section) ---- */
.hex{
  width:11px;height:11px;display:inline-block;background:var(--gold);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
}

/* ---- Gold illumination headline ---- */
.illuminate{
  background:linear-gradient(180deg,var(--ink) 0%,#cfcbc1 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.gold{color:var(--gold)}

/* ---- Slow reveal on scroll ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}

/* ---- Project gallery: quiet → gold-lit on hover ---- */
.work{position:relative;overflow:hidden;background:var(--basalt);
  border:1px solid rgba(236,233,226,.06);
  transition:border-color .7s var(--ease),transform .7s var(--ease)}
.work .surface{
  aspect-ratio:4/5;
  background:
    radial-gradient(120% 90% at 30% 0%,#16161b 0%,#0a0a0d 70%),
    var(--basalt);
  filter:saturate(.6) brightness(.78);
  transition:filter 1s var(--ease),transform 1.4s var(--ease);
}
.work:hover .surface{filter:saturate(1) brightness(1);transform:scale(1.03)}
.work:hover{border-color:rgba(212,175,55,.55);transform:translateY(-3px);
  box-shadow:0 0 50px -18px rgba(212,175,55,.5)}
.work .meta{transition:color .6s var(--ease)}
.work:hover .meta .idx{color:var(--gold)}
/* gold scan-line that draws on hover */
.work::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);
  transition:width .9s var(--ease)}
.work:hover::after{width:100%}

/* ---- Hairline links ---- */
.link-fade{position:relative;color:var(--muted);transition:color .5s var(--ease)}
.link-fade:hover{color:var(--ink)}
.link-fade::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:0;background:var(--gold);
  transition:width .6s var(--ease)}
.link-fade:hover::after{width:100%}

/* ---- Rare CTA: thin gold frame, fills slowly ---- */
.invite{position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:18px 34px;border:1px solid var(--gold-dim);color:var(--ink);
  font-family:"Space Grotesk",sans-serif;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;
  overflow:hidden;transition:color .6s var(--ease),border-color .6s var(--ease)}
.invite span{position:relative;z-index:1}
.invite::before{content:"";position:absolute;inset:0;background:var(--gold);
  transform:translateY(101%);transition:transform .7s var(--ease);z-index:0}
.invite:hover{color:var(--obsidian);border-color:var(--gold)}
.invite:hover::before{transform:translateY(0)}

/* ---- Phase numerals for Slow Design (a true sequence) ---- */
.phase-no{font-family:"Fraunces",serif;font-size:.95rem;color:var(--gold-dim);letter-spacing:.1em}

/* ---- Accessibility floor ---- */
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}