* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #eee5d3;
}

.intro {
  width: 100%;
  min-height: 100dvh;
  position: relative;
  overflow: visible;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #eee5d3 url("IMG/bg.jpg") center center / cover no-repeat;
}

.instagram-link {
  position: relative;
  display: grid;
  place-items: center;
  width: min(928px, calc(100vw - 32px));
  height: calc(100dvh - 32px);
  color: #4b090c;
  text-decoration: none;
}

.art {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  opacity: 0;
  transform: scale(1.025);
  filter: blur(16px) brightness(1.18) saturate(.7);
  will-change: opacity, transform, filter;
}

.callout {
  position: absolute;
  right: 2%;
  bottom: 4%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid rgba(75, 9, 12, .25);
  border-radius: 999px;
  background: rgba(247, 239, 222, .88);
  box-shadow: 0 10px 30px rgba(75, 9, 12, .12);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(12px);
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}

.is-visible .callout { animation: callout-in .7s ease 2.7s forwards; }
.instagram-link:hover .callout { transform: translateY(-3px); background: #f8f0df; box-shadow: 0 14px 36px rgba(75,9,12,.2); }
.callout small, .callout strong { display: block; }
.callout small { margin-bottom: 2px; font: 700 9px Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; color: #a76b1b; }
.callout strong { font: 700 14px Georgia, serif; }
.callout b { font: 400 18px Arial, sans-serif; margin-left: 5px; }
.instagram-icon { position: relative; width: 27px; height: 27px; border: 2px solid #4b090c; border-radius: 8px; }
.instagram-icon::before { content: ""; position: absolute; width: 8px; height: 8px; border: 2px solid #4b090c; border-radius: 50%; left: 6px; top: 6px; }
.instagram-icon::after { content: ""; position: absolute; width: 3px; height: 3px; background: #4b090c; border-radius: 50%; right: 4px; top: 4px; }
@keyframes callout-in { to { opacity: 1; transform: translateY(0); } }

.redirect-pop {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 28px;
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 285px;
  padding: 14px 18px;
  border: 1px solid rgba(75,9,12,.22);
  border-radius: 12px;
  background: rgba(249,243,230,.94);
  color: #4b090c;
  box-shadow: 0 16px 45px rgba(58,22,9,.18);
  backdrop-filter: blur(9px);
  opacity: 0;
  transform: translate(-50%,18px);
}
.is-visible .redirect-pop { animation: popup-in .5s ease .45s forwards; }
.redirect-pop small,.redirect-pop strong { display:block; }
.redirect-pop small { margin-bottom:3px; color:#a76b1b; font:700 9px Arial,sans-serif; letter-spacing:.15em; text-transform:uppercase; }
.redirect-pop strong { font:700 14px Georgia,serif; }
.loader { width:22px; height:22px; flex:0 0 22px; border:2px solid rgba(75,9,12,.18); border-top-color:#8d4c17; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes popup-in { to { opacity:1; transform:translate(-50%,0); } }
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width: 600px) {
  .intro { padding: 10px; }
  .art {
    width: calc(100vw - 20px);
    height: calc(100dvh - 20px);
  }
  .instagram-link { width: calc(100vw - 20px); height: calc(100dvh - 20px); }
  .callout { right: 50%; bottom: 2%; transform: translate(50%,12px); white-space: nowrap; }
  .is-visible .callout { animation-name: callout-in-mobile; }
}

@keyframes callout-in-mobile { to { opacity: 1; transform: translate(50%,0); } }

.is-visible .art {
  animation: reveal 3.2s cubic-bezier(.22,.72,.18,1) forwards;
}

@keyframes reveal {
  0% {
    opacity: 0;
    transform: scale(1.025);
    filter: blur(16px) brightness(1.18) saturate(.7);
  }
  28% { opacity: 1; }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) brightness(1) saturate(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .art {
    opacity: 1;
    transform: none;
    filter: none;
  }
}