/* =========================================================
   BIVEK RAY — PREMIUM PORTFOLIO
   MASTER STYLESHEET
========================================================= */

:root {
  --ivory: #f3f0e9;
  --ivory-light: #faf8f3;
  --paper: #e8e3d9;

  --ink: #171719;
  --ink-soft: #27272a;
  --muted: #77736d;

  --violet: #65556f;
  --violet-dark: #403746;
  --orange: #d8793f;
  --orange-soft: #e8a06f;

  --line: rgba(23, 23, 25, 0.13);
  --line-light: rgba(243, 240, 233, 0.16);

  --sans: "DM Sans", sans-serif;
  --display: "Manrope", sans-serif;
  --serif: "Playfair Display", serif;

  --container: min(1380px, 90vw);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   RESET
========================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
  cursor: auto;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

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


/* =========================================================
   SELECTION
========================================================= */

::selection {
  background: var(--violet);
  color: var(--ivory);
}


/* =========================================================
   SCROLLBAR
========================================================= */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--ivory);
}

::-webkit-scrollbar-thumb {
  background: var(--violet);
}


/* =========================================================
   LOADER
========================================================= */

.loader {
  position: fixed;
  inset: 0;

  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--ink);

  transition:
    opacity 0.8s var(--ease),
    visibility 0.8s var(--ease);
}

.loader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-content {
  width: min(420px, 75vw);

  display: flex;
  flex-direction: column;
  gap: 16px;
}

.loader-label,
.loader-status {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.loader-label {
  color: var(--ivory);
}

.loader-status {
  color: rgba(243, 240, 233, 0.45);
}

.loader-bar {
  width: 100%;
  height: 1px;

  background: rgba(243, 240, 233, 0.18);

  overflow: hidden;
}

.loader-bar span {
  display: block;

  width: 0;
  height: 100%;

  background: var(--orange);

  animation: loaderProgress 1.5s var(--ease) forwards;
}

@keyframes loaderProgress {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}



/* =========================================================
   HEADER
========================================================= */

.header {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 88px;

  padding: 0 5vw;

  z-index: 900;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: rgba(243, 240, 233, 0.72);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border-bottom: 1px solid rgba(23, 23, 25, 0.08);

  transition:
    transform 0.5s var(--ease),
    background 0.4s ease;
}

.header.hidden {
  transform: translateY(-100%);
}

.logo {
  font-family: var(--display);

  font-size: 24px;

  font-weight: 800;

  letter-spacing: -0.08em;
}

.logo span {
  color: var(--orange);
}

.desktop-navigation {
  display: flex;

  align-items: center;

  gap: 38px;
}

.desktop-navigation a,
.header-social {
  position: relative;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 0.02em;

  color: var(--ink-soft);

  transition: color 0.3s ease;
}

.desktop-navigation a::after,
.header-social::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -7px;

  width: 0;
  height: 1px;

  background: var(--orange);

  transition: width 0.4s var(--ease);
}

.desktop-navigation a:hover,
.header-social:hover {
  color: var(--violet);
}

.desktop-navigation a:hover::after,
.header-social:hover::after {
  width: 100%;
}


/* =========================================================
   MENU BUTTON
========================================================= */

.menu-toggle {
  display: none;

  width: 46px;
  height: 46px;

  border: 1px solid var(--line);

  border-radius: 50%;

  background: transparent;

  align-items: center;
  justify-content: center;

  flex-direction: column;

  gap: 6px;

  cursor: pointer;
}

.menu-toggle span {
  width: 18px;
  height: 1px;

  background: var(--ink);

  transition:
    transform 0.4s var(--ease),
    opacity 0.3s ease;
}

.menu-toggle.open span:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

.menu-toggle.open span:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.mobile-navigation {
  position: fixed;
  inset: 0;

  z-index: 800;

  background: var(--ink);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.5s var(--ease),
    visibility 0.5s var(--ease);
}

.mobile-navigation.open {
  opacity: 1;
  visibility: visible;
}

.mobile-navigation-inner {
  width: 88vw;
  height: 100%;

  margin: auto;

  display: flex;

  flex-direction: column;

  justify-content: center;

  gap: 20px;
}

.mobile-label {
  margin-bottom: 20px;

  color: var(--orange);

  font-size: 10px;

  letter-spacing: 0.25em;

  text-transform: uppercase;
}

.mobile-navigation a {
  color: var(--ivory);

  font-family: var(--display);

  font-size: clamp(38px, 9vw, 76px);

  font-weight: 700;

  letter-spacing: -0.07em;

  transition:
    color 0.3s ease,
    transform 0.3s var(--ease);
}

.mobile-navigation a:hover {
  color: var(--orange);
  transform: translateX(10px);
}


/* =========================================================
   COMMON
========================================================= */

.section {
  position: relative;

  padding:
    150px 5vw;

  overflow: hidden;
}

.section-meta {
  display: flex;

  gap: 16px;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--muted);
}

.section-meta span:first-child {
  color: var(--orange);
}

.small-label {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  color: var(--violet);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}

.small-label::before {
  content: "";

  width: 34px;
  height: 1px;

  background: currentColor;
}


/* =========================================================
   BUTTONS
========================================================= */

.button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 28px;

  min-height: 52px;

  font-size: 12px;

  font-weight: 700;

  transition:
    transform 0.4s var(--ease),
    background 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease;
}

.button span {
  transition: transform 0.4s var(--ease);
}

.button:hover span {
  transform: translate(4px, -4px);
}

.button-primary {
  padding: 0 23px;

  background: var(--violet);

  color: var(--ivory);

  border: 1px solid var(--violet);
}

.button-primary:hover {
  background: var(--ink);

  border-color: var(--ink);

  transform: translateY(-3px);
}

.button-text {
  color: var(--ink);

  border-bottom: 1px solid var(--ink);

  min-height: auto;

  padding-bottom: 6px;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;

  min-height: 100svh;

  padding:
    125px 5vw
    38px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  background: var(--ivory);

  overflow: hidden;
}

.hero-background {
  position: absolute;
  inset: 0;

  pointer-events: none;
}

