/* bugni.cc home — light through dichroic glass (loads after base.css) */

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 var(--pad) clamp(2.5rem, 8vh, 5.5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero .glass { left: 9%; right: 9%; top: 13vh; height: 33vh; }

.hero-copy { position: relative; max-width: 62rem; }
h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 7vw, 6.2rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
}
html[data-lang="en"] h1 {
  font-weight: 400;
  font-size: clamp(3rem, 8.6vw, 7.6rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
h1 .line { display: block; overflow: hidden; }
h1 .line > span { display: block; }
.lede {
  margin-top: 1.6rem;
  max-width: 33rem;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  color: var(--ink);
  opacity: 0.8;
}
.lede strong { color: var(--ink); font-weight: 500; }
.hint {
  margin-top: 2rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.hint::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: conic-gradient(#7fe8e0, #b79bff, #ff8fc4, #ffc9a3, #7fe8e0);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.7); opacity: 0.55; } }
.hint .touch { display: none; }
@media (hover: none) {
  .hint .mouse { display: none; }
  .hint .touch { display: inline; }
}

/* ===== SECTION BASICS ===== */
section { position: relative; padding: clamp(4.5rem, 13vh, 9rem) var(--pad); }
.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 1.2rem;
}
h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 22em;
}
html[data-lang="en"] h2 { font-weight: 400; font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: 1.04; }

/* ===== THREE PANES ===== */
.facets .glass { left: 6%; right: 6%; top: 34%; height: 40%; }

.panes {
  position: relative;
  display: flex;
  gap: 0.8rem;
  height: clamp(30rem, 72vh, 40rem);
  margin-top: clamp(2rem, 6vh, 4rem);
}
.pane {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 3px;
  background: var(--noise), var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 1px 0 0 var(--glass-edge), 0 34px 60px -44px var(--glass-shadow);
  transition: flex-grow 0.8s var(--ease), box-shadow 0.6s;
  cursor: pointer;
}
.pane.is-open { flex-grow: 4.4; cursor: default; }

/* the dichroic coating: two hues, one each side */
.pane::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg,
    hsla(var(--h1), 90%, 68%, var(--tint)) 0%,
    hsla(var(--h1), 90%, 68%, 0) 46%,
    hsla(var(--h2), 95%, 74%, 0) 54%,
    hsla(var(--h2), 95%, 74%, var(--tint)) 100%);
  opacity: 0.55;
  transition: opacity 0.8s;
}
.pane.is-open::before { opacity: 1; }
/* the polished edge of the sheet */
.pane::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  pointer-events: none;
  background: linear-gradient(180deg, hsl(var(--h1), 85%, 66%), hsl(var(--h2), 95%, 74%));
  opacity: 0.75;
}

.pane-head {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  padding: 1.5rem 1.4rem 1.5rem 1.7rem;
  z-index: 1;
}
.pane.is-open .pane-head { pointer-events: none; }
.pane-no {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}
.pane-vt {
  position: absolute;
  left: 1.7rem;
  bottom: 1.6rem;
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  letter-spacing: 0.12em;
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.35s;
}
html[data-lang="en"] .pane-vt { font-weight: 400; letter-spacing: 0.01em; font-size: clamp(1.9rem, 3vw, 2.7rem); }
.pane.is-open .pane-vt { opacity: 0; }

.pane-body {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(46rem, 58vw);
  padding: 4rem 2.2rem 2rem 1.7rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.5s var(--ease), visibility 0s 0.3s;
  z-index: 2;
}
.pane.is-open .pane-body {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.6s 0.28s, transform 0.8s var(--ease) 0.28s, visibility 0s;
}
.pane-body h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 3.6vw, 3.2rem);
  line-height: 1.15;
}
html[data-lang="en"] .pane-body h3 { font-weight: 400; font-size: clamp(2.4rem, 4.4vw, 3.9rem); line-height: 1; }
.pane-say { margin-top: 0.9rem; max-width: 30rem; color: var(--ink-2); font-size: 1rem; }

