/* vars */
@font-face {
  font-family: 'diavlo';
  src: url('../fonts/Diavlo_BLACK_II_37.OTF') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'diavlo';
  src: url('../fonts/Diavlo_BOLD_II_37.OTF') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'diavlo';
  src: url('../fonts/Diavlo_MEDIUM_II_37.OTF') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'diavlo';
  src: url('../fonts/Diavlo_BOOK_II_37.OTF') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap; }

@font-face {
  font-family: 'diavlo';
  src: url('../fonts/Diavlo_LIGHT_II_37.OTF') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap; }

* {
  padding: 0;
  margin: 0;
  outline: none;
  box-sizing: border-box; }

html {
  scroll-behavior: smooth; }

:root {
  color-scheme: light dark;
  --page-background: #f5f5f7;
  --page-text: #1d1d1f;
  --page-muted: #6e6e73;
  --section-border: rgba(0, 0, 0, 0.08); }

@media (prefers-color-scheme: dark) {
  :root {
    --page-background: #101114;
    --page-text: #f5f5f7;
    --page-muted: #a1a1a6;
    --section-border: rgba(255, 255, 255, 0.1); } }

body {
  font-family: 'Open Sans', sans-serif;

  /*font-family: 'Varela Round', 'IRANSans-web', sans-serif;*/
  font-weight: 300;
  color: #555;
  font-size: 1em;
  line-height: 2;
  background: #0B121F; }

main {
  display: block; }

.story-band {
  --hair: rgba(175, 204, 245, 0.13);
  --accent: #8ecbff;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  position: relative;
  z-index: 2;
  overflow: hidden;
  isolation: isolate;
  background: #0B121F; }

.story-band::before,
.story-band::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none; }

.story-band::before {
  top: -4%;
  right: -12%;
  width: 34%;
  height: 108%;
  background: linear-gradient(150deg, transparent 15%, rgba(10, 32, 66, 0.32) 45%, rgba(11, 36, 73, 0.85) 100%);
  transform: rotate(-9deg); }

.story-band::after {
  bottom: -4%;
  left: -12%;
  width: 22%;
  height: 108%;
  background: linear-gradient(-160deg, transparent 20%, rgba(10, 32, 66, 0.7) 100%);
  transform: rotate(7deg); }

.about-section {
  position: relative;
  padding: clamp(5.85rem, 10.4vw, 9.75rem) 1.5rem clamp(6rem, 10vw, 9rem);
  color: #f4f7fc; }

.about-shell {
  position: relative;
  z-index: 1;
  width: min(62rem, 100%);
  margin: 0 auto; }

.about-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 1.1vw, 0.875rem);
  margin-bottom: clamp(1.7rem, 3.4vw, 2.5rem);
  /* The row is centred, so tightening the gap alone would slide the photo
     right. Shifting the group back by the same amount keeps the photo
     where it was and closes the distance from the heading side only. */
  transform: translateX(-0.69rem); }

/* Wrapper is the positioning context and stays unclipped so the tooltip
   can escape; the inner span carries the circular crop. */
.about-avatar {
  position: relative;
  display: block;
  flex: none;
  width: clamp(3.3rem, 6.05vw, 4.4rem);
  height: clamp(3.3rem, 6.05vw, 4.4rem);
  border-radius: 50%; }

.about-avatar:focus-visible {
  outline: 2px solid #bdd8fc;
  outline-offset: 4px; }

.about-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(198, 221, 250, 0.3);
  box-shadow: 0 0.75rem 1.75rem -0.75rem rgba(0, 0, 0, 0.6);
  transition: transform 420ms cubic-bezier(.22, .8, .32, 1), border-color 420ms ease; }

.about-avatar-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; }

.about-avatar:hover .about-avatar-img,
.about-avatar:focus-visible .about-avatar-img {
  transform: scale(1.04);
  border-color: rgba(198, 221, 250, 0.55); }

/* --- Name tooltip ------------------------------------------------------- */

