* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  background:#dfe6ef;
}

.app{
  width:min(100vw, 430px);
  margin:0 auto;
  min-height:100vh;
  min-height:100dvh;
  position:relative;
  overflow:hidden;
  background:#f7f3ea;
}

.screen{
  position:absolute;
  inset:0;
}

/* GALLERY UNDERLAY */
.gallery {
  z-index: 1;
  background: #eae3d6;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* SPLASH */
.splash {
  z-index: 2;
  background: #f7f3ea;
  overflow: hidden;
  animation: splashOut 0.5s ease forwards;
  animation-delay: 2.8s;
}

@keyframes splashOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.oil-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.03);
  filter: saturate(0.68) contrast(0.92) brightness(1.08);
  animation: oilIn 0.75s ease-out forwards;
}

@keyframes oilIn {
  to {
    opacity: 0.38;
    transform: scale(1);
  }
}

.paper-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(247,243,234,0.22), rgba(247,243,234,0.62)),
    linear-gradient(to bottom, rgba(255,255,255,0.18), rgba(247,243,234,0.08));
}

.brand-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.brush-mask {
  position: absolute;
  left: 52%;
  top: 50%;
  width: 140%;
  aspect-ratio: 1600 / 1200;

  background-image: url("../images/oil-splash.png");
  background-size: cover;
  background-position: center;

  -webkit-mask-image: url("../images/bigbrush.png");
  mask-image: url("../images/bigbrush.png");

  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;

  filter: saturate(0.7) contrast(1.05);

  opacity: 0;
  transform: translate(-50%, -49%) scale(0.985);
  transform-origin: center center;

  clip-path: inset(0 100% 0 0);

  animation: brushPaintIn 1.05s cubic-bezier(.22,.75,.24,1) forwards;
  animation-delay: 0.18s;
}

@keyframes brushPaintIn {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translate(-50%, -49%) scale(1);
  }

  12% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translate(-50%, -49%) scale(1);
  }
}

@keyframes brushSettle {
  from {
    transform: translate(-50%, -49%) scale(1.01);
  }

  to {
    transform: translate(-50%, -49%) scale(1);
  }
}
.title {
  position: absolute;
  left: 50%;
  top: 50%;
  width:100%;
  padding:0 24px;

  font-family: 'Montserrat', sans-serif;
  font-size: 55px;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: rgba(255, 250, 242, 0.94);

  line-height: 1;
  text-align: center;
  white-space: nowrap;

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

  text-shadow:
    0 1px 1px rgba(40,30,20,0.25),
    0 4px 10px rgba(40,30,20,0.15);

  animation: titleIn 0.45s ease forwards;
  animation-delay: 0.9s;
}

@keyframes titleIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%);
  }

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