@charset "UTF-8";

/* ─────────────────────────────────────────────
   TABLE OF CONTENTS
   1. Reset & Root Variables
   2. Base / Body
   3. Custom Cursor
   4. Scroll Progress Bar
   5. Navigation
   6. Dropdown
   7. Hero
   8. Scroll Hint
   9. Spline Sections
   10. Project Section — Layout
   11. Project Section — Featured Card
   12. Project Section — Grid Cards (TTU)
   13. Project Section — Personal & Freelance Cards
───────────────────────────────────────────── */


/* ── 1. Reset & Root Variables ── */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: none !important;
}

:root {
  --black:      #0a0a0a;
  --white:      #ffffff;
  --red:        #d1002a;
  --gray:       #999999;
  --font:       'Share Tech Mono', monospace;
  --nav-bg:     rgba(22, 22, 22, 0.55);
  --nav-border: rgba(255, 255, 255, 0.08);
  --nav-blur:   18px;
  --drop-bg:    rgba(20, 20, 20, 0.72);
}




/* ── 2. Base / Body ── */

html, body {
  width: 100%;
  height: 9500px;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-behavior: smooth;
}

.hero,
.spline-section,
.psection {
  width: 100%;
  max-width: 1340px;
}


/*-- LOADER STYLES ───────────────────────────────────────────── */

  /* Prevent scroll while loader is active */
  html.loading,
  body.loading { overflow: hidden; }
 
  /* ── Full-screen overlay ── */
  .loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
      #2a1010 0%,
      #111111 100%);
	  
	/*background: rgba(14, 14, 14, 0.72);*/
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    /* Slide-up exit animation — triggered by .loader.hide */
    transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
    transform: translateY(0);
  }
 
  .loader.hide {
    transform: translateY(-100%);
  }
 

 
  /* ── Soft vignette ── */
  .loader-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse at center,
      transparent 45%,
      rgba(0, 0, 0, 0.65) 100%
    );
    pointer-events: none;
  }
 
  /* ── Logo container ── */
  .loader-logo-wrap {
    position: relative;
    display: inline-block;
  }
 
  .loader-logo {
    display: block;
    width: clamp(120px, 18vw, 220px);
    height: auto;
    /* Logo starts hidden — the wipe will reveal it */
    opacity: 1;
    user-select: none;
    -webkit-user-drag: none;
  }
 
  /* ── Red wipe overlay ──*/

.loader-red-mask {
  position: absolute;
  inset: 0;
  background: #d1002a;
  -webkit-mask-image: url('../images/rubi_designs_logo_default.png');
          mask-image: url('../images/rubi_designs_logo_default.png');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  animation: wipeOff 1.6s cubic-bezier(0.76, 0, 0.24, 1) 0.5s forwards;
}

@keyframes wipeOff {
  from { clip-path: inset(0 0 0 0);    }
  to   { clip-path: inset(0 0 0 100%); }
}

/* ── Loader row layout ── */

.loader-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 40px;
}

.loader-side {
  font-family: var(--font);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
}

.loader-left  { animation: fadeUp 0.5s ease 0.6s forwards; }
.loader-right { animation: fadeUp 0.5s ease 1.9s forwards; }


/* ── 3. Back To Top Button ── */

.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  text-decoration: none;
  color: var(--white);
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease,
              border-color 0.3s ease,
              opacity 0.3s ease,
              transform 0.3s ease;
}

.back-to-top:hover {
  width: 148px;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.btt-arrow {
  position: absolute;
  width: 15px;
  height: 15px;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.btt-label {
  position: absolute;
  font-family: var(--font);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.15s ease 0.15s, transform 0.15s ease 0.15s;
}

.back-to-top:hover .btt-arrow {
  opacity: 0;
  transform: scale(0.6);
  transition-delay: 0ms;
}

.back-to-top:hover .btt-label {
  opacity: 1;
  transform: scale(1);
}


/* ── 3. Custom Cursor ── */

.cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.25s ease,
              width 0.25s ease, height 0.25s ease;
}

.cursor.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.cursor.hovering {
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.5);
}

.cursor.hidden {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
}



/* ── 4. Scroll Progress Bar ── */

