html,
body {
  width: 100%;
  min-height: 100%;
}

body.vreel-room {
  margin: 0;
  overflow: hidden;
  background: #ece7df;
  color: #111;
  font-family: var(--font-sans);
}

.vreel-entry {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
}

/* PHOTO LAYER */

.vreel-collage {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.vreel-moment {
  border:none;
  box-sizing:border-box;
  box-shadow:
    0 8px 22px rgba(0,0,0,.08);
  position: absolute;
  display: block;
  object-fit: cover;

  opacity: 0;
  outline: 4px solid transparent;

  will-change:
    left,
    right,
    top,
    bottom,
    width,
    height,
    transform,
    opacity;

  transition:
    opacity 700ms ease,
    outline-color 700ms ease,
    left 3600ms cubic-bezier(.16, .72, .28, 1),
    right 3600ms cubic-bezier(.16, .72, .28, 1),
    top 3600ms cubic-bezier(.16, .72, .28, 1),
    bottom 3600ms cubic-bezier(.16, .72, .28, 1),
    width 3600ms cubic-bezier(.16, .72, .28, 1),
    height 3600ms cubic-bezier(.16, .72, .28, 1),
    transform 3600ms cubic-bezier(.16, .72, .28, 1);
}

body.vreel-images-ready .vreel-moment {
  opacity: 1;
  outline-color: #0f0f0f;
}

body.vreel-arranged .vreel-moment{
    border:4px solid #111;

    transition:
        border-color .6s ease 2.4s;
}

/*
Initial state:
photos fill and cross the center.
*/

.moment-01 {
  width: 34vw;
  height: 46vh;
  left: 0;
  top: 0;
}

.moment-02 {
  width: 30vw;
  height: 42vh;
  left: 26vw;
  top: 0;
}

.moment-03 {
  width: 28vw;
  height: 38vh;
  right: 20vw;
  top: 0;
}

.moment-04 {
  width: 26vw;
  height: 45vh;
  right: 0;
  top: 0;
}

.moment-05 {
  width: 32vw;
  height: 42vh;
  left: 0;
  top: 34vh;
}

.moment-06 {
  width: 28vw;
  height: 40vh;
  left: 24vw;
  top: 32vh;
}

.moment-07 {
  width: 30vw;
  height: 43vh;
  right: 23vw;
  top: 32vh;
}

.moment-08 {
  width: 28vw;
  height: 40vh;
  right: 0;
  top: 34vh;
}

.moment-09 {
  width: 40vw;
  height: 34vh;
  left: 8vw;
  bottom: 0;
}

.moment-10 {
  width: 40vw;
  height: 36vh;
  right: 8vw;
  bottom: 0;
}

.moment-11 {
  width: 22vw;
  height: 28vh;
  left: 8vw;
  top: 18vh;
}

.moment-12 {
  width: 20vw;
  height: 27vh;
  right: 9vw;
  top: 17vh;
}

.moment-13 {
  width: 23vw;
  height: 29vh;
  left: 14vw;
  bottom: 14vh;
}

.moment-14 {
  width: 22vw;
  height: 28vh;
  right: 15vw;
  bottom: 13vh;
}

.moment-15 {
  width: 19vw;
  height: 25vh;
  left: 39vw;
  top: 5vh;
}

.moment-16 {
  width: 20vw;
  height: 25vh;
  left: 40vw;
  bottom: 4vh;
}

/*
Final state:
photos move outward and form the irregular frame.
*/

/*
===== VREEL ARRANGED LAYOUT V1 =====

body.vreel-arranged .moment-01 {
  width: 30vw;
  height: 35vh;
  left: -1vw;
  top: -2vh;
  transform: rotate(-2deg);
}

body.vreel-arranged .moment-02 {
  width: 26vw;
  height: 30vh;
  left: 20vw;
  top: -4vh;
  transform: rotate(1.5deg);
}

body.vreel-arranged .moment-03 {
  width: 26vw;
  height: 30vh;
  right: 19vw;
  top: -4vh;
  transform: rotate(-1deg);
}

body.vreel-arranged .moment-04 {
  width: 26vw;
  height: 35vh;
  right: -1vw;
  top: -2vh;
  transform: rotate(2deg);
}

body.vreel-arranged .moment-05 {
  width: 28vw;
  height: 34vh;
  left: -2vw;
  top: 30vh;
  transform: rotate(1.5deg);
}

body.vreel-arranged .moment-06 {
  width: 24vw;
  height: 31vh;
  left: 2vw;
  bottom: -2vh;
  top: auto;
  transform: rotate(-1.5deg);
}

body.vreel-arranged .moment-07 {
  width: 25vw;
  height: 31vh;
  right: 2vw;
  bottom: -2vh;
  top: auto;
  transform: rotate(1.5deg);
}

body.vreel-arranged .moment-08 {
  width: 28vw;
  height: 34vh;
  right: -2vw;
  top: 30vh;
  transform: rotate(-1.5deg);
}

body.vreel-arranged .moment-09 {
  width: 30vw;
  height: 28vh;
  left: 12vw;
  bottom: -3vh;
  transform: rotate(.75deg);
}

body.vreel-arranged .moment-10 {
  width: 30vw;
  height: 28vh;
  right: 11vw;
  bottom: -3vh;
  transform: rotate(-.75deg);
}

body.vreel-arranged .moment-11 {
  width: 20vw;
  height: 27vh;
  left: 7vw;
  top: 16vh;
  transform: rotate(1.25deg);
}

body.vreel-arranged .moment-12 {
  width: 19vw;
  height: 26vh;
  right: 7vw;
  top: 15vh;
  transform: rotate(-1.4deg);
}

body.vreel-arranged .moment-13 {
  width: 21vw;
  height: 28vh;
  left: 7vw;
  bottom: 10vh;
  transform: rotate(-1deg);
}

body.vreel-arranged .moment-14 {
  width: 20vw;
  height: 27vh;
  right: 7vw;
  bottom: 9vh;
  transform: rotate(1.2deg);
}

body.vreel-arranged .moment-15 {
  width: 18vw;
  height: 23vh;
  left: 29vw;
  top: -2vh;
  transform: rotate(-.6deg);
}

body.vreel-arranged .moment-16 {
  width: 19vw;
  height: 23vh;
  right: 28vw;
  bottom: -2vh;
  transform: rotate(.7deg);
}
/*  

/* ===== VREEL ARRANGED LAYOUT V2 ===== */

body.vreel-arranged .moment-01 {
  width: 31vw;
  height: 37vh;
  left: 0;
  top: -1vh;
  transform: rotate(-1.5deg);
}

body.vreel-arranged .moment-02 {
  width: 27vw;
  height: 27vh;
  left: 18vw;
  top: -2vh;
  transform: rotate(1deg);
}

body.vreel-arranged .moment-03 {
  width: 27vw;
  height: 27vh;
  right: 17vw;
  top: -2vh;
  transform: rotate(-.75deg);
}

body.vreel-arranged .moment-04 {
  width: 27vw;
  height: 37vh;
  right: 0;
  top: -1vh;
  transform: rotate(1.5deg);
}

body.vreel-arranged .moment-05 {
  width: 29vw;
  height: 35vh;
  left: -1vw;
  top: 27vh;
  transform: rotate(1deg);
}

body.vreel-arranged .moment-06 {
  width: 25vw;
  height: 32vh;
  left: 0vw;
  bottom: -1vh;
  top: auto;
  transform: rotate(-1deg);
}

body.vreel-arranged .moment-07 {
  width: 26vw;
  height: 40vh;
  right: -5vw;
  bottom: -1vh;
  top: auto;
  transform: rotate(1deg);
}

body.vreel-arranged .moment-08 {
  width: 29vw;
  height: 35vh;
  right: -1vw;
  top: 27vh;
  transform: rotate(-1deg);
}

body.vreel-arranged .moment-09 {
  width: 31vw;
  height: 29vh;
  left: 10vw;
  bottom: -1vh;
  transform: rotate(.5deg);
}

body.vreel-arranged .moment-10 {
  width: 31vw;
  height: 29vh;
  right: 9vw;
  bottom: -1vh;
  transform: rotate(-.5deg);
}

/* Inner supporting moments */

body.vreel-arranged .moment-11 {
  width: 21vw;
  height: 28vh;
  left: 11vw;
  top: 14vh;
  transform: rotate(.8deg);
}

body.vreel-arranged .moment-12 {
  width: 20vw;
  height: 27vh;
  right: 9vw;
  top: 13vh;
  transform: rotate(-.9deg);
}

body.vreel-arranged .moment-13 {
  width: 22vw;
  height: 29vh;
  left: 8vw;
  bottom: 12vh;
  transform: rotate(-.7deg);
}

body.vreel-arranged .moment-14 {
  width: 21vw;
  height: 30vh;
  right: 10vw;
  bottom: 7vh;
  transform: rotate(.8deg);
}

/* Center bridge images — keep these behind the logo */

body.vreel-arranged .moment-15 {
  width: 20vw;
  height: 24vh;
  left: 45vw;
  top: -1vh;
  transform: rotate(-.4deg);
}

body.vreel-arranged .moment-16 {
  width: 21vw;
  height: 25vh;
  right: 26vw;
  bottom: -1vh;
  transform: rotate(.45deg);
}

/* Outer frame */
.moment-01,
.moment-04,
.moment-05,
.moment-08 {
  z-index: 1;
}

/* Interior moments overlap the outer frame slightly */
.moment-02,
.moment-03,
.moment-06,
.moment-07,
.moment-09,
.moment-10,
.moment-11,
.moment-12,
.moment-13,
.moment-14 {
  z-index: 2;
}

/* Bridge images stay behind the central identity */
.moment-15,
.moment-16 {
  z-index: 1;
}

.vreel-core {
  z-index: 4;
}

/* CENTER LOGO */

.vreel-core {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.logo-stack {
  position: absolute;
  left: 50%;
  top: 44%;

  width: clamp(270px, 32vw, 420px);
  aspect-ratio: 1;

  transform: translate(-50%, -50%);
  opacity: 1;

  isolation: isolate;
}

.logo-stack img {
  position: absolute;
  inset: 0;

  display: block;
  width: 100%;
  height: 100%;

  object-fit: contain;
   transform: scale(1.75);
  transform-origin: center;
}

.logo-outline {
  z-index: 2;
  opacity: 1;

  transition:
    opacity 1800ms var(--ease-gallery, ease) 1100ms;
}

.logo-color {
  z-index: 1;
  opacity: 0;

  transition:
    opacity 2000ms var(--ease-gallery, ease) 1100ms;
}

body.vreel-arranged .logo-outline {
  opacity: .28;
}

body.vreel-arranged .logo-color {
  opacity: 1;
}

/* NOTE */

.vreel-note {
    position: absolute;

    left: 56%;
    top: 59%;

    width: 340px;

    z-index: 4;

    opacity: 0;

    transform:
        translateY(0px)
        rotate(-1deg);

    transition:
        opacity 1000ms ease 2200ms,
        transform 1300ms cubic-bezier(.22, .61, .36, 1) 2050ms;
}

body.vreel-arranged .vreel-note {

    opacity: 1;

    transform:
        translate(-50%, 0)
        rotate(-2deg);

}

.vreel-note img {

    display: block;

    width: 100%;

    height: auto;

}

/* MOBILE TEST */

@media (max-width: 780px) {
  body.vreel-room {
    overflow-y: auto;
  }

  .vreel-entry {
    min-height: 780px;
  }

  .logo-stack {
    top: 42%;
    width: min(58vw, 280px);
  }

  .vreel-note {
    width: 180px;
    left: 52%;
    bottom: 4vh;
  }

  body.vreel-arranged .moment-01,
  body.vreel-arranged .moment-05,
  body.vreel-arranged .moment-06 {
    left: -18vw;
    width: 52vw;
  }

  body.vreel-arranged .moment-04,
  body.vreel-arranged .moment-08,
  body.vreel-arranged .moment-07 {
    right: -18vw;
    width: 52vw;
  }

  body.vreel-arranged .moment-02,
  body.vreel-arranged .moment-03 {
    width: 43vw;
  }

  body.vreel-arranged .moment-09,
  body.vreel-arranged .moment-10 {
    width: 46vw;
  }
}

@media (max-width: 780px) and (prefers-reduced-motion: reduce) {
  .vreel-moment,
  .logo-stack,
  .vreel-note {
    transition: none;
    top: calc(42% + 155px);
    left: 52%;
    width: 175px;
  }
}

.vreel-moment {
  transition-property:
    opacity,
    outline-color,
    left,
    right,
    top,
    bottom,
    width,
    height,
    transform !important;

  transition-duration:
    700ms,
    700ms,
    3600ms,
    3600ms,
    3600ms,
    3600ms,
    3600ms,
    3600ms,
    3600ms !important;

  transition-timing-function:
    ease,
    ease,
    cubic-bezier(.16, .72, .28, 1),
    cubic-bezier(.16, .72, .28, 1),
    cubic-bezier(.16, .72, .28, 1),
    cubic-bezier(.16, .72, .28, 1),
    cubic-bezier(.16, .72, .28, 1),
    cubic-bezier(.16, .72, .28, 1),
    cubic-bezier(.16, .72, .28, 1) !important;

  transition-delay:
    0ms,
    0ms,
    0ms,
    0ms,
    0ms,
    0ms,
    0ms,
    0ms,
    0ms !important;
}