/* ─────────────────────────────────────────────
   DUANN GP — Portal  (style.css)
───────────────────────────────────────────── */

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

:root {
  --fg:     #ede9e0;
  --fg-dim: rgba(237,233,224,0.38);
  --bg:     #030407;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  cursor: none;
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Canvas ── */
#gl {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
}

/* ── Cursor ── */
#cursor-dot {
  position: fixed;
  width: 5px; height: 5px;
  background: var(--fg);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
  transform: translate(-50%, -50%);
  will-change: left, top;
}
#cursor-ring {
  position: fixed;
  width: 34px; height: 34px;
  border: 1px solid rgba(237,233,224,0.45);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
  transform: translate(-50%, -50%);
  transition: width .25s ease, height .25s ease, border-color .3s ease;
  will-change: left, top;
}
body.cursor-hover #cursor-ring {
  width: 52px; height: 52px;
  border-color: rgba(237,233,224,0.7);
}

/* ── Lang toggle ── */
.lang {
  position: fixed;
  top: 30px; right: 36px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 7px;
  opacity: 0;
}
.lang-btn {
  background: none;
  border: none;
  color: var(--fg-dim);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: none;
  transition: color .3s;
  padding: 0;
}
.lang-btn.active { color: var(--fg); }
.lang-btn:not(.active):hover { color: rgba(237,233,224,.7); }
.lang-sep {
  color: var(--fg-dim);
  font-size: 10px;
  letter-spacing: 0;
}

/* ── Signature ── */
.sig {
  position: fixed;
  bottom: 26px; left: 36px;
  z-index: 200;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  opacity: 0;
}

/* ── Split layout ── */
.split {
  position: fixed;
  inset: 0;
  display: flex;
  z-index: 10;
}

/* ── Divider ── */
.divider {
  width: 1px;
  height: 100%;
  background: rgba(237,233,224,.07);
  flex-shrink: 0;
  position: relative;
}
.divider-glow {
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 35%;
  background: linear-gradient(to bottom,
    transparent,
    rgba(237,233,224,.5) 40%,
    rgba(237,233,224,.5) 60%,
    transparent);
  animation: glowPulse 3.5s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { height: 20%; opacity: .4; }
  50%       { height: 45%; opacity: 1; }
}

/* ── Portal ── */
.portal {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--fg);
  overflow: hidden;
}

.portal::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
#p-foto::after  { background: radial-gradient(ellipse at 40% 50%, rgba(20,80,200,.08) 0%, transparent 70%); }
#p-design::after { background: radial-gradient(ellipse at 60% 50%, rgba(200,90,20,.07) 0%, transparent 70%); }
.portal:hover::after { opacity: 1; }

/* ── Portal inner ── */
.portal-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 0 clamp(28px, 5vw, 72px);
  opacity: 0;
  transform: translateY(36px);
}

/* ── Label ── */
.portal-label {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color .4s;
}
.portal:hover .portal-label { color: rgba(237,233,224,.65); }

/* ── Title ── */
.portal-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(72px, 11.5vw, 164px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: .01em;
  overflow: hidden;
}
.pt-word {
  display: block;
  transform: translateY(0);
  transition: transform .65s cubic-bezier(.16,1,.3,1);
}
.portal:hover .pt-word {
  transform: translateY(-5px);
}

/* ── CTA ── */
.portal-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  transition: color .35s;
}
.portal:hover .portal-cta { color: var(--fg); }

.cta-arrow {
  width: 34px; height: 34px;
  flex-shrink: 0;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.portal:hover .cta-arrow {
  transform: rotate(45deg);
}

/* ── Corner number ── */
.portal-num {
  position: absolute;
  bottom: 28px;
  right: 32px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(64px, 10vw, 120px);
  line-height: 1;
  color: rgba(237,233,224,.04);
  pointer-events: none;
  user-select: none;
  transition: color .4s;
}
.portal:hover .portal-num {
  color: rgba(237,233,224,.07);
}

/* ── Page transition curtain ── */
#curtain {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--bg);
  clip-path: circle(0% at 50% 50%);
  pointer-events: none;
}

/* ── Mobile ── */
@media (max-width: 700px) {
  .split { flex-direction: column; }
  .portal { justify-content: center; }
  .divider {
    width: 100%;
    height: 1px;
    background: rgba(237,233,224,.07);
  }
  .divider-glow {
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 35%; height: 1px;
    background: linear-gradient(to right, transparent, rgba(237,233,224,.5), transparent);
    animation: glowPulseH 3.5s ease-in-out infinite;
  }
  @keyframes glowPulseH {
    0%, 100% { width: 20%; opacity: .4; }
    50%       { width: 45%; opacity: 1; }
  }
  .portal-inner { padding: 0 28px; }
  .portal-title { font-size: clamp(60px, 17vw, 110px); }
  .portal-num { font-size: clamp(48px, 14vw, 80px); }
  .lang  { top: 22px; right: 24px; }
  .sig   { bottom: 18px; left: 24px; }
}