@charset "UTF-8";

/* gallery.css の後へ。--bottle-immersion はrootがheader/chrome用に所有する。 */
.bottle-reveal {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: visible;
  visibility: hidden;
  opacity: var(--bottle-reveal-opacity, 0);
  pointer-events: none;
  isolation: isolate;
  filter: blur(var(--bottle-reveal-blur, 0px));
}

.bottle-reveal[data-active="true"] { visibility: visible; }

.bottle-reveal__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--bottle-reveal-width, 100%);
  height: var(--bottle-reveal-height, 100%);
  overflow: hidden;
  transform: translate3d(var(--bottle-reveal-x, 0px), var(--bottle-reveal-y, 0px), 0);
  background: #2e2420;
  contain: layout paint;
  will-change: transform, width, height;
}

.bottle-reveal__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.bottle-reveal__shade {
  position: absolute;
  inset: 0;
  opacity: var(--bottle-shade-opacity, 0);
  background: linear-gradient(90deg, rgb(15 9 12 / 43%), rgb(15 9 12 / 16%) 29%, transparent 44%, transparent 56%, rgb(15 9 12 / 16%) 71%, rgb(15 9 12 / 43%));
  pointer-events: none;
}

.bottle-reveal__type {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8%;
  color: #fff;
  opacity: var(--bottle-type-opacity, 0);
  pointer-events: none;
}

.bottle-reveal__word {
  position: relative;
  flex: 0 0 auto;
  width: max-content;
  margin: 0;
  font: 400 clamp(18px, 2.8vw, 52px)/1.25 "Courier New", Courier, monospace;
  letter-spacing: .04em;
  white-space: nowrap;
  text-transform: none;
  text-shadow: 0 1px 13px rgb(0 0 0 / 19%);
}

.bottle-reveal__letters {
  display: block;
  clip-path: inset(0 calc(100% - var(--bottle-typed-percent, 100%)) 0 0);
}

.bottle-reveal__cursor {
  position: absolute;
  top: .09em;
  left: calc(var(--bottle-typed-percent, 100%) + .045em);
  width: 1px;
  height: 1em;
  background: currentColor;
  opacity: var(--bottle-cursor-opacity, 0);
}

/* 拡大中もgalleryのレイアウトとtransformは保つ。元写真の矩形は計測可能なまま。 */
.panel-gallery[data-bottle-reveal-active="true"] [data-gallery-order="6"] .gallery-photo { visibility: hidden; }
.panel-gallery .gallery-window,
.panel-gallery .gallery-heading,
.panel-gallery .gallery-tail { opacity: var(--bottle-surroundings, 1); }
.panel-gallery .gallery-vine--upper { opacity: calc(.46 * var(--bottle-surroundings, 1)); }
.panel-gallery .gallery-vine--lower { opacity: calc(.37 * var(--bottle-surroundings, 1)); }

@media (max-width: 760px) {
  .bottle-reveal__type { padding: 0 6%; }
  .bottle-reveal__word { font-size: clamp(10px, 3.35vw, 14px); letter-spacing: .035em; }
  .bottle-reveal__shade {
    background: linear-gradient(90deg, rgb(15 9 12 / 40%), rgb(15 9 12 / 15%) 30%, transparent 44%, transparent 56%, rgb(15 9 12 / 15%) 70%, rgb(15 9 12 / 40%));
  }
  .panel-gallery .gallery-vine--upper { opacity: calc(.33 * var(--bottle-surroundings, 1)); }
  .panel-gallery .gallery-vine--lower { opacity: calc(.31 * var(--bottle-surroundings, 1)); }
}

/* Linear / JS無しでは、6枚の後にワイド写真と全文を自然な文書フローで表示する。 */
.linear .bottle-reveal,
html:not(.enhanced) .bottle-reveal,
.no-js .bottle-reveal,
.bottle-reveal[data-linear="true"] {
  position: relative;
  inset: auto;
  width: calc(100% + 16vw);
  height: clamp(360px, 56.25vw, 760px);
  margin: 70px -8vw -110px;
  overflow: hidden;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
}

.linear .bottle-reveal__frame,
html:not(.enhanced) .bottle-reveal__frame,
.no-js .bottle-reveal__frame,
.bottle-reveal[data-linear="true"] .bottle-reveal__frame {
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  will-change: auto;
}

.linear .bottle-reveal__type,
.linear .bottle-reveal__shade,
html:not(.enhanced) .bottle-reveal__type,
html:not(.enhanced) .bottle-reveal__shade,
.no-js .bottle-reveal__type,
.no-js .bottle-reveal__shade,
.bottle-reveal[data-linear="true"] .bottle-reveal__type,
.bottle-reveal[data-linear="true"] .bottle-reveal__shade { opacity: 1 !important; }

.linear .bottle-reveal__letters,
html:not(.enhanced) .bottle-reveal__letters,
.no-js .bottle-reveal__letters,
.bottle-reveal[data-linear="true"] .bottle-reveal__letters { clip-path: none !important; }

.linear .bottle-reveal__cursor,
html:not(.enhanced) .bottle-reveal__cursor,
.no-js .bottle-reveal__cursor,
.bottle-reveal[data-linear="true"] .bottle-reveal__cursor { display: none; }

.linear .panel-gallery .gallery-window,
.linear .panel-gallery .gallery-heading,
.linear .panel-gallery .gallery-tail,
html:not(.enhanced) .panel-gallery .gallery-window,
html:not(.enhanced) .panel-gallery .gallery-heading,
.no-js .panel-gallery .gallery-window,
.no-js .panel-gallery .gallery-heading { opacity: 1 !important; }

.linear .panel-gallery [data-gallery-order="6"] .gallery-photo,
html:not(.enhanced) .panel-gallery [data-gallery-order="6"] .gallery-photo,
.no-js .panel-gallery [data-gallery-order="6"] .gallery-photo { visibility: visible !important; }

@media (max-width: 560px) {
  .linear .bottle-reveal,
  html:not(.enhanced) .bottle-reveal,
  .no-js .bottle-reveal,
  .bottle-reveal[data-linear="true"] {
    height: clamp(360px, 62svh, 560px);
    margin-top: 48px;
    margin-bottom: -80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bottle-reveal, .bottle-reveal * { animation: none !important; transition: none !important; }
  .bottle-reveal__frame { will-change: auto; }
}