.hero-grid {
  position: absolute;
  inset: 0;

  opacity: 0.28;

  background-image:
    linear-gradient(
      to right,
      rgba(23, 23, 25, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      rgba(23, 23, 25, 0.045) 1px,
      transparent 1px
    );

  background-size:
    100px 100px;
}

.hero-glow {
  position: absolute;

  border-radius: 50%;

  filter: blur(5px);
}

.hero-glow-one {
  width: 38vw;
  height: 38vw;

  right: -10vw;
  top: -10vw;

  background:
    radial-gradient(
      circle,
      rgba(216, 121, 63, 0.15),
      transparent 68%
    );
}

.hero-glow-two {
  width: 32vw;
  height: 32vw;

  left: 35%;
  bottom: -20vw;

  background:
    radial-gradient(
      circle,
      rgba(101, 85, 111, 0.14),
      transparent 68%
    );
}

.hero-top,
.hero-bottom {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: var(--muted);

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 0.2em;

  text-transform: uppercase;
}

.hero-main {
  position: relative;

  z-index: 2;

  width: var(--container);

  margin: auto;

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  gap: 8vw;

  align-items: center;
}

.hero-introduction {
  padding-top: 4vh;
}

.hero-kicker {
  display: block;

  margin-bottom: 28px;

  color: var(--orange);

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}

.hero h1 {
  max-width: 850px;

  font-family: var(--display);

  font-size: clamp(64px, 8.8vw, 138px);

  line-height: 0.91;

  letter-spacing: -0.085em;

  font-weight: 800;
}

.hero h1 em {
  color: var(--violet);

  font-family: var(--serif);

  font-weight: 500;

  letter-spacing: -0.07em;
}

.hero h1 strong {
  color: var(--orange);

  font-weight: 800;
}

.hero-introduction > p {
  max-width: 550px;

  margin-top: 40px;

  color: var(--muted);

  font-size: 17px;

  line-height: 1.7;
}

.hero-actions {
  display: flex;

  align-items: center;

  gap: 30px;

  margin-top: 42px;
}

.hero-portrait {
  position: relative;

  justify-self: end;

  width: min(430px, 100%);
}

.portrait-frame {
  position: relative;

  aspect-ratio: 0.78;

  overflow: hidden;

  background: var(--paper);
}

.portrait-frame::before {
  content: "";

  position: absolute;

  inset: 14px;

  z-index: 2;

  border: 1px solid rgba(243, 240, 233, 0.45);

  pointer-events: none;
}

.portrait-frame img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(0.78)
    contrast(1.04);

  transform: scale(1.04);

  transition:
    transform 1.2s var(--ease),
    filter 1.2s ease;
}

.portrait-frame:hover img {
  transform: scale(1);
  filter: saturate(1) contrast(1.04);
}

.portrait-overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(23, 23, 25, 0.62),
      transparent 45%
    );
}

.portrait-caption {
  position: absolute;

  z-index: 3;

  left: 28px;
  right: 28px;
  bottom: 25px;

  display: flex;

  justify-content: space-between;

  color: var(--ivory);

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 0.17em;
}

.portrait-caption span:first-child {
  color: var(--orange);
}

.portrait-note {
  position: absolute;

  right: -55px;
  bottom: 35px;

  color: var(--violet);

  font-family: var(--serif);

  font-size: 15px;

  line-height: 1.25;

  font-style: italic;
}

.scroll-line {
  flex: 1;

  max-width: 100px;

  height: 1px;

  margin: 0 20px;

  background: var(--line);
}


/* =========================================================
   INTRO
========================================================= */

.intro {
  min-height: 100vh;

  background: var(--ivory-light);
}

.intro-layout {
  width: var(--container);

  margin: 14vh auto 0;

  display: grid;

  grid-template-columns: 1fr 0.72fr;

  gap: 10vw;
}

.intro-heading h2 {
  margin-top: 40px;

  font-family: var(--display);

  font-size: clamp(58px, 7vw, 110px);

  line-height: 0.93;

  letter-spacing: -0.08em;

  font-weight: 800;
}

.intro-heading h2 em {
  color: var(--violet);

  font-family: var(--serif);

  font-weight: 500;

  letter-spacing: -0.05em;
}

.intro-copy {
  padding-top: 30px;
}

.intro-copy p {
  margin-bottom: 32px;

  color: var(--muted);

  font-size: 17px;

  line-height: 1.75;
}

.intro-copy .intro-large {
  color: var(--ink-soft);

  font-size: clamp(20px, 2.2vw, 29px);

  line-height: 1.45;

  letter-spacing: -0.025em;
}

.intro-details {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

  margin-top: 65px;

  padding-top: 25px;

  border-top: 1px solid var(--line);
}

.intro-details div {
  display: flex;

  flex-direction: column;

  gap: 8px;
}

.intro-details span {
  color: var(--muted);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}

.intro-details strong {
  font-size: 11px;

  letter-spacing: 0.03em;
}


/* =========================================================
   MARQUEE
========================================================= */

.marquee-section {
  overflow: hidden;

  padding: 25px 0;

  background: var(--violet);

  color: var(--ivory);
}

.marquee-track {
  width: max-content;

  display: flex;

  align-items: center;

  gap: 35px;

  white-space: nowrap;

  animation: marquee 25s linear infinite;
}

.marquee-track span {
  font-family: var(--display);

  font-size: clamp(30px, 4vw, 58px);

  font-weight: 800;

  letter-spacing: -0.06em;
}

.marquee-track i {
  color: var(--orange);

  font-style: normal;

  font-size: 20px;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}


/* =========================================================
   WORK
========================================================= */

.work {
  background: var(--ink);

  color: var(--ivory);
}

.work .section-meta {
  color: rgba(243, 240, 233, 0.45);
}

.work .section-meta span:first-child {
  color: var(--orange);
}

.section-introduction {
  width: var(--container);

  margin: 13vh auto 0;
}

.section-introduction .small-label {
  color: var(--orange);
}

