/* ═══════════════════════════════════════════════════════════════════════════
   VECTORHEART — Homepage Stylesheet
   Layout: single-column flex, left-aligned.
   All spacing uses clamp() so the proportions scale across desktop viewports.

   Reference proportions (from 1920 × 1080 mockup):
     Left margin  :  113px  → 5.9vw
     Arrow left   :   45px  → 2.34vw  (sits in the left margin)
     Title top    :   48px  → 4.4vh
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Font ─────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Abacaxi';
  src: url('../font/AbacaxiLatinVF-Thin.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
}

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

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  font-family: 'Abacaxi', 'Segoe UI', sans-serif;
}

/* ── CRT Monitor shell ────────────────────────────────────────────────────── */
.crt-monitor {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #525d63;
  box-shadow:
    inset 0 0  60px 10px rgba(0, 0, 0, 0.15),
    inset 0 0 130px 30px rgba(0, 0, 0, 0.05);
}

/* ── CRT Scanlines ────────────────────────────────────────────────────────── */
.crt-monitor::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent              0px,
    transparent              2px,
    rgba(0, 0, 0, 0.02)     2px,
    rgba(0, 0, 0, 0.02)     4px
  );
  pointer-events: none;
  z-index: 50;
}

/* ── CRT Vignette ─────────────────────────────────────────────────────────── */
.crt-monitor::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 86% 82% at 50% 50%,
    transparent           42%,
    rgba(0, 0, 0, 0.25)  100%
  );
  pointer-events: none;
  z-index: 51;
}

/* ── CRT Moving scan-line artifact ───────────────────────────────────────── */
.crt-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 50px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.015) 50%,
    transparent
  );
  pointer-events: none;
  z-index: 52;
  animation: scan-travel 8s linear infinite;
}

@keyframes scan-travel {
  from { top: -5px; }
  to   { top: 100%; }
}

/* ── CRT Flicker ──────────────────────────────────────────────────────────── */
@keyframes crt-flicker {
  0%,  88%  { opacity: 1;    }
  89%        { opacity: 0.92; }
  90%        { opacity: 1;    }
  93%        { opacity: 0.97; }
  94%        { opacity: 1;    }
}

