/*
This file controls the styling of the interactive studio section
of my portfolio.
The studio represents my creative workspace and was designed as
a physical metaphor for my design process.
Instead of presenting my background as a traditional biography,
I created interactive objects that represent different parts of
my identity, including art, design, coding, education, and career
interests.
This file controls the layout, object positioning, interactions,
and responsive behaviour of this experience.
*/

/* ..... CREATIVE STUDIO ENVIRONMENT ..... */
/*
I created this section as an interactive workspace because my
creative process is connected to physical making and exploration.
The sticky layout allows users to explore the workspace while
scrolling creates a transition toward my projects exhibition.
*/
.studio-section {
  min-height: 180vh;

  background:
    linear-gradient(to bottom,
      #ffffff 0%,
      #ffffff 60%,
      #f7f7f7 75%,
      #eeeeee 76%,
      #ffffff 100%);
}

/*
The room uses a fixed viewport area because I wanted the objects
to feel like they exist inside one physical space.
The user explores the workspace first before moving toward the
project section.
*/
.studio-room {
  position: sticky;
  top: 0;

  width: 100%;
  height: 100vh;

  overflow: hidden;
}

.studio-intro {
  position: absolute;
  left: 4%;
  top: 7%;
  z-index: 5;

  width: min(24rem, 28vw);
  pointer-events: none;
}

.studio-intro p {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .55;
}

.studio-intro h2 {
  margin: 0;
  font-size: 2.5rem;
  line-height: .88;
  letter-spacing: -.08em;
}

.studio-intro span {
  display: block;
  margin-top: 1.2rem;
  max-width: 18rem;

  font-family: var(--font-elegant);
  font-size: 1.25rem;
  line-height: 1.25;
}

/* ..... CREATIVE DESK COMPOSITION ..... */
/*
The desk acts as the centre of the studio experience.
Originally I considered presenting my skills as separate text
sections but I changed this into physical objects because it
better represents how I work through making
and building.
*/
.desk-group {
  position: absolute;
  width: 35%;
  left: 48%;
  bottom: -5%;
  transform:
    translateX(-50%) translateX(var(--studio-desk-shift, 0vw));

  transition: transform .08s linear;
}

.desk-image {
  width: 100%;
  display: block;
  z-index: 1;
}

/* ..... ART PRACTICE OBJECT ..... */
/*
The canvas represents my background in traditional art and how
handmade processes influence my digital design work.
The hover effect was added to make the object feel interactive
rather than just decorative and show an art.
*/
.studio-canvas {
  position: absolute;
  width: 65%;
  right: 75%;
  bottom: 12%;
  border: 0;
  background: transparent;
  z-index: 3;
}

.studio-canvas img {
  width: 100%;
  display: block;
  transition: transform .25s ease, filter .25s ease;
}

.studio-canvas:hover img {
  transform: scale(1.03);
  filter: drop-shadow(0 1rem 1.2rem rgba(0, 0, 0, .12));
}

/* ..... DESIGN PROCESS OBJECT ..... */
/*
The board represents my design thinking process including
planning, ideation, and visual organization.
I used individual objects instead of a simple skills list because
I wanted visitors to discover information naturally like i actullay usually make design boards.
*/
.studio-board {
  position: absolute;
  width: 55%;
  left: 32.5%;
  top: -5%;
  z-index: 10;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: none;
  z-index: 3;
}

.studio-board img {
  width: 100%;
  display: block;
  transition:
    transform .25s ease,
    filter .25s ease;
}

.studio-board:hover img {
  transform: scale(1.03);
  filter:
    drop-shadow(0 1rem 1.2rem rgba(0, 0, 0, .12));
}

/* ..... DEVELOPMENT OBJECT ..... */
/*
The laptop represents the technical side of my work.
It connects my coding skills with my design practice instead of
presenting development as a separate discipline.
*/
.studio-laptop {
  position: absolute;
  width: 20%;
  left: 50%;
  bottom: 55%;
  z-index: 2;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: none;
}

.studio-laptop img {
  width: 100%;
  display: block;
  transition:
    transform .25s ease,
    filter .25s ease;
}

.studio-laptop:hover img {
  transform: scale(1.03);
  filter:
    drop-shadow(0 1rem 1.2rem rgba(0, 0, 0, .12));
}

/* ..... EDUCATION OBJECT ..... */
/*
The education object was included to show my academic background
inside the creative environment.
I wanted education to feel like part of my journey rather than
a separate resume section.
*/
.studio-education {
  position: absolute;
  width: 25%;
  left: 95%;
  bottom: 5%;
  z-index: 4;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: none;
}

.studio-education img {
  width: 100%;
  display: block;

  transition:
    transform .25s ease,
    filter .25s ease;
}

.studio-education:hover img {
  transform: scale(1.15);
  filter:
    drop-shadow(0 1rem 1.2rem rgba(0, 0, 0, .12));
}

/* ..... CAREER INTEREST OBJECT ..... */
/*
The chair represents future directions and career interests.
Instead of defining one fixed role, it communicates the different
areas where I want to combine design, technology, and interaction.
*/
.studio-chair {
  position: absolute;
  width: 30%;
  right: 5%;
  bottom: 15%;
  z-index: 5;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: none;
}

.studio-chair img {
  width: 100%;
  display: block;

  transition:
    transform .25s ease,
    filter .25s ease;
}

.studio-chair:hover img {
  transform: scale(1.08);

  filter:
    drop-shadow(0 1rem 1.2rem rgba(0, 0, 0, .12));
}

/* ..... INFORMATION REVEAL SYSTEM ..... */
/*
The information card was created to avoid overwhelming users with
text immediately.
Content appears only when users interact with an object, allowing
the workspace itself to remain the main visual focus.
*/
.studio-info-card {
  position: absolute;
  width: min(22rem, 30vw);
  right: 4%;
  top: 12%;
  padding: clamp(1rem, 1.6vw, 1.4rem);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(1rem);
  border: .06rem solid rgba(36, 36, 36, .08);
  box-shadow: var(--shadow-frame);
  opacity: 0;
  transform: translateY(.7rem);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 20;
}

.studio-info-card.show {
  opacity: 1;
  transform: translateY(0);
}

.studio-info-card h2 {
  margin: 0 0 .7rem;
  font-size: 1.25rem;
}

.studio-info-card p {
  margin: 0 0 .55rem;
  font-family: var(--font-elegant);
  font-size: clamp(.9rem, 1.1vw, 1.05rem);
  line-height: 1.25;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.skill-tags span {
  padding: .45rem .75rem;
  background: rgba(36, 36, 36, .05);
  font-family: var(--font-elegant);
  font-size: .8rem;
  font-weight: 500;
  border-radius: 999rem;
}


/* ..... OBJECT DISCOVERY LABELS ..... */
/*
The labels provide clarity without removing the discovery aspect.
I didnt have it origonally but added it to take away from feeling 
off loss but keep the discovery.
I wanted users to understand what each object represents while
still encouraging interaction.
*/
.studio-label {
  position: absolute;
  z-index: 15;

  color: #242424;

  font-size: clamp(.62rem, .75vw, .82rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;

  white-space: nowrap;
  pointer-events: none;

  opacity: .7;

  transition:
    opacity .25s ease,
    transform .25s ease;
}


/* Laptop label */
.studio-label-laptop {
  left: 60%;
  bottom: 68%;

  transform: translateX(-50%);
}

/* Canvas label */
.studio-label-canvas {
  right: 93%;
  bottom: 72%;

  transform: translateX(50%);
}

/* Board label */
.studio-label-board {
  left: 60%;
  top: -7%;

  transform: translateX(-50%);
}

/* Education label */
.studio-label-education {
  left: 109%;
  bottom: 28%;

  transform: translateX(-50%);
}

/* Chair label */
.studio-label-chair {
  right: 18%;
  bottom: 11%;

  transform: translateX(50%);
}

/* Label hover emphasis */
.desk-group:has(.studio-laptop:hover) .studio-label-laptop,
.desk-group:has(.studio-canvas:hover) .studio-label-canvas,
.desk-group:has(.studio-board:hover) .studio-label-board,
.desk-group:has(.studio-education:hover) .studio-label-education,
.desk-group:has(.studio-chair:hover) .studio-label-chair {
  opacity: 1;
}

/* ..... PROJECT EXHIBITION TRANSITION ..... */
/*
The direction stand acts like a physical sign inside an exhibition.
Instead of using a normal navigation button, I created a transition
object that guides users from learning about me into exploring my work.
*/
.studio-direction {
  position: absolute;
  right: clamp(4rem, 10vw, 10rem);
  bottom: 1%;
  z-index: 12;

  width: clamp(10rem, 20vw, 12rem);
  aspect-ratio: 1 / 2;

  color: #242424;
  text-decoration: none;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translateX(var(--studio-sign-shift, 30vw)) scale(.96);

  transition:
    transform .08s linear,
    opacity .2s ease,
    visibility .2s ease,
    filter .25s ease;
}

.studio-direction.show {
  visibility: visible;
  pointer-events: auto;
}

.direction-image {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  transition:
    opacity .25s ease,
    transform .25s ease;
}

.direction-normal {
  opacity: 1;
}

.direction-hover {
  opacity: 0;
}

.studio-direction:hover .direction-normal,
.studio-direction:focus-visible .direction-normal {
  opacity: 0;
}

.studio-direction:hover .direction-hover,
.studio-direction:focus-visible .direction-hover {
  opacity: 1;
}

.studio-direction:hover,
.studio-direction:focus-visible {
  filter: drop-shadow(0 .8rem .8rem rgba(0, 0, 0, .15));
}

.studio-direction:hover .direction-image,
.studio-direction:focus-visible .direction-image {
  transform: scale(1.04);
}

.studio-direction span {
  position: absolute;
  top: 18%;
  left: 50%;
  z-index: 3;

  width: 50%;

  transform: translateX(-50%);

  color: #242424;

  font-size: 1rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;

  pointer-events: none;
}

/* ..... FEATURED PROJECT CONNECTION ..... */
/*
Featured projects were added after feedback that visitors should
quickly understand my strongest work. I wish i made it into not buttons like but more artistic
but with time constraint i had to do it this way.
The cards provide direct access to important projects while keeping
the exhibition experience as the main navigation.
Also if someone is looking for a quick way to discover they dont care about the very detailed look.
*/
.studio-featured {

  position: absolute;

  right: clamp(15rem, 25vw, 28rem);
  bottom: 12%;

  width: 15rem;

  display: flex;
  flex-direction: column;
  gap: .8rem;

  z-index: 13;

  opacity: 0;

  transform: translateY(1rem);

  pointer-events: none;

  transition:
    opacity .4s ease,
    transform .4s ease;
}



.studio-featured h2 {

  margin: 0;

  font-size: 1.3rem;

  line-height: 1;
}



/* Small project card */

.featured-project {


  display: block;

  padding: .7rem 1rem;

  background:
    rgba(255, 255, 255, .8);

  border:
    .06rem solid rgba(36, 36, 36, .1);

  box-shadow: var(--shadow-frame);
  align-items: center;

  gap: .7rem;

  text-decoration: none;

  color: var(--text);

  transition:
    transform .25s ease;
}


.featured-project:hover {

  transform:
    translateY(-.2rem);
}




.featured-text h3 {

  margin: 0;

  font-size: .95rem;

}



.featured-text p {

  margin: .15rem 0 0;

  font-family: var(--font-elegant);

  font-size: .75rem;

  line-height: 1.1;

}

.studio-featured.show {

  opacity: 1;

  transform:
    translateY(0) translateX(0);

  pointer-events: auto;

}


.studio-featured h2 {

  margin: 0;

  font-family: var(--font-main);

  font-size: clamp(1.5rem, 2vw, 2rem);

  line-height: .9;

}


.featured-project:hover {

  transform: translateY(-.3rem);

  background: rgba(255, 255, 255, .95);

}

.featured-project img {

  width: 4rem;
  height: 4rem;

  object-fit: cover;

}

.featured-project h3 {

  margin: 0 0 .2rem;

  font-size: 1rem;

}

.featured-project p {

  margin: 0;

  font-family: var(--font-elegant);

  font-size: .85rem;

  line-height: 1.2;

}

.studio-direction:focus-visible {

outline: .15rem solid #242424;
outline-offset: .5rem;

}

/* ..... RESPONSIVE STUDIO ADAPTATION ..... */
/*
Because the studio is built from many positioned objects, responsive
design required adjusting the composition rather than simply scaling
everything down.
The goal was to keep the workspace understandable and interactive
on smaller screens.
*/
@media(max-width:48rem) {

  .studio-featured {

    left: 1rem;

    bottom: 7%;

    width: min(50vw, 18rem);

}
.featured-project {
  background:
    rgba(255, 255, 255, 0.95);
}

  .studio-section {
    background:
      linear-gradient(to bottom,
        #ffffff 0%,
        #ffffff 68%,
        #f7f7f7 78%,
        #eeeeee 79%,
        #ffffff 100%);
  }

  .studio-intro h2 {

font-size:1.5rem;

}

  .desk-group {
    width: 60%;
  }

  .desk-group {
    bottom: 3%;
  }

  .studio-label {
    font-size: clamp(.52rem, 1.8vw, .65rem);
  }

  .studio-direction {
    right: 1rem;
    width: clamp(6rem, 22vw, 8rem);
  }

  .studio-direction span {
    font-size: clamp(.6rem, 2.2vw, .8rem);
  }


  .studio-info-card {

    top: 10%;
    left: 50%;
    right: auto;

    width: min(90vw, 22rem);

    transform:
      translate(-50%, .7rem);

  }


  .studio-info-card.show {

    transform:
      translate(-50%, 0);

  }
}

@media (max-width: 75rem) {

  .studio-section {
    background:
      linear-gradient(to bottom,
        #ffffff 0%,
        #ffffff 68%,
        #f7f7f7 78%,
        #eeeeee 79%,
        #ffffff 100%);
  }

  .desk-group {
    width: 50%;
  }

  .desk-group {
    bottom: 0;
  }
}