/* candygirl.bar — brushed-chrome graffiti atelier
   Hexagonal-honeycomb tessellation of seven chambers.
   Palette: chrome-monochrome only. No accent colors. */

:root {
  --chrome-silver: #C0C0C0;
  --chrome-polish: #F5F5F5;
  --chrome-shade:  #808080;
  --chrome-nickel: #A8A8A8;
  --chrome-pearl:  #E8E8E8;
  --chrome-gun:    #4A4A4A;
  --chrome-anthracite: #1C1C1E;

  --chrome-gradient:
    linear-gradient(135deg,
      var(--chrome-silver)   0%,
      var(--chrome-polish)  30%,
      var(--chrome-shade)   50%,
      var(--chrome-pearl)   70%,
      var(--chrome-nickel) 100%);

  --hex-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  --bevel-width: 6px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--chrome-pearl);
  color: var(--chrome-anthracite);
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.95rem;
  line-height: 1.65;
  overflow-x: hidden;
  background-image:
    radial-gradient(ellipse at top left, rgba(245,245,245,0.6), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(168,168,168,0.35), transparent 65%),
    linear-gradient(180deg, var(--chrome-pearl), var(--chrome-nickel));
  background-attachment: fixed;
}

/* The honeycomb stage. CSS Grid 12 cols, hexes positioned absolutely. */
#comb {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  position: relative;
  min-height: 700vh;
  padding: 6vh 0 12vh;
}

/* HEX CELL — every section is a hexagon clip-path. */
.hex {
  position: absolute;
  width: min(62vw, 720px);
  aspect-ratio: 1.155 / 1;
  --hex-fill: var(--chrome-silver);
}

/* Bevel wrapper — outer chrome ring, inner brushed face. */
.hex-bevel {
  position: relative;
  width: 100%;
  height: 100%;
  clip-path: var(--hex-clip);
  background: var(--chrome-gradient);
  filter: drop-shadow(0 2px 0 rgba(74,74,74,0.18));
}

.hex-face {
  position: absolute;
  inset: var(--bevel-width);
  clip-path: var(--hex-clip);
  background: var(--hex-fill);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Sub-honeycomb pattern as faint backdrop on each face. */
.hex-bg {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='24' viewBox='0 0 28 24'><path d='M14 0 L28 6 L28 18 L14 24 L0 18 L0 6 Z' fill='none' stroke='%23808080' stroke-width='0.7' opacity='0.55'/></svg>");
  background-size: 28px 24px;
  opacity: 0.18;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Content block — keeps text inside the hex's safe inner rectangle. */
.cell-content {
  position: relative;
  z-index: 2;
  width: 64%;
  max-width: 480px;
  text-align: center;
  padding: 1.4rem 1rem;
}

.cell-eyebrow {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--chrome-gun);
  margin-bottom: 0.9rem;
  opacity: 0.85;
}

.cell-title {
  font-family: 'Major Mono Display', monospace;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chrome-anthracite);
  margin-bottom: 1.2rem;
}

.cell-caption {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--chrome-gun);
  margin-top: 1rem;
  opacity: 0.92;
}

/* HEX 1 — Maker's Mark, top-left, full first viewport. */
.hex-1 {
  width: min(82vw, 920px);
  top: 4vh;
  left: 50%;
  transform: translateX(-50%);
  --hex-fill: var(--chrome-nickel);
  perspective: 1200px;
}
.hex-1 .hex-bevel {
  transform-style: preserve-3d;
}

.wordmark {
  font-family: 'Sixtyfour', monospace;
  font-weight: 400;
  font-size: clamp(2.4rem, 7.4vw, 6.4rem);
  letter-spacing: -0.02em;
  line-height: 1;
  background: var(--chrome-gradient);
  background-size: 200% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.5px var(--chrome-gun);
  display: inline-block;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: transform 0.05s linear;
}

/* HEX 2 — Atelier (offset right). */
.hex-2 {
  width: min(48vw, 540px);
  top: 88vh;
  left: 52%;
  --hex-fill: var(--chrome-pearl);
}

.iso-stage {
  width: 220px;
  height: 200px;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iso { width: 100%; height: 100%; overflow: visible; }

/* HEX 3 — The Comb (full width). */
.hex-3 {
  width: min(86vw, 980px);
  top: 168vh;
  left: 50%;
  transform: translateX(-50%);
  --hex-fill: var(--chrome-silver);
}

.ingot-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 0.8rem auto;
  width: min(96%, 720px);
}

