/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
  --font-display: 'Bagel Fat One', cursive;
  --font-sans: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --sky: #87cefa;
  --sky-deep: #4fa9dd;
  --beige: #f5f5dc;
  --beige-deep: #e8e4c4;
  --cream: #fffdf5;

  --navy: #000000;
  --navy-soft: #000000;
  --border: #bfe0f7;
  --cloud-ink: #14171c;

  --shadow: 0 10px 30px rgba(28, 37, 65, 0.15);
  --shadow-sm: 0 6px 16px rgba(28, 37, 65, 0.12);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;

  color-scheme: light;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--beige);
  font-family: var(--font-sans);
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

a {
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
}

p {
  margin: 0;
}

/* ==========================================================================
   Stage / home scene (fixed, non-scrolling bulletin board)
   ========================================================================== */

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(120deg, var(--sky), var(--beige), var(--beige-deep), var(--beige));
  background-size: 400% 400%;
  animation: shift-wash 22s ease-in-out infinite;
}

@keyframes shift-wash {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ==========================================================================
   Melting blob background
   ========================================================================== */

.blob-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  filter: url(#goo) blur(2px);
}

.blob {
  position: absolute;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  opacity: 0.4;
  animation: melt-drift 20s ease-in-out infinite, melt-morph 13s ease-in-out infinite;
}

.blob-1 {
  width: 32vmax;
  height: 32vmax;
  top: -12%;
  left: -10%;
  background: var(--sky);
}

.blob-2 {
  width: 24vmax;
  height: 24vmax;
  top: 45%;
  right: -10%;
  background: var(--beige-deep);
  animation-delay: -4s, -2s;
}

.blob-3 {
  width: 20vmax;
  height: 20vmax;
  bottom: -12%;
  left: 20%;
  background: var(--sky-deep);
  animation-delay: -9s, -5s;
}

.blob-4 {
  width: 16vmax;
  height: 16vmax;
  bottom: 12%;
  right: 22%;
  background: var(--beige);
  animation-delay: -13s, -7s;
}

@keyframes melt-drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(6%, 8%) scale(1.1);
  }
  66% {
    transform: translate(-5%, 4%) scale(0.9);
  }
}

@keyframes melt-morph {
  0%,
  100% {
    border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  }
  25% {
    border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
  }
  50% {
    border-radius: 35% 65% 55% 45% / 65% 35% 65% 35%;
  }
  75% {
    border-radius: 55% 45% 65% 35% / 30% 65% 35% 70%;
  }
}

.scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s ease, filter 0.5s ease;
}

.scene.receding {
  transform: scale(1.15);
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
}

.board {
  width: min(1300px, 96vw);
  height: min(780px, 92vh);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding: clamp(1rem, 3vw, 2rem);
  overflow: visible;
}

.intro-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ==========================================================================
   Intro text (plain typography, no card/bubble chrome)
   ========================================================================== */

.intro-title {
  display: inline-block;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  color: var(--navy);
  margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
  animation: gentle-float-text 6s ease-in-out infinite;
}

@keyframes gentle-float-text {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-title {
    animation: none;
  }
}

.intro-text {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.6;
  font-weight: 600;
  color: var(--navy-soft);
  max-width: 46ch;
}

.intro-title.typing::after,
.intro-text.typing::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 1em;
  margin-left: 3px;
  background: currentColor;
  vertical-align: text-bottom;
  animation: caret-blink 0.8s steps(1) infinite;
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

/* ==========================================================================
   Get in touch sign (not a button, the photo below is the only trigger)
   ========================================================================== */

.get-in-touch-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--navy);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.get-in-touch-sign.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.sign-text {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  white-space: nowrap;
}

.sign-arrow {
  width: clamp(80px, 8.5vw, 110px);
  height: auto;
  margin-top: 0.25rem;
  color: var(--navy);
  animation: arrow-nudge 1.8s ease-in-out infinite;
}

@keyframes arrow-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(6px);
  }
}

.photo-row {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.5vw, 1rem);
}

@media (prefers-reduced-motion: reduce) {
  .sign-arrow {
    animation: none;
  }
  .get-in-touch-sign {
    transition: none;
  }
}

/* ==========================================================================
   Photo + thought bubble cluster
   ========================================================================== */