.avatar-tip {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: 50%;
  z-index: 40;
  width: max-content;
  max-width: min(17.5rem, 72vw);
  padding: 0.95rem 1.15rem;
  border: 0;
  border-radius: 0.8rem;
  /* Low alpha on purpose: the blur is the surface, not the fill.
     Near-neutral tint + saturate ~1 so the navy behind is not amplified. */
  background: rgba(52, 58, 70, 0.34);
  -webkit-backdrop-filter: blur(13px) saturate(105%);
  backdrop-filter: blur(13px) saturate(105%);
  /* Single soft drop only. A tight second shadow hugs the edge and reads
     as a border, which this deliberately has none of. */
  box-shadow: 0 1.4rem 3.25rem -0.75rem rgba(0, 0, 0, 0.38);
  text-align: left;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity 240ms ease, transform 240ms cubic-bezier(.22, .8, .32, 1), visibility 240ms; }

/* Invisible bridge across the gap under the photo. The tooltip is a child
   of .about-avatar, so hovering it (or this bridge) keeps the parent's
   :hover alive and the cursor can travel down without the tip closing.
   It only exists while the tip is shown, since visibility:hidden takes
   the whole subtree out of hit-testing. */
.avatar-tip::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 1rem; }

.about-avatar:hover .avatar-tip,
.about-avatar:focus-visible .avatar-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0); }

.avatar-tip-name {
  display: block;
  margin-bottom: 0.5rem;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.015em; }

.avatar-tip-row {
  display: block;
  color: rgba(226, 234, 246, 0.8);
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: 0; }

.avatar-tip-row + .avatar-tip-row {
  margin-top: 0.5rem; }

.avatar-tip-row b {
  display: block;
  margin-bottom: 0.15rem;
  color: #8ecbff;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em; }

.avatar-tip-row i {
  color: rgba(226, 234, 246, 0.5);
  font-style: normal; }

.avatar-tip-row strong {
  color: #fff;
  font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .avatar-tip,
  .about-avatar-img { transition: none; } }

.about-section h2 {
  margin: 0;
  color: #f4f7fc;
  font-family: 'diavlo', 'Open Sans', sans-serif;
  font-size: clamp(1.7rem, 2.75vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase; }

.about-summary {
  max-width: 62rem;
  margin: 0 auto;
  color: rgba(210, 220, 236, 0.6);
  font-size: clamp(1.15rem, 1.75vw, 1.42rem);
  font-weight: inherit;
  line-height: 1.75;
  letter-spacing: -0.01em;
  text-align: center; }

/* Lead paragraph */
.about-summary p:first-child {
  color: #eef4fd;
  font-size: 1.5em;
  font-weight: 300;
  line-height: 1.42;
  letter-spacing: -0.022em; }

.about-summary p + p {
  margin-top: 2.35rem; }

/* Lighter colour lifts the emphasis; the lighter cut and antialiased
   smoothing keep the perceived weight unchanged, since extra luminance
   on a dark ground otherwise reads as extra boldness. */
.about-summary strong {
  color: rgba(233, 241, 252, 0.95);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }


/* --- Inline tech logos --------------------------------------------------
   Circular glass chips that overlap by 28% of their width. Each chip blurs
   whatever sits behind it (text, the previous chip), so the stack reads as
   layered frosted discs rather than flat badges. */
.tech-word {
  white-space: nowrap; }

.tech-stack {
  --chip: 1.85em;
  display: inline-flex;
  align-items: center;
  margin-right: 0.3em;
  vertical-align: -0.32em; }

.tech-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--chip);
  height: var(--chip);
  padding: calc(var(--chip) * 0.22);
  box-sizing: border-box;
  border-radius: 50%;
  background: rgba(214, 228, 248, 0.1);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow: inset 0 0 0 1px rgba(214, 228, 248, 0.07), 0 0.3em 0.7em -0.3em rgba(0, 0, 0, 0.55);
  transition: transform 260ms cubic-bezier(.22, .8, .32, 1); }

.tech-chip + .tech-chip {
  margin-left: calc(var(--chip) * -0.28); }

.tech-chip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; }

