/* ════════════════════════════════════════════════════
   DESIGN TOKENS
   ════════════════════════════════════════════════════ */
:root {
  --blue:          #5d8ec7;
  --blue-light:    #7dbfe6;
  --text:          #1a1a2e;
  --muted:         #6b7280;
  --glass:         rgba(255, 255, 255, 0.10);
  --glass-border:  rgba(255, 255, 255, 0.50);
  --section-light: rgba(234, 243, 253, 0.79);
  --section-white: rgba(244, 247, 251, 0.8);
  --section-dark:  rgba(22, 40, 65, 0.98);
  --font-sans:     'Poppins', sans-serif;
  --font-serif:    'Playfair Display', serif;
  --ease:          cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ════════════════════════════════════════════════════
   RESET & BASE
   ════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: #0a0f1e;   /* deep ocean — visible while p5 loads */
  overflow-x: hidden;
}

a { text-decoration: none; }
img { display: block; max-width: 100%; }

/* ════════════════════════════════════════════════════
   CANVAS  (fixed fish background)
   ════════════════════════════════════════════════════ */
#canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
}
#canvas canvas { display: block; }

/* ════════════════════════════════════════════════════
   NAVIGATION
   ════════════════════════════════════════════════════ */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.1rem 2rem;
  transition: background 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
#nav.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 16px rgba(0, 0, 0, 0.08);
}

.nav-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  font-style: italic;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.03em;
  transition: color 0.4s;
}
#nav.scrolled .nav-logo { color: var(--text); }

.nav-links a {
  margin-left: 2rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.04em;
  transition: color 0.3s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: var(--blue-light);
  transition: width 0.3s;
}
.nav-links a:hover::after { width: 100%; }
.nav-links a:hover { color: #fff; }
#nav.scrolled .nav-links a { color: var(--muted); }
#nav.scrolled .nav-links a:hover { color: var(--blue); }

/* ════════════════════════════════════════════════════
   PAGE WRAPPER  (scrollable, sits above canvas)
   ════════════════════════════════════════════════════ */
#page { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════
   SECTION 1 · HERO
   ════════════════════════════════════════════════════ */
#hero {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 3.5rem;
  pointer-events: none;
  overflow: hidden;               /* clips the bubble as it expands to fill the hero */
}

/* Absolute inside hero — bubble scrolls with the page and never
   covers the works / about / skills sections below */
.bubble-anchor {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

.hero-cue {
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  animation: cueIn 2s ease 1.2s both;
}
.scroll-line {
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7), transparent);
  margin: 0.7rem auto 0;
  animation: linePulse 2s ease-in-out infinite;
}

@keyframes cueIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes linePulse {
  0%, 100% { transform: translateY(0);  opacity: 0.8; }
  50%       { transform: translateY(10px); opacity: 0.3; }
}

.a11y-btn {
  pointer-events: auto;           /* re-enable just for this button */
  position: absolute;
  bottom: 1.6rem;
  right: 2rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.85);
  padding: 0.45rem 1.3rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.3s;
}
.a11y-btn:hover { background: rgba(255, 255, 255, 0.27); }

/* ── Scribbled click hint — top-right corner ──────── */
.fish-hint {
  position: absolute;
  top: 8rem;          /* below the fixed nav bar */
  right: 6rem;
  left: auto;
  transform: rotate(5deg);
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* text sits right-aligned */
  gap: 0.3rem;
  pointer-events: none;
  animation: hintIn 0.7s ease 0.5s both, hintWobble 4s ease-in-out 1.8s infinite;
  z-index: 2;
}

.scribble-text {
  font-family: 'Caveat', cursive;
  font-size: clamp(1.6rem, 3.8vw, 2.2rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
  white-space: nowrap;
  text-align: right;
}

/* SVG paths draw themselves on */
.scribble-path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawPath 0.85s ease-out 0.8s forwards;
}
.scribble-path--delay  { animation-delay: 1.3s; }
.scribble-path--delay2 {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation-delay: 1.7s;
  animation-duration: 0.4s;
}

@keyframes drawPath { to { stroke-dashoffset: 0; } }

/* No translateX here — element is positioned with right: not centred */
@keyframes hintIn {
  from { opacity: 0; transform: rotate(5deg) scale(0.8); }
  to   { opacity: 1; transform: rotate(5deg) scale(1); }
}
@keyframes hintWobble {
  0%, 100% { transform: rotate(5deg); }
  25%       { transform: rotate(3deg)   translateY(-4px); }
  75%       { transform: rotate(6.5deg) translateY(3px); }
}

@media (max-width: 600px) {
  .fish-hint { top: 5rem; right: 1.2rem; }
}
@media (max-width: 400px) {
  .scribble-text { font-size: 1.2rem; white-space: normal; text-align: right; max-width: 160px; }
}

/* ── Bubble pop keyframe — snappy pop with exaggerated overshoot ── */
@keyframes bubbleRise {
  0%   { opacity: 0;   transform: scale(0.04); }
  38%  { opacity: 1;   transform: scale(1.22); }   /* big overshoot — the POP  */
  58%  { opacity: 1;   transform: scale(0.91); }   /* compress back             */
  78%  { opacity: 1;   transform: scale(1.07); }   /* small rebound             */
  100% { opacity: 1;   transform: scale(1.00); }
}