/* ── CRT Content layer ────────────────────────────────────────────────────── */
.crt-content {
  position: relative;
  width: 100%;
  height: 100%;
  animation: crt-flicker 11s infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE LAYOUT — flex column
   The page fills the viewport. All content flows top-to-bottom.
   The footer is pinned to the bottom via position: absolute.
   ═══════════════════════════════════════════════════════════════════════════ */

.page {
  position: absolute;
  inset: 0;
  overflow: hidden;

  /* Flex column: content stacks top-to-bottom */
  display: flex;
  flex-direction: column;

  /* Top padding sets the title's distance from the top of the screen.
     Left padding is the main content guide (113px at 1920). */
  padding-top:  clamp(26px, 4.6vh,  54px);
  padding-left: clamp(50px, 6.5vw, 133px);
  padding-right: clamp(20px, 2vw,   40px);

  /* Bottom padding reserves space for the absolute-positioned footer */
  padding-bottom: clamp(80px, 15vh, 162px);
}

.page-work-category{
  position: absolute;
  inset: 0;
  overflow: hidden;

  /* Flex column: content stacks top-to-bottom */
  display: flex;
  flex-direction: column;

  /* Top padding sets the title's distance from the top of the screen.
     Left padding is the main content guide (113px at 1920). */
  padding-top:  clamp(26px, 4.6vh,  54px);
  padding-left: clamp(50px, 6.5vw, 133px);
  padding-right: clamp(50px, 6.5vw, 133px);
  /* Bottom padding reserves space for the absolute-positioned footer */
  padding-bottom: clamp(80px, 15vh, 162px);
}

/* ── Title ────────────────────────────────────────────────────────────────── */
.site-title {
  font-size: clamp(32px, 5.5vw, 80px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #f2ebeb;
  text-shadow:
    -1.5px 0    0   rgba(255,  60,  60, 0.05),
      1.5px 0    0   rgba( 60, 200, 255, 0.05),
      0      0  10px rgba(255, 255, 255, 0.15),
      0      0  30px rgba(255, 255, 255, 0.06);
}

/* ── Subtitle ─────────────────────────────────────────────────────────────── */
.site-subtitle {
  margin-top: clamp(4px, 1.1vh, 10px);
  font-size: clamp(16px, 1.4vw, 22px);
  font-weight: 400;
  letter-spacing: -0.05em;
  color: #f2ebeb;
  text-shadow:
    0 0  5px rgba(255, 255, 255, 0.15),
    0 0 16px rgba(255, 255, 255, 0.08);
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────────── */
.breadcrumbs {
  font-size: 24px;
  font-weight: 200;
  letter-spacing: -0.01em;
  color: #f2ebeb;
}

.bc-inactive {
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 200ms ease;
}
.bc-inactive:hover { opacity: 1; }
.bc-sep            { opacity: 0.5; }
.bc-active         { opacity: 1; }

/* ── Bio section ──────────────────────────────────────────────────────────── */
/* The arrow3 holder sits in the left margin by pulling bio-section left.
   Arrow width (60px) + gap (8px) = 68px before bio text starts, which
   lines bio text back up with the main content guide.                       */
.bio-section {
  margin-top: clamp(14px, 2.3vh, 25px);
  /* Pull the whole section left so the arrow is in the margin.
     At 1920px: arrow edge = 45px, page padding-left = 113px → offset = -68px */
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.bio-section-homepage {
  margin-top: clamp(48px, 5.3vh, 68px);
  /* Pull the whole section left so the arrow is in the margin.
     At 1920px: arrow edge = 45px, page padding-left = 113px → offset = -68px */
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.arrow3-resize {
  width: 18px;
  height: 31px;
}

.arrow3-resize-about-page {
  width: 24px;
  height: 38px;
}

.arrow3-holder {
  flex-shrink: 0;
  width: 30px;
  padding-top: 4px;
}

.arrow3-holder-homepage {
  flex-shrink: 0;
  width: 45px;
  padding-top: 8px;
}

.bio-text-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 68ch;
  margin-top: 13px;
}

.bio-p {
  font-size: clamp(15px, 3vw, 18px);
  font-weight: 300;
  line-height: 1.95;
  color: #f2ebeb;
  text-shadow:
    0 0  4px rgba(255, 255, 255, 0.20),
    0 0 10px rgba(255, 255, 255, 0.05);
}

.bio-link {
  color: #f2ebeb;
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 235, 235, 0.30);
  transition: border-color 0.2s;
}
.bio-link:hover { border-bottom-color: #f2ebeb; }

/* ── Navigation section ───────────────────────────────────────────────────── */
/* margin-top: auto pushes the nav section to fill the remaining vertical
   space above the footer, keeping it in the lower portion of the viewport. */
.nav-section {
  margin-top: auto;
  margin-bottom: clamp(58px, 5.6vh, 78px);
}

.nav-label {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.024em;
  color: #f2ebeb;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.15);
}

.arrow2-wrapper {
  margin-top: clamp(14px, 2vh, 22px);
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 300ms ease, transform 700ms cubic-bezier(0, 0, 0.05, 1);
}
.arrow2-wrapper.visible { opacity: 1; transform: translateY(0); }

.arrow2-img {
  display: block;
  width: 13px;
  height: auto;
}

/* ── Nav grid ─────────────────────────────────────────────────────────────── */
/* 2-column grid:  My Works → row 1 col 1   |   (empty row 1 col 2)
                   About    → row 2 col 1   |   Get In Touch → row 2 col 2  */
.nav-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-template-rows: repeat(2, auto);
  column-gap: 100px;
  row-gap: clamp(25px, 2.9vh, 38px);
  margin-top: clamp(48px, 5.6vh, 78px);
}

#nav-works   { grid-area: 1 / 1; }
#nav-about   { grid-area: 2 / 1; }
#nav-contact { grid-area: 2 / 2; }

/* ── Nav item ─────────────────────────────────────────────────────────────── */
.nav-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}

.nav-item-mobile {
  display: none;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
}


/* ── Nav tag SVG ──────────────────────────────────────────────────────────── */
.nav-tag {
  display: block;
  height: 48px;
  width: auto;
  overflow: visible;
  cursor: pointer;
  opacity: 0;
}

/* ── Nav item label row (quad + title) ────────────────────────────────────── */
.nav-item-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Quad: enters from the left (page-enter-demo pattern) ────────────────── */
.nav-quad {
  display: block;
  width: 18px;
  height: auto;
  flex-shrink: 0;
  opacity: 0;
}

.nav-quad.quad-enter {
  animation: quad-enter-left var(--quad-dur, 420ms)
             cubic-bezier(0.25, 0, 0.1, 1) forwards;
}

@keyframes quad-enter-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0);     }
}