/* Black/near-black marks (OpenAI, Grok, AWS wordmark) vanish on the navy
   ground. Invert + 180deg hue turn flips dark to light while keeping any
   brand colour (AWS orange) roughly where it was. */
.tech-chip.is-dark img {
  filter: invert(1) hue-rotate(180deg); }

.tech-chip:hover {
  transform: translateY(-0.1em); }

@media (prefers-reduced-motion: reduce) {
  .tech-chip { transition: none; } }

/* Narrower columns wrap the chips onto more lines, so give each line a
   little extra room to keep the stacks from crowding the rows around them. */
@media screen and (max-width: 998px) {
  .about-summary p + p {
    line-height: 2.15; } }


@media screen and (max-width: 560px) {
  .about-section {
    padding-right: 1.25rem;
    padding-left: 1.25rem; } }


/* --- Experience + Skills, side by side ---------------------------------- */

.duo {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  align-items: start;
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
  width: min(80rem, 100%);
  margin: 0 auto clamp(3rem, 5vw, 4.5rem);
  padding: 0 1.5rem; }

.duo > section {
  /* inline-size container so the panels can respond to their own width
     rather than the viewport's */
  container-type: inline-size;
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  border-radius: 1.75rem;
  background: rgba(196, 210, 232, 0.05);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px); }

@media screen and (max-width: 900px) {
  .duo {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem; } }

@media screen and (max-width: 560px) {
  .duo { padding-inline: 1.25rem; }
  .duo > section { border-radius: 1.1rem; } }

/* --- Experience --------------------------------------------------------- */