.photo-cluster {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.thought-bubbles {
  position: relative;
  width: 100%;
  height: clamp(120px, 16vh, 170px);
  margin-bottom: 2.75rem;
  transform: translateX(8%);
}

.thought-bubble {
  position: absolute;
  background-color: #ffffff;
  border: 4px solid var(--cloud-ink);
  border-radius: 200px;
  box-shadow: 4px 4px 0 var(--cloud-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.thought-bubble:hover {
  transform: scale(1.06) rotate(var(--tilt, 0deg));
  box-shadow: 6px 6px 0 var(--cloud-ink);
}

.tb-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  color: var(--navy);
  font-size: clamp(0.8rem, 1.2vw, 1.05rem);
}

.tb-philosophy {
  --tilt: -4deg;
  width: clamp(150px, 17vw, 200px);
  height: clamp(90px, 10.2vw, 120px);
  top: -8%;
  left: 2%;
  z-index: 2;
  transform: rotate(-4deg);
}

.tb-projects {
  --tilt: 3deg;
  width: clamp(160px, 18.5vw, 220px);
  height: clamp(96px, 11.2vw, 132px);
  top: -2%;
  right: -2%;
  z-index: 3;
  transform: rotate(3deg);
}

.tb-experience {
  --tilt: -2deg;
  width: clamp(140px, 15.5vw, 184px);
  height: clamp(84px, 9.4vw, 110px);
  bottom: 16%;
  left: 33%;
  z-index: 1;
  transform: rotate(-2deg);
}

/* Small trailing dots, positioned per bubble so they point back
   toward the head/photo below. */

.thought-bubble .dot {
  position: absolute;
  background-color: #ffffff;
  border: 4px solid var(--cloud-ink);
  border-radius: 50%;
  width: 25px;
  height: 25px;
}

.thought-bubble .dot-smaller {
  width: 15px;
  height: 15px;
}

/* Philosophy sits up-left of the head: dots trail down and to the right. */
.tb-philosophy .dot {
  bottom: -32px;
  right: 46px;
}
.tb-philosophy .dot-smaller {
  bottom: -54px;
  right: 26px;
}

/* Projects sits up-right of the head: dots trail down and to the left. */
.tb-projects .dot {
  bottom: -32px;
  left: 46px;
}
.tb-projects .dot-smaller {
  bottom: -54px;
  left: 26px;
}

/* Experience sits directly above the head: dots trail straight down. */
.tb-experience .dot {
  bottom: -32px;
  left: 50%;
  margin-left: -12px;
}
.tb-experience .dot-smaller {
  bottom: -54px;
  left: 50%;
  margin-left: -20px;
}

.photo-frame {
  width: clamp(230px, 27vw, 340px);
  height: clamp(340px, 56vh, 520px);
  transition: transform 0.5s ease;
  animation: gentle-float 6s ease-in-out infinite;
}

.photo-frame:hover {
  transform: translateY(-6px) scale(1.02);
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 12px 18px rgba(28, 37, 65, 0.28));
}

@keyframes gentle-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* ==========================================================================
   Full-screen panels
   ========================================================================== */

.panels {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--cream);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--sx, 0.001), var(--sy, 0.001));
  transform-origin: center center;
  transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.45s ease;
}

.panel.active {
  visibility: visible;
}

.panel.open {
  transform: translate(0, 0) scale(1, 1);
  opacity: 1;
  pointer-events: auto;
}

.panel-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 4rem) clamp(1.25rem, 5vw, 2rem) 4rem;
}

.panel--wide .panel-inner {
  max-width: none;
  width: 100%;
  padding-left: clamp(1.25rem, 4vw, 3.5rem);
  padding-right: clamp(1.25rem, 4vw, 3.5rem);
}

.panel-close {
  position: fixed;
  top: clamp(1rem, 3vw, 1.75rem);
  right: clamp(1rem, 3vw, 1.75rem);
  z-index: 60;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cream);
  border: 3px solid var(--sky-deep);
  box-shadow: var(--shadow-sm);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.panel-close:hover {
  transform: rotate(90deg);
}

.panel-title {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: 0.5rem;
}

.panel-subtext {
  color: var(--navy-soft);
  font-weight: 600;
  margin-bottom: var(--space-4);
  max-width: 560px;
}