/* ── Nav title ────────────────────────────────────────────────────────────── */
.nav-title {
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: #f2ebeb;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
}

/* ── Initial hidden states ────────────────────────────────────────────────── */
[data-tw-mode] {
  visibility: hidden;
}

/* Footer label is visible by default (footer persists across page transitions).
   On first load, html.footer-init hides it so the typewriter entrance works. */
#footer-lbl { visibility: visible; }
html.footer-init #footer-lbl { visibility: hidden; }

/* Arrow3 paths — hidden until animateArrow3() sets strokeDashoffset */
.arrow-stroke {
  opacity: 0;
}

/* Footer SVG lines — default: fully drawn (visible on page transitions).
   On first load the html.footer-init overrides below hide them for the
   entrance animation. JS inline styles take over once animation starts. */
#f-thin  { opacity: 1; stroke-dasharray: 150; stroke-dashoffset: 0; }
#f-thick { opacity: 1; stroke-dasharray: 70;  stroke-dashoffset: 0; }

html.footer-init #f-thin,
html.footer-init #f-thick { opacity: 0; }

/* ── Arrow3 stroke style ──────────────────────────────────────────────────── */
.arrow-stroke {
  fill: none;
  stroke: #f2ebeb;
  stroke-miterlimit: 10;
  stroke-width: 24px;
  stroke-linecap: butt;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPEWRITER CHARS
   ═══════════════════════════════════════════════════════════════════════════ */

.tw-word {
  display: inline-block;
  white-space: nowrap;
}

.tw-char {
  display: inline-block;
  position: relative;
  white-space: pre;
  opacity: 0;
}
.tw-char.visible { opacity: 1; }

.tw-flash {
  position: absolute;
  inset: 19% 0 9% 0;
  background: #ffffff;
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
  box-shadow:
    0 0 var(--glow-blur,    14px)
        var(--glow-spread,   4px)
        rgba(255, 255, 255, var(--glow-opacity, 0.75));
}
.tw-flash.active {
  animation: flash-out var(--fade-duration, 120ms) ease-out forwards;
}

@keyframes flash-out {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER — always pinned to the bottom of the viewport
   ═══════════════════════════════════════════════════════════════════════════ */

.site-footer {
  position: absolute;
  bottom: 0px;
  left: clamp(50px, 6.5vw, 133px);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.footer-line-svg { flex-shrink: 0; }

.footer-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 1;
  transform: none;
  transition: opacity 350ms ease, transform 350ms cubic-bezier(0.25, 0, 0.1, 1);
}

/* First load only — hide for entrance animation (overridden once .visible is added) */
html.footer-init .footer-header:not(.visible) {
  opacity: 0;
  transform: translateX(-14px);
}

.footer-sq {
  width: 7px;
  height: 7px;
  background: #f2ebeb;
  flex-shrink: 0;
}

.footer-label-text {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #f2ebeb;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.15);
}

.footer-data {
  font-size: 18px;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.6;
  color: #f2ebeb;
  max-width: 70ch;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.10);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page title (My Story) ────────────────────────────────────────────────── */
.page-title {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #f2ebeb;
  text-shadow:
    -1.5px 0    0   rgba(255,  60,  60, 0.05),
      1.5px 0    0   rgba( 60, 200, 255, 0.05),
      0      0  10px rgba(255, 255, 255, 0.15),
      0      0  30px rgba(255, 255, 255, 0.06);
  margin-top: clamp(38px, 8vh, 98px);
  margin-bottom: clamp(69px, 8.5vh, 164px);
}

/* ── Story section ────────────────────────────────────────────────────────── */
.story-section {
  display: flex;
  flex-direction: column;
}

.story-entries {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 5vh, 68px);
}

.story-entry {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.story-arrow-holder {
  flex-shrink: 0;
  width: 68px;
  padding-bottom: 1px;
}

.story-content {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.story-header {
  max-width: 30vw;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.entry-title {
  font-size: clamp(28px, 3.3vw, 38px);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #f2ebeb;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.20);
}

.entry-years {
  font-size: clamp(13px, 1.5vw, 18px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: #f2ebeb;
  white-space: nowrap;
}

.entry-desc {
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 300;
  line-height: 1.7;
  color: #f2ebeb;
  max-width: 60ch;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.10);
}

/* ── Bottom row (Skills + Get In Touch) ───────────────────────────────────── */
.about-bottom-row {
  max-width: 70vw;
  display: flex;
  justify-content: space-between;
  gap: clamp(60px, 10vw, 160px);
  margin-top: auto;
  margin-bottom: clamp(58px, 5.6vh, 78px);
  align-items: flex-start;
}

/* ── Section title (My Skills / Get In Touch) ─────────────────────────────── */
.section-title {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #f2ebeb;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
  margin-bottom: clamp(14px, 2.2vh, 28px);
}

/* ── Skills grid ──────────────────────────────────────────────────────────── */
.skills-section {
  display: flex;
  flex-direction: column;
}

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  max-width: 30vw;
}

/* Skill box: hidden by default, revealed with fade-in-from-left animation */
.skill-box-wrapper {
  display: inline-flex;
  opacity: 0;
}

.skill-box-wrapper.skill-enter {
  animation: skill-enter-left 420ms cubic-bezier(0.25, 0, 0.1, 1) forwards;
}

.skill-box-wrapper.skill-exit {
  animation: skill-exit-right 100ms cubic-bezier(0.9, 0, 1, 1) forwards;
}

@keyframes skill-enter-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes skill-exit-right {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(40px); }
}

.skill-box-inner {
  border: 2px solid #f2ebeb;
  border-radius: 9px;
  padding: 10px 24px;
  white-space: nowrap;
}

.skill-label {
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #f2ebeb;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.15);
}

/* ── Get In Touch section ─────────────────────────────────────────────────── */
.contact-section {
  display: flex;
  flex-direction: column;
  min-width: 220px;
}

.contact-desc {
  font-size: clamp(12px, 1.2vw, 15px);
  font-weight: 300;
  line-height: 1.7;
  color: #f2ebeb;
  max-width: 48ch;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.10);
  margin-bottom: clamp(16px, 2.4vh, 30px);
}

/* ── Social tags row ──────────────────────────────────────────────────────── */
.social-tags {
  display: flex;
  gap: 88px;
  align-items: center;
}

.social-tag-item {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.social-tag-item-mobile {
  display: none;
  position: relative;
  cursor: pointer;
}

.social-tag-svg {
  display: block;
  height: 40px;
  width: auto;
  overflow: visible;
  opacity: 0;
}

/* Logo icon: centered in the left portion of the tag (before the notch) */
.social-tag-logo {
  position: absolute;
  top: 50%;
  left: 28%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: auto;
  opacity: 0;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GET IN TOUCH PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page body: forms column + send button side by side ──────────────────── */
/* Honeypot — off-screen so real users never see it; bots fill it and get rejected */
.hp-trap {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.contact-body {
  display: flex;
  align-items: flex-end;
  gap: clamp(40px, 6vw, 100px);
  margin-bottom: clamp(58px, 8vh, 124px);
  flex: 1;
  min-height: 0;
}

/* ── Forms column ─────────────────────────────────────────────────────────── */
.contact-forms-col {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4vh, 72px);
  flex: 1;
  max-width: clamp(380px, 52vw, 720px);
  min-width: 0;
}

/* ── Mail form group (label + row as one unit) ────────────────────────────── */
.mail-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* ── Mail form label (quad + field name) ─────────────────────────────────── */
.mail-form-label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 9px;
}

.mail-label-text {
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: #f2ebeb;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
  visibility: hidden;
}

/* ── Mail form row ────────────────────────────────────────────────────────── */
.mail-form-row {
  position: relative;
}

/* SVG tag: fixed height, width scales naturally from the viewBox aspect ratio */
.mail-tag-svg {
  display: block;
  width: auto;
  height: clamp(38px, 3.5vh, 52px);
  overflow: visible;
  opacity: 0;
}

/* Description form keeps full column width so the textarea has room */
.mail-desc-row .mail-tag-svg {
  width: 100%;
  height: auto;
}

/* Input overlay: absolutely fills the form row (same height as the SVG) */
.mail-field-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 clamp(12px, 1.5vw, 18px);
}

/* ── Quad bullet ──────────────────────────────────────────────────────────── */
.mail-quad {
  flex-shrink: 0;
  width: 18px;
  height: auto;
  opacity: 0;
}

.mail-quad.quad-enter {
  animation: quad-enter-left var(--quad-dur, 420ms) cubic-bezier(0.25, 0, 0.1, 1) forwards;
}

/* ── Text inputs ──────────────────────────────────────────────────────────── */
.mail-input {
  background: transparent;
  border: none;
  outline: none;
  color: #f2ebeb;
  font-family: 'Abacaxi', 'Segoe UI', sans-serif;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 300;
  letter-spacing: -0.01em;
  width: 100%;
  caret-color: #f2ebeb;
}

.mail-input::placeholder {
  color: rgba(242, 235, 235, 0.38);
  font-family: 'Abacaxi', 'Segoe UI', sans-serif;
}

/* ── Description (textarea) row ───────────────────────────────────────────── */
.mail-desc-overlay {
  align-items: flex-start;
  padding-top: clamp(8px, 1vh, 12px);
  padding-bottom: clamp(14px, 2vh, 22px);
}

/* Quad stays at the top of the overlay while textarea stretches vertically */
.mail-quad-top {
  align-self: flex-start;
  margin-top: 2px;
}

.mail-textarea {
  background: transparent;
  border: none;
  outline: none;
  color: #f2ebeb;
  font-family: 'Abacaxi', 'Segoe UI', sans-serif;
  font-size: clamp(13px, 1.2vw, 16px);
  font-weight: 300;
  letter-spacing: -0.01em;
  resize: none;
  width: 100%;
  caret-color: #f2ebeb;
  line-height: 1.75;
  align-self: stretch; /* fills cross-axis of the absolutely-sized overlay */
}

.mail-textarea::placeholder {
  color: rgba(242, 235, 235, 0.38);
  font-family: 'Abacaxi', 'Segoe UI', sans-serif;
}

/* ── Send button ──────────────────────────────────────────────────────────── */
.send-btn-wrapper {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-end;
  opacity: 0;           /* revealed via JS inline transition */
  user-select: none;
}

.send-btn-mobile { display: none; }

.send-tag-svg {
  display: block;
  height: clamp(38px, 6.8vh, 84px);
  width: auto;
  overflow: visible;
}

.send-btn-content-container {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
}

.send-btn-content {
  display: flex;
  align-items: center;
  padding-left: 5%;
  margin-bottom: 14%;
  gap: 8px;
}

.send-quad {
  flex-shrink: 0;
  width: 14px;
  height: auto;
  opacity: 0;
}

.send-quad.quad-enter {
  animation: quad-enter-left var(--quad-dur, 420ms) cubic-bezier(0.25, 0, 0.1, 1) forwards;
}

.send-text {
  font-size: clamp(13px, 1.3vw, 17px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: #f2ebeb;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
}

/* Arrow wrapper — translates + fades in from the left on hover */
.send-arrow-wrapper {
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 240ms ease, transform 600ms cubic-bezier(0.22, 0, 0.1, 1);
}

.send-btn-wrapper:hover .send-arrow-wrapper {
  opacity: 1;
  transform: translateX(16px);
}

/* Arrow itself only rotates — parent handles translation */
.send-arrow-img {
  display: block;
  width: 40px;
  height: auto;
  transform: rotate(-90deg);
}

/* ── Confirmation overlay ─────────────────────────────────────────────────── */
.confirm-overlay {
  position: absolute;
  width: 100vw;
  height: 100vh;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding-bottom: 5%;
}

.confirm-text {
  font-size: clamp(16px, 1.5vw, 30px);
  font-weight: 300;
  letter-spacing: -0.05em;
  color: #f2ebeb;
  text-shadow:
    -1.5px 0    0   rgba(255,  60,  60, 0.05),
      1.5px 0    0   rgba( 60, 200, 255, 0.05),
      0      0  10px rgba(255, 255, 255, 0.15),
      0      0  30px rgba(255, 255, 255, 0.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MY WORKS PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Works body pushes the grid to the bottom — same pattern as .nav-section */
.works-body {
  margin-top: auto;
  margin-bottom: clamp(58px, 5.6vh, 78px);
}

.works-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: clamp(40px, 6vw, 100px);
  row-gap: clamp(25px, 3.9vh, 108px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   WORK CATEGORY PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Project counter + arrows (top right, absolute over the page) ────────── */
.wc-outer-nav {
  display: flex;
  width: 100%;
  position: relative;
  top: clamp(10px, 4.4vw, 80px);
  align-items: center;
  justify-content: end;
  gap: clamp(14px, 1.2vw, 22px);
}

.wc-counter {
  font-size: clamp(16px, 2.5vw, 24px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: #f2ebeb;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.20);
}

.wc-nav-arrows {
  display: flex;
  gap: 12px;
  align-items: center;
}

.wc-nav-arrow {
  width: 20px;
  height: auto;
  cursor: pointer;
  opacity: 0;        /* revealed by JS */
  transition: opacity 200ms ease;
}

.wc-nav-arrow:not(.disabled):hover { opacity: 1 !important; }
.wc-nav-arrow.disabled             { cursor: default; }

.wc-prev-arrow { transform: rotate(90deg);  }   /* Arrow2 down → points left  */
.wc-next-arrow { transform: rotate(-90deg); }   /* Arrow2 down → points right */

/* Fills the vertical space between breadcrumbs and footer, then centers .wc-content */
.wc-content-container {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── Main content flex row ───────────────────────────────────────────────── */
.wc-content {
  display: flex;
  width: 100%;
  gap: clamp(28px, 6.5vw, 86px);
  height: clamp(300px, 66vh, 780px);
}

/* ── Left: image carousel ────────────────────────────────────────────────── */
.wc-images-panel {
  flex: 0 0 56%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.wc-img-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  background: rgba(0, 0, 0, 0.18);
  opacity: 0;           /* revealed by JS */
}

.wc-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 280ms ease;
}

/* ── Image carousel arrows ───────────────────────────────────────────────── */
.wc-img-arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15%;
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity 420ms ease;
  z-index: 2;
}

.wc-img-prev {
  left: 0;
  justify-content: flex-start;
  padding-left: 25px;
  background: linear-gradient(to right, rgba(22, 22, 22, 0.75), transparent);
}

.wc-img-next {
  right: 0;
  justify-content: flex-end;
  padding-right: 25px;
  background: linear-gradient(to left, rgba(22, 22, 22, 0.75), transparent);
}

.wc-img-arrow:not(.wc-img-arrow-hidden):hover { opacity: 1; }

.wc-img-arrow-icon {
  width: 40px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.wc-img-prev .wc-img-arrow-icon { transform: rotate(90deg);  }
.wc-img-next .wc-img-arrow-icon { transform: rotate(-90deg); }

.wc-img-arrow.wc-img-arrow-hidden { display: none; }

/* ── Image dots ──────────────────────────────────────────────────────────── */
.wc-dots {
  display: flex;
  justify-content: center;
  bottom: 0px;
  gap: 12px;
  flex-shrink: 0;
  min-height: 10px;
}

.wc-dot {
  width: 16px;
  height: 4px;
  background: rgba(242, 235, 235, 0.30);
  cursor: pointer;
  transition: background 200ms ease, width 200ms ease;
}

.wc-dot.active {
  background: #f2ebeb;
  width: 32px;
}

/* ── Right: project info panel ───────────────────────────────────────────── */
.wc-info-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  padding-bottom: 16px; /* match gap + wc-dots min-height so date aligns with image bottom */
}

/* Top group: Project Info label + title */
.wc-title-group {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.5vh, 10px);
}

.wc-info-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
}

.wc-info-sq {
  width: 12px;
  height: 12px;
  background: #f2ebeb;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 250ms ease, transform 250ms ease;
}

.wc-info-label {
  font-size: clamp(10px, 1vw, 17px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: #f2ebeb;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.15);
}

.wc-title {
  font-size: clamp(26px, 5.8vw, 78px);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1.05;
  color: #f2ebeb;
  text-shadow:
    -1.5px 0    0   rgba(255,  60,  60, 0.05),
      1.5px 0    0   rgba( 60, 200, 255, 0.05),
      0      0  10px rgba(255, 255, 255, 0.15),
      0      0  30px rgba(255, 255, 255, 0.06);
}

/* Middle group: arrow + description */
.wc-desc-group {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.1vh, 14px);
  margin-bottom: 13%;
}

.wc-desc-arrow {
  display: block;
  width: 18px;
  height: auto;
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 300ms ease, transform 700ms cubic-bezier(0, 0, 0.05, 1);
}

.wc-desc {
  font-size: clamp(12px, 1.4vw, 18px);
  font-weight: 200;
  line-height: 1.55;
  color: #f2ebeb;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.10);
  max-width: 58ch;
  margin-top: 30px;
}

/* Bottom: date */
.wc-date {
  font-size: clamp(14px, 2.3vw, 28px);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: #f2ebeb;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.20);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE FOOTER — 3 fixed links, hidden on desktop
   ═══════════════════════════════════════════════════════════════════════════ */

.mobile-footer {
  display: none;
  height: 54px;
  border-top: 1px solid rgba(242, 235, 235, 0.12);
  justify-content: space-around;
  align-items: center;
  padding: 0 16px;
  margin-top: 40px;
}

.mobile-footer-link {
  font-family: 'Abacaxi', 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: #f2ebeb;
  text-decoration: none;
  padding: 14px 10px;
  text-align: center;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — max-width: 768px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Unlock scrolling ───────────────────────────────────────────────────── */
  .crt-monitor {
    height: auto;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .crt-content { height: auto; }

  .page,
  .page-work-category {
    position: relative;
    overflow: visible;
    height: auto;
    min-height: 100dvh;
    padding-top:    clamp(16px, 2vw, 24px);
    padding-left:   clamp(16px, 3vw, 24px);
    padding-right:  clamp(16px, 3vw, 24px);
    padding-bottom: 2px;
  }

  /* ── Footer: hide desktop, show mobile ──────────────────────────────────── */
  .site-footer   { display: none; }
  .mobile-footer { display: flex; }

  /* ── Breadcrumbs ────────────────────────────────────────────────────────── */
  .breadcrumbs { font-size: 15px; }

  /* ── Homepage ───────────────────────────────────────────────────────────── */
  .site-title    { font-size: clamp(28px, 7.2vw, 48px); }
  .site-subtitle { font-size: clamp(14px, 3.5vw, 18px); }
  .nav-label { font-size: clamp(14px, 7vw, 48px);}

  .arrow3-resize {
    width: 14px;
    height: 20px;
  }

  .arrow3-holder-homepage {
  flex-shrink: 0;
  width: 20px;
}

  .bio-text-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 65ch;
  margin-top: 13px;
  margin-right: 20px;
}

  .bio-p {
    font-size: clamp(12px, 2.8vw, 16px);
    font-weight: 300;
    line-height: 1.8;
    color: #f2ebeb;
    text-shadow:
      0 0  4px rgba(255, 255, 255, 0.20),
      0 0 10px rgba(255, 255, 255, 0.05);
  }

  .nav-section {
    margin-top: 64px;
    margin-bottom: 24px;
  }

  .nav-grid {
    grid-template-columns: repeat(2, max-content);
    column-gap: clamp(2px, 6vw, 60px);
    row-gap: clamp(18px, 5vh, 68px);
  }

  .nav-tag {
    display: block;
    height: clamp(2px, 8.1vw, 60px);
    width: auto;
    overflow: visible;
    cursor: pointer;
    opacity: 0;
  }

  .nav-quad {
    display: block;
    width: 15px;
    height: auto;
    flex-shrink: 0;
    opacity: 0;
  }

  .nav-title {
    font-size: clamp(12px, 3.3vw, 20px);
    font-weight: 300;
    letter-spacing: -0.01em;
    color: #f2ebeb;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
  }

  .nav-item-label {
    margin-top: 1px;
    gap: clamp(2px, 8px, 35px);
  }


  .nav-item        { display: none; }
  .nav-item-mobile { display: flex; }

  #nav-works-mobile   { grid-area: 1 / 1; }
  #nav-about-mobile   { grid-area: 2 / 1; }
  #nav-contact-mobile { grid-area: 2 / 2; }

  /* ── About ──────────────────────────────────────────────────────────────── */
  .page-title {
    margin-top: 50px;
    margin-bottom: 42px;
  }

  .entry-title {
    font-size: clamp(14px, 7vw, 32px);
  }

  .entry-desc {
    margin-top: 12px;
    line-height: 1.65;
  }

  .arrow3-resize-about-page {
    width: 14px;
    height: 20px;
  }

  .story-arrow-holder {
    width: 20px;
  }

  .story-header { 
    flex-direction: column;
    gap: 4px;
    max-width: 100%;
   }

  .about-bottom-row {
    flex-direction: column;
    max-width: 100%;
    gap: 36px;
    margin-top: 32px;
    margin-bottom: 24px;
  }

  .section-title {
    margin-top: 30px;
  }

  .skills-grid { max-width: 100%; }

  .skill-box-inner {
    padding: 6px 16px;
    display: flex;
    align-items: center;
  }

  .skill-label {
    font-size: clamp(10px, 1vw, 14px);
  }

  .social-tags {
    gap: 28px;
    flex-wrap: wrap;
  }

  .social-tag-item        { display: none; }
  .social-tag-item-mobile { display: inline-block; }

  .mobile-footer-about { display: none; }

  /* ── Contact ────────────────────────────────────────────────────────────── */
  .contact-body {
    flex-direction: column;
    align-items: flex-start;
  }

  #send-btn        { display: none; }
  .send-btn-mobile { display: inline-flex; }

  .contact-forms-col {
    margin-top: 50px;
    gap: clamp(16px, 2vh, 30px);
    max-width: 100%;
    width: 100%;
  }

  .mail-input {
    font-size: clamp(10px, 1vw, 14px);
  }

  .mail-tag-svg {
    width: 100%;
    height: auto;
  }

  .confirm-overlay {
    position: fixed;
    height: 100dvh;
  }

  .g-recaptcha {
    transform: scale(0.85);
    transform-origin: left top;
  }

  /* ── Works ──────────────────────────────────────────────────────────────── */
  .works-body {
    margin-top: 36px;
    margin-bottom: 24px;
  }

  .works-grid {
    margin-top: 200px;
    column-gap: clamp(20px, 5.8vw, 56px);
  }

  /* ── Work category ──────────────────────────────────────────────────────── */
  .wc-content-container {
    flex: 0 0 auto;
    justify-content: flex-start;
  }

  .wc-content {
    flex-direction: column;
    height: auto;
    gap: 28px;
  }

  .wc-outer-nav {
    justify-content: left;
    margin-top: clamp(40px, 75px, 100px);
    margin-bottom: clamp(30px, 4vh, 150px);
  }

  .wc-images-panel {
    flex: 0 0 auto;
    width: 100%;
  }

  .wc-img-prev, .wc-img-next {display: none;}

  .wc-img-wrap {
    flex: none;
    height: 56vw;
  }

  .wc-info-header {
    margin-left: 1px;
    gap: 6px;
  }

  .wc-info-sq {
    width: 8px;
    height: 8px;
  }

  .wc-info-panel {
    flex: 0 0 auto;
    padding-bottom: 0;
    gap: 20px;
    justify-content: flex-start;
  }

  .wc-nav-arrow {
    width: 15px;
  }

  .wc-date {
    margin-top: 40px;
  }

  .wc-desc-group { margin-bottom: 0; }

  /* Image carousel arrows always visible on touch screens */
  .wc-img-arrow:not(.wc-img-arrow-hidden) { opacity: 0; }

  /* ── Disable hover-only interactions ────────────────────────────────────── */
  .bc-inactive:hover                             { opacity: 0.5; }
  .bio-link:hover                                { border-bottom-color: rgba(242,235,235,0.30); }
  .send-btn-wrapper:hover .send-arrow-wrapper    { opacity: 0; transform: translateX(-10px); }
  .wc-img-arrow:not(.wc-img-arrow-hidden):hover { opacity: 0.65; }
}