/* ===================================================================
   NAMRATA SHARMA — CV PROFILE
   File: profile.css  (Profile / Ocean Page)
   Theme: Deep Ocean — Teal, Aqua & Gold
   =================================================================== */

:root {
  --deep:       #031820;
  --mid:        #053445;
  --surf:       #0c4f5c;
  --aqua:       #3fd9c7;
  --gold:       #d4af37;
  --gold-light: #f4e3ab;
  --gold-deep:  #8a6a1f;
  --ivory:      #f2ead9;
  --ink:        #04141c;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--ivory);
  font-family: 'Poppins', sans-serif; font-weight: 300;
  background: var(--deep);
  overflow-x: hidden;
}

/* =================== OCEAN BACKGROUND =================== */
.ocean { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

/* Video background — desktop optimized */
.ocean-video {
  position: absolute;
  /* Anchor to top-centre so fish school is always in frame */
  top: 0; left: 50%;
  transform: translateX(-50%);
  min-width: 100%; min-height: 100%;
  width: auto; height: auto;
  object-fit: cover;
  object-position: center 20%;   /* pull view up so fish are central */
  opacity: .9;
  pointer-events: none;
  /* Slow breathe — gives living-ocean feel */
  animation: oceanBreathe 20s ease-in-out infinite;
}
@keyframes oceanBreathe {
  0%,100% { transform: translateX(-50%) scale(1);    filter: brightness(1); }
  50%      { transform: translateX(-50%) scale(1.04); filter: brightness(1.06); }
}

.caustic {
  position: absolute; inset: -10%; opacity: .12; mix-blend-mode: screen; pointer-events: none;
  background: repeating-linear-gradient(115deg, transparent 0 60px, rgba(63,217,199,.4) 62px 64px, transparent 66px 140px);
  animation: causticDrift 26s linear infinite;
}
.caustic-b {
  animation-duration: 38s; animation-direction: reverse; opacity: .08;
  background: repeating-linear-gradient(70deg, transparent 0 80px, rgba(212,175,55,.25) 82px 84px, transparent 86px 170px);
}
@keyframes causticDrift {
  0%   { transform: translate(0,0) rotate(0deg); }
  100% { transform: translate(-6%,4%) rotate(2deg); }
}
.surface-glow {
  position: absolute; top: -20%; left: 0; right: 0; height: 60%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.08), transparent 65%);
  pointer-events: none;
}
.ocean-scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  /* Stronger vignette on sides for desktop so card stays readable */
  background:
    linear-gradient(90deg,
      rgba(2,14,18,.55) 0%,
      rgba(2,14,18,.1)  18%,
      rgba(2,14,18,.1)  82%,
      rgba(2,14,18,.55) 100%),
    linear-gradient(180deg,
      rgba(2,14,18,.18) 0%,
      rgba(2,14,18,.2)  55%,
      rgba(1,9,12,.6)   100%);
}



/* ---- bubbles / ripples ---- */
.bubbles, .ripples { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.bubble {
  position: absolute; bottom: -20px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), rgba(180,230,225,.08));
  animation: rise linear forwards;
}
@keyframes rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: .8; }
  100% { transform: translateY(-100vh) translateX(var(--bx,10px)); opacity: 0; }
}
.ripple {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border: 1px solid rgba(212,175,55,.55); border-radius: 50%;
  animation: rippleOut 1.1s ease-out forwards;
}
@keyframes rippleOut {
  0%   { transform: scale(.3); opacity: .9; }
  100% { transform: scale(9); opacity: 0; }
}

/* =================== CONTENT =================== */
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--ink); padding: .6rem 1rem; z-index: 50;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.profile-stage {
  position: relative; z-index: 5;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center; gap: clamp(2rem,5vw,5rem);
  flex-wrap: wrap;
  padding: 9vh 6vw 12vh;
}

/* ---- Desktop: side-by-side, more breathing room ---- */
@media (min-width: 900px) {
  .profile-stage {
    flex-wrap: nowrap;
    padding: 5vh 8vw 10vh;
    gap: clamp(3rem, 6vw, 7rem);
    justify-content: center;
  }
  .porthole {
    width: min(38vw, 360px);
  }
  .id-card {
    max-width: 580px;
    padding: 3rem 3.2rem;
  }
}

