html,
body.branches-room {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body.branches-room {
  margin: 0;
  background: #090807;
  color: var(--color-text);
  font-family: var(--font-sans);
}

body.branches-room::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 50% 42%, rgba(78, 88, 58, .16), transparent 32%),
    #090807;
  pointer-events: none;
}

body.branches-room::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  background-image: url("../../assets/materials/grain-from-film.webp");
  background-size: 900px 900px;
  opacity: .07;
  pointer-events: none;
}

.awakening {
  min-height: 100svh;
}

.awakening-stage {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(255,255,255,.012)
    );
  overflow: hidden;
}

.awakening-stage::before{

    content:"";

    position:absolute;
    inset:0;

    background-image:
        url("../../assets/materials/branches-glass.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    opacity: 0.22;
    filter: contrast(.55) saturate(.35) brightness(.88);

    mix-blend-mode:normal;

    pointer-events:none;

    z-index:1;

     animation: 
        glassDrift 70s ease-in-out infinite alternate,
        glassClear 4s ease forwards;
}

.logo-stack,
.awakening-title {
  position: relative;
  z-index: 2;
}

.logo-stack {
  position: relative;

    width: clamp(300px, 38vw, 430px);
    aspect-ratio: 1;

     margin-bottom: 2rem;

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

.logo-stack::before {

    content: "";

    position: absolute;

    width: 66%;
    aspect-ratio: 1;

    border-radius: 50%;

    background: 
      radial-gradient(
    circle,
    #f5f3ef 0%,
    #efebe4 82%,
    #e7e1d8 100%
  );
    box-shadow: 
     0 0 22px rgba(255,255,255,.05),
    inset 0 1px 2px rgba(255,255,255,.35),
    inset 0 -2px 8px rgba(0,0,0,.05);
    z-index: 0;

     animation:
        medallionBreath 24s ease-in-out infinite alternate;
}

.logo-stack img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 2;
}

.logo-outline {
  z-index: 3;
  opacity: 1;
  filter: none;
  animation: outlineSettle 2400ms var(--ease-gallery) 700ms forwards;
}

.logo-stack:hover{

    transform:translateY(-2px);

    transition:
        transform .8s ease;

}

.logo-color {
  z-index: 2;
  opacity: 0;
  animation: colorFade 2400ms var(--ease-gallery) 700ms forwards;
}

@keyframes vreelAwaken {
   0% {
    opacity: 0;
    filter: saturate(.7) brightness(.8);
  }

  100% {
    opacity: 1;
    filter: saturate(1) brightness(1);
  }
}
@keyframes colorFade {
  to {
    opacity: 1;
  }
}

.awakening-title {
  position:relative;
  z-index:2;
  margin-top: 1.5rem;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  animation: titleReveal 900ms var(--ease-gallery) 3100ms forwards;
}

.awakening-title h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 300;
  letter-spacing: .22em;
}

.awakening-title p {
  margin: top 0.9em 0 0;
  opacity:.55;
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(245,243,238,.52);

}

@keyframes titleReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glassDrift {

  0% {
    transform: translate(0px, 0px) scale(1.015);
  }

  50% {
    transform: translate(-6px, -3px) scale(1.02);
  }

  100% {
    transform: translate(5px, 4px) scale(1.015);
  }

}

@keyframes outlineSettle {
  to {
    opacity: .32;
  }
}

@keyframes medallionBreath {

    0%{
        transform:scale(1);
    }

    100%{
        transform:scale(1.006);
    }

}

@keyframes glassClear{

    from{

        opacity:.24;

    }

    to{

        opacity:.16;

    }

}

.left-one {

    top:12%;
    left:8%;

    transform:
        rotate(-6deg);

}

.right-one{

    top:20%;
    right:10%;

    transform:
        rotate(4deg);

}

.lower-left {
  right: 12%;
  bottom: 10%;
  transform: rotate(-3deg);
}

.memory-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.memory-photo {
    position: absolute;
    width: 220px;

    background:
    linear-gradient(
        rgba(255,255,255,.03),
        rgba(0,0,0,.015)
    ),
    #f4f0e9;
    
    border:
    1px solid rgba(0,0,0,.04);

    padding: 14px 14px 46px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.28);

    border-radius: 2px;
}

.memory-photo img{

    object-position: 35% center;

    display:block;

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

}