.experience-section {
  position: relative;
  color: #f4f7fc; }

.experience-shell {
  position: relative;
  z-index: 1;
  width: 100%; }

/* Same heading typography as About: uppercase diavlo. */
.experience-section h2 {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  color: #f4f7fc;
  font-family: 'diavlo', 'Open Sans', sans-serif;
  font-size: clamp(1.7rem, 2.75vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase; }

.experience-list {
  list-style: none; }

.job {
  display: block;
  padding: 0.95rem 0;
  text-align: center; }

.job + .job {
  margin-top: 0.75rem; }


.job-role {
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: #f4f7fc; }

.job-at {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  margin-top: 0.25rem;
  font-size: 0.83rem;
  line-height: 1.6; }

@media screen and (min-width: 641px) {
  .experience-section h2,
  .experience-section .job {
    text-align: left; }

  .experience-section .job-at {
    justify-content: flex-start; } }

.job-sep {
  margin: 0 0.75em;
  color: rgba(198, 221, 250, 0.28);
  font-weight: 300; }

.job-company {
  color: #f4f7fc;
  font-weight: 400; }

/* No underline: the link is indistinguishable until hovered, where it
   shifts to the accent. Focus ring kept so it is still reachable. */
.job-company a {
  color: inherit;
  text-decoration: none;
  transition: color 260ms ease; }

.job-company a:hover,
.job-company a:focus-visible {
  color: var(--accent); }

.job-company a:focus-visible {
  outline: 2px solid #bdd8fc;
  outline-offset: 3px; }

.job-location {
  color: #8496ad; }

.job-at > span + span::before {
  content: '\00b7';
  margin: 0 0.55rem;
  color: rgba(198, 221, 250, 0.32); }

.job-dates {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7f92ab;
  white-space: nowrap; }

.job-dash {
  margin: 0 0.4rem;
  color: rgba(198, 221, 250, 0.32); }

/* any ongoing role, not just the topmost row */
.job.is-current .job-dates {
  color: var(--accent); }


@media screen and (max-width: 640px) {
  #top-section {
    margin: 0.75rem;
    min-height: calc(100vh - 1.5rem);
    border-radius: 0.9rem;
    -webkit-clip-path: inset(0 round 0.9rem);
    clip-path: inset(0 round 0.9rem); }
  .job { padding: 0.65rem 0; } }

.skills-section {
  position: relative;
  color: #f4f7fc; }

.skills-shell {
  position: relative;
  z-index: 1;
  width: 100%; }

.skills-section h2 {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-family: 'diavlo', 'Open Sans', sans-serif;
  font-size: clamp(1.7rem, 2.75vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase; }

.skill-row {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: 0.4rem 1.5rem;
  padding: 1rem 0; }

.skill-row + .skill-row {
  border-top: 1px solid var(--hair); }

.skill-row dt {
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.7;
  color: #eaf2fd; }

.skill-row dd {
  margin: 0;
  min-width: 0; }

.skill-row ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0;
  list-style: none;
  font-size: 0.83rem;
  line-height: 1.8;
  color: #a4b4c9; }

.skill-row li:not(:last-child)::after {
  content: '·';
  display: inline-block;
  margin: 0 0.5rem;
  color: #6f8299; }

@container (max-width: 480px) {
  .skill-row {
    grid-template-columns: minmax(0, 1fr); } }

@media screen and (max-width: 640px) {
  .skills-section h2 { text-align: center; }
  .skill-row { grid-template-columns: minmax(0, 1fr); } }

/* --- Contact ------------------------------------------------------------ */

.contact-section {
  position: relative;
  z-index: 1;
  padding: clamp(3rem, 7vw, 6rem) 1.5rem clamp(4rem, 8vw, 7rem);
  color: #f4f7fc;
  text-align: center; }

.contact-shell {
  width: min(44rem, 100%);
  margin: 0 auto; }

.contact-kicker {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
  color: #8496ad;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase; }

.contact-kicker-sep {
  color: rgba(198, 221, 250, 0.28); }

.contact-flag {
  display: block;
  width: 1.25rem;
  height: auto;
  border-radius: 0.15rem; }

.contact-section h2 {
  margin: 0;
  color: #f4f7fc;
  font-family: 'diavlo', 'Open Sans', sans-serif;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.02em;
  word-spacing: 0.12em;
  text-transform: uppercase; }

.contact-lead {
  margin-top: 1rem;
  color: rgba(210, 220, 236, 0.6);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.7; }

.contact-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  list-style: none;
  font-size: 0.9rem; }

.contact-links a {
  color: #8496ad;
  text-decoration: none;
  transition: color 260ms ease; }

.contact-links a:hover,
.contact-links a:focus-visible {
  color: #eef4fd; }

.contact-links a:focus-visible {
  outline: 2px solid #bdd8fc;
  outline-offset: 3px; }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  width: min(80rem, 100%);
  margin: 0 auto;
  padding: 1.5rem 1.5rem 2rem;
  border-top: 1px solid var(--hair);
  color: #6f8299;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-align: center; }

.footer-domain {
  color: inherit;
  text-decoration: none;
  transition: color 260ms ease; }

.footer-domain:hover {
  color: #eef4fd; }

.footer-domain:focus-visible {
  outline: 2px solid #bdd8fc;
  outline-offset: 3px; }

@media screen and (max-width: 560px) {
  .contact-section { padding-inline: 1.25rem; }
  .site-footer { padding-inline: 1.25rem; } }

/* --- Scroll reveal -----------------------------------------------------
   Elements marked [data-reveal] resolve from a soft blur as they enter the
   viewport. .has-reveal is set in <head> before first paint (and only when
   IntersectionObserver exists and motion is allowed), so without it
   everything simply renders in place.

   Text grows in slightly from 96% while it sharpens. Motion uses the
   individual `scale`/`translate` properties rather than `transform`, so it
   composes with any transform an element already has (e.g. the About
   header's optical nudge) instead of overriding it. Filter settles on
   `none`, not blur(0), so no compositing layer or backdrop root lingers
   once the element is in. */
.has-reveal [data-reveal] {
  transition:
    opacity 450ms cubic-bezier(.25, .7, .25, 1),
    filter 550ms cubic-bezier(.25, .7, .25, 1),
    scale 600ms cubic-bezier(.16, 1, .3, 1),
    translate 600ms cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0ms); }

.has-reveal [data-reveal]:not(.is-in) {
  opacity: 0;
  filter: blur(var(--reveal-blur, 10px));
  scale: var(--reveal-scale, 0.96);
  translate: 0 var(--reveal-rise, 0px); }

/* Hero: a shrinking blur halo on large type reads as the text contracting,
   so the blur stays light. Wide type makes any scale read as widening, so
   the growth is kept small and a short rise carries the motion instead. */
.has-reveal #top-section [data-reveal] {
  --reveal-blur: 6px;
  --reveal-scale: 0.98;
  --reveal-rise: 0.75rem; }

/* Glass panels only fade and settle: blurring a backdrop-filtered surface
   smears its edge, and the text inside carries the blur on its own. */
.has-reveal [data-reveal="panel"] {
  transition:
    opacity 500ms cubic-bezier(.25, .7, .25, 1),
    translate 650ms cubic-bezier(.16, 1, .3, 1); }

.has-reveal [data-reveal="panel"]:not(.is-in) {
  filter: none;
  scale: none;
  translate: 0 1.25rem; }

@media print {
  .has-reveal [data-reveal]:not(.is-in) {
    opacity: 1;
    filter: none;
    scale: none;
    translate: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } }

.underline-span {
  border-bottom: 1px solid #777; }

.infolink {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dotted #656565;
  cursor: help; }


#top-section {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
    align-content: center;
  width: auto;
  margin: 2rem;
  min-height: calc(100vh - 4rem);
  height: auto;
  background: #071a35;
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 1.75rem;
  /* Clip viewport-fixed lines without changing their original scroll behavior.
     The radius lives here too: overflow/border-radius do not clip the
     position:fixed background shards, but clip-path does. */
  -webkit-clip-path: inset(0 round 1.75rem);
  clip-path: inset(0 round 1.75rem);
  z-index: 1; }
  #top-section #top-section-bg {
    pointer-events: none; }
  #top-section #top-section-center-container {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding-top: 1rem;
	padding-bottom: 4rem;
	max-width: 100%;
    z-index: 10; }
    #top-section #top-section-center-container #top-section-center {
      display: block;
      width: 35em;
      max-width: 96%;
      text-align: center; }
@media screen and (max-width: 640px) {
    #top-section #top-section-center-container #top-section-center {
      display: block;
      width: 35em;
      max-width: 80%;
      text-align: center; }
}
      #top-section #top-section-center-container #top-section-center .welcometext {
        font-weight: 300;
        font-size: 1.44em;
        line-height: 2.7; }
        @media screen and (max-width: 998px) {
          #top-section #top-section-center-container #top-section-center .welcometext {
            font-size: 1.1em; } }
      #top-section #top-section-center-container #top-section-center #big-center-name {
        font-family: 'diavlo' !important;
        font-size: 3em;
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 0.25rem;
        line-height: 1.2; }
        #top-section #top-section-center-container #top-section-center #big-center-name span {
          font-weight: 400; }
        @media screen and (max-width: 998px) {
          #top-section #top-section-center-container #top-section-center #big-center-name {
            font-size: 1.7em; } }
      #top-section #top-section-center-container #top-section-center h2 {
        font-weight: 100 !important;
        text-transform: uppercase;
        
        line-height: 1.5 !important;
        font-size: 1.24em; }
        @media screen and (max-width: 998px) {
          #top-section #top-section-center-container #top-section-center h2 {
            font-size: 1.1em; } }
        @media screen and (max-width: 640px) {
          #top-section #top-section-center-container #top-section-center h2 {
            font-size: 1em; } }
      #top-section #top-section-center-container #top-section-center .intro-social-icons {
        /* Flex + explicit gap: FA7 renders each brand icon in a fixed-width
           inline-block box, so inline whitespace was adding to the spacing. */
        display: flex;
        justify-content: center;
        gap: 0.1em;
        margin: 1.15em 0 0.5em; }
        #top-section #top-section-center-container #top-section-center .intro-social-icons a {
          color: rgba(255, 255, 255, 0.8);
          text-decoration: none; }
          #top-section #top-section-center-container #top-section-center .intro-social-icons a i {
            font-size: 1.6em;
            margin: 0;
            transition: color 0.3s, text-shadow 0.3s; }
        /* Roomier, larger targets for touch. */
        @media screen and (max-width: 640px) {
          #top-section #top-section-center-container #top-section-center .intro-social-icons {
            gap: 0.6em; }
            #top-section #top-section-center-container #top-section-center .intro-social-icons a i {
              font-size: 1.85em; } }
          #top-section #top-section-center-container #top-section-center .intro-social-icons a:hover {
            color: white; }
            #top-section #top-section-center-container #top-section-center .intro-social-icons a:hover i {
              text-shadow: 0 0.2em 0.2em rgba(0, 0, 0, 0.2); }
      #top-section #top-section-center-container #top-section-center #main-profile-pic {
        display: block;
        width: 9em;
        height: 9em;
        border-radius: 9em;
        margin: 0.8em auto;
        box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.3);
        margin-top: -1em;
        transition: box-shadow 0.4s; }
        #top-section #top-section-center-container #top-section-center #main-profile-pic:hover {
          box-shadow: 0 1em 2.5em -0.4em rgba(0, 0, 0, 0.4); }
  #top-section #top-section-bg div {
    display: block;
    position: absolute;
    height: 150vh;
    top: -10em; }
  #top-section #top-section-bg #tsbg1 {
    width: 12%;
    background: #0b2449;
    right: 0;
    z-index: 3;
    -webkit-transform: rotate(11deg);
        -ms-transform: rotate(11deg);
            transform: rotate(11deg);
    opacity: 0.9; }
  #top-section #top-section-bg #tsbg2 {
    width: 17%;
    background: #081d3b;
    right: 10%;
    z-index: 2;
    -webkit-transform: rotate(6deg);
        -ms-transform: rotate(6deg);
            transform: rotate(6deg); }
  #top-section #top-section-bg #tsbg3 {
    width: 6%;
    background: #0a2042;
    right: 12%;
    z-index: 4;
    -webkit-transform: rotate(19deg);
        -ms-transform: rotate(19deg);
            transform: rotate(19deg);
    top: -30em;
    height: 200vh;
    opacity: 0.6;
    position: fixed; }
  #top-section #top-section-bg #tsbg4 {
    width: 10%;
    background: #0a2042;
    right: 22%;
    z-index: 4;
    -webkit-transform: rotate(6deg);
        -ms-transform: rotate(6deg);
            transform: rotate(6deg);
    opacity: 1; }
  #top-section #top-section-bg #tsbg5 {
    width: 22%;
    background: #0b2348;
    right: 38%;
    -webkit-transform: rotate(14deg);
        -ms-transform: rotate(14deg);
            transform: rotate(14deg);
    z-index: 4; }
  #top-section #top-section-bg #tsbg6 {
    width: 9%;
    background: #081d3b;
    right: 48%;
    -webkit-transform: rotate(9deg);
        -ms-transform: rotate(9deg);
            transform: rotate(9deg);
    z-index: 5;
    opacity: 0.6;
    position: fixed; }
  #top-section #top-section-bg #tsbg7 {
    width: 10%;
    background: #0a2042;
    right: 63%;
    -webkit-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
            transform: rotate(20deg);
    position: fixed;
    z-index: 4;
    top: -33em;
    height: 200vh;
    opacity: 0.8; }
  #top-section #top-section-bg #tsbg10 {
    width: 7%;
    background: #112246;
    right: 79%;
    -webkit-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
            transform: rotate(15deg);
    position: fixed;
    z-index: 3;
    top: -33em;
    height: 200vh;
    opacity: 1; }
  #top-section #top-section-bg #tsbg8 {
    width: 22%;
    background: #071a35;
    right: 69%;
    z-index: 3;
    -webkit-transform: rotate(9deg);
        -ms-transform: rotate(9deg);
            transform: rotate(9deg);
    opacity: 0.6; }
  #top-section #top-section-bg #tsbg9 {
    width: 9%;
    background: #0a2042;
    right: 88%;
    -webkit-transform: rotate(7deg);
        -ms-transform: rotate(7deg);
            transform: rotate(7deg);
    position: fixed;
    z-index: 5;
    opacity: 0.8; }
  #top-section #top-section-bg #tsbg1,
  #top-section #top-section-bg #tsbg3,
  #top-section #top-section-bg #tsbg4,
  #top-section #top-section-bg #tsbg5,
  #top-section #top-section-bg #tsbg7,
  #top-section #top-section-bg #tsbg9,
  #top-section #top-section-bg #tsbg10 {
    will-change: transform; }
  #top-section #top-section-bg #tsbg1 {
    transform: translate3d(0, var(--parallax-y, 0px), 0) rotate(11deg); }
  #top-section #top-section-bg #tsbg3 {
    transform: translate3d(0, var(--parallax-y, 0px), 0) rotate(19deg); }
  #top-section #top-section-bg #tsbg4 {
    transform: translate3d(0, var(--parallax-y, 0px), 0) rotate(6deg); }
  #top-section #top-section-bg #tsbg5 {
    transform: translate3d(0, var(--parallax-y, 0px), 0) rotate(14deg); }
  #top-section #top-section-bg #tsbg7 {
    transform: translate3d(0, var(--parallax-y, 0px), 0) rotate(20deg); }
  #top-section #top-section-bg #tsbg9 {
    transform: translate3d(0, var(--parallax-y, 0px), 0) rotate(7deg); }
  #top-section #top-section-bg #tsbg10 {
    transform: translate3d(0, var(--parallax-y, 0px), 0) rotate(15deg); }
  @media screen and (max-width: 998px) {
    #top-section #top-section-bg #tsbg1 {
      width: 30% !important; }
    #top-section #top-section-bg #tsbg2 {
      display: none !important; }
    #top-section #top-section-bg #tsbg3 {
      width: 30% !important; }
    #top-section #top-section-bg #tsbg4 {
      display: none !important; }
    #top-section #top-section-bg #tsbg7 {
      display: none !important; }
    /* Keep one brighter line crossing the left side, which otherwise reads
       empty on narrow screens. Centred on the viewport so it spans the
       full hero height instead of leaving through the left edge. */
    #top-section #top-section-bg #tsbg10 {
      width: 13% !important;
      right: 70% !important;
      top: -50vh !important;
      transform: translate3d(0, var(--parallax-y, 0px), 0) rotate(9deg); }
    #top-section #top-section-bg #tsbg8 {
      width: 25% !important; }
    #top-section #top-section-bg #tsbg6 {
      display: none !important; }
    #top-section #top-section-bg #tsbg9 {
      width: 22% !important; } }