.section-introduction h2 {
  margin-top: 35px;

  max-width: 850px;

  font-family: var(--display);

  font-size: clamp(64px, 9vw, 135px);

  line-height: 0.88;

  letter-spacing: -0.085em;

  font-weight: 800;
}

.section-introduction h2 em {
  color: var(--orange);

  font-family: var(--serif);

  font-weight: 500;

  letter-spacing: -0.06em;
}

.section-introduction > p {
  max-width: 500px;

  margin-top: 35px;

  color: rgba(243, 240, 233, 0.55);

  font-size: 16px;

  line-height: 1.7;
}


/* =========================================================
   PROJECTS
========================================================= */

.project {
  position: relative;

  width: var(--container);

  margin: 16vh auto 0;
}

.project-index {
  position: absolute;

  top: 30px;
  left: 0;

  color: rgba(243, 240, 233, 0.4);

  font-size: 10px;

  letter-spacing: 0.15em;
}

.project-visual {
  position: relative;

  width: 88%;

  margin-left: auto;

  min-height: 600px;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(216, 121, 63, 0.28),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #28242b,
      #171719
    );
}

.project-visual::before {
  content: "";

  position: absolute;

  width: 520px;
  height: 520px;

  border: 1px solid rgba(243, 240, 233, 0.1);

  border-radius: 50%;
}

.project-visual::after {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  border: 1px solid rgba(216, 121, 63, 0.3);

  border-radius: 50%;
}

.project-visual-content {
  position: relative;

  z-index: 2;

  text-align: center;
}

.project-overline {
  display: block;

  margin-bottom: 25px;

  color: rgba(243, 240, 233, 0.55);

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 0.2em;
}

.project-visual-content h3 {
  font-family: var(--display);

  font-size: clamp(90px, 14vw, 210px);

  line-height: 0.8;

  letter-spacing: -0.1em;

  font-weight: 800;
}

.project-symbol {
  display: block;

  margin-top: 35px;

  color: var(--orange);

  font-size: 25px;
}

.project-information {
  width: 78%;

  margin:
    -70px
    auto
    0;

  position: relative;

  z-index: 3;

  display: grid;

  grid-template-columns: 1fr 1fr 180px;

  gap: 45px;

  align-items: end;

  padding: 35px;

  background: var(--ivory);

  color: var(--ink);

  border: 1px solid rgba(23, 23, 25, 0.08);
}

.project-type {
  color: var(--orange);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.18em;
}

.project-information h3 {
  margin-top: 10px;

  font-family: var(--display);

  font-size: 50px;

  line-height: 0.9;

  letter-spacing: -0.07em;
}

.project-information p {
  color: var(--muted);

  font-size: 14px;

  line-height: 1.65;
}

.project-link {
  display: inline-flex;

  align-items: center;

  justify-content: space-between;

  padding-bottom: 8px;

  border-bottom: 1px solid var(--ink);

  font-size: 11px;

  font-weight: 700;
}

.project-link span {
  transition: transform 0.4s var(--ease);
}

.project-link:hover span {
  transform: translate(5px, -5px);
}


/* =========================================================
   SUKOON PROJECT
========================================================= */

.project-sukoon {
  margin-top: 20vh;
}

.sukoon-visual {
  background:
    radial-gradient(
      circle at 70% 25%,
      rgba(216, 121, 63, 0.18),
      transparent 27%
    ),
    #e8dfcf;
}

.sukoon-visual::before {
  border-color: rgba(64, 55, 70, 0.12);
}

.sukoon-visual::after {
  border-color: rgba(216, 121, 63, 0.22);
}

.sukoon-logo-wrap {
  position: relative;

  z-index: 5;

  width: min(390px, 58%);

  padding: 25px;

  background: rgba(250, 248, 243, 0.72);

  border: 1px solid rgba(64, 55, 70, 0.12);

  backdrop-filter: blur(12px);

  box-shadow:
    0 30px 80px rgba(64, 55, 70, 0.12);
}

.sukoon-logo-wrap img {
  width: 100%;

  object-fit: contain;
}

.project-subtitle {
  display: block;

  margin-top: 7px;

  color: var(--orange);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.22em;
}

.project-link-disabled {
  color: var(--muted);

  border-color: rgba(23, 23, 25, 0.2);

  cursor: default;
}


/* =========================================================
   SKILLS
========================================================= */

.skills {
  min-height: 100vh;

  background: var(--paper);
}

.skills-layout {
  width: var(--container);

  margin: 14vh auto 0;

  display: grid;

  grid-template-columns: 0.8fr 1.2fr;

  gap: 10vw;
}

.skills-heading h2 {
  margin-top: 38px;

  font-family: var(--display);

  font-size: clamp(60px, 7.5vw, 115px);

  line-height: 0.88;

  letter-spacing: -0.085em;

  font-weight: 800;
}

.skills-heading h2 em {
  color: var(--violet);

  font-family: var(--serif);

  font-weight: 500;

  letter-spacing: -0.06em;
}

.skills-list {
  border-top: 1px solid var(--line);
}

.skill {
  display: grid;

  grid-template-columns: 60px 1fr;

  gap: 30px;

  padding: 34px 0;

  border-bottom: 1px solid var(--line);

  transition:
    padding 0.5s var(--ease),
    background 0.4s ease;
}

.skill:hover {
  padding-left: 18px;
  padding-right: 18px;

  background: rgba(101, 85, 111, 0.035);
}

.skill-number {
  color: var(--orange);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.12em;
}

.skill h3 {
  font-family: var(--display);

  font-size: 22px;

  letter-spacing: -0.04em;
}

.skill p {
  max-width: 560px;

  margin-top: 10px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.65;
}


/* =========================================================
   PHILOSOPHY
========================================================= */

.philosophy {
  min-height: 85vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--violet);

  color: var(--ivory);

  text-align: center;
}

.philosophy-inner {
  width: min(1000px, 90vw);
}

.philosophy .small-label {
  color: var(--orange-soft);
}

.philosophy h2 {
  margin-top: 40px;

  font-family: var(--display);

  font-size: clamp(55px, 8vw, 125px);

  line-height: 0.9;

  letter-spacing: -0.085em;

  font-weight: 800;
}