.scroll-progress {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 220px;
  z-index: 200;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.scroll-progress-fill {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0%;
  background: var(--red);
  border-radius: 999px;
  transition: height 0.08s linear;
}


/* ── 5. Navigation ── */

nav {
  position: fixed;
  top: 35px;
  left: 50%;
  transform: translateX(-50%) translateY(-120px);
  opacity: 0;
  z-index: 100;
  width: max-content;
}

body.anim-ready nav {
  animation: navSlideDown 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

body.anim-ready .scroll-hint {
  animation: fadeUp 0.5s ease 0.8s forwards;
}

@keyframes navSlideDown {
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

.nav-pill {
  display: flex;
  align-items: center;
  background: var(--nav-bg);
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));
  border: 1px solid var(--nav-border);
  border-radius: 999px;
  padding: 0 16px;
  height: 54px;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.nav-item {
  font-family: var(--font);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--gray);
  padding: 0 28px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none;
  background: none;
  border: none;
  transition: color 0.2s;
}

.nav-item:hover { color: var(--white); }

.chevron {
  display: inline-block;
  font-size: 0.6rem;
  opacity: 0.6;
  transition: transform 0.25s;
}

.nav-projects.open .chevron { transform: rotate(180deg); }

.nav-logo {
  position: relative;
  width: 120px;
  height: 100%;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-logo img {
  position: absolute;
  height: 30px;
  width: auto;
  display: block;
  transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-logo .logo-default { opacity: 1; }
.nav-logo .logo-hover   { opacity: 0; }
.nav-logo:hover .logo-default { opacity: 0; }
.nav-logo:hover .logo-hover   { opacity: 1; }


/* ── 6. Dropdown ── */

.dropdown-wrap {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 75%;
  pointer-events: none;
  z-index: 99;
}

.dropdown-inner {
  background: var(--nav-bg);
  backdrop-filter: blur(var(--nav-blur));
  -webkit-backdrop-filter: blur(var(--nav-blur));
  border: 1px solid var(--nav-border);
  border-radius: 0 0 999px 999px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.dropdown-wrap.visible .dropdown-inner {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.dropdown-item {
  flex: 1;
  font-family: var(--font);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  color: var(--gray);
  padding: 12px 0;
  text-align: center;
  text-decoration: none;
  background: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.dropdown-item:hover { color: var(--white); }

.dropdown-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 8px 0;
  flex-shrink: 0;
}


/* ── 7. Hero ── */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.60)  0%,
    rgba(10, 10, 10, 0.25) 45%,
    rgba(10, 10, 10, 0.00) 100%
  );
  z-index: 1;
}

.hero-name {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 0.06em;
  letter-spacing: 0.2em;
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  font-weight: 400;
  text-transform: uppercase;
  user-select: none;
}

.hero-name .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  
}

body.anim-ready .hero-name .letter {
  animation: fadeUp 0.45s ease forwards;
}

.hero-name .space { width: 0.45em; display: inline-block; }

/* Per-letter animation delays */
body.anim-ready .hero-name .letter:nth-child(1)  { animation-delay: 0.30s; }
body.anim-ready .hero-name .letter:nth-child(2)  { animation-delay: 0.45s; }
body.anim-ready .hero-name .letter:nth-child(3)  { animation-delay: 0.60s; }
body.anim-ready .hero-name .letter:nth-child(4)  { animation-delay: 0.75s; }
body.anim-ready .hero-name .letter:nth-child(5)  { animation-delay: 0.90s; }
body.anim-ready .hero-name .letter:nth-child(6)  { animation-delay: 1.05s; }
body.anim-ready .hero-name .letter:nth-child(8)  { animation-delay: 1.25s; }
body.anim-ready .hero-name .letter:nth-child(9)  { animation-delay: 1.40s; }
body.anim-ready .hero-name .letter:nth-child(10) { animation-delay: 1.55s; }
body.anim-ready .hero-name .letter:nth-child(11) { animation-delay: 1.70s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}


/* ── 8. Scroll Hint ── */

.scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 0;
  width: 100%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
}

body.anim-ready .scroll-hint {
  animation: fadeUp 0.5s ease 0.8s forwards;
}

.scroll-hint span {
  font-family: var(--font);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--gray);
  text-transform: uppercase;
}

.scroll-arrow {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--gray), transparent);
  animation: scrollPulse 1.6s ease-in-out infinite;
}

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

/* Variant inside spline section */
.spline-scroll-hint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
}

.spline-scroll-hint.visible {
  animation: fadeUp 0.5s ease forwards;
}




/* ── 9. Spline Sections ── */

.spline-section {
  position: relative;
  width: 100%;
  height: 100vh;
  margin-top: -110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  overflow: hidden;
}

spline-viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Hides Spline watermark (bottom-right) */
.spline-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 200px;
  height: 60px;
  background: var(--black);
  z-index: 10;
}

.spline-label {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.spline-label.visible { opacity: 1; }

.spline-label p {
  font-family: var(--font);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--gray);
  text-transform: uppercase;
}

/* Second Spline section overrides */
.spline-section-2 { margin-top: 45px; }

.spline-section-2::after { height: 90px; }

.spline_viewer_2 { margin-top: -20px; }


/* ── 10. Project Section — Layout ── */

.psection {
  padding: 50px 32px;
  width: 95%;
}

.psec-label {
  font-size: 10px;
  letter-spacing: 0.25em;
  color: #444;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.psec-title {
  font-size: 24px;
  letter-spacing: 0.08em;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.psec-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #1e1e1e;
}

.psec-divider {
  width: 1px;
  height: 24px;
  background: var(--red);
  flex-shrink: 0;
}


