/* =======================================================================
   SUSHI SF — PAGE-SPECIFIC RULES
   Scoped to .page--sushi-sf

   Scope:
   - Hero strip + logo animation
   - Full-bleed process images
   - Result epilogue card
======================================================================= */


/* ======================================================
   HERO STRIP + LOGO ANIMATION
====================================================== */

.page--sushi-sf .sushi-hero-strip {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto var(--space-2);
}

.page--sushi-sf .sushi-strip-img,
.page--sushi-sf .sushi-hero-photo {
  display: block;
  width: 100%;
  height: auto;
}

/* Center logo over strip */
.page--sushi-sf .sushi-logo-anim {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Base + smile share the same space */
.page--sushi-sf .sushi-logo-base,
.page--sushi-sf .sushi-logo-smile {
  position: absolute;
  width: 52%;
  max-width: 440px;
}

/* SVG styling: black fill, no stroke */
.page--sushi-sf .sushi-logo-svg {
  width: 100%;
  height: auto;
}

.page--sushi-sf .sushi-logo-svg polyline,
.page--sushi-sf .sushi-logo-svg path {
  fill: #000000;
  stroke: none;
  stroke-width: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Animation: base first, then smile */
.page--sushi-sf .sushi-logo-base {
  opacity: 0;
  transform: translateY(12px);
  animation: sushiBaseIn 0.8s ease-out forwards;
  animation-delay: 0.25s;
}

.page--sushi-sf .sushi-logo-smile {
  opacity: 0;
  transform: translateY(4px);
  animation: sushiSmileIn 0.7s ease-out forwards;
  animation-delay: 1.05s;
}

@keyframes sushiBaseIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sushiSmileIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Medium screens */
@media (max-width: 1100px) {
  .page--sushi-sf .sushi-logo-base,
  .page--sushi-sf .sushi-logo-smile {
    width: 56%;
    max-width: 320px;
  }
}

/* Small screens */
@media (max-width: 700px) {
  .page--sushi-sf .sushi-logo-base,
  .page--sushi-sf .sushi-logo-smile {
    width: 64%;
    max-width: 260px;
  }
}


/* ======================================================
   FULL-BLEED PROCESS IMAGES
====================================================== */

.page--sushi-sf .section--sushi-web-comps {
  padding-block: var(--space-4);
}

.page--sushi-sf .sushi-media-fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.page--sushi-sf .sushi-web-comp-img {
  display: block;
  width: 100%;
  height: auto;
  /* border intentionally removed site-wide */
}


/* ======================================================
   RESULT EPILOGUE CARD (OPTION B)
   Quiet "back cover" placement.
   Put the SVG inside Result, after narrative, before exit.
====================================================== */

.page--sushi-sf .sushi-epilogue-card {
  margin-top: 0;
  padding-top: calc(var(--space-2) + var(--space-1));
  display: flex;
  justify-content: flex-start;
}

.page--sushi-sf .sushi-epilogue-card svg {
  display: block;
  width: clamp(312px, 26vw, 408px);
  height: auto;
}

@media (max-width: 900px) {
  .page--sushi-sf .sushi-epilogue-card {
    margin-bottom: var(--space-2);
  }

  .page--sushi-sf .sushi-epilogue-card svg {
    width: clamp(260px, 70vw, 380px);
  }
}