/* Flowing section edges and quiet, progressive motion. Content is visible by default. */
:root { --curve-height: clamp(30px, 4.5vw, 64px); }
.hero::after,
.cuisine::before,
.cuisine::after,
.access::before,
.reservation::before,
.site-footer::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: var(--curve-height);
  background: var(--paper);
  -webkit-mask: url("../images/ui/section-curve.svg") center / 100% 100% no-repeat;
  mask: url("../images/ui/section-curve.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}
.hero::after,
.cuisine::after { inset: auto 0 -1px; transform: rotate(180deg); }
.hero::after { height: clamp(20px, 2.8vw, 40px); }
.hero-location { bottom: calc(18px + clamp(20px, 2.8vw, 40px)); }
.scroll-link { bottom: calc(15px + clamp(20px, 2.8vw, 40px)); }
.cuisine,
.access,
.reservation,
.site-footer { position: relative; }
.cuisine { padding-top: calc(74px + var(--curve-height)); padding-bottom: calc(48px + var(--curve-height)); }
.access { padding-top: calc(68px + var(--curve-height)); }
.reservation { padding-top: calc(58px + var(--curve-height)); padding-bottom: 74px; }
.reservation::before { background: #f0eee8; transform: scaleX(-1); }
.menu-page .reservation::before { background: var(--paper); }
.site-footer { padding-top: calc(34px + var(--curve-height)); }
.site-footer::before { background: var(--red); }

/* The thin waterline connects sections with the same paper background. */
.opening-band,
.menu-portal,
.instagram,
.ikesu-feature,
.menu-section,
.menu-category-links { border-block: 0; }
.opening-band,
.menu-portal,
.instagram,
.ikesu-feature,
.menu-section { position: relative; }
.opening-band::after,
.menu-portal::after,
.instagram::before,
.ikesu-feature::before,
.menu-section::after {
  content: "";
  position: absolute;
  inset: auto var(--gutter) -15px;
  height: 30px;
  background: url("../images/ui/section-thread.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}
.instagram::before { inset: -15px var(--gutter) auto; transform: scaleX(-1); }
.ikesu-feature::before { inset: -15px 0 auto; }
.menu-section::after { inset-inline: 0; }

/* Two supplied photographs retain their complete composition. */
.arrival-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(32px, 5vw, 76px);
  margin-top: clamp(64px, 8vw, 112px);
}
.arrival-photo { min-width: 0; }
.arrival-photo img { width: 100%; height: auto; }
.arrival-photo--wide { position: relative; }
.arrival-photo--wide::before {
  content: "";
  position: absolute;
  inset: -16px 24px 44px -16px;
  border: 1px solid #c8b8a5;
  border-radius: 44% 0 0 0 / 18% 0 0 0;
  z-index: -1;
  pointer-events: none;
}
.arrival-gallery { isolation: isolate; }
.arrival-detail h3 { font-size: clamp(1.75rem, 2.6vw, 2.375rem); line-height: 1.8; margin-bottom: 30px; }
.arrival-photo figcaption { margin-top: 13px; font-size: .8125rem; color: var(--muted); letter-spacing: .04em; }

/* The portrait film stays 9:16; the original wide tank photograph remains alongside it. */
.ikesu-feature {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(36px, 7vw, 108px);
  margin-top: 90px;
  padding-top: 76px;
  padding-inline: clamp(0px, 3vw, 44px);
}
.ikesu-media { width: min(100%, 360px); justify-self: center; min-width: 0; }
.ikesu-video-frame { filter: drop-shadow(0 18px 24px #27232118); }
.ikesu-video-frame:focus-within { outline: 3px solid var(--red); outline-offset: 6px; }
.ikesu-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  background: #17252b;
  border-radius: 0;
  object-fit: contain;
  /* Shallow waves near the bottom retain room for native playback controls. */
  -webkit-mask: url("../images/ui/video-wave-mask.svg") center / 100% 100% no-repeat;
  mask: url("../images/ui/video-wave-mask.svg") center / 100% 100% no-repeat;
}
.ikesu-video:fullscreen {
  -webkit-mask: none;
  mask: none;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}
.ikesu-video:-webkit-full-screen {
  -webkit-mask: none;
  mask: none;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}
.ikesu-media figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 18px; margin-top: 18px; font-size: .75rem; color: var(--muted); }
.ikesu-media figcaption a { display: inline-flex; align-items: center; gap: 10px; color: var(--red); text-decoration: underline; text-underline-offset: 4px; }
.ikesu-copy .ikesu-photo { margin-top: 32px; }
.ikesu-photo img { width: 100%; height: auto; }
html:lang(en) .arrival-photo figcaption { letter-spacing: 0; }
html:lang(en) .arrival-detail h3 { line-height: 1.35; }

/* A reveal is added only when its element enters the viewport, never as a hidden base state. */
@keyframes enter-water {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes settle-photo {
  from { transform: scale(1.035); }
  to { transform: scale(1); }
}
.motion-ready .reveal-enter { animation: enter-water 700ms cubic-bezier(.2,.65,.3,1) var(--reveal-delay, 0ms) both; }
.motion-ready .hero-image img { animation: settle-photo 1800ms cubic-bezier(.2,.65,.3,1) both; }
.motion-ready .hero h1,
.motion-ready .menu-hero-copy { animation: enter-water 850ms cubic-bezier(.2,.65,.3,1) both; }
.reveal-enter:focus-within { animation: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .space-scene img,
  .arrival-photo img,
  .menu-section-photo img { transition: transform 500ms cubic-bezier(.2,.65,.3,1), box-shadow 500ms; }
  .space-scene:hover img,
  .arrival-photo:hover img { transform: translateY(-4px); box-shadow: 0 14px 28px #27232114; }
  .menu-portal-card:hover .menu-portal-photo img { transform: scale(1.04); }
  .text-link > span,
  .button > span { transition: transform 250ms; }
  .text-link:hover > span,
  .button:hover > span { transform: translate(3px, -3px); }
}
@media (max-width: 760px) {
  .cuisine { padding-top: calc(42px + var(--curve-height)); padding-bottom: calc(30px + var(--curve-height)); }
  .access { padding-top: calc(40px + var(--curve-height)); }
  .reservation { padding-top: calc(34px + var(--curve-height)); padding-bottom: 48px; }
  .site-footer { padding-top: calc(26px + var(--curve-height)); }
  .arrival-gallery { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 66px; }
  .arrival-photo--wide::before { inset: -12px 18px 44px -12px; }
  .arrival-detail { width: 88%; justify-self: end; }
  .arrival-detail h3 { font-size: 1.875rem; margin-bottom: 22px; }
  .ikesu-feature { grid-template-columns: minmax(0, 1fr); padding: 48px 0 0; margin-top: 64px; gap: 36px; }
  .ikesu-media { width: min(100%, 340px); }
  .ikesu-copy .ikesu-photo { margin-top: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-enter,
  .motion-ready .hero-image img,
  .motion-ready .hero h1,
  .motion-ready .menu-hero-copy { opacity: 1 !important; transform: none !important; animation: none !important; }
}
@media print {
  .reveal-enter,
  .motion-ready .hero-image img,
  .motion-ready .hero h1,
  .motion-ready .menu-hero-copy { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero::after,
  .cuisine::before,
  .cuisine::after,
  .access::before,
  .reservation::before,
  .site-footer::before,
  .opening-band::after,
  .menu-portal::after,
  .instagram::before,
  .ikesu-feature::before,
  .menu-section::after { display: none; }
  .cuisine, .access, .reservation, .site-footer { padding-top: 30px; }
  .arrival-gallery, .ikesu-feature { break-inside: avoid; }
  .ikesu-media { width: 220px; }
}