.philosophy h2 em {
  color: var(--orange-soft);

  font-family: var(--serif);

  font-weight: 500;
}

.philosophy p {
  max-width: 540px;

  margin: 45px auto 0;

  color: rgba(243, 240, 233, 0.65);

  font-size: 16px;

  line-height: 1.7;
}


/* =========================================================
   PROFILE
========================================================= */

.profile {
  background: var(--ivory-light);
}

.profile-layout {
  width: var(--container);

  margin: 14vh auto 0;

  display: grid;

  grid-template-columns: 1fr 0.65fr;

  gap: 10vw;

  align-items: end;
}

.profile-layout h2 {
  margin-top: 40px;

  font-family: var(--display);

  font-size: clamp(70px, 9vw, 140px);

  line-height: 0.85;

  letter-spacing: -0.09em;

  font-weight: 800;
}

.profile-layout h2 em {
  color: var(--orange);

  font-family: var(--serif);

  font-weight: 500;
}

.profile-copy p {
  margin-bottom: 35px;

  color: var(--muted);

  font-size: 17px;

  line-height: 1.7;
}


/* =========================================================
   CONTACT
========================================================= */

.contact {
  min-height: 100vh;

  display: flex;

  align-items: center;

  background: var(--ink);

  color: var(--ivory);

  overflow: hidden;
}

.contact-background {
  position: absolute;

  inset: 0;

  pointer-events: none;
}

.contact-background div {
  position: absolute;

  width: 60vw;
  height: 60vw;

  right: -25vw;
  top: -10vw;

  border: 1px solid rgba(216, 121, 63, 0.22);

  border-radius: 50%;
}

.contact-background div::after {
  content: "";

  position: absolute;

  inset: 15%;

  border: 1px solid rgba(101, 85, 111, 0.35);

  border-radius: 50%;
}

.contact-inner {
  position: relative;

  z-index: 2;

  width: var(--container);

  margin: auto;
}

.contact-inner .small-label {
  color: var(--orange);
}

.contact h2 {
  max-width: 1050px;

  margin-top: 40px;

  font-family: var(--display);

  font-size: clamp(70px, 10vw, 155px);

  line-height: 0.84;

  letter-spacing: -0.09em;

  font-weight: 800;
}

.contact h2 em {
  color: var(--orange);

  font-family: var(--serif);

  font-weight: 500;
}

.contact-links {
  width: min(700px, 100%);

  margin-top: 80px;

  border-top: 1px solid var(--line-light);
}

.contact-links a {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 22px 0;

  border-bottom: 1px solid var(--line-light);

  color: rgba(243, 240, 233, 0.72);

  font-size: 15px;

  transition:
    color 0.3s ease,
    padding 0.4s var(--ease);
}

.contact-links a:hover {
  padding-left: 12px;

  color: var(--orange);
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
  padding:
    75px 5vw
    30px;

  background: var(--ink);

  color: var(--ivory);

  border-top: 1px solid var(--line-light);
}

.footer-top,
.footer-bottom {
  display: flex;

  align-items: center;

  justify-content: space-between;

  color: rgba(243, 240, 233, 0.45);

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}

.footer-logo {
  color: var(--ivory);

  font-family: var(--display);

  font-size: 20px;

  font-weight: 800;

  letter-spacing: -0.06em;
}

.footer-logo span {
  color: var(--orange);
}

.footer-main {
  margin:
    15vh 0
    10vh;

  display: flex;

  flex-direction: column;

  font-family: var(--display);

  font-size: clamp(90px, 18vw, 290px);

  font-weight: 800;

  line-height: 0.72;

  letter-spacing: -0.1em;
}

.footer-main em {
  color: var(--orange);

  font-family: var(--serif);

  font-weight: 500;

  letter-spacing: -0.08em;
}

.footer-bottom a {
  transition: color 0.3s ease;
}

.footer-bottom a:hover {
  color: var(--orange);
}


/* =========================================================
   REVEAL SUPPORT
========================================================= */

.reveal {
  opacity: 0;

  transform: translateY(35px);

  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}

