/* ==========================================================================
   Home Page Styles
   Main styles for the homepage: Kizuna Restaurant & Squareup
   Structure:
   - Layout Overrides (Curtain, Transparent Header)
   - Hero Section
   - Our Story Section
   - Announcements Section
   - Menu Preview Grid
   - About Masa Section
   - Animations & Keyframes
   - Responsive Media Queries
   ========================================================================== */

/* ==========================================================================
   1. Layout Overrides & Global Home Elements
   ========================================================================== */

/* Page loading curtain */
.page-curtain {
  background-color: var(--color-parchment);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
  width: 100%;
  z-index: 990;
}

.page-curtain.fade-out {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Modifier for the header to be transparent and overlay the hero section */
.header-transparent-overlay {
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0);
  box-shadow: none;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 1.5rem 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  transform: translateY(-100%);
  transition:
    backdrop-filter 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    border-bottom 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    padding 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  z-index: 989;
}

.header-transparent-overlay.scrolled {
  -webkit-backdrop-filter: blur(1rem);
  backdrop-filter: blur(1rem);
  background-color: rgba(212, 194, 168, 0.75);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--elevation-2);
  opacity: 1;
  padding: 0.5rem 0;
  pointer-events: auto;
  position: fixed;
  transform: translateY(0);
  z-index: 1000;
}

/* ==========================================================================
   2. Hero Section (Carousel & Logo)
   ========================================================================== */