/* ---- porthole ---- */
.porthole {
  position: relative; width: min(70vw,300px); aspect-ratio: 1/1; border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #f4e3ab, #d4af37 42%, #7c5e1c 78%, #4a3811 100%);
  box-shadow:
    0 0 0 4px rgba(0,0,0,.35) inset,
    0 25px 60px rgba(0,0,0,.55),
    0 0 40px rgba(212,175,55,.25);
  padding: 14px;
  animation: floatSlow 7s ease-in-out infinite;
}
@keyframes floatSlow { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }

.porthole-rivets {
  position: absolute; inset: 6px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(0,0,0,.25) 0deg 2deg, transparent 2deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 92%, black 93%, black 100%);
          mask: radial-gradient(circle, transparent 92%, black 93%, black 100%);
  pointer-events: none;
}
.porthole-glass {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 6px var(--ink) inset, 0 0 24px rgba(0,0,0,.6) inset;
}
.porthole-glass img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Monogram portrait */
.monogram-portrait {
  width: 100%; height: 100%; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.monogram-bg {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(ellipse at 40% 30%, #1a5060, #0d3840, #031820);
}
.monogram-letters {
  position: relative; z-index: 2;
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem; font-weight: 700;
  background: linear-gradient(135deg, var(--gold-deep), var(--gold), var(--gold-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 12px rgba(212,175,55,.5));
  letter-spacing: .1em;
}
.monogram-ring {
  position: absolute; inset: 10px; border-radius: 50%;
  border: 1px solid rgba(212,175,55,.3);
  pointer-events: none;
}

.glass-shine {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.28) 0%, transparent 24%, transparent 70%, rgba(255,255,255,.12) 100%);
  pointer-events: none;
}

/* ---- id card ---- */
.id-card {
  max-width: 520px;
  background: linear-gradient(160deg, rgba(6,30,36,.72), rgba(3,18,22,.62));
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 8px;
  padding: clamp(1.6rem,3vw,2.6rem);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
}
.id-card .eyebrow {
  margin: 0 0 .4rem; font-size: .72rem; letter-spacing: .35em; text-transform: uppercase; color: var(--gold-light);
  font-family: 'Poppins', sans-serif; font-weight: 500;
}
.id-card h1 {
  margin: 0 0 .5rem; font-family: 'Playfair Display', serif; font-weight: 700;
  font-size: clamp(2.1rem,4.2vw,3rem); color: var(--ivory); line-height: 1.05;
}
.id-card .role { margin: 0 0 1.1rem; font-size: .95rem; color: var(--aqua); letter-spacing: .02em; font-weight: 400; }
.id-card .bio  { margin: 0 0 1.6rem; font-size: 1rem; line-height: 1.75; color: #d9e6e4; font-weight: 300; }

.meta-row { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-bottom: 1.8rem; padding-top: 1.2rem; border-top: 1px solid rgba(212,175,55,.25); }
.meta { display: flex; flex-direction: column; }
.meta-num { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--gold-light); line-height: 1; }
.meta-label { font-size: .72rem; color: #9db8b4; margin-top: .3rem; max-width: 9rem; }

.cta-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.cta {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-family: 'Poppins', sans-serif; font-size: .82rem; font-weight: 500; letter-spacing: .03em;
  padding: .75rem 1.3rem; border-radius: 4px; transition: all .3s ease;
}
.cta-primary { background: var(--gold); color: var(--ink); }
.cta-primary:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(212,175,55,.35); }
.cta-ghost { color: var(--gold-light); border: 1px solid rgba(212,175,55,.5); }
.cta-ghost:hover { background: rgba(212,175,55,.12); border-color: var(--gold-light); }

/* =================== DOCK NAV =================== */
.dock-nav {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 10;
  display: flex; gap: .3rem;
  background: rgba(3,20,25,.65);
  border: 1px solid rgba(212,175,55,.3);
  border-radius: 40px;
  padding: .5rem;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 15px 40px rgba(0,0,0,.45);
}
.dock-btn {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  text-decoration: none; color: #bcd6d2; font-family: 'Poppins', sans-serif;
  font-size: .6rem; letter-spacing: .03em; padding: .55rem .9rem; border-radius: 30px;
  transition: background .3s, color .3s;
}
.dock-btn i { font-size: 1rem; }
.dock-btn:hover { background: rgba(212,175,55,.14); color: var(--gold-light); }
.dock-btn.is-active { background: var(--gold); color: var(--ink); }

@media (max-width: 640px) {
  .dock-btn span { display: none; }
  .profile-stage { padding-bottom: 16vh; }
  .meta-row { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .creature-track, .fish-img, .caustic, .porthole, .bubble { animation-duration: 0s !important; animation: none !important; }
}