.reveal.visible {
  opacity: 1;

  transform: translateY(0);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

  .desktop-navigation,
  .header-social {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }

  .hero-main {
    grid-template-columns: 1fr;

    gap: 70px;
  }

  .hero-portrait {
    justify-self: start;

    width: min(400px, 65vw);
  }

  .portrait-note {
    right: -80px;
  }

  .intro-layout,
  .skills-layout,
  .profile-layout {
    grid-template-columns: 1fr;

    gap: 70px;
  }

  .intro-copy {
    max-width: 700px;

    margin-left: auto;
  }

  .skills-heading {
    max-width: 650px;
  }

  .project-visual {
    width: 94%;
  }

  .project-information {
    width: 86%;

    grid-template-columns: 1fr 1fr;
  }

  .project-link {
    grid-column: 2;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  body {
    cursor: auto;
  }
.header {
    height: 72px;

    padding: 0 22px;
  }

  .logo {
    font-size: 21px;
  }

  .hero {
    padding:
      105px 22px
      30px;
  }

  .hero-top {
    font-size: 8px;
  }

  .hero-top span:last-child {
    display: none;
  }

  .hero-main {
    width: 100%;

    gap: 55px;
  }

  .hero-introduction {
    padding-top: 30px;
  }

  .hero h1 {
    font-size: clamp(57px, 16.5vw, 105px);

    line-height: 0.93;
  }

  .hero-introduction > p {
    margin-top: 28px;

    font-size: 15px;

    line-height: 1.65;
  }

  .hero-actions {
    flex-wrap: wrap;

    gap: 20px;

    margin-top: 32px;
  }

  .hero-portrait {
    width: 78vw;

    margin: 0 auto;
  }

  .portrait-note {
    right: -35px;

    bottom: 20px;

    font-size: 12px;
  }

  .hero-bottom {
    font-size: 7px;
  }

  .scroll-line {
    max-width: 45px;

    margin: 0 10px;
  }

  .section {
    padding:
      90px 22px
      100px;
  }

  .section-meta {
    font-size: 8px;
  }

  .intro-layout,
  .skills-layout,
  .profile-layout {
    width: 100%;

    margin-top: 90px;

    gap: 65px;
  }

  .intro-heading h2 {
    font-size: clamp(54px, 16vw, 95px);
  }

  .intro-copy {
    padding-top: 0;
  }

  .intro-copy .intro-large {
    font-size: 21px;
  }

  .intro-copy p {
    font-size: 15px;
  }

  .intro-details {
    grid-template-columns: 1fr;

    gap: 22px;

    margin-top: 45px;
  }

  .marquee-track {
    gap: 22px;
  }

  .marquee-track span {
    font-size: 31px;
  }

  .work {
    padding-bottom: 100px;
  }

  .section-introduction {
    width: 100%;

    margin-top: 90px;
  }

  .section-introduction h2 {
    font-size: clamp(58px, 16vw, 100px);
  }

  .section-introduction > p {
    font-size: 14px;
  }

  .project {
    width: 100%;

    margin-top: 110px;
  }

  .project-index {
    position: static;

    margin-bottom: 15px;
  }

  .project-visual {
    width: 100%;

    min-height: 390px;
  }

  .project-visual::before {
    width: 330px;
    height: 330px;
  }

  .project-visual::after {
    width: 200px;
    height: 200px;
  }

  .project-visual-content h3 {
    font-size: clamp(75px, 23vw, 130px);
  }

  .project-information {
    width: calc(100% - 28px);

    margin: -45px auto 0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 25px;

    padding: 25px;
  }

  .project-information h3 {
    font-size: 42px;
  }

  .project-information p {
    font-size: 13px;
  }

  .project-link {
    width: 100%;
  }

  .project-sukoon {
    margin-top: 120px;
  }

  .sukoon-logo-wrap {
    width: 70%;

    padding: 18px;
  }

  .skills-heading h2 {
    font-size: clamp(55px, 16vw, 95px);
  }

  .skill {
    grid-template-columns: 35px 1fr;

    gap: 15px;

    padding: 28px 0;
  }

  .skill:hover {
    padding-left: 0;
    padding-right: 0;
  }

  .skill h3 {
    font-size: 19px;
  }

  .skill p {
    font-size: 13px;
  }

  .philosophy {
    min-height: 75vh;
  }

  .philosophy h2 {
    font-size: clamp(52px, 15vw, 90px);
  }

  .philosophy p {
    font-size: 14px;
  }

  .profile-layout h2 {
    font-size: clamp(65px, 19vw, 110px);
  }

  .profile-copy p {
    font-size: 15px;
  }

  .contact {
    min-height: 90vh;
  }

  .contact h2 {
    font-size: clamp(60px, 18vw, 110px);
  }

  .contact-links {
    margin-top: 55px;
  }

  .footer {
    padding:
      60px 22px
      25px;
  }

  .footer-top,
  .footer-bottom {
    flex-wrap: wrap;

    gap: 15px;

    font-size: 7px;
  }

  .footer-main {
    margin:
      100px 0
      65px;

    font-size: clamp(75px, 25vw, 150px);
  }

}




/* =========================================================
   2026 EXPERIENCE LAYER — MOTION / INTERACTION / NEW CONTENT
========================================================= */

:root {
  --violet-glow: rgba(101, 85, 111, 0.18);
  --orange-glow: rgba(216, 121, 63, 0.18);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 99990;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

html {
  scroll-padding-top: 90px;
}

::selection {
  background: var(--orange);
  color: var(--ink);
}

/* top progress line */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100001;
  width: 100%;
  height: 2px;
  pointer-events: none;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--orange), var(--violet));
}

/* richer loader */
.loader-bar span {
  transform-origin: left center;
}
.loader.loaded .loader-content {
  transform: translateY(-20px) scale(.98);
  opacity: 0;
  transition: transform .8s var(--ease), opacity .7s ease;
}

/* hero entrance */
.hero-introduction > *,
.hero-portrait,
.hero-top > *,
.hero-bottom > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s var(--ease), transform 1s var(--ease);
}
html.js-ready .hero.page-entered .hero-introduction > *:nth-child(1) { transition-delay: .15s; }
html.js-ready .hero.page-entered .hero-introduction > *:nth-child(2) { transition-delay: .28s; }
html.js-ready .hero.page-entered .hero-introduction > *:nth-child(3) { transition-delay: .4s; }
html.js-ready .hero.page-entered .hero-introduction > *:nth-child(4) { transition-delay: .52s; }
html.js-ready .hero.page-entered .hero-introduction > *:nth-child(5) { transition-delay: .64s; }
html.js-ready .hero.page-entered .hero-portrait { transition-delay: .36s; }
html.js-ready .hero.page-entered .hero-top > * { opacity: 1; transform: translateY(0); }
html.js-ready .hero.page-entered .hero-bottom > * { opacity: 1; transform: translateY(0); }
html.js-ready .hero.page-entered .hero-introduction > *,
html.js-ready .hero.page-entered .hero-portrait { opacity: 1; transform: translateY(0); }

.hero h1 {
  text-wrap: balance;
}

.hero h1 em,
.hero h1 strong,
.section-introduction h2 em,
.skills-heading h2 em,
.achievement-head h2 em,
.certification-head h2 em {
  position: relative;
}

.hero h1 em::after,
.hero h1 strong::after,
.section-introduction h2 em::after,
.skills-heading h2 em::after,
.achievement-head h2 em::after,
.certification-head h2 em::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.06em;
  width: 100%;
  height: .045em;
  transform: scaleX(0);
  transform-origin: right;
  background: currentColor;
  transition: transform .7s var(--ease);
}
.hero h1:hover em::after,
.hero h1:hover strong::after,
.section-introduction h2:hover em::after,
.skills-heading h2:hover em::after,
.achievement-head h2:hover em::after,
.certification-head h2:hover em::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* reveal is deeper than a simple fade */
.reveal {
  clip-path: inset(0 0 0 0);
  will-change: transform, opacity, clip-path;
}
.reveal:not(.visible) {
  clip-path: inset(0 0 18% 0);
}
.reveal.visible {
  clip-path: inset(0 0 0 0);
}