.glass-bubble {
  pointer-events: auto;           /* re-enable so CTA buttons are clickable */
  will-change: transform;         /* GPU layer for smooth scroll-driven scaling */
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);

  /* True circle — like a soap bubble */
  border-radius: 50%;
  width:  min(80vw, 560px);
  height: min(80vw, 560px);

  box-shadow:
    0 8px 60px rgba(31, 38, 135, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(255,255,255,0.08);

  /* Flex-center contents with uniform gap between items */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;

  /* More horizontal padding keeps text away from the curved circle edges */
  padding: 10% 12%;
  text-align: center;
  overflow: hidden;

  /* start invisible — IO triggers the animation */
  opacity: 0;
  transform: scale(0.05) translateY(90px);
  transform-origin: center center;
  will-change: transform, opacity;
}
.glass-bubble.visible {
  animation: bubbleRise 0.68s cubic-bezier(0.34, 0.9, 0.64, 1) forwards;
}

.glass-bubble h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  font-weight: 500;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  margin: 0;
  line-height: 1.2;
}
.glass-bubble > p {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(0.78rem, 2vw, 0.92rem);
  line-height: 1.7;
  margin: 0;
  max-width: 34ch;   /* keeps line length comfortable within the circle */
}

/* CTA row ------------------------------------------------ */
.cta-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  margin-top: 0.8rem;
}

/* Ghost pill buttons — visible as buttons, not circles */
.cta-circle {
  display: inline-block;
  padding: 0.6rem 2rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;

  /* start hidden; JS adds .visible */
  opacity: 0;
  transition: opacity 0.5s var(--ease) 0.35s,
              background 0.25s ease,
              border-color 0.25s ease,
              transform 0.25s ease;
}
.cta-circle--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.32);
  transition-delay: 0.85s;
}
.cta-circle.visible { opacity: 1; transition-delay: 0.72s; }
.cta-circle:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
}

/* ════════════════════════════════════════════════════
   SECTION 3 · PROJECTS
   ════════════════════════════════════════════════════ */
#projects {
  background: var(--section-light);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6rem 2rem;
}

.section-wrap {
  max-width: 1080px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.section-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--text);
  margin-bottom: 0.6rem;
}
.section-header p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
  max-width: 580px;
  margin: 0 auto;
}

/* Category groups ----------------------------------------- */
.projects-grid {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.proj-category-label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #404650;
  text-align: center;
  margin-bottom: 1.8rem;
}

.proj-category-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem 5rem;
}

.project-card {
  flex: 0 0 calc(33.33% - 1.5rem);
  max-width: 240px;
  min-width: 160px;
}
@media (max-width: 820px) {
  .project-card { flex: 0 0 calc(50% - 1.2rem); }
}
@media (max-width: 500px) {
  .project-card { flex: 0 0 100%; max-width: 260px; }
}

/* Card layout (flex sizing set above in grid block) ------ */
.project-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
}
.project-card:hover .project-img {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 16px 36px rgba(93, 142, 199, 0.28);
}

.project-img {
  width: 37vh;
  height: 37vh;
  padding: 12%;
  border-radius: 50%;
 /* background: linear-gradient(135deg,
    rgba(93, 142, 199, 0.18) 0%,
    rgba(125, 191, 230, 0.32) 100%);
  border: 2.5px solid rgba(93, 142, 199, 0.22);
  display: flex;*/
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.img-label {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--blue);
}
.project-img img { width: 100%; height: 100%; object-fit: contain; }

/* Highlight treatment — ring + curved label. Reusable via .project-img-wrap
   on any card; only the SVG's id/href pair and label text change per card. */
.project-img-wrap {
  position: relative;
  width: 37vh;
  height: 37vh;
  margin-bottom: 1.2rem; /* takes over the spacing .project-img normally sets */
}
.project-img-wrap .project-img {
  /* overrides the shared .project-img's fixed 168px — scoped to this
     wrapper only, so cards without .project-img-wrap are untouched */
  width: 100%;
  height: 100%;
  margin-bottom: 0;
  /*box-shadow: 0 10px 26px rgba(93, 142, 199, 0.22); /* stronger resting shadow than the other cards */
}
/*.project-img-wrap::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(93, 142, 199, 0.4); /* --blue at 40% */
 /* pointer-events: none;
  transition: border-color 0.35s var(--ease);
}
.project-card:hover .project-img-wrap::before {
  border-color: var(--blue); /* full accent on hover */
/*}*/

/* Curved label — same 240:168 (10:7) ratio as before, now scaling off
   37vh instead of a fixed 168px, so it stays proportional to the circle
   at any viewport height. */