.ingot {
  position: relative;
  aspect-ratio: 1.155 / 1;
  clip-path: var(--hex-clip);
  background: var(--chrome-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ingot::after {
  content: "";
  position: absolute;
  inset: 3px;
  clip-path: var(--hex-clip);
  background: var(--chrome-pearl);
  z-index: 0;
}

.ingot svg {
  position: relative;
  z-index: 2;
  width: 78%;
  height: 78%;
}

.ingot .glyph {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
}
.ingot.drawn .glyph {
  stroke-dashoffset: 0;
  fill: url(#chromeGradient);
  transition: stroke-dashoffset 1.4s ease-out, fill 0.5s ease-in 1.2s;
}

.ingot-label {
  position: absolute;
  bottom: 8%;
  left: 0;
  right: 0;
  z-index: 3;
  font-family: 'Major Mono Display', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--chrome-anthracite);
  text-align: center;
  opacity: 0.6;
}

/* HEX 4 — Spec Sheet (offset left, narrow). */
.hex-4 {
  width: min(50vw, 580px);
  top: 256vh;
  left: 6%;
  --hex-fill: var(--chrome-pearl);
}

.spec-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.32rem 1.1rem;
  text-align: left;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.78rem;
  width: 92%;
  margin: 0.4rem auto;
}
.spec-grid dt {
  color: var(--chrome-gun);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.66rem;
}
.spec-grid dd {
  color: var(--chrome-anthracite);
  letter-spacing: 0.04em;
  border-bottom: 1px dotted rgba(74,74,74,0.32);
  padding-bottom: 0.1rem;
}

/* HEX 5 — Apiary (wide). */
.hex-5 {
  width: min(74vw, 860px);
  top: 340vh;
  left: 50%;
  transform: translateX(-50%);
  --hex-fill: var(--chrome-nickel);
}

.apiary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  width: 86%;
  margin: 0.8rem auto;
}

.bee {
  width: 100%;
  height: 80px;
  overflow: visible;
}

.bee-wing {
  transform-origin: 0 0;
  transform: rotate(0deg);
  transition: transform 1.2s ease-in-out, fill 1.2s ease-in-out;
}
.bee.flight .bee-wing { transform: rotate(-22deg) translateY(-2px); fill: rgba(245,245,245,0.85); }
.bee.flight { transform: translateY(-4px); transition: transform 1.2s ease-in-out; }

/* HEX 6 — Provenance (offset right). */
.hex-6 {
  width: min(50vw, 580px);
  top: 432vh;
  left: 46%;
  --hex-fill: var(--chrome-pearl);
}

.prov-list {
  list-style: none;
  width: 92%;
  margin: 0.6rem auto;
  font-size: 0.85rem;
}
.prov-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.28rem 0;
  border-bottom: 1px solid rgba(74,74,74,0.25);
}
.tag-marker {
  font-family: 'Permanent Marker', cursive;
  font-size: 0.92rem;
  background: var(--chrome-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.4px var(--chrome-gun);
}
.tag-date {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--chrome-gun);
}

/* HEX 7 — Index Seal (centered, bottom). */
.hex-7 {
  width: min(60vw, 640px);
  top: 528vh;
  left: 50%;
  transform: translateX(-50%);
  --hex-fill: var(--chrome-silver);
}
.seal-content { display: flex; flex-direction: column; align-items: center; }
.seal {
  display: inline-block;
  width: 180px;
  height: 180px;
  margin: 0.6rem auto;
  cursor: pointer;
  transition: transform 0.4s ease-out;
}
.seal svg { width: 100%; height: 100%; }
.seal:hover { transform: rotate(60deg) scale(1.04); }

/* Reveal-on-enter base */
.hex {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}
.hex.revealed { opacity: 1; transform: translateY(0); }
.hex-1.revealed,
.hex-3.revealed,
.hex-5.revealed,
.hex-7.revealed {
  /* keep horizontal centering on the hexes that use translateX(-50%) */
  transform: translate(-50%, 0);
}

/* Mobile: stack hexes vertically, scale down. */
@media (max-width: 760px) {
  #comb { min-height: auto; padding: 4vh 0; }
  .hex {
    position: relative !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(92vw, 460px) !important;
    margin-bottom: 1.4rem;
  }
  .hex.revealed { transform: translate(-50%, 0) !important; }
  .cell-content { width: 70%; padding: 0.8rem 0.4rem; }
  .ingot-row { grid-template-columns: repeat(7, 1fr); gap: 2px; }
  .apiary { grid-template-columns: repeat(2, 1fr); }
  .wordmark { font-size: clamp(1.6rem, 9vw, 3rem); }
  .seal { width: 130px; height: 130px; }
}

/* Reduced motion: halt rotation and bee-morph; chrome aesthetic intact. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wordmark { transform: none !important; transition: none !important; }
  .bee, .bee-wing { transition: none !important; transform: none !important; }
  .hex { opacity: 1; transform: translateY(0); }
  .hex-1.revealed, .hex-3.revealed, .hex-5.revealed, .hex-7.revealed {
    transform: translateX(-50%);
  }
  .ingot .glyph { stroke-dashoffset: 0; fill: url(#chromeGradient); }
}