/* ─────────────────────────────────────────────────────────────────────
   base.css — Reset, typography, utilities, buttons, scroll reveal,
              and the shared viewer-container rules used by every section.
───────────────────────────────────────────────────────────────────── */


/* ─── RESET ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior:    smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 50% at 12%  6%,  rgba(100, 50, 200, 0.13) 0%, transparent 65%),
    radial-gradient(ellipse 55% 40% at 88% 92%,  rgba(190, 70, 210, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 50% 48%,  rgba( 70, 30, 160, 0.06) 0%, transparent 70%);
  background-attachment: fixed;
  color:       var(--text);
  font-family: var(--font-sans);
  font-size:   1rem;
  font-weight: 400;
  line-height: 1.6;
  overflow-x:  hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family:    var(--font-display);
  font-weight:    600;
  letter-spacing: 0.01em;
}

img, canvas { display: block; max-width: 100%; }
a           { color: var(--accent); text-decoration: none; }
a:hover     { text-decoration: underline; }
ul          { list-style: none; }


/* ─── UTILITIES ──────────────────────────────────────────────────────── */
.accent { color: var(--accent); }

.container {
  max-width:      1200px;
  margin-inline:  auto;
  padding-inline: clamp(1rem, 5vw, 3rem);
}

.section-title {
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    300;
  letter-spacing: 0.06em;
  margin-bottom:  2.5rem;
  position:       relative;
  display:        inline-block;
}

/* Wavy flourish underline */
.section-title::after {
  content:    '';
  position:   absolute;
  bottom:     -14px;
  left:       0;
  width:      min(100%, 280px);
  height:     20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 20'%3E%3Cpath d='M2,14 C24,5 46,18 68,10 C90,2 112,16 134,10 C156,4 178,16 200,10 C222,4 244,16 266,10 L278,12' fill='none' stroke='%23b38dff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='2' cy='14' r='3' fill='%23b38dff'/%3E%3Ccircle cx='278' cy='12' r='2' fill='%23b38dff' opacity='0.55'/%3E%3Cpath d='M0,18 C44,14 88,20 132,16 C176,12 220,18 264,15' fill='none' stroke='%23e8b4ff' stroke-width='0.7' opacity='0.4'/%3E%3C/svg%3E") no-repeat left center;
  background-size: contain;
}


/* ─── SCROLL REVEAL ──────────────────────────────────────────────────── */
[data-reveal] {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

[data-reveal].is-visible {
  opacity:   1;
  transform: none;
}


/* ─── BUTTONS ─────────────────────────────────────────────────────────── */
.btn {
  display:       inline-flex;
  align-items:   center;
  gap:           0.5rem;
  padding:       0.7rem 1.6rem;
  border-radius: var(--radius-sm);
  font-size:     0.9rem;
  font-weight:   600;
  cursor:        pointer;
  border:        none;
  transition:    all var(--t);
  white-space:   nowrap;
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  position:   relative;
  overflow:   hidden;
  background: var(--accent);
  color:      var(--bg);
  box-shadow: 0 0 20px rgba(179, 141, 255, 0.3);
}
.btn--primary:hover {
  background:  var(--text);
  transform:   translateY(-2px);
  box-shadow:  0 4px 28px rgba(179, 141, 255, 0.55);
  text-decoration: none;
}
/* Shimmer sweep on hover */
.btn--primary::after {
  content:    '';
  position:   absolute;
  top: -60%; left: -80%;
  width:      55%;
  height:     220%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.18) 50%, transparent 80%);
  transform:  skewX(-15deg) translateX(0);
  transition: transform 0.65s ease;
  pointer-events: none;
}
.btn--primary:hover::after { transform: skewX(-15deg) translateX(450%); }

.btn--ghost {
  background:   transparent;
  color:        var(--accent);
  border:       1.5px solid var(--accent-dim);
}
.btn--ghost:hover {
  background:   rgba(179, 143, 161, 0.12);
  border-color: var(--accent);
  transform:    translateY(-2px);
  box-shadow:   0 0 18px rgba(179, 141, 255, 0.2);
  text-decoration: none;
}

.btn[disabled] {
  opacity:        0.35;
  cursor:         not-allowed;
  pointer-events: none;
}


/* ─── SHARED VIEWER CONTAINERS ───────────────────────────────────────── */
/* Every div that receives a Three.js canvas must be position:relative */
.hero__viewer,
.about__viewer,
.card__viewer-wrap,
.lightbox__viewer {
  position: relative;
  overflow: hidden;
}

/* Status overlay ("Loading…" / "Model unavailable") */
.viewer-status {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.8rem;
  font-family:     var(--font-mono);
  pointer-events:  none;
  background:      transparent;
}

/* Placeholder shown when a card has no model assigned */
.viewer-placeholder {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.75rem;
  font-family:     var(--font-mono);
  color:           var(--text-muted);
  opacity:         0.5;
  letter-spacing:  0.08em;
  text-transform:  uppercase;
}