/* ── 11. Project Section — Featured Card ── */

.pfeatured {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
}

.pfeatured-wrap {
  position: relative;
  z-index: 2;
  will-change: transform, opacity;
}

.pfeatured-wrap a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.pfeat-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.pfeatured:hover .pfeat-img { transform: scale(1.05); }

.pfeat-cursor {
  position: fixed;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--white);
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pfeat-cursor.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.pfeat-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--red);
  font-size: 9px;
  letter-spacing: 0.2em;
  padding: 4px 10px;
  border-radius: 2px;
}

.pfeat-accent {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 4px;
  background: var(--red);
}

.pfeat-overlay-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 24px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
}

.pfeat-overlay-text h3 {
  font-size: 15px;
  letter-spacing: 0.08em;
  margin: 0 0 4px;
}

.pfeat-overlay-text p {
  font-size: 10px;
  color: #666;
  letter-spacing: 0.15em;
  margin: 0;
}

.rubi {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 10px;
  height: auto;
  z-index: 50;
}


/* ── 12. Project Section — Grid Cards (TTU) ── */

.pgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.pcard {
  position: relative;
  border-radius: 6px;
  overflow: visible;
  opacity: 0;
  transform: translateY(-60px);
  transition: transform 0.65s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.65s ease;
}

/* In view */
.pcard.p-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hover — only active when card is visible */
.pcard.p-visible:hover {
  transform: translateY(-12px);
}

/* Scrolled past — exit downward */
.pcard.p-past {
  opacity: 0;
  transform: translateY(60px);
}

.pcard-inner {
  background: #111;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.pcard-h { height: 320px; }

.pcard-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.3s ease, transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.pcard:hover .pcard-inner img {
  transform: scale(1.05);
  filter: grayscale(0%);
}

.pcard-cursor {
  position: fixed;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--white);
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pcard-cursor.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.pcard-tag-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 8px 2px 0;
}

.pcard-name {
  font-size: 9px;
  letter-spacing: 0.15em;
}

.pcard-year {
  font-size: 9px;
  color: #444;
}

.pcard-stripe {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--red);
}

.pcard-dot {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 8px;
  height: 8px;
  z-index: 50;
}

.pcard-dot img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
}

.pcard-dot .red_dot       { opacity: 1; }
.pcard-dot .red_dot_hover { opacity: 0; }
.pcard:hover .pcard-dot .red_dot       { opacity: 0; }
.pcard:hover .pcard-dot .red_dot_hover { opacity: 1; }


/* ── 13. Project Section — Personal & Freelance Cards ── */

/* ─ Grid: 2×2 ─ */
.pgrid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  position: relative;
  z-index: 1;
}

/* ─ Card shell — scroll animation states ─ */
.pcard2 {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(50px);                          /* rise from below */
  transition: transform 0.75s cubic-bezier(0.25, 1, 0.5, 1),
              opacity   0.75s ease;
}

.pcard2.p2-visible {
  opacity: 1;
  transform: translateY(0);
}

.pcard2.p2-visible:hover {
  transform: translateY(-10px);
}

.pcard2.p2-past {
  opacity: 0;
  transform: translateY(-50px);                         /* exit upward */
}

/* ─ Inner wrapper (contains image + all overlays) ─ */
.pcard2-inner {
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: 8px;
  overflow: hidden;
  background: #111;
}

.pcard2-inner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(55%);
  transition: filter  0.5s ease,
              transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.pcard2:hover .pcard2-inner > img {
  transform: scale(1.04);
  filter: grayscale(0%);
}

/* ─ Bottom text overlay (always partially visible) ─ */
.pcard2-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 72px 22px 22px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.55) 55%,
    transparent         100%
  );
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: padding 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.pcard2:hover .pcard2-info {
  padding-bottom: 30px;
}

.pcard2-type {
  font-family: var(--font);
  font-size: 8px;
  letter-spacing: 0.28em;
  color: var(--red);
  text-transform: uppercase;
  opacity: 0.9;
}

.pcard2-title {
  font-family: var(--font);
  font-size: 14px;
  letter-spacing: 0.1em;
  font-weight: 400;
  color: var(--white);
  margin: 0;
  transform: translateY(5px);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.pcard2:hover .pcard2-title {
  transform: translateY(0);
}

.pcard2-year {
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #555;
}

/* ─ Red bottom stripe ─ */
.pcard2-stripe {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.pcard2:hover .pcard2-stripe {
  transform: scaleX(1);
}

/* ─ Rubi dot (reuses .pcard-dot styles) — pcard2 hover overrides ─ */
.pcard2:hover .pcard-dot .red_dot       { opacity: 0; }
.pcard2:hover .pcard-dot .red_dot_hover { opacity: 1; }

/* ─ Cursor bubble for personal grid ─ */
.pcard2-cursor {
  position: fixed;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--white);
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.pcard2-cursor.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}