/* venture system */
.venture-grid {
  width: var(--container);
  margin: 14vh auto 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px;
}

.venture-card {
  position: relative;
  grid-column: span 6;
  min-width: 0;
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
}
.venture-card:last-child {
  grid-column: 3 / span 8;
}
.venture-number {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 5;
  color: rgba(243,240,233,.55);
  font-size: 9px;
  letter-spacing: .18em;
}
.venture-visual {
  position: relative;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-style: preserve-3d;
  background:
    radial-gradient(circle at 72% 20%, rgba(216,121,63,.32), transparent 24%),
    radial-gradient(circle at 20% 80%, rgba(101,85,111,.22), transparent 28%),
    linear-gradient(135deg, #29252c, #171719);
  box-shadow: 0 30px 100px rgba(0,0,0,.18);
}
.venture-visual::before,
.venture-visual::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(243,240,233,.12);
  border-radius: 50%;
  transition: transform 1.2s var(--ease);
}
.venture-visual::before { width: 72%; aspect-ratio: 1; }
.venture-visual::after { width: 42%; aspect-ratio: 1; border-color: rgba(216,121,63,.28); }
.venture-card:hover .venture-visual::before { transform: rotate(25deg) scale(1.08); }
.venture-card:hover .venture-visual::after { transform: rotate(-35deg) scale(.92); }
.venture-overline {
  position: relative;
  z-index: 2;
  margin-bottom: 24px;
  color: rgba(243,240,233,.55);
  font-size: 9px;
  letter-spacing: .2em;
}
.venture-wordmark {
  position: relative;
  z-index: 2;
  font-family: var(--display);
  font-size: clamp(80px, 10vw, 155px);
  font-weight: 800;
  letter-spacing: -.11em;
  line-height: .8;
  transition: transform .8s var(--ease), letter-spacing .8s var(--ease);
}
.venture-card:hover .venture-wordmark { transform: translateZ(45px) scale(1.04); letter-spacing: -.07em; }
.venture-symbol { position: relative; z-index: 2; margin-top: 30px; color: var(--orange); font-size: 24px; }
.venture-info {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 1.25fr auto;
  gap: 28px;
  align-items: end;
  width: calc(100% - 46px);
  margin: -65px auto 0;
  padding: 32px;
  background: rgba(250,248,243,.96);
  color: var(--ink);
  border: 1px solid rgba(23,23,25,.08);
  box-shadow: 0 25px 70px rgba(23,23,25,.13);
  backdrop-filter: blur(16px);
  transform: translateZ(35px);
  transition: transform .6s var(--ease), box-shadow .6s ease;
}
.venture-card:hover .venture-info { transform: translate3d(0,-8px,35px); box-shadow: 0 35px 90px rgba(23,23,25,.18); }
.venture-info h3 { margin-top: 9px; font-family: var(--display); font-size: 44px; line-height: .9; letter-spacing: -.07em; }
.venture-info p { color: var(--muted); font-size: 13px; line-height: 1.65; }
.venture-next .venture-visual { background: radial-gradient(circle at center, rgba(216,121,63,.22), transparent 28%), linear-gradient(135deg,#302a32,#171719); }
.next-orbit { position: relative; z-index: 2; width: 190px; height: 190px; display: grid; place-items: center; border: 1px solid rgba(243,240,233,.28); border-radius: 50%; animation: orbitFloat 7s ease-in-out infinite; }
.next-orbit::before,.next-orbit::after { content:""; position:absolute; border:1px solid rgba(216,121,63,.35); border-radius:50%; }
.next-orbit::before { inset: 24px; transform: rotate(35deg); }
.next-orbit::after { inset: -22px; transform: rotate(-35deg); }
.next-orbit span { color: var(--orange); font-size: 30px; animation: starPulse 2.6s ease-in-out infinite; }

@keyframes orbitFloat { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-16px) rotate(8deg)} }
@keyframes starPulse { 0%,100%{transform:scale(.8) rotate(0);opacity:.55} 50%{transform:scale(1.35) rotate(90deg);opacity:1} }

/* skills enhancement */
.section-support { max-width: 440px; margin-top: 38px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.skill { position: relative; grid-template-columns: 60px 1fr auto; align-items: center; overflow: hidden; }
.skill::before { content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:linear-gradient(90deg,var(--orange),transparent); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease); }
.skill:hover::before,.skill.is-hovered::before { transform:scaleX(1); }
.skill-arrow { opacity:.25; transform:translate(-8px,8px); transition:opacity .4s ease, transform .5s var(--ease); color:var(--orange); }
.skill:hover .skill-arrow,.skill.is-hovered .skill-arrow { opacity:1; transform:translate(0,0); }
.skill h3 { transition: transform .5s var(--ease); }
.skill:hover h3 { transform: translateX(7px); }

/* journey */
.journey { background: var(--ivory-light); }
.section-introduction.compact { margin-bottom: 0; }
.journey-timeline {
  position: relative;
  width: var(--container);
  margin: 12vh auto 0;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
}
.journey-timeline::before {
  content:""; position:absolute; left:4%; right:4%; top:22px; height:1px;
  background:linear-gradient(90deg,transparent,var(--orange),var(--violet),transparent);
}
.journey-card {
  position:relative;
  min-height:310px;
  padding:55px 28px 28px;
  border:1px solid var(--line);
  background:rgba(250,248,243,.72);
  transition:transform .6s var(--ease), border-color .4s ease, box-shadow .6s ease;
}
.journey-card:hover { transform:translateY(-12px); border-color:rgba(216,121,63,.45); box-shadow:0 30px 70px rgba(23,23,25,.09); }
.journey-icon { position:absolute; top:10px; left:24px; width:24px; height:24px; display:grid; place-items:center; border:1px solid var(--orange); border-radius:50%; background:var(--ivory-light); color:var(--orange); font-size:8px; z-index:2; }
.journey-tag { display:block; color:var(--violet); font-size:9px; font-weight:700; letter-spacing:.17em; }
.journey-card h3 { margin-top:24px; font-family:var(--display); font-size:24px; line-height:1.05; letter-spacing:-.04em; }
.journey-year { display:block; margin-top:12px; color:var(--orange); font-size:9px; letter-spacing:.15em; font-weight:700; }
.journey-card p { margin-top:24px; color:var(--muted); font-size:13px; line-height:1.65; }