/* Hero lines settle: a few lines start nudged away from the centre and
   glide back into place as the hero content resolves (main.js adds
   .is-settled). Uses the individual `translate` property so it composes
   with the parallax `transform` rather than replacing it. Gated on
   .has-reveal, so without JS or with reduced motion they sit in place. */
.has-reveal #top-section #top-section-bg #tsbg1 { --drift-x: 4.5vw; --drift-delay: 80ms; }
.has-reveal #top-section #top-section-bg #tsbg4 { --drift-x: 3vw; --drift-delay: 200ms; }
.has-reveal #top-section #top-section-bg #tsbg5 { --drift-x: 2vw; --drift-delay: 140ms; }
.has-reveal #top-section #top-section-bg #tsbg8 { --drift-x: -3vw; --drift-delay: 170ms; }
.has-reveal #top-section #top-section-bg #tsbg9 { --drift-x: -4.5vw; --drift-delay: 110ms; }
.has-reveal #top-section #top-section-bg div {
  translate: var(--drift-x, 0) 0;
  transition: translate 2400ms cubic-bezier(.16, 1, .3, 1) var(--drift-delay, 0ms); }
.has-reveal #top-section #top-section-bg.is-settled div {
  translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  #top-section #top-section-bg #tsbg1,
  #top-section #top-section-bg #tsbg3,
  #top-section #top-section-bg #tsbg4,
  #top-section #top-section-bg #tsbg5,
  #top-section #top-section-bg #tsbg7,
  #top-section #top-section-bg #tsbg9,
  #top-section #top-section-bg #tsbg10 {
    will-change: auto; } }