.works { list-style: none; margin-top: 1.6rem; border-top: 1px solid var(--line); }
.works li {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) 1fr;
  gap: 0.3rem 1.4rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.6;
}
.w-t { font-weight: 500; }
.w-t a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size 0.4s var(--ease); }
.w-t a:hover { background-size: 0 1px; background-position: 100% 100%; }
.w-d { color: var(--ink-2); }
.pane-more {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.pane-more a { text-decoration: none; border-bottom: 1px solid var(--line); }
.pane-more a:hover { color: var(--ink); border-color: var(--ink); }

@media (max-width: 900px) {
  .panes { flex-direction: column; height: auto; gap: 0.6rem; }
  .pane, .pane.is-open { flex: none; }
  .pane-head { position: relative; inset: auto; flex-direction: row; align-items: baseline; gap: 1rem; padding: 1.25rem 1.2rem 1.25rem 1.5rem; }
  .pane.is-open .pane-head { pointer-events: auto; }
  .pane-vt, html[data-lang="en"] .pane-vt { position: static; writing-mode: horizontal-tb; font-size: 1.5rem; letter-spacing: 0.04em; }
  .pane.is-open .pane-vt { opacity: 1; }
  .pane-body {
    position: static;
    width: auto;
    padding: 0 1.2rem 0 1.5rem;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: grid-template-rows 0.6s var(--ease), padding 0.6s var(--ease);
  }
  .pane.is-open .pane-body { grid-template-rows: 1fr; padding-bottom: 1.4rem; transition: grid-template-rows 0.6s var(--ease), padding 0.6s var(--ease); }
  .pane-inner { overflow: hidden; min-height: 0; }
  .pane-body h3 { display: none; }
  .pane-say { margin-top: 0; }
  .works li { grid-template-columns: 1fr; }
}

/* ===== ABOUT ===== */
.about {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.about .glass { left: 64%; right: 5%; top: 4%; height: 26%; }

/* portrait behind reeded glass: each flute shows a squeezed slice of the photo */
.flute {
  --n: 14;
  --m: 0.42;         /* how much each flute squeezes the picture */
  --ox: 0.569;       /* where the picture sits behind the frame */
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 26rem;
  display: flex;
  overflow: hidden;
  border-radius: 3px;
  container-type: inline-size;
  box-shadow: 0 40px 70px -50px var(--glass-shadow);
}
.flute i {
  position: relative;
  flex: 1;
  background-image: url('/images/portrait.jpg');
  background-repeat: no-repeat;
  background-size: calc(var(--n) * 187.5% * var(--m)) 100%;
  background-position-x: calc(50cqw / var(--n) - (var(--ox) * 100cqw + (var(--i) + 0.5) * 100cqw / var(--n)) * var(--m));
  transition: background-size 1.1s var(--ease), background-position 1.1s var(--ease);
  transition-delay: calc(var(--i) * 40ms);
}
.flute i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 34%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0.16));
  transition: opacity 0.9s;
  transition-delay: calc(var(--i) * 40ms);
}
.flute.is-clear i {
  background-size: calc(var(--n) * 187.5%) 100%;
  background-position-x: calc(-1 * (var(--ox) * 100cqw + var(--i) * 100cqw / var(--n)));
}
.flute.is-clear i::after { opacity: 0; }
.flute-cap {
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

.about-text p { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.85; max-width: 32rem; }
.about-text p + p { margin-top: 1.2rem; }
.about-text .quiet { color: var(--ink-2); }
.about-text .motto {
  margin-top: 2.6rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  line-height: 1;
}
@media (max-width: 820px) {
  .about { grid-template-columns: 1fr; }
  .about .glass { left: 50%; top: 0; height: 16%; }
}

/* ===== PATH ===== */
.path-list { list-style: none; margin-top: clamp(2rem, 5vh, 3.5rem); border-top: 1px solid var(--line); }
.path-list li {
  position: relative;
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 0.2rem 2rem;
  align-items: baseline;
  padding: 1.15rem 0.4rem;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.path-list li::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, hsla(176, 80%, 66%, 0.22), hsla(256, 100%, 80%, 0.2) 45%, hsla(328, 100%, 78%, 0.22));
  transform: translateX(-101%) skewX(-18deg);
  transition: transform 0.9s var(--ease);
  pointer-events: none;
}
.path-list li:hover::before { transform: translateX(0) skewX(0); }
.path-list li > * { position: relative; }
.p-y { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-2); letter-spacing: 0.04em; }
.p-w { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.3; }
html[data-lang="en"] .p-w { font-weight: 400; font-size: 1.5rem; }
.p-r { color: var(--ink-2); font-size: 0.92rem; }
.path-more { margin-top: 1.6rem; display: flex; gap: 1.6rem; flex-wrap: wrap; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; }
.path-more a { text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 0.1rem; }
.path-more a:hover { border-color: var(--ink); }
@media (max-width: 720px) {
  .path-list li { grid-template-columns: 1fr; }
}

/* ===== END ===== */
.end { padding-top: clamp(16rem, 46vh, 26rem); padding-bottom: 2.2rem; }
.end .glass { left: 12%; right: 12%; top: clamp(3rem, 8vh, 6rem); height: clamp(9rem, 26vh, 15rem); }
.end h2 { max-width: none; }
.mail {
  display: inline-block;
  margin-top: 1.4rem;
  font-family: var(--sans);   /* not the serif: its 1 reads as an l */
  font-size: clamp(1.3rem, 3.8vw, 3.1rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-decoration: none;
  overflow-wrap: anywhere;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size 0.5s var(--ease);
}
.mail:hover { background-size: 0 1px; background-position: 100% 100%; }
.end-links {
  margin-top: clamp(3rem, 9vh, 6rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 1.6rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}
.end-links div { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.end-links a { text-decoration: none; }
.end-links a:hover { color: var(--ink); }

/* ===== REVEAL ===== */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity 0.9s, transform 1.1s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .lede.rv.in { opacity: 0.8; }
.js h1 .line > span { transform: translateY(105%); transition: transform 1.2s var(--ease); }
.js h1 .line:nth-child(2) > span { transition-delay: 0.12s; }
.js.ready h1 .line > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv, .js h1 .line > span { opacity: 1; transform: none; transition: none; }
  .hint::before { animation: none; }
  .pane, .pane-body, .flute i, .flute i::after, .path-list li::before { transition: none !important; }
}

@media print {
  #light, .grain, .top, .hint { display: none !important; }
  body { background: #fff; color: #111; }
  .panes { display: block; height: auto; }
  .pane { margin-bottom: 1rem; border: 1px solid #ccc; }
  .pane-head, .pane-body { position: static; opacity: 1; visibility: visible; transform: none; width: auto; display: block; }
  .pane-vt { position: static; writing-mode: horizontal-tb; opacity: 1 !important; }
  .pane-body h3 { display: none; }
  .hero { min-height: auto; padding-top: 2rem; }
  .end { padding-top: 2rem; }
}