/* ── CUSTOM CURSOR ─────────────────────────────────── */
  .cursor-dot {
    position: fixed;
    width: 6px; height: 6px;
    background: var(--accent-gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.1s, opacity 0.15s;
    transform: translate(-50%, -50%);
  }
  .cursor-ring {
    position: fixed;
    width: 28px; height: 28px;
    border: 1px solid var(--accent-gold);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transition: transform 0.18s ease, width 0.2s, height 0.2s, opacity 0.2s;
    transform: translate(-50%, -50%);
    opacity: 0.5;
  }

  /* ── NOISE TEXTURE OVERLAY ─────────────────────────── */
  

  /* ── NAVIGATION ────────────────────────────────────── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 500;
    padding: 28px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, rgba(5,4,7,0.95) 0%, transparent 100%);
  }

  .nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.3em;
    color: var(--accent-gold);
    text-decoration: none;
    text-transform: uppercase;
  }

  

  .nav-links {
    display: flex;
    gap: 48px;
    list-style: none;
  }

  .nav-links a {
    font-family: var(--font-heading);
    font-size: 15px;
    letter-spacing: 0.25em;
    color: var(--text-muted);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s;
    position: relative;
  }

  .nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px; left: 0; right: 0;
    height: 1px;
    background: var(--accent-gold);
    transform: scaleX(0);
    transition: transform 0.3s;
  }

  .nav-links a:hover { color: var(--accent-gold); }
  .nav-links a:hover::after { transform: scaleX(1); }

  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 502;
  }

  .nav-toggle span {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--accent-gold);
    transition: transform 0.3s, opacity 0.3s, width 0.3s;
  }

  .nav-toggle span:nth-child(2) { width: 70%; }

  .nav-toggle.active span { width: 100%; }
  .nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(5,4,7,0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 498;
  }

  .nav-overlay.visible { opacity: 1; }

  /* ── HERO SECTION ──────────────────────────────────── */
  #hero {
    position: relative;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0 60px 80px;
    overflow: hidden;
  }

  #hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(7,6,5,0.55) 75%, rgba(7,6,5,0.88) 100%);
  }

  /* Three stacked cutouts of the same render (far room, statue, near
     pillars) instead of one flat photo, so the hero parallax can move
     each at its own rate for real depth. Ordered back-to-front to match
     the scene: room behind the statue, statue behind the framing
     pillars. Each gets a bit of overscan (via scale, added in JS
     alongside its translate) so the parallax offset never exposes a
     transparent edge. */
  .hero-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    will-change: transform;
  }
  #hero-layer-bg      { z-index: 1; }
  #hero-layer-statue  { z-index: 2; }
  #hero-layer-pillars { z-index: 4; }

  /* A soft overhead glow instead of a defined beam — the reference photo
     has no visible shaft with edges, just diffuse light falling from
     above (the statue reads brighter at the head/shoulders, fading out
     toward the feet). A wide, blurred radial wash with no hard geometry
     reproduces that instead of looking like a synthetic spotlight cone.
     Sits behind the front pillars so they occlude it like real geometry
     would, and drifts with the background layer since it's anchored to
     the same wall. Cool blue-grey to match the moonlight already
     lighting the statue, not the warm torch color. */
  .hero-beams {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: transform;
  }

  .hero-beam {
    position: absolute;
    top: -15%;
    left: 50%;
    width: 900px;
    height: 90%;
    margin-left: -450px;
    background: radial-gradient(ellipse 50% 55% at 50% 0%, rgba(150,165,205,0.16) 0%, rgba(150,165,205,0.07) 40%, transparent 72%);
    filter: blur(30px);
    animation: heroBeamFlicker 12s ease-in-out infinite;
  }

  @keyframes heroBeamFlicker {
    0%, 100% { opacity: 0.7; }
    45%      { opacity: 0.9; }
    70%      { opacity: 0.65; }
  }