.project-highlight-label {
  position: absolute;
  width: calc(37vh * 10 / 8);
  height: calc(37vh * 10 / 8);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.project-highlight-label text {
  fill: var(--muted);
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 300;
  text-transform: uppercase;
  font-family: var(--font-sans);
}
@media (max-width: 640px) {
  .project-highlight-label { display: none; } /* ring stays — no override needed */
}

.project-card h3 {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.project-card p {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.55;
  /*max-width: 210px;*/
}

/* ════════════════════════════════════════════════════
   SECTION 4 · ABOUT
   ════════════════════════════════════════════════════ */
#about {
  background: var(--section-white);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6rem 2rem;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 5rem;
  align-items: center;
}
@media (max-width: 780px) {
  .two-col { grid-template-columns: 1fr; gap: 2.5rem; }
}

.about-img-wrap { display: flex; justify-content: center; }
.about-img-circle {
  width: clamp(200px,30vw,320px);
  height: clamp(200px,30vw,320px);
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #c9d6e3 0%, #ddeef8 50%, #e8f4f8 100%);
  border: 3px solid rgba(125, 191, 230, 0.5);
  box-shadow: 0 8px 32px rgba(93, 142, 199, 0.18);
}

.about-img-circle img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.about-text h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--text);
  margin-bottom: 1rem;
}
.about-text p {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.75;
  margin-bottom: 0.85rem;
}
.about-text p strong { color: var(--text); }

.pill-btn {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.5rem 1.5rem;
  border-radius: 999px;
  border: 2px solid var(--blue);
  color: var(--blue);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 0.28s, color 0.28s;
}
.pill-btn:hover { background: var(--blue); color: #fff; }

/* ════════════════════════════════════════════════════
   SECTION 5 · SKILLS
   ════════════════════════════════════════════════════ */
#skills {
  background: var(--section-light);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 6rem 2rem;
  position: relative;
  z-index: 2;             /* sits above contact so ::after shows over it */
  overflow: visible;      /* lets ::after extend below */
}

/* White scallops that dip down into the contact section */
#skills::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: 0;
  width: 100%;
  height: 68px;
  background: var(--section-light);
  clip-path: url(#scallop-clip);
  z-index: 3;
}

.skills-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem 4rem;
}
@media (max-width: 600px) {
  .skills-grid { grid-template-columns: 1fr; }
}

.skill-bar {
  display: grid;
  grid-template-columns: 110px 1fr 40px;
  align-items: center;
  gap: 0.8rem;
}
.skill-label { font-size: 0.875rem; font-weight: 500; color: var(--text); }
.skill-track {
  height: 7px;
  background: rgba(93, 142, 199, 0.14);
  border-radius: 999px;
  overflow: hidden;
}
.skill-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, var(--blue), var(--blue-light));
  border-radius: 999px;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.skill-val { font-size: 0.78rem; color: var(--muted); text-align: right; }

/* ════════════════════════════════════════════════════
   CONTACT · glass section, sits below the white scallops
   ════════════════════════════════════════════════════ */
#contact {
  position: relative;
  z-index: 1;
  padding-top: 7rem;   /* clear the white scallops that dip in from skills */
}

/* ════════════════════════════════════════════════════
   SECTION 6 · CONTACT
   ════════════════════════════════════════════════════ */
#contact {
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 60px rgba(31, 38, 135, 0.18);
  padding: 6rem 2rem;
  color: #fff;
  /* position & overflow already set above for ::before */
}
#contact .center { text-align: center; }
#contact h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 1rem;
}
#contact p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
}
#contact a { color: #1a2c4e; font-weight: 700; }
#contact a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════ */
footer {
  background: rgba(10, 15, 30, 0.97);
  color: rgba(255, 255, 255, 0.38);
  text-align: center;
  padding: 1.6rem;
  font-size: 0.78rem;
}
footer strong { color: rgba(255, 255, 255, 0.55); }

/* ════════════════════════════════════════════════════
   SCROLL-TRIGGERED ANIMATION CLASSES
   Initial (hidden) → .visible (shown) via JS observer
   ════════════════════════════════════════════════════ */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.38s var(--ease), transform 0.38s var(--ease);
}
.fade-up.visible {
  opacity: 1;
  transform: none;
}

.fade-left {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.fade-left.visible {
  opacity: 1;
  transform: none;
}

/* ════════════════════════════════════════════════════
   RESPONSIVE TWEAKS
   ════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .cta-circle { padding: 0.5rem 1.4rem; font-size: 0.74rem; }
  .about-img-circle { width: 200px; height: 200px; }
  .nav-links a:not(:last-child) { margin-left: 1.2rem; }

  /* Bubble: circle doesn't fit phone portrait — switch to tall capsule */
  .glass-bubble {
    width: min(90vw, 400px);
    height: auto;             /* grow with content */
    border-radius: 2.5rem;    /* rounded rectangle / bubble feel */
    padding: 2.2rem 1.6rem;
  }

  .glass-bubble {
    gap: 0.9rem;
  }

  .glass-bubble h1 {
    font-size: clamp(1.3rem, 6vw, 1.7rem);
  }

  .glass-bubble > p {
    font-size: clamp(0.72rem, 3.4vw, 0.85rem);
  }
}