.panel-body--narrow {
  max-width: 680px;
}

.panel-body p {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}

.panel-quote {
  margin: var(--space-4) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--beige);
  border: 3px solid var(--sky-deep);
  border-radius: 18px;
  font-style: italic;
  font-weight: 600;
  color: var(--navy);
}

.panel-quote cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  font-style: normal;
  color: var(--navy-soft);
}

/* Philosophy panel: spread the title, paragraphs, and quote evenly
   down the full page height instead of clumping at the top. */

#panel-philosophy .panel-inner {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

#panel-philosophy .panel-body {
  display: contents;
}

#panel-philosophy .panel-body p,
#panel-philosophy .panel-quote {
  margin: 0;
}

#panel-philosophy .panel-body p {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
}

/* ==========================================================================
   Project cards (inside Projects panel)
   ========================================================================== */

.project-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.project-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: var(--beige);
  border: 3px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.5s ease;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-radius: 30px 10px 30px 10px;
}

.project-image {
  flex: 0 0 clamp(340px, 42%, 620px);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  overflow: hidden;
  padding: var(--space-3);
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-copy {
  flex: 1;
  min-width: 0;
  padding: var(--space-3);
}

.project-title {
  font-size: 1.3rem;
  margin-bottom: 0.25rem;
}

.project-tagline {
  font-style: italic;
  color: var(--sky-deep);
  font-weight: 600;
  margin-bottom: var(--space-2);
  font-size: 0.95rem;
}

.project-description {
  color: var(--navy-soft);
  margin-bottom: var(--space-2);
  font-size: 0.92rem;
  line-height: 1.6;
}

.project-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--navy-soft);
  margin-bottom: var(--space-2);
}

.project-link {
  font-weight: 700;
  color: var(--sky-deep);
}

/* ==========================================================================
   Experience cards (inside Experience panel)
   ========================================================================== */

.experience-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.experience-card {
  background: var(--beige);
  border: 3px solid var(--border);
  border-radius: 22px;
  padding: var(--space-3);
  box-shadow: var(--shadow-sm);
}

.experience-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.experience-role {
  font-size: 1.25rem;
}

.experience-dates {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy-soft);
  white-space: nowrap;
}

.experience-org {
  font-style: italic;
  font-weight: 600;
  color: var(--sky-deep);
  margin-bottom: var(--space-2);
  font-size: 0.95rem;
}

.experience-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--navy-soft);
  font-size: 0.95rem;
}

.experience-bullets li {
  padding-left: 1.1rem;
  position: relative;
}

.experience-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sky-deep);
}

.experience-card--compact {
  padding: var(--space-2) var(--space-3);
}

.experience-card--compact .experience-org {
  margin-bottom: 0.25rem;
}

