/* Creative-tech composition and motion, layered over the existing content. */
html[data-theme="light"], [data-theme="light"] {
  --bg-color: #faf8f5; --clr-bg: #faf8f5; --clr-text: #25221f; --text-white: #25221f;
  --clr-primary: #805f47; --accent-mint: #805f47; --clr-purple: #805f47; --accent-purple: #805f47;
  --text-gray: #71675e; --clr-text-subtle: #62584f; --glass-bg: #f0e9e1;
  --glass-border: #e3d9cf; --header-bg: #fffffff0; --header-bg-scroll: #fffffff5;
  --hero-tint: #e8d8c6; --neon: #e8d8c6; --sculpture: #b69373; --coral: #997455; --mint-tint: #eee3d7;
}
html[data-theme="dark"], [data-theme="dark"] {
  --bg-color: #1c1916; --clr-bg: #1c1916; --clr-text: #faf6f1; --text-white: #faf6f1;
  --clr-primary: #d5b799; --accent-mint: #d5b799; --clr-purple: #d5b799; --accent-purple: #d5b799;
  --text-gray: #bbafa3; --clr-text-subtle: #d1c5b8; --glass-bg: #2a241f;
  --glass-border: #44382f; --header-bg: #211c18ed; --header-bg-scroll: #211c18f5;
  --hero-tint: #49392b; --neon: #dbc3a9; --sculpture: #c09c79; --coral: #c09c79; --mint-tint: #49392b;
}
.header { top: 16px; left: 24px; right: 24px; width: auto; border: 1px solid var(--glass-border); border-radius: 22px; backdrop-filter: blur(18px); }
.header.scroll-header { box-shadow: 0 8px 35px #20193712; }
.nav { height: 72px; }
.home { flex-direction: column; padding-top: 150px; padding-bottom: 65px; min-height: 820px; background: var(--bg-color); isolation: isolate; }
.hero-grid { position: absolute; inset: 0; z-index: -1; opacity: .28; background-image: linear-gradient(var(--glass-border) 1px, transparent 1px),linear-gradient(90deg,var(--glass-border) 1px,transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(90deg,transparent 30%,#000); }
.home__container { width: 100%; grid-template-columns: 1.35fr 1fr; gap: 45px; }
.home__title { font-size: clamp(55px,6.8vw,92px); font-weight: 550; line-height: .99; letter-spacing: -5px; }
.home__title em { font-weight: 700; letter-spacing: -5px; position: relative; }
.home__title em::after { content: none; }
.home__desc { margin-top: 12px; max-width: 440px; }
.home__eyebrow { letter-spacing: 2px; }
.status-badge { background: var(--neon); color: #493525; border: 0; rotate: 0deg; padding: 8px 15px; }
.status-light { background: #805f47; }
.button { border-radius: 999px; padding: 16px 25px; transition: translate .2s ease, box-shadow .3s ease, background .3s ease; }
.button:hover { box-shadow: 0 10px 28px #563b2520; }
.home__expertise { border: 0; gap: 8px; margin-top: 27px; padding-top: 8px; }
.home__expertise span { border: 1px solid var(--glass-border); border-radius: 30px; padding: 6px 10px; background: var(--bg-color); }
.home__visual { perspective: 1100px; padding: 20px; }
.hero-portrait-card { height: 440px; transform: rotate(-5deg) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)); transition: transform .25s ease-out; }
.hero-portrait-card::before { border-radius: 150px 150px 32px 32px; background: var(--neon); rotate: 7deg; inset: 14px -12px -15px 12px; }
.hero-portrait-card::after { display: none; }
.portrait-frame { border-radius: 150px 150px 32px 32px; border: 5px solid var(--bg-color); box-shadow: 0 25px 60px #39237525; }
.portrait-img { object-position: center 25%; }
.visual__label { margin-bottom: 22px; }
.visual__caption { margin-top: 24px; }
.badge-top { right: -28px; top: 50px; rotate: 8deg; background: var(--neon); color: #283714; }
.badge-top span,.badge-top i { color: #283714; }
.badge-bottom { left: -30px; bottom: 22px; rotate: 5deg; }
.orbit-sculpture { position: absolute; width: 150px; height: 150px; right: -28px; bottom: -50px; z-index: 5; transform-style: preserve-3d; animation: sculpture-turn 13s linear infinite; pointer-events: none; }
.orbit-sculpture span { position: absolute; inset: 12px; border: 17px solid var(--sculpture); border-radius: 50%; box-shadow: inset 4px 4px 6px #ffffff80, 4px 5px 6px #35156850; }
.orbit-sculpture span:nth-child(2) { transform: rotateY(65deg); }
.orbit-sculpture span:nth-child(3) { transform: rotateX(65deg); }
@keyframes sculpture-turn { from { transform: rotateX(20deg) rotateY(0deg) rotateZ(-20deg); } to { transform: rotateX(20deg) rotateY(360deg) rotateZ(-20deg); } }
.scroll-cue { display: flex; align-items: center; gap: 16px; width: fit-content; margin: 46px auto 0; color: var(--text-gray); font: 10px monospace; letter-spacing: 2px; }
.scroll-cue > :last-child { display: grid; place-items: center; border: 1px solid var(--glass-border); border-radius: 50%; width: 35px; height: 35px; font-size: 18px; animation: editorial-float 2s ease-in-out infinite; }
.tech-marquee-section { background: var(--glass-bg); color: var(--clr-text); border-block: 1px solid var(--glass-border); rotate: 0deg; width: 100%; margin-left: 0; padding: 22px 0; }
.tech-marquee-section .stack-label, .tech-marquee-section #motion-toggle,.tech-item { color: var(--text-gray); }
.tech-item { font-size: 16px; }
.tech-item i { font-size: 28px; }
.section:not(.home) { padding-top: 105px; }
.section__title { font-size: clamp(34px,4vw,53px); letter-spacing: -2px; font-weight: 550; }
.section__subtitle { margin-top: 12px; }
.project__card { border-radius: 24px; }
.projects__grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 42px; align-items: start; }
.project-item { border: 0; border-radius: 24px; background: var(--glass-bg); }
.project-item:nth-child(2) { margin-top: 110px; }
.project-item:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; }
.project-item__img-box { height: 300px; }
.project-item:nth-child(3) .project-item__preview,.project-item:nth-child(3) .project-item__img-box { height: 100%; min-height: 330px; }
.project-item__body { padding: 30px; }
.project-item__title { font-size: 27px; }
.project-item__badge { border-radius: 30px; }
.project-item__footer .button { border-radius: 0; }
.project-item__footer { flex-wrap: wrap; gap: 16px; }
.project-source-status { display: inline-flex; align-items: center; gap: 7px; color: var(--text-gray); font-size: 11px; line-height: 1.5; }
.project-source-status i { font-size: 18px; flex-shrink: 0; }
.skill-bento { gap: 0; border-top: 1px solid var(--glass-border); }
.bento-item { border: 0; border-bottom: 1px solid var(--glass-border); border-radius: 0; background: transparent; padding: 35px 25px; transition: background .3s ease, transform .3s ease; }
.bento-item:hover { background: var(--hero-tint); transform: translateY(-12px); }
.bento-card,.book__content { border-radius: 24px; }
.book__content { background: var(--hero-tint); }
.book__img { rotate: -6deg; transition: rotate .5s ease; }
.book__content:hover .book__img { rotate: 0deg; }
.contact { border-radius: 48px 48px 0 0; background: var(--hero-tint); }
.contact .section__title { font-size: clamp(48px,7vw,88px); }
.contact__form { background: transparent; }
.contact__input { border-radius: 15px; }
.reading-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: var(--clr-primary); transform: scaleX(var(--read-progress,0)); transform-origin: left; z-index: 2000; }
.cursor-halo { display: none; }
.reveal-ready { transform: translateY(70px) scale(.97); transition: opacity .85s ease,transform .85s cubic-bezier(.16,1,.3,1); }
@media (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .cursor-halo { display: block; position: fixed; top: 0; left: 0; width: 34px; height: 34px; border: 1px solid var(--clr-primary); border-radius: 50%; pointer-events: none; z-index: 3000; opacity: 0; translate: -50% -50%; transition: width .2s,height .2s,opacity .2s,background .2s; }
  .cursor-halo.cursor-active { opacity: .7; }
  .cursor-halo.cursor-hover { width: 66px; height: 66px; background: #b6937320; }
}
@media (max-width: 900px) {
  .home__title { font-size: 60px; letter-spacing: -3px; }
  .home__title em { letter-spacing: -3px; }
  .home__visual { padding: 10px; }
}
@media (max-width:768px) {
  .header { top: 10px; left: 12px; right: 12px; border-radius: 18px; }
  .nav { height: 62px; padding-inline: 15px; }
  .nav__menu { border-radius: 18px; }
  .home { padding-top: 120px; min-height: 0; padding-bottom: 50px; }
  .home__container { grid-template-columns: 1fr; gap: 42px; }
  .home__title { font-size: clamp(52px,10vw,72px); }
  .home__visual { width: calc(100% - 26px); }
  .hero-portrait-card { height: 400px; }
  .orbit-sculpture { width: 110px; height: 110px; right: -14px; }
  .orbit-sculpture span { border-width: 12px; }
  .badge-top { right: -17px; }
  .badge-bottom { left: -17px; }
  .projects__grid { grid-template-columns: 1fr; gap: 30px; }
  .project-item:nth-child(2) { margin-top: 0; }
  .project-item:nth-child(3) { display: flex; }
  .project-item:nth-child(3) .project-item__img-box { height: 260px; min-height: 0; }
  .project-item__img-box { height: 260px; }
  .section:not(.home) { padding-top: 70px; }
  .tech-marquee-section { rotate: 0deg; }
}
html.motion-paused .cursor-halo { display: none; }
html.motion-paused .hero-portrait-card { transform: none; }
@media (prefers-reduced-motion:reduce) {
  .reveal-ready { opacity: 1; transform: none; }
  .hero-portrait-card { transform: none; }
}

/* Upright portrait with a compact information column, inspired by the supplied layout. */
.hero-grid { display: none; }
.home__visual { padding: 0; perspective: none; }
.hero-portrait-card { display: grid; grid-template-columns: minmax(115px,.65fr) minmax(0,1.35fr); grid-template-rows: 1fr 1fr; gap: 12px; height: 400px; transform: none; }
.hero-portrait-card::before, .orbit-sculpture { display: none; }
.portrait-frame { grid-column: 2; grid-row: 1 / 3; border-radius: 22px; border: 0; box-shadow: none; }
.portrait-img { object-position: center; }
.portrait-badge { position: relative; inset: auto; rotate: none; animation: none; margin: 0; padding: 20px 15px; border: 1px solid var(--glass-border); border-radius: 22px; box-shadow: none; background: var(--glass-bg); }
.badge-top { grid-column: 1; grid-row: 1; flex-direction: column; justify-content: center; gap: 16px; }
.badge-top i { font-size: 42px; }
.badge-top span,.badge-top i { color: var(--clr-text); }
.badge-bottom { grid-column: 1; grid-row: 2; flex-direction: column; justify-content: center; gap: 18px; background: var(--hero-tint); }
.badge-text { text-align: center; }
.badge-text strong { font-size: 25px; color: var(--clr-text); }
.visual__caption { margin-top: 0; padding: 20px; border-radius: 16px; background: var(--glass-bg); align-items: center; gap: 12px; }
.visual__label { margin-bottom: 6px; }
.home__buttons .button { background: #26221f; color: #fff; border-color: #26221f; box-shadow: none; }
html[data-theme="dark"] .home__buttons .button { background: #f5ede4; color: #26221f; border-color: #f5ede4; }
.tech-item i { filter: grayscale(1); }
.area-net .icon-box { color: var(--clr-primary); }
/* Native media proportions share a height without letterboxing or cropping. */
.project__card {
  grid-template-columns: minmax(0, .656431fr) minmax(0, .5625fr) minmax(280px, 1fr);
  align-items: stretch;
  gap: 0;
}
.project__media { height: auto; background: transparent; display: flex; align-items: flex-start; }
.project__img, .project__video {
  width: 100%; height: auto; max-height: none; border-radius: 0; object-fit: contain;
}
.project__info { grid-column: auto; padding: clamp(22px, 3vw, 42px); justify-content: center; }
.project__title { font-size: 30px; letter-spacing: -.8px; }
.project__description { font-size: 14px; line-height: 1.85; }
/* Oversized fading section titles; the same treatment applies across languages. */
.section__title, .contact .section__title {
  font-size: clamp(42px, 6.4vw, 84px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.055em;
  text-transform: uppercase;
  background-image: linear-gradient(180deg, var(--clr-text) 5%, var(--clr-text) 20%, transparent 95%);
  background-size: 100% 160%;
  background-position: 0 0;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  transition: background-position .6s ease;
  padding-block: 4px;
}
.section__title span, .section__title .gradient-text { color: inherit; background: none; filter: none; }
.section__title:hover, .section:focus-within .section__title { background-position: 0 100%; }
.marquee-track, .marquee-track:hover { animation: tools-flow 38s linear infinite; animation-play-state: running; }
.tech-item { flex: 0 0 auto; }
@keyframes tools-flow { to { transform: translateX(calc(-50% - 15px)); } }
.project-item__img { object-fit: contain; background: #e9dfd2; }
.project-item:hover .project-item__img { transform: none; }
.section__subtitle { color: var(--text-gray); }
@media (max-width: 1000px) {
  .project__card { grid-template-columns: minmax(0, .656431fr) minmax(0, .5625fr); }
  .project__info { grid-column: 1 / -1; }
}
@media (max-width:768px) {
  .home__visual { width: 100%; }
  .hero-portrait-card { height: 340px; grid-template-columns: minmax(100px,.6fr) minmax(0,1.4fr); gap: 10px; }
  .portrait-badge { padding: 15px 10px; }
  .badge-text strong { font-size: 23px; }
  .section__title, .contact .section__title { font-size: clamp(34px, 8.7vw, 62px); overflow-wrap: anywhere; }
  .project__info { padding: 24px; }
  .project__title { font-size: 25px; }
  .project-item__body { padding: 22px; }
  .project-item__title { font-size: 23px; }
  .project-item__img-box, .project-item:nth-child(3) .project-item__img-box { height: auto; aspect-ratio: 8 / 5; }
  .project-item__img { height: 100%; }
  .tech-marquee { min-height: 42px; }
  .tech-item { font-size: 13px; }
  .tech-item i { font-size: 23px; }
}
@media (hover:none) { .section__title, .contact .section__title { background-position: 0 65%; } }