/* =========================================
   PHILOSOPHY — philosophy.css
   ========================================= */

/* ── SECTION ─────────────────────────────── */

.philosophy-section {
  position:   relative;
  background: var(--blue);
  overflow:   hidden;
  padding:    100px 48px;
}

/* subtle grain texture overlay */
.philosophy-section::before {
  content:  "";
  position: absolute;
  inset:    0;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:        0.5;
  pointer-events: none;
}

/* subtle radial light top-left */
.philosophy-section::after {
  content:  "";
  position: absolute;
  top:      -40%;
  left:     -10%;
  width:    70%;
  height:   200%;
  background: radial-gradient(
    ellipse at center,
    rgba(255,255,255,0.07) 0%,
    transparent 65%
  );
  pointer-events: none;
}

/* ── INNER ───────────────────────────────── */

.philosophy-inner {
  position:  relative;
  z-index:   2;
  display:   flex;
  flex-direction: column;
  gap:       32px;
}

/* ── QUOTE MARK ──────────────────────────── */

.philosophy-mark {
  display:        block;
  font-size:      5rem;
  line-height:    1;
  color:          rgba(255,255,255,0.22);
  font-weight:    700;
  letter-spacing: -0.04em;
  margin-bottom:  -16px;
  user-select:    none;
}

/* ── QUOTE TEXT ──────────────────────────── */

.philosophy-quote {
  font-size:      clamp(1.8rem, 3.2vw, 3rem);
  line-height:    1.45;
  letter-spacing: -0.02em;
  font-weight:    300;
  color:          #ffffff;
  /* reveal animation start state */
  opacity:    0;
  transform:  translateY(24px);
  transition:
    opacity   0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
}

.philosophy-quote.is-visible {
  opacity:   1;
  transform: translateY(0);
}

/* ── ATTRIBUTION ─────────────────────────── */

.philosophy-attr {
  display:     flex;
  align-items: center;
  gap:         10px;
  font-size:   14px;
  font-weight: 400;
  color:       rgba(255,255,255,0.60);
  letter-spacing: 0.01em;

  opacity:    0;
  transform:  translateY(12px);
  transition:
    opacity   0.8s var(--ease-out) 0.2s,
    transform 0.8s var(--ease-out) 0.2s;
}

.philosophy-attr.is-visible {
  opacity:   1;
  transform: translateY(0);
}

.philosophy-dot {
  opacity: 0.4;
}

/* ── RESPONSIVE — 1024px ─────────────────── */

@media (max-width: 1024px) {

  .philosophy-section {
    padding: 80px 40px;
  }

  .philosophy-quote {
    max-width: 100%;
  }

}

/* ── RESPONSIVE — 768px ──────────────────── */

@media (max-width: 768px) {

  .philosophy-section {
    padding: 64px 20px;
  }

  .philosophy-mark {
    font-size: 3.6rem;
  }

  .philosophy-quote {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }

  .philosophy-attr {
    font-size:  13px;
    flex-wrap:  wrap;
    gap:        6px;
  }

}