.hero-image-container {
  align-items: center;
  /* Padding, so it has to be border-box or the hero grows past the viewport. */
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  /* Reserve the header's height at the top. The lockup then centres in the
     space below the header rather than in the whole hero, so "SUSHI" is not
     sitting where the bar appears the moment you start scrolling. 5rem is the
     scrolled header (0.5rem padding x2 + a 4rem logo) — the state it is
     actually in whenever it is visible. */
  padding-top: 5rem;
  /* svh, not vh: the small viewport is measured with the browser's
     retractable UI shown, so it does not change when that UI comes and goes.
     With vh the hero was re-measured every time the Telegram in-app browser's
     bottom bar appeared or hid — and since the hero sits above everything
     else, the document shortened and dragged the whole page up under a scroll
     offset that had not moved. A 84px viewport change moved content 84px. The
     hero now stops a bar's height short of the screen while the bar is
     hidden, which is the trade: a still page beats a full-bleed one.
     The vh line is the fallback for engines without svh. */
  height: 100vh;
  height: 100svh;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.hero-image-container::after {
  background-color: var(--color-faded-copper);
  content: '';
  height: 100%;
  left: 0;
  mix-blend-mode: multiply;
  opacity: 0.35;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.hero-image-container::before {
  background-color: #000;
  content: '';
  height: 100%;
  left: 0;
  opacity: 0.2;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

.hero-image-container picture {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.hero-image-container .hero-bg-image {
  animation-duration: 24s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  height: 100%;
  left: 0;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 100%;
  will-change: opacity, transform;
}

.hero-image-container picture:nth-of-type(1) .hero-bg-image {
  animation-name: fadeZoom1;
}

.hero-image-container picture:nth-of-type(2) .hero-bg-image {
  animation-name: fadeZoom2;
}

.hero-image-container picture:nth-of-type(3) .hero-bg-image {
  animation-name: fadeZoom3;
}

.hero-image-container picture:nth-of-type(4) .hero-bg-image {
  animation-name: fadeZoom4;
}

.hero-logo-group {
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 991;
}

.hero-logo-group .hero-logo {
  animation: fadeInLogo 1.5s 0.5s ease-in forwards;
  filter: drop-shadow(0 0 0.625rem rgba(255, 255, 255, 0.8));
  margin: 0 0.5rem;
  max-height: 55vh;
  max-width: 70vw;
  opacity: 0;
}

.hero-main-title {
  animation: fadeInLogo 1.5s 1s ease-in forwards;
  color: var(--color-carbon-black);
  filter: drop-shadow(0 0 0.625rem rgba(255, 255, 255, 0.8));
  font-family: var(--font-display);
  font-size: var(--font-size-display-small);
  margin-bottom: 1rem;
  opacity: 0;
  position: relative;
  text-align: center;
  z-index: 991;
}

.hero-main-title::before {
  animation: pulseGlow 4s infinite ease-in-out;
  background: radial-gradient(ellipse at center, var(--color-pale-oak) 0%, transparent 70%);
  content: '';
  filter: blur(1.25rem);
  height: 120%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  z-index: -1;
}

.hero-logo-text {
  animation: fadeInLogo 1.5s 1.2s ease-in forwards;
  color: var(--color-carbon-black);
  filter: drop-shadow(0 0 0.625rem rgba(255, 255, 255, 0.8));
  font-family: var(--font-display);
  font-size: var(--font-size-hero);
  font-weight: 400;
  letter-spacing: -0.05em;
  opacity: 0;
  position: relative;
  text-transform: none;
  z-index: 1;
}

.hero-logo-text::before {
  animation: pulseGlow 5s infinite ease-in-out reverse;
  background: radial-gradient(ellipse at center, var(--color-pale-oak) 0%, transparent 70%);
  content: '';
  filter: blur(0.9375rem);
  height: 100%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  z-index: -1;
}

/* ==========================================================================
   3. Our Story Section
   ========================================================================== */

/* Style for our story removed to inherit from main.css */

/* There used to be an `overflow-x: clip` on this page's .content-wrapper, to
   contain the corner brackets below (see the note on their transforms). Do not
   put it back. It was the cause of the hairlines that cut across the About Us
   cards, the menu tiles and the announcement panel on iOS at certain
   pinch-zoom scales: it wraps every section that seamed, the hero and footer
   sit outside it and never seamed, and toggling it on a copy of this page made
   the lines come and go. Bisected on device — the same card markup in a
   standalone page, clip included or not, never reproduced it, so it is the
   clip over this much content that WebKit rasterizes badly at a fractional
   scale, not the cards.

   The overflow it was hiding is fixed at source instead, on the brackets. */

.our-story-content {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  max-width: 75rem;
  position: relative;
}

.our-story-content::before,
.our-story-content::after {
  content: '';
  height: 3.75rem;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
  width: 3.75rem;
  z-index: 10;
}

/* Both brackets start their reveal offset INWARD and settle outward into
   place. The sign matters and is load-bearing: at rest they sit 1.25rem
   outside the content box, which is inside the wrapper's 2rem padding, but the
   old outward start pushed the bottom-right one a further 1.875rem past that —
   enough to poke past the viewport and add a horizontal scrollbar between
   ~760px and ~1091px, where the content box nearly fills the wrapper. That
   scrollbar is what the wrapper's overflow-x: clip was hiding, and that clip
   turned out to be the iOS seam trigger. Starting inward means nothing ever
   extends past the resting position, so no clip is needed. Measured at 950px:
   outward start gives scrollWidth 953 against a 950 viewport, inward gives
   935 both before and after the reveal. Same distance travelled, so the
   animation reads the same — the brackets now grow apart rather than draw in. */
.our-story-content::before {
  border-left: 0.1875rem solid var(--color-faded-copper);
  border-top: 0.1875rem solid var(--color-faded-copper);
  left: -1.25rem;
  top: -1.25rem;
  transform: translate(1.875rem, 1.875rem);
}

.our-story-content::after {
  border-bottom: 0.1875rem solid var(--color-faded-copper);
  border-right: 0.1875rem solid var(--color-faded-copper);
  bottom: -1.25rem;
  right: -1.25rem;
  transform: translate(-1.875rem, -1.875rem);
}

/* Plain arrow, not a hand: the card reveals its copy on hover and carries no
   click handler, so a pointer promised a navigation that never happens. The
   bento tiles below are real links and keep theirs. */
/* isolation, and `transform: none` rather than translateY(0) on the .visible
   rule below — this pair is the fix for the hairline seams that cut across
   rounded photos on iOS at some pinch-zoom scales (every browser there is
   WebKit, and Android is clean). WebKit does not clip composited layers to
   border-radius reliably (bug 98538, dup of 68196; still being reworked in
   WebKit PR 3883), and the reveal animation was leaving a permanent
   transform behind, which is enough to promote the card to its own layer.
   The transform is scaffolding the animation no longer needs once it has
   run, so it goes; isolation then supplies the stacking context the card was
   getting from that transform, keeping the z-index: 1/2 children (the wash
   and the copy) contained exactly as before. Same treatment on
   .menu-image-link and section.about-masa, the other two rounded-bitmap
   layers that showed the seam. */
.story-column {
  align-items: center;
  border-radius: var(--radius-medium);
  box-shadow: var(--elevation-1);
  cursor: default;
  display: flex;
  height: 22rem;
  isolation: isolate;
  justify-content: center;
  opacity: 0;
  overflow: hidden;
  position: relative;
  text-align: center;
  transform: translateY(2rem);
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease;
}

/* On touch, a press-and-hold is how these cards get read: it stands in for the
   hover that reveals the copy. Android Chrome read the same gesture as a text
   selection and popped its translate/define sheet over the page, highlighting
   a word mid-sentence. The copy on these tiles is a reveal, not something
   anyone needs to select, so opt the whole card out. Applies to the bento
   tiles below for the same reason — their titles sit on top of a link, where a
   long-press should offer the link, not a word. */
.story-column,
.menu-image-link {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.story-column h2 {
  color: var(--color-parchment);
  font-family: var(--font-primary);
  font-size: var(--font-size-fluid-large);
  font-weight: normal;
  margin: 0;
  position: absolute;
  text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.75);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
  text-transform: uppercase;
}

.story-column p {
  color: var(--color-parchment);
  font-size: var(--font-size-extra-small);
  line-height: 1.6;
  margin: 0;
  opacity: 0;
  padding: 2rem;
  position: absolute;
  text-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.8);
  transform: translateY(1.25rem);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

.story-column:hover h2 {
  opacity: 0;
  transform: translateY(-1.25rem);
}

.story-column:hover p {
  opacity: 1;
  transform: translateY(0);
}

.story-column picture {
  height: 100%;
  width: 100%;
}

/* The dark wash is an overlay layer, not filter: brightness() on the image.
   Safari rasterizes filtered layers in horizontal bands and left a visible
   hairline with a brightness step across it — at the same viewport y on all
   three cards, which is what gave it away as a compositing seam rather than
   anything in the images. No filter, no band seam. The alphas below are
   RMSE-matched to the brightness(0.5) contrast(1.1) / brightness(0.3)
   contrast(1.2) pair they replace, so the look is unchanged. */
.story-column::after {
  background-color: rgba(0, 0, 0, 0.53);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.story-column:hover::after {
  background-color: rgba(0, 0, 0, 0.78);
}

.story-column img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  display: block;
}

.story-column:hover img {
  transform: scale(1.1);
}

section.our-story.visible .story-column {
  opacity: 1;
  /* none, not translateY(0) — see the note on .story-column. A translate
     interpolates with none as the identity, so the reveal still animates. */
  transform: none;
}

section.our-story.visible .our-story-content::before,
section.our-story.visible .our-story-content::after {
  opacity: 0.8;
  transform: translate(0, 0);
}

section.our-story.visible .story-column:hover {
  box-shadow: var(--elevation-3);
  transform: translateY(-0.5rem);
}

/* ==========================================================================
   4. Announcements Section
   ========================================================================== */

/* Hidden (heading included) until JS confirms there is an announcement to show. */
.announcements-section {
  display: none;
}

.announcements-section.loaded {
  display: block;
}

.announcements {
  align-items: center;
  background-blend-mode: overlay;
  background-color: var(--color-coffee-bean);
  background-image: url("/static/woodtexture2.webp?v=1786769922988");
  background-repeat: repeat;
  border-radius: var(--radius-small);
  box-sizing: border-box;
  color: var(--color-parchment);
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1.2fr 1fr;
  min-height: 25rem;
  padding: 2.5rem;
  position: relative;
}

.announcements::before {
  background-color: rgba(26, 26, 26, 0.7);
  border-radius: var(--radius-small);
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.announcement-text-container {
  position: relative;
  text-align: left;
  z-index: 2;
}

.announcement-text {
  font-size: var(--font-size-base);
  line-height: 1.6rem;
  white-space: pre-line;
}

/* Never crop the announcement. It is whatever image is attached to the Square
   item — usually a square flyer with its own margins — so cover + a height cap
   sliced the top and bottom off it: at any column wider than the 25rem cap, a
   1080x1080 image was being filled into a landscape box. Bound it on both axes
   instead and let it keep its aspect ratio, so any shape the restaurant
   uploads is shown whole and centred. */
.announcements .announcement-image {
  border-radius: var(--radius-small);
  box-shadow: var(--elevation-2);
  filter: brightness(1.3);
  height: auto;
  margin: 0 auto;
  max-height: 25rem;
  max-width: 100%;
  object-fit: contain;
  position: relative;
  width: auto;
  z-index: 2;
}

.announcements .announcement-text-container,
.announcements .announcement-image {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}

section.announcements-section.visible .announcement-text-container {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

section.announcements-section.visible .announcement-image {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* ==========================================================================
   5. Menu Preview Grid
   ========================================================================== */

.menu-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  margin: 0 auto;
  max-width: 75rem;
  text-align: center;
  width: 100%;
}

/* Bento Menu Grid System */
.menu-grid-top-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 30%;
}

.menu-grid-bottom-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 60%;
}

.menu-grid-top,
.menu-grid-bottom {
  display: grid;
  gap: 0.5rem;
  min-height: 0;
  min-width: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.menu-grid-top {
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: minmax(0, 1fr);
}

.menu-grid-bottom {
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: minmax(0, 1fr);
}

.menu-grid-top::before {
  border-left: 0.1875rem solid var(--color-faded-copper);
  border-top: 0.1875rem solid var(--color-faded-copper);
  content: '';
  height: 3.75rem;
  left: -1.25rem;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  top: -1.25rem;
  width: 3.75rem;
  z-index: 10;
}

.menu-grid-bottom::after {
  border-bottom: 0.1875rem solid var(--color-faded-copper);
  border-right: 0.1875rem solid var(--color-faded-copper);
  bottom: -1.25rem;
  content: '';
  height: 3.75rem;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  right: -1.25rem;
  width: 3.75rem;
  z-index: 10;
}

.menu-grid-bottom__left-group {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
}

.menu-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 100%;
}

/* isolation + `transform: none` on .visible — the rounded-clip seam fix; the
   reasoning is on .story-column above. Keeps the ::after wash (z-index 1) and
   the title (z-index 2) in their own stacking context now that the reveal
   transform no longer supplies one. */
.menu-image-link {
  border-radius: var(--radius-small);
  display: block;
  height: 100%;
  isolation: isolate;
  min-height: 0;
  min-width: 0;
  opacity: 0;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  transform: translateY(2rem);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-image-link picture {
  height: 100%;
  width: 100%;
}

.menu-image-link img {
  display: block;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  transition: transform 0.3s ease;
  width: 100%;
}

.menu-image-link.visible {
  opacity: 1;
  transform: none;
}

.menu-image-link--tall {}

.menu-image-link--wide {
  grid-column: span 2;
}

.menu-image-link::after {
  background-color: #000;
  bottom: 0;
  content: '';
  left: 0;
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.menu-image-link:hover::after {
  opacity: 0.7;
}

.menu-image-link:hover img {
  transform: scale(1.1);
}

.menu-image-title {
  color: var(--color-parchment);
  font-family: var(--font-display);
  font-size: var(--font-size-fluid-large);
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 0;
  text-align: center;
  text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.75);
  transform: translateY(calc(-50% + 0.625rem));
  transition: opacity 0.5s ease-out 0.4s, transform 0.5s ease-out 0.4s;
  width: 100%;
  text-transform: uppercase;
  z-index: 2;
}

.menu-image-link.visible .menu-image-title {
  opacity: 1;
  transform: translateY(-50%);
}

/* ==========================================================================
   5.5 Reservations Section
   ========================================================================== */

section.reservations {
  opacity: 0;
  padding-bottom: 1rem;
  transform: translateY(1.5rem);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

section.reservations.visible {
  opacity: 1;
  transform: translateY(0);
}

.reservations-content {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 auto 2rem;
  max-width: 45rem;
  padding: 1.5rem 2rem;
  position: relative;
  text-align: center;
}

.reservations-content::before,
.reservations-content::after {
  content: '';
  height: 2.5rem;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
  width: 2.5rem;
  z-index: 10;
}

.reservations-content::before {
  border-left: 0.1875rem solid var(--color-faded-copper);
  border-top: 0.1875rem solid var(--color-faded-copper);
  left: 0;
  top: 0;
  transform: translate(-1rem, -1rem);
}

.reservations-content::after {
  border-bottom: 0.1875rem solid var(--color-faded-copper);
  border-right: 0.1875rem solid var(--color-faded-copper);
  bottom: 0;
  right: 0;
  transform: translate(1rem, 1rem);
}

section.reservations.visible .reservations-content::before,
section.reservations.visible .reservations-content::after {
  opacity: 0.8;
  transform: translate(0, 0);
}

.reservations-content p {
  color: var(--color-carbon-black);
  font-size: var(--font-size-medium);
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
}

.reservations-content .reservations-phone {
  color: var(--color-coffee-bean);
  font-family: var(--font-primary);
  font-size: var(--font-size-medium);
  font-style: normal;
  letter-spacing: 0.05em;
}

.reservations-phone strong {
  font-weight: 600;
}

.reservations-phone a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ==========================================================================
   6. Owner Chef (Masa) Section
   ========================================================================== */

/* isolation + `transform: none` on .visible — the rounded-clip seam fix; the
   reasoning is on .story-column above. This section is the one that proved the
   diagnosis: .masa-main-photo has no clip, no overlay and no transform of its
   own, just border-radius on an <img>, and it still showed the seam — because
   this section's leftover reveal transform was compositing everything inside
   it. The z-index: 1/2/3 children (photo, figure, title) stay contained via
   isolation. */
section.about-masa {
  isolation: isolate;
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

section.about-masa.visible {
  opacity: 1;
  transform: none;
}

.about-masa .section-title {
  position: relative;
  text-align: center;
  z-index: 3;
}

.about-masa .section-content {
  align-items: center;
  display: grid;
  gap: 4rem;
  grid-template-columns: 1fr 1.5fr;
  margin: 0 auto;
  max-width: 68.75rem;
}

.masa-photo {
  justify-self: center;
  margin-right: 3rem;
  max-width: 25rem;
  position: relative;
}

.masa-photo .masa-figure-wrap {
  position: absolute;
  right: -3rem;
  top: -2rem;
  width: 40%;
  z-index: 2;
  transition: transform 0.4s ease;
}

.masa-photo:hover .masa-figure-wrap {
  transform: translateY(-0.3125rem);
}

.about-masa .masa-photo .masa-figure {
  border-radius: var(--radius-small);
  box-shadow: var(--elevation-2);
  display: block;
  height: auto;
  margin: 0;
  width: 100%;
}

.masa-photo .masa-main-wrap {
  position: relative;
  width: 100%;
  z-index: 1;
}

.masa-photo .masa-main-photo {
  border-radius: var(--radius-medium);
  box-shadow: var(--elevation-3);
  display: block;
  height: auto;
  object-fit: cover;
  position: relative;
  width: 100%;
  z-index: 1;
}

.masa-description {
  color: var(--color-carbon-black);
  text-align: left;
}

.masa-description h3 {
  font-size: var(--font-size-extra-large);
  margin-bottom: 1.5rem;
  text-align: left;
}

.masa-description p {
  font-size: var(--font-size-base);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   Home-Specific Title Animations
   ========================================================================== */

body[data-page="home"] .section-title {
  font-family: var(--font-display);
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-page="home"] .section-title.visible {
  opacity: 1;
  transform: translateY(0);
}

body[data-page="home"] .section-title::after {
  background-image: url('/static/patterns/seigaiha-accent.svg?v=1786769922988');
  margin-top: -1.25rem;
}

/* ==========================================================================
   7. Keyframe Animations
   ========================================================================== */

@keyframes fadeZoom1 {
  0% { opacity: 0; transform: scale(1); }
  8.33% { opacity: 1; }
  25% { opacity: 1; }
  33.33% { opacity: 0; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes fadeZoom2 {
  0% { opacity: 0; transform: scale(1); }
  25% { opacity: 0; transform: scale(1); }
  33.33% { opacity: 1; }
  50% { opacity: 1; }
  58.33% { opacity: 0; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes fadeZoom3 {
  0% { opacity: 0; transform: scale(1); }
  50% { opacity: 0; transform: scale(1); }
  58.33% { opacity: 1; }
  75% { opacity: 1; }
  83.33% { opacity: 0; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes fadeZoom4 {
  0% { opacity: 1; transform: scale(1.075); }
  8.33% { opacity: 0; transform: scale(1.1); }
  75% { opacity: 0; transform: scale(1); }
  83.33% { opacity: 1; }
  100% { opacity: 1; transform: scale(1.075); }
}

@keyframes pulseGlow {

  0%,
  100% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
  }

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

@keyframes fadeInLogo {
  to {
    opacity: 1;
  }
}

/* ==========================================================================
   8. Responsive Media Queries
   ========================================================================== */
/* Large Screens / Tablets (1296px) - Switch hero logo to vertical */
@media (max-width: 81rem) {
  .hero-logo-group {
    flex-direction: column;
    transform: translateY(-2vh);
  }

  /* Below this breakpoint the lockup stacks (SUSHI / kanji / KIZUNA / tagline),
     so its height is the sum of four width-sized pieces and could exceed the
     hero — which clips "SUSHI" off the top and the tagline off the bottom at
     mid-range aspect ratios (e.g. 1152x864, 1280x1000). Cap each piece by
     viewport height as well, so whichever of width/height is scarcer wins.

     The height caps are 38/9/4.5vh rather than 45/12/5.5 because the hero now
     reserves 5rem at the top for the header, and the stack was previously
     sized to use very nearly the whole viewport: at 598x764 it came to 694px
     of content in 684px of space, so the reserved strip was enough to push it
     back into clipping. Worst case is now 2 text lines (2 x 1.6 x 9vh) plus
     the kanji (38vh) plus 2 tagline lines (2 x 1.6 x 4.5vh) = ~81vh, which
     clears the 5rem allowance at every height. On phone portrait the width
     terms still win, so mobile sizing is unchanged. */
  .hero-logo-group .hero-logo {
    max-height: 38vh;
    max-width: 80vw;
  }

  .hero-logo-text {
    font-size: clamp(3rem, min(1rem + 9vw, 9vh), 7rem);
    padding: 0 1.25rem;
  }

  .hero-main-title {
    font-size: clamp(1.75rem, min(1.25rem + 2.4vw, 4.5vh), 2.5rem);
    padding: 0 1.5rem;
  }

  .story-column p {
  font-size: var(--font-size-extra-small);
    padding: 1.5rem;
  }
}

/* Standard Tablets */
@media (max-width: 56.5625rem) {
  .about-masa .section-content {
    gap: 2rem;
  }

  .our-story-content {
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
    /* Keep 3 columns on standard tablets */
  }

  .story-column p {
    text-align: center;
  font-size: var(--font-size-extra-small);
    padding: 1.25rem;
  }

  .story-column h2 {
  font-size: var(--font-size-large);
  }

  section.announcements::before {
    border-radius: var(--radius-medium);
  }
}

/* Mid-sized Screens (760px) */
@media (max-width: 47.5rem) {
  .our-story-content {
    grid-template-columns: 1fr;
  }

  /* Mobile cards are always-on (no hover reveal): the photo becomes an
     absolute background layer, the text joins the layout flow so a card can
     grow past 13rem when its copy needs the room, and the title pins to the
     same top offset on every card. */
  .story-column {
    align-items: stretch;
    height: auto;
    min-height: 13rem;
  }

  .story-column picture,
  .story-column img {
    inset: 0;
    position: absolute;
  }

  .our-story-content .story-column h2 {
    letter-spacing: 0.1em;
    opacity: 1;
    top: 1.5rem;
    transform: none;
  }

  .our-story-content .story-column p {
    /* Text sits on the dark end of the gradient with a uniform bottom
       margin; the top padding reserves the pinned title's zone. */
    align-items: flex-end;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
    box-sizing: border-box;
    display: flex;
  font-size: var(--font-size-2x-small);
    height: auto;
    justify-content: center;
    line-height: 1.4;
    opacity: 1;
    padding: 4.25rem 1.5rem 1.25rem;
    position: static;
    /* Neutralize the desktop hover-reveal offset (translateY on the base
       rule), which otherwise shifts the whole block 1.25rem down. */
    transform: none;
    width: 100%;
  }

  /* Same geometry as the resting state, so tapping a card never nudges
     the title or text. */
  .our-story-content .story-column:hover h2 {
    opacity: 1;
    transform: none;
  }

  /* Mobile cards are always-on, so tapping must not darken or scale them —
     hold both the image and the wash at their resting values. */
  .our-story-content .story-column:hover img {
    transform: none;
  }

  .our-story-content .story-column:hover::after {
    background-color: rgba(0, 0, 0, 0.53);
  }

  section.our-story.visible .story-column:hover {
    box-shadow: var(--elevation-1);
    transform: none;
  }

  .about-masa .section-content {
    gap: 2rem;
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-image-container {
    margin-bottom: 2rem;
  }

  .masa-description h3 {
    text-align: center;
  }

  .masa-description p {
    margin: 0;
    padding: 0 1rem;
  }

  /* No bottom margin: the single-column grid's row-gap owns the gap to the
     description. A grid item's margin adds to the gap rather than collapsing
     into it, so declaring both rendered 64px where the gap says 32px. */
  .masa-photo {
    justify-self: center;
    margin: 0 auto;
    max-width: 16rem;
    padding-right: 2rem;
    position: relative;
    width: 100%;
  }

  .about-masa .masa-photo .masa-figure-wrap {
    position: absolute;
    right: 0rem;
    top: -1.5rem;
    width: 35%;
    z-index: 2;
  }

  .announcements {
    border-radius: var(--radius-medium);
    grid-template-columns: 1fr;
    padding: 1.5rem;
    width: calc(100% - 2rem);
    margin: 0 auto;
  }


  /* Bento Menu Mobile Overrides */
  .menu-grid-top-wrapper,
  .menu-grid-bottom-wrapper {
    padding-bottom: 0;
  }
  
  .menu-grid-top,
  .menu-grid-bottom {
    position: relative;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .menu-grid-bottom__left-group {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .menu-image-link {
    height: 12rem;
  }

  .menu-image-link--tall {
    height: 14rem;
  }

  .menu-image-link img {
    aspect-ratio: auto;
    height: 100%;
  }

  /* Brush frame adjustments */
  .menu-grid-top::before {
    height: 2.5rem;
    left: -0.75rem;
    top: -0.75rem;
    width: 2.5rem;
  }

  .menu-grid-bottom::after {
    bottom: -0.75rem;
    height: 2.5rem;
    right: -0.75rem;
    width: 2.5rem;
    margin: 0;
  }

}

/* Short landscape viewports (e.g. a phone turned sideways). The logo text is
   sized by viewport width (8vw), so on a wide-but-short screen it balloons and
   the lockup grows taller than the hero — centering it then clips "SUSHI" off
   the top and the title off the bottom. Cap the type by height (whichever of
   width/height is smaller wins), trim the kanji and the title's lower margin,
   and drop the upward nudge so the whole lockup stays within the viewport.

   The caps are tighter than the space alone requires, because the hero now
   also reserves 5rem at the top for the header.

   Scoped to the stacked lockup only. Above 81rem the lockup is a single row —
   SUSHI, the kanji and KIZUNA side by side — so it is roughly the height of
   the kanji alone rather than three stacked pieces, and it has room to spare
   on a short window. Applying the stacked caps there shrank the restaurant
   name for no reason; the wide branch below keeps the sizes it had. */
@media (orientation: landscape) and (max-height: 48rem) and (max-width: 81rem) {
  .hero-logo-group {
    transform: none;
  }

  .hero-logo-group .hero-logo {
    max-height: 38vh;
  }

  .hero-logo-text {
    font-size: clamp(1.5rem, min(7vw, 8vh), 8rem);
  }

  .hero-main-title {
    font-size: clamp(1rem, min(4.5vw, 4.5vh), 2.5rem);
    margin-bottom: 0.5rem;
  }
}

/* Short landscape with the lockup in a row. Only the kanji and the tagline
   need capping by height here — the name keeps its full display size. */
@media (orientation: landscape) and (max-height: 48rem) and (min-width: 81.0625rem) {
  .hero-logo-group {
    transform: none;
  }

  .hero-logo-group .hero-logo {
    max-height: 50vh;
  }

  .hero-main-title {
    font-size: clamp(1rem, min(5vw, 5.5vh), 2.5rem);
    margin-bottom: 0.5rem;
  }
}