.experience-summary {
  color: var(--navy-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ==========================================================================
   Contact panel
   ========================================================================== */

.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: 1.15rem;
  font-weight: 600;
}

.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 3px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.contact-list a:hover {
  color: var(--sky-deep);
  border-color: var(--sky);
}

/* Contact panel: the destination of "Get in touch" should read as the
   main event on the page, not a modest link list. */

.panel--contact .panel-inner {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panel--contact .panel-title {
  font-size: clamp(3.5rem, 10vw, 7rem);
}

.panel--contact .panel-subtext {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-bottom: var(--space-4);
}

.panel--contact .contact-list {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  gap: var(--space-3);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .stage,
  .blob,
  .scene,
  .panel,
  .sign-arrow,
  .thought-bubble,
  .photo-frame,
  .project-card,
  .panel-close {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Responsive (mobile: same interaction, stacked composition, still no scroll on home)
   ========================================================================== */

@media (max-width: 860px) {
  .board {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    height: min(680px, 96vh);
    gap: clamp(0.75rem, 3vh, 1.5rem);
    justify-items: center;
    text-align: center;
  }

  .intro-title {
    order: 2;
  }

  .intro-title,
  .intro-text {
    font-size: clamp(0.85rem, 3vw, 1rem);
  }

  .intro-text {
    order: 2;
    max-width: none;
  }

  .photo-cluster {
    order: 1;
    height: auto;
  }

  .thought-bubbles {
    height: clamp(110px, 18vh, 150px);
    transform: none;
  }

  .photo-frame {
    width: clamp(160px, 42vw, 220px);
    height: clamp(240px, 40vh, 320px);
  }

  .project-card {
    flex-direction: column;
  }

  .project-image {
    flex-basis: auto;
    aspect-ratio: 786 / 661;
  }
}

/* ==========================================================================
   Mobile-only fixes (iPhone SE ~375px through standard mobile ~430px)
   Scoped tighter than the 860px tablet breakpoint above so tablet layout
   is untouched.
   ========================================================================== */

@media (max-width: 480px) {

  /* --- BUG 1: overlapping thought bubbles ---
     Replace the absolutely-positioned, overlapping bubble trio with a
     side-by-side row (mirroring the desktop composition, just resized).
     Philosophy and Projects sit next to each other above the head;
     Experience wraps to its own centered row underneath whenever the
     first two don't leave it comfortable room, so all three still read
     as trailing up from the same head rather than from each other. */

  .thought-bubbles {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: auto;
    row-gap: 1.5rem;
    column-gap: 0.875rem;
    margin-bottom: 0.5rem;
    padding: 0 0.5rem;
  }

  /* The sign shouldn't take up flow space next to the photo (that's what
     was pushing the photo off-center) — pull it out of flow and anchor it
     to the left of the now-centered photo instead, sized down to fit the
     narrower margin at mobile widths. */
  .photo-row {
    position: relative;
  }

  .get-in-touch-sign {
    position: absolute;
    right: 100%;
    top: 50%;
    margin-right: 0.4rem;
    transform: translateY(-50%);
  }

  .get-in-touch-sign.is-visible {
    transform: translateY(-50%);
  }

  .get-in-touch-sign .sign-text {
    font-size: 0.8rem;
  }

  .get-in-touch-sign .sign-arrow {
    width: 50px;
    margin-top: 0.15rem;
  }

  .thought-bubble {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    transform: rotate(var(--tilt, 0deg)) !important;
    width: auto;
    height: auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0.7rem 1.1rem;
  }

  .thought-bubble:hover {
    transform: rotate(var(--tilt, 0deg)) !important;
  }

  .tb-philosophy {
    order: 1;
    z-index: 2;
    margin-top: 0;
  }

  .tb-projects {
    order: 2;
    z-index: 2;
    margin-top: 0.6rem;
  }

  /* Invisible full-width spacer forces a flex-wrap line break right after
     Projects, so Experience always drops to its own centered row below
     Philosophy + Projects instead of possibly squeezing in beside them. */
  .thought-bubbles::after {
    content: '';
    flex-basis: 100%;
    height: 0;
    line-height: 0;
    order: 2;
  }

  .tb-experience {
    order: 3;
    z-index: 1;
    margin-top: 0;
  }

  /* Philosophy sits upper-left of the head: dots trail down-right, same
     logic as desktop, just scaled down for the smaller mobile pill. */
  .tb-philosophy .dot {
    bottom: -24px;
    right: 30px;
    left: auto;
    margin-left: 0;
  }
  .tb-philosophy .dot-smaller {
    bottom: -40px;
    right: 16px;
    left: auto;
    margin-left: 0;
  }

  /* Projects sits upper-right of the head: dots trail down-left. */
  .tb-projects .dot {
    bottom: -24px;
    left: 30px;
    right: auto;
    margin-left: 0;
  }
  .tb-projects .dot-smaller {
    bottom: -40px;
    left: 16px;
    right: auto;
    margin-left: 0;
  }

  /* Experience sits centered, closer to the head: dots trail straight down. */
  .tb-experience .dot {
    bottom: -24px;
    left: 50%;
    right: auto;
    margin-left: -10px;
  }
  .tb-experience .dot-smaller {
    bottom: -40px;
    left: 50%;
    right: auto;
    margin-left: -16px;
  }

  /* --- BUG 2: cramped Philosophy & Interests panel --- */

  #panel-philosophy .panel-inner {
    justify-content: flex-start;
    gap: 1.75rem;
    padding-top: 4rem;
    padding-bottom: 3rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  #panel-philosophy .panel-body p {
    line-height: 1.85;
  }

  #panel-philosophy .panel-quote {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding: 1.5rem 1.25rem;
  }
}