/* achievements */
.achievements { background: var(--paper); }
.achievement-head,.certification-head { width:var(--container); margin:10vh auto 0; display:flex; align-items:end; justify-content:space-between; gap:30px; }
.achievement-head h2,.certification-head h2 { margin-top:35px; font-family:var(--display); font-size:clamp(58px,7vw,110px); line-height:.88; letter-spacing:-.085em; }
.achievement-head h2 em,.certification-head h2 em { color:var(--violet); font-family:var(--serif); font-weight:500; }
.achievement-note { color:var(--orange); font-size:9px; font-weight:700; letter-spacing:.16em; }
.achievement-grid { width:var(--container); margin:8vh auto 0; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.achievement { min-height:210px; padding:28px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .5s ease, transform .5s var(--ease); }
.achievement:hover { background:rgba(250,248,243,.65); transform:translateY(-5px); }
.achievement span { display:block; color:var(--orange); font-size:9px; letter-spacing:.14em; }
.achievement strong { display:block; margin-top:42px; font-family:var(--display); font-size:22px; letter-spacing:-.04em; }
.achievement p { margin-top:8px; color:var(--muted); font-size:12px; line-height:1.5; }

/* certifications */
.certifications { background:var(--ivory-light); }
.certification-grid { width:var(--container); margin:8vh auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.certificate { min-height:170px; padding:24px; display:flex; flex-direction:column; justify-content:space-between; background:rgba(250,248,243,.92); transition:background .45s ease, transform .5s var(--ease); }
.certificate:hover { background:var(--ink); color:var(--ivory); transform:translateY(-7px); }
.certificate span { color:var(--orange); font-size:9px; letter-spacing:.15em; }
.certificate strong { margin-top:30px; font-family:var(--display); font-size:17px; letter-spacing:-.025em; }
.certificate small { margin-top:6px; color:var(--muted); font-size:10px; }
.certificate:hover small { color:rgba(243,240,233,.55); }

/* philosophy movement */
.philosophy { overflow:hidden; }
.philosophy::before { content:""; position:absolute; width:45vw; height:45vw; border:1px solid rgba(243,240,233,.12); border-radius:50%; animation:philosophyOrbit 16s linear infinite; }
.philosophy::after { content:"✦"; position:absolute; right:9%; top:18%; color:var(--orange-soft); font-size:24px; animation:starPulse 3s ease-in-out infinite; }
@keyframes philosophyOrbit { from{transform:rotate(0deg) translateX(8px)} to{transform:rotate(360deg) translateX(8px)} }


/* contact becomes more alive */
.contact-background div { animation: contactOrbit 14s linear infinite; }
@keyframes contactOrbit { from{transform:rotate(0deg) scale(1)} 50%{transform:rotate(180deg) scale(1.06)} to{transform:rotate(360deg) scale(1)} }
.contact-links a span:last-child { transition:transform .5s var(--ease); }
.contact-links a:hover span:last-child { transform:translate(8px,-8px) rotate(8deg); }




/* responsive */
@media (max-width:1000px) {
  .venture-grid { width:100%; grid-template-columns:1fr; }
  .venture-card,.venture-card:last-child { grid-column:auto; }
  .journey-timeline { width:100%; grid-template-columns:repeat(2,1fr); }
  .journey-timeline::before { display:none; }
  .achievement-grid,.certification-grid { width:100%; }
  .venture-info { grid-template-columns:1fr 1fr; }
  .venture-info .project-link { grid-column:auto; }
}

@media (max-width:700px) {
  body::before { opacity:.025; }
  .venture-grid { margin-top:80px; gap:70px; }
  .venture-visual { min-height:390px; }
  .venture-info { width:calc(100% - 28px); margin-top:-45px; grid-template-columns:1fr; gap:20px; padding:24px; }
  .venture-info .project-link { width:100%; }
  .venture-wordmark { font-size:24vw; }
  .journey-timeline { grid-template-columns:1fr; margin-top:75px; }
  .journey-card { min-height:250px; }
  .achievement-head,.certification-head { width:100%; margin-top:70px; align-items:flex-start; flex-direction:column; }
  .achievement-grid,.certification-grid { grid-template-columns:1fr; margin-top:55px; }
  .achievement { min-height:180px; }
  .certificate { min-height:145px; }
  .skill { grid-template-columns:35px 1fr auto; gap:15px; }
  .skill p { padding-right:5px; }
  .next-orbit { width:145px; height:145px; }
  .section-support { font-size:13px; }
}

/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
/* =========================================================
   MOBILE SCROLL EXPERIENCE
   ========================================================= */

@media (max-width: 700px) {

  /*
     Base mobile motion state
  */

  .mobile-motion {
    opacity: 0;
    transform:
      translate3d(0, 45px, 0)
      scale(.97);

    filter: blur(3px);

    transition:
      opacity .9s cubic-bezier(.22,1,.36,1),
      transform 1s cubic-bezier(.22,1,.36,1),
      filter 1s cubic-bezier(.22,1,.36,1);

    transition-delay:
      var(--mobile-delay, 0ms);

    will-change:
      transform,
      opacity,
      filter;
  }


  /*
     Visible state
  */

  .mobile-motion.mobile-visible {

    opacity: 1;

    transform:
      translate3d(0,0,0)
      scale(1);

    filter: blur(0);

  }


  /*
     Stagger children inside larger blocks
  */

  .mobile-motion .venture-info,
  .mobile-motion .project-information {

    opacity: 0;

    transform:
      translate3d(0,30px,0);

    transition:
      opacity .8s cubic-bezier(.22,1,.36,1),
      transform .9s cubic-bezier(.22,1,.36,1);

    transition-delay: .16s;

  }


  .mobile-motion.mobile-visible .venture-info,
  .mobile-motion.mobile-visible .project-information {

    opacity: 1;

    transform:
      translate3d(0,0,0);

  }


  /*
     Venture visual cinematic reveal
  */

  .venture-card .venture-visual,
  .project-visual {

    transform:
      scale(.96)
      translate3d(0,20px,0);

    transition:
      transform 1.2s cubic-bezier(.22,1,.36,1),
      box-shadow 1s ease;

  }


  .venture-card.mobile-visible .venture-visual,
  .project.mobile-visible .project-visual {

    transform:
      scale(1)
      translate3d(0,0,0);

    box-shadow:
      0 30px 80px rgba(23,23,25,.18);

  }


  /*
     Venture circles continuously breathe
  */

  .venture-visual::before {

    animation:
      mobileOrbitOne 8s ease-in-out infinite;

  }


  .venture-visual::after {

    animation:
      mobileOrbitTwo 6s ease-in-out infinite;

  }


  @keyframes mobileOrbitOne {

    0%,100% {
      transform:
        rotate(0deg)
        scale(1);
    }

    50% {
      transform:
        rotate(12deg)
        scale(1.045);
    }

  }


  @keyframes mobileOrbitTwo {

    0%,100% {
      transform:
        rotate(0deg)
        scale(1);
    }

    50% {
      transform:
        rotate(-18deg)
        scale(.94);
    }

  }


  /*
     Wordmark movement
  */

  .venture-wordmark {

    animation:
      mobileWordmarkFloat 5s ease-in-out infinite;

  }


  @keyframes mobileWordmarkFloat {

    0%,100% {
      transform:
        translate3d(0,0,0);
    }

    50% {
      transform:
        translate3d(0,-7px,0);
    }

  }


  /*
     Journey cards
  */

  .journey-card {

    transform:
      translate3d(0,35px,0)
      scale(.97);

    opacity: 0;

    transition:
      transform .9s cubic-bezier(.22,1,.36,1),
      opacity .8s ease,
      box-shadow .7s ease;

  }


  .journey-card.mobile-visible {

    transform:
      translate3d(0,0,0)
      scale(1);

    opacity: 1;

  }


  /*
     Achievement cards
  */

  .achievement {

    transform:
      translate3d(0,30px,0)
      scale(.97);

    opacity: 0;

    transition:
      transform .8s cubic-bezier(.22,1,.36,1),
      opacity .7s ease;

  }


  .achievement.mobile-visible {

    transform:
      translate3d(0,0,0)
      scale(1);

    opacity: 1;

  }


  /*
     Certificate cards
  */

  .certificate {

    transform:
      translate3d(0,30px,0)
      scale(.97);

    opacity: 0;

    transition:
      transform .8s cubic-bezier(.22,1,.36,1),
      opacity .7s ease;

  }


  .certificate.mobile-visible {

    transform:
      translate3d(0,0,0)
      scale(1);

    opacity: 1;

  }


  /*
     Skills

     Each skill slides in slightly from the side.
  */

  .skill {

    opacity: 0;

    transform:
      translate3d(-25px,0,0);

    transition:
      opacity .8s ease,
      transform .8s cubic-bezier(.22,1,.36,1);

  }


  .skill.mobile-visible {

    opacity: 1;

    transform:
      translate3d(0,0,0);

  }


  /*
     Skill orange line
  */

  .skill::before {

    transform:
      scaleX(0);

    transform-origin:
      left center;

    transition:
      transform 1s cubic-bezier(.22,1,.36,1);

  }


  .skill.mobile-visible::before {

    transform:
      scaleX(1);

  }


  /*
     Hero image

     Scroll movement is handled by JS.
     This keeps the image smooth instead of
     fighting with the existing hover transform.
  */

  .portrait-frame {

    overflow: hidden;

    transform:
      translateZ(0);

  }


  .portrait-frame img {

    will-change:
      transform;

  }


  /*
     Hero glow animation
  */

  .hero-glow-one,
  .hero-glow-two {

    will-change:
      transform;

  }


  /*
     Hero grid slowly breathes
  */

  .hero-grid {

    animation:
      mobileGridPulse 8s ease-in-out infinite;

  }


  @keyframes mobileGridPulse {

    0%,100% {
      opacity: .22;
    }

    50% {
      opacity: .34;
    }

  }


  /*
     Touch interaction
  */

  .mobile-touch-active {

    transform:
      scale(.985) !important;

    transition:
      transform .18s ease !important;

  }


  /*
     Mobile project information
  */

  .project-information {

    box-shadow:
      0 25px 65px rgba(23,23,25,.12);

    transition:
      transform .8s cubic-bezier(.22,1,.36,1),
      box-shadow .8s ease;

  }


  /*
     Contact entrance
  */

  .contact-inner > * {

    will-change:
      transform,
      opacity;

  }


  /*
     Mobile marquee stays smooth
  */

  .marquee-track {

    will-change:
      transform;

  }


  /*
     Slight section depth
  */

  .section {

    transform:
      translateZ(0);

  }


  /*
     Don't allow hover rules to interfere
     with touch devices.
  */

  .venture-card:hover,
  .journey-card:hover,
  .achievement:hover,
  .certificate:hover {

    transform:
      none;

  }


  /*
     Performance
  */

  .venture-visual,
  .venture-info,
  .journey-card,
  .achievement,
  .certificate,
  .skill,
  .project-visual,
  .project-information {

    backface-visibility:
      hidden;

    -webkit-backface-visibility:
      hidden;

  }

}


/* =========================================================
   MOBILE REDUCED MOTION
   ========================================================= */

@media (max-width: 700px) and
       (prefers-reduced-motion: reduce) {

  .mobile-motion,
  .journey-card,
  .achievement,
  .certificate,
  .skill {

    opacity: 1 !important;

    transform:
      none !important;

    filter:
      none !important;

    transition:
      none !important;

    animation:
      none !important;

  }

}