#three-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6; /* above the photo layers and vignette, so embers read near the edges */
}

  .hero-content {
    position: relative;
    z-index: 10;
    max-width: 640px;
    text-align: center;
  }

  .hero-flourish {
    width: 100%;
    max-width: 320px;
    margin: 0 auto 24px;
    opacity: 0;
    animation: fadeUp 1.2s ease 0.3s forwards;
  }
  .hero-flourish img { width: 100%; height: auto; display: block; }

  .hero-title {
    font-family: var(--font-display);
    font-size: clamp(44px, 6.5vw, 88px);
    line-height: 1;
    color: var(--text-primary);
    text-shadow: 0 0 60px rgba(201,168,76,0.15);
    margin-bottom: 24px;
    opacity: 0;
    animation: fadeUp 1s ease 0.5s forwards;
  }

  .hero-eyebrow {
    font-family: var(--font-heading);
    font-size: 18px;
    letter-spacing: 0.4em;
    color: var(--accent-gold);
    text-transform: uppercase;
    margin-bottom: 24px;
    opacity: 0;
    animation: fadeUp 1s ease 0.65s forwards;
  }

  .ornate-divider.hero-ornate-divider {
    margin: 24px auto;
    opacity: 0;
    animation: fadeUp 1.2s ease 0.8s forwards;
  }

  .hero-desc {
    font-style: italic;
    color: var(--text-muted);
    font-size: 20px;
    margin-bottom: 24px;
    opacity: 0;
    animation: fadeUp 1s ease 0.95s forwards;
  }

  .hero-cta {
    --cta-corner-size: 26px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-heading);
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent-gold);
    text-decoration: none;
    border: 1px solid transparent;
    padding: 20px 32px;
    transition: background 0.3s, color 0.3s;
    opacity: 0;
    animation: fadeUp 1s ease 1.1s forwards;
  }

  .hero-cta .cta-glyph {
    font-size: 12px;
    transition: color 0.3s;
  }

  .hero-cta::before,
  .hero-cta::after {
    content: '';
    position: absolute;
    left: var(--cta-corner-size);
    right: var(--cta-corner-size);
    height: 1px;
    background: var(--accent-gold);
    opacity: 0.6;
  }

  .hero-cta::before { top: -1px; }
  .hero-cta::after { bottom: -1px; }

  .cta-corner {
    position: absolute;
    width: var(--cta-corner-size);
    height: var(--cta-corner-size);
    background-color: var(--accent-gold);
    -webkit-mask-image: url("/imgs/DesignElements/Corner.svg");
    mask-image: url("/imgs/DesignElements/Corner.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
  }

  .cta-corner--tr { top: -1px; right: -1px; }
  .cta-corner--tl { top: -1px; left: -1px; transform: scaleX(-1); }
  .cta-corner--br { bottom: -1px; right: -1px; transform: scaleY(-1); }
  .cta-corner--bl { bottom: -1px; left: -1px; transform: scale(-1, -1); }

  .hero-cta:hover {
    background: var(--accent-gold);
    color: var(--bg-deep);
  }

  .hero-ornament {
    position: absolute;
    top: 80px; right: 0;
    width: 380px;
    pointer-events: none;
    z-index: 7;
    animation: fadeIn 2s ease 1.5s forwards;
    opacity: 0;
  }

  .scroll-hint {
    position: absolute;
    bottom: 40px;
    right: 60px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    animation: fadeIn 1s ease 2s forwards;
  }

  .scroll-hint span {
    font-family: var(--font-heading);
    font-size: 9px;
    letter-spacing: 0.4em;
    color: var(--text-muted);
    writing-mode: vertical-lr;
    text-transform: uppercase;
  }

  .scroll-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--accent-gold), transparent);
    animation: scrollPulse 2s ease infinite;
  }

  /* ── DIVIDER ───────────────────────────────────────── */
  .ornate-divider {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 auto 60px;
    max-width: 400px;
  }

  /* ── SECTION BASE ──────────────────────────────────── */
  section {
    padding: 120px 60px;
    position: relative;
  }

  .section-label {
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 0.5em;
    color: var(--accent-gold);
    text-transform: uppercase;
    margin-bottom: 16px;
    display: block;
  }

  .section-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 4vw, 48px);
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 60px;
  }

  /* ── ABOUT SECTION ─────────────────────────────────── */
  #about {
    background: var(--bg-mid);
    border-top: 1px solid var(--border-ornate);
    border-bottom: 1px solid var(--border-ornate);
  }

  .about-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }

  .about-image-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    max-width: 420px;
    margin: 0 auto;
    border: 1px solid var(--border-ornate);
    border-radius: 50%;
    overflow: hidden;
  }

  .about-image-frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1a0f2e 0%, #0d1a2e 50%, #1a1209 100%);
  }

  .about-image-frame::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(201,168,76,0.2);
    border-radius: 50%;
    pointer-events: none;
  }

  .about-text { padding: 20px 0; }

  .about-text p {
    color: var(--text-muted);
    margin-bottom: 20px;
    font-size: 20px;
  }

  /* ── PORTFOLIO GRID ────────────────────────────────── */
  #work {
    background: var(--bg-deep);
  }

  .work-header {
    max-width: 1200px;
    margin: 0 auto 60px;
  }

  .portfolio-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 400px 460px 340px 400px;
    gap: 3px;
  }

  .portfolio-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-mid);
  }

  /* Row 1: Card 1 — full-width feature (Bellum) */
  .portfolio-item:nth-child(1) { grid-column: 1 / 13; grid-row: 1; }
  /* Row 2: Card 2 — wide left (7 cols), Card 3 — narrow right (5 cols) */
  .portfolio-item:nth-child(2) { grid-column: 1 / 8;  grid-row: 2; }
  .portfolio-item:nth-child(3) { grid-column: 8 / 13; grid-row: 2; }
  /* Row 3: Card 4 — narrow left (5 cols), Card 5 — wide right (7 cols) */
  .portfolio-item:nth-child(4) { grid-column: 1 / 6;  grid-row: 3; }
  .portfolio-item:nth-child(5) { grid-column: 6 / 13; grid-row: 3; }
  /* Row 4: Card 6 — full-width bookend (Starborn Orion) */
  .portfolio-item:nth-child(6) { grid-column: 1 / 13; grid-row: 4; }

  .portfolio-item:nth-child(1) .item-bg { background: linear-gradient(135deg, #141a0d 0%, #1a0d0d 100%); }
  .portfolio-item:nth-child(2) .item-bg { background: linear-gradient(135deg, #1a0d2e 0%, #0d1520 100%); }
  .portfolio-item:nth-child(3) .item-bg { background: linear-gradient(135deg, #1a0a0a 0%, #2a1a0a 100%); }
  .portfolio-item:nth-child(4) .item-bg { background: linear-gradient(135deg, #0a0a1a 0%, #0a1a14 100%); }
  .portfolio-item:nth-child(5) .item-bg { background: linear-gradient(135deg, #1a1204 0%, #0d0820 100%); }
  .portfolio-item:nth-child(6) .item-bg { background: linear-gradient(135deg, #0a1a1a 0%, #1a0a1a 100%); }

  .item-bg {
    position: absolute;
    inset: 0;
    transition: transform 0.6s ease;
  }

  .portfolio-item:hover .item-bg { transform: scale(1.05); }

  .item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5,4,7,0.95) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease;
  }

  .portfolio-item:hover .item-overlay {
    opacity: 1;
    transform: translateY(0);
  }

  .item-category {
    font-family: var(--font-heading);
    font-size: 10px;
    letter-spacing: 0.4em;
    color: var(--accent-gold);
    text-transform: uppercase;
    margin-bottom: 6px;
  }

  .item-title {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--text-primary);
  }

  /* ── TOOLS / SKILLS ────────────────────────────────── */
  #skills {
    background: var(--bg-mid);
    border-top: 1px solid var(--border-ornate);
    border-bottom: 1px solid var(--border-ornate);
    text-align: center;
  }

  .skills-inner {
    max-width: 1100px;
    margin: 0 auto;
  }

  .tools-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 0;
  }

  .tool-card {
    width: calc(25% - 18px);
  }

  .tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 36px 20px 28px;
    background: var(--bg-deep);
    border: 1px solid var(--border-ornate);
    position: relative;
    overflow: hidden;
    transition: border-color 0.4s, transform 0.4s;
    cursor: default;
  }

  .tool-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--accent-gold), transparent);
    transform: scaleX(0);
    transition: transform 0.4s;
  }

  .tool-card:hover {
    border-color: rgba(201,168,76,0.35);
    transform: translateY(-4px);
  }

  .tool-card:hover::before { transform: scaleX(1); }

  .tool-icon-wrap {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s, filter 0.4s;
  }

  .tool-img {
    width: 72px;
    height: 72px;
    object-fit: contain;
  }

  .tool-name {
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: 0.2em;
    color: var(--text-primary);
    text-transform: uppercase;
    display: block;
    text-align: center;
  }

  /* ── CONTACT ───────────────────────────────────────── */
  #contact {
    background: var(--bg-deep);
    text-align: center;
  }

  .contact-inner {
    max-width: 640px;
    margin: 0 auto;
  }

  .contact-intro {
    color: var(--text-muted);
    font-style: italic;
    font-size: 20px;
    margin-bottom: 48px;
    line-height: 1.6;
  }

  .contact-email {
    display: inline-block;
    font-family: var(--font-display);
    font-size: clamp(18px, 3vw, 28px);
    color: var(--accent-gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(201,168,76,0.3);
    padding-bottom: 8px;
    transition: border-color 0.3s;
    margin-bottom: 60px;
    word-break: break-all;
  }

  .contact-email:hover { border-color: var(--accent-gold); }

  .social-links {
    display: flex;
    justify-content: center;
    gap: 32px;
    list-style: none;
  }

  .social-links a {
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 0.3em;
    color: var(--text-muted);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.3s;
  }

  .social-links a:hover { color: var(--accent-gold); }

  /* ── FOOTER ────────────────────────────────────────── */
  

  

  

  

  

  

  

  /* ── ANIMATIONS ────────────────────────────────────── */
  

  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 0.18; }
  }

  @keyframes scrollPulse {
    0%, 100% { opacity: 0.3; transform: scaleY(1); }
    50%       { opacity: 1; transform: scaleY(1.05); }
  }

  .reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ── RESPONSIVE ────────────────────────────────────── */
  @media (max-width: 900px) {
    nav { padding: 24px 24px; }

    /* The beams are sized for a wide hero frame; on a narrow portrait
       viewport their fixed width dominates the crop and cuts across the
       title text instead of reading as background atmosphere. */
    .hero-beams { display: none; }

    .nav-toggle { display: flex; }
    .nav-overlay { display: block; pointer-events: none; }
    .nav-overlay.visible { pointer-events: auto; }

    .nav-links {
      position: fixed;
      top: 0;
      right: 0;
      height: 100vh;
      width: min(280px, 80vw);
      flex-direction: column;
      justify-content: center;
      align-items: flex-end;
      gap: 32px;
      margin: 0;
      padding: 24px 40px;
      background: rgba(5,4,7,0.98);
      backdrop-filter: blur(10px);
      border-left: 1px solid var(--border-ornate);
      transform: translateX(100%);
      transition: transform 0.4s ease;
      z-index: 501;
    }

    .nav-links.open { transform: translateX(0); }

    section { padding: 80px 24px; }
    #hero { padding: 0 24px 60px; }

    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .about-image-frame { aspect-ratio: 1/1; max-width: 280px; }

    .portfolio-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .portfolio-item { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 4/3 !important; }

    .tools-grid .tool-card { width: calc(50% - 12px); }
  }

  /* ══════════════════════════════════════════════════
   ENHANCED ANIMATIONS
   ══════════════════════════════════════════════════ */

/* ── 2. HERO TITLE — subtle gold text glow pulse ─── */
@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 40px rgba(201,168,76,0.1), 0 0 80px rgba(201,168,76,0.05); }
  50%       { text-shadow: 0 0 60px rgba(201,168,76,0.3), 0 0 120px rgba(201,168,76,0.15); }
}

.hero-title {
  animation: fadeUp 1s ease 0.5s forwards, titleGlow 4s ease 1.5s infinite;
}

/* ── 5. TOOL CARDS — shimmer line on hover ──────── */

.tool-card {
  overflow: hidden;
}

.tool-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(201,168,76,0.06) 50%,
    transparent 60%
  );
  transform: translateX(-100%) skewX(-15deg);
  transition: none;
}

.tool-card:hover::after {
  animation: shimmerSweep 0.7s ease forwards;
}

/* ── 7. PORTFOLIO ITEMS — gold corner trace on hover  */
@keyframes cornerTrace {
  0%   { clip-path: inset(0 100% 100% 0); }
  25%  { clip-path: inset(0 0 100% 0); }
  50%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* Reset <a> tag styles when used as portfolio card */
a.portfolio-item {
  text-decoration: none;
  color: inherit;
  display: block;
}

.portfolio-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--accent-gold);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
  transition: opacity 0.2s;
}

.portfolio-item:hover::after {
  opacity: 0.5;
  animation: cornerTrace 0.5s ease forwards;
}

/* ── 8. SECTION TITLES — reveal with letter spacing  */
@keyframes titleExpand {
  from { letter-spacing: -0.05em; opacity: 0; }
  to   { letter-spacing: normal;  opacity: 1; }
}

.reveal.visible .section-title,
.section-title.visible {
  animation: titleExpand 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── 9. CONTACT EMAIL — shimmer on hover, same gradient
   and sweep as the nav logo (goldShimmer, in base.css) ── */
.contact-email:hover {
  background: linear-gradient(
    90deg,
    var(--accent-gold) 0%,
    var(--text-primary) 40%,
    var(--accent-gold) 60%,
    var(--accent-silver) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 1.2s linear infinite;
  border-color: var(--accent-gold);
}

/* ── 10. SCROLL LINE — more dramatic pulse ───────── */
@keyframes scrollPulseNew {
  0%   { opacity: 0.2; transform: scaleY(0.6) translateY(-10px); }
  50%  { opacity: 1;   transform: scaleY(1.1) translateY(0px); }
  100% { opacity: 0.2; transform: scaleY(0.6) translateY(10px); }
}

.scroll-line {
  animation: scrollPulseNew 2s ease infinite;
  transform-origin: top center;
}