/* ============================================================
   HERO v3 — 桜の庭
   Replaces the single giant poster with a staged composition:
   two sakura trees framing the scene, a trio of dish cards,
   and a soft radial wash so the eye has somewhere to rest.
   ============================================================ */

/* ---------- soft ambient wash behind everything ---------- */
.hero{
  padding-top:clamp(38px,5vw,64px);
  padding-bottom:clamp(56px,7vw,96px);
  background:
    radial-gradient(58% 62% at 76% 34%,rgba(233,184,190,.20),transparent 66%),
    radial-gradient(46% 52% at 12% 76%,rgba(95,122,74,.10),transparent 68%),
    linear-gradient(180deg,#FDFAF4 0%,var(--paper) 42%,var(--paper) 100%);
}

/* the seigaiha pattern gets pushed back so it never fights the trees */
.hero-pattern{opacity:.30}

/* hero scenery: one SVG landscape behind everything */
/* hero backdrop: soft sakura photograph, veiled toward the paper tone
   on the left so the headline stays readable */
.hero-scene{
  position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;
  pointer-events:none;
  background:var(--paper) url("img/hero-bg.jpg") right 30% / cover no-repeat;
  opacity:1;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
}
@media (max-width:1100px){
  .hero-scene{background-image:url("img/hero-bg-tablet.jpg")}
}
@media (max-width:939px){
  .hero-scene{bottom:auto;height:560px;background-position:center 20%}
}
@media (max-width:600px){
  .hero-scene{height:520px;background-image:url("img/hero-bg-mobile.jpg");background-position:center 15%}
}
/* the headline sits on top of the branch, so lift the paper tone behind the
   copy only — the blossoms on the right stay untouched */
.hero-scene::after{
  content:'';
  position:absolute;inset:0;
  pointer-events:none;
  background:radial-gradient(115% 85% at 8% 22%,
    rgba(251,247,240,.92) 0%,
    rgba(251,247,240,.86) 32%,
    rgba(251,247,240,.45) 58%,
    rgba(251,247,240,0) 78%);
}
@media (max-width:939px){
  .hero-scene::after{
    background:radial-gradient(125% 70% at 6% 26%,
      rgba(251,247,240,.92) 0%,
      rgba(251,247,240,.82) 38%,
      rgba(251,247,240,.30) 68%,
      rgba(251,247,240,0) 88%);
  }
}
.hero-petals{position:absolute;left:0;top:0;pointer-events:none;z-index:2}

/* keep copy above the foliage */
.hero-copy{position:relative;z-index:4}

/* ============================================================
   NEW HERO MEDIA — trio of dishes instead of one poster
   ============================================================ */

.hero-media{
  position:relative;
  z-index:3;
  min-height:clamp(340px,46vw,520px);
  overflow:visible;
}

/* main plate */
.hero-plate{
  position:relative;
  width:min(100%,430px);
  margin-inline:auto;
  border-radius:50% 50% 46% 46% / 54% 54% 46% 46%;
  overflow:hidden;
  box-shadow:
    0 2px 4px rgba(34,29,25,.06),
    0 26px 60px -24px rgba(34,29,25,.42);
  background:var(--paper-3);
  aspect-ratio:1/1.06;
}
.hero-plate img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.hero-plate:hover img{transform:scale(1.05)}
.hero-plate::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),inset 0 0 70px rgba(34,29,25,.10);
}

/* the dashed enso ring behind the plate */
.hero-ring{
  position:absolute;
  left:50%;top:50%;
  width:min(112%,520px);
  transform:translate(-50%,-52%);
  z-index:-1;
  color:var(--shu);
  opacity:.16;
  pointer-events:none;
}
.hero-ring svg{width:100%;height:auto}
.hero-ring circle{
  stroke-dasharray:6 13;
  animation:ringSpin 60s linear infinite;
  transform-origin:center;
}
@keyframes ringSpin{to{transform:rotate(360deg)}}

/* small satellites */
.hero-mini{
  position:absolute;
  border-radius:50%;
  overflow:hidden;
  background:var(--paper-3);
  box-shadow:0 14px 34px -14px rgba(34,29,25,.5),0 0 0 1px rgba(255,255,255,.6);
  animation:orbFloat 8s ease-in-out infinite;
}
.hero-mini img{width:100%;height:100%;object-fit:cover}

.hero-mini.m1{
  width:clamp(84px,11vw,124px);height:clamp(84px,11vw,124px);
  left:-2%;top:6%;
  animation-delay:.4s;
}
.hero-mini.m2{
  width:clamp(70px,9vw,104px);height:clamp(70px,9vw,104px);
  right:0%;bottom:16%;
  animation-delay:2.2s;
}
@media (max-width:640px){
  .hero-mini.m1{width:72px;height:72px;left:-1%}
  .hero-mini.m2{width:62px;height:62px;right:-1%}
}

/* price card now sits under the plate, centred */
.float-card{
  position:relative;
  left:auto;bottom:auto;
  margin:-34px auto 0;
  width:max-content;
  max-width:min(100%,330px);
  z-index:5;
}

/* ---------- trust strip under the plate ---------- */
.hero-trust{
  display:flex;align-items:center;justify-content:center;
  gap:18px;flex-wrap:wrap;
  margin-top:26px;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);
}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}
.hero-trust i{
  width:5px;height:5px;border-radius:50%;background:var(--sakura-deep);
  display:inline-block;
}

/* ---------- stats block gets a bit more presence ---------- */
.hero-facts{
  margin-top:clamp(28px,3.5vw,40px);
  padding-top:clamp(20px,2.5vw,26px);
}

/* hide the old arch if it lingers anywhere */
.arch,.arch-frame{display:none}

@media (max-width:939px){
  .hero-media{max-width:430px;margin-inline:auto;width:100%;min-height:0}
  .hero-plate{width:100%}
  .hero-ring{display:none}
}



/* scenery never needs the old side-tree rules */
.sakura-tree{display:none}

/* ============================================================
   HERO v5 — itamae at the board
   ============================================================ */
.hero-media{isolation:isolate}

.hero-samurai{
  position:absolute;
  z-index:1;                    /* behind the plate: he stands behind his board */
  right:-19%;
  top:-13%;
  width:clamp(238px,40%,400px);
  margin:0;
  pointer-events:none;
}

/* framed like a print on the wall — the conical hat sits right at the
   top of the frame, so a deep arch would crop it. A light radius keeps
   every detail and still reads as paper, not a pasted rectangle. */
.hero-samurai picture{display:block}
.hero-samurai img{
  display:block;
  width:100%;height:auto;
  border-radius:18px;
  object-fit:cover;
  border:1px solid rgba(120,92,70,.18);
  box-shadow:
    0 1px 2px rgba(34,29,25,.06),
    0 18px 40px -22px rgba(60,42,30,.42);
  /* warm the cool kitchen shadows toward the paper palette */
  filter:saturate(.97) contrast(1.015) sepia(.05);
}

/* a hairline of vermilion, set back like a mat around a print */
.hero-samurai::before{
  content:'';
  position:absolute;
  inset:-9px;
  border-radius:24px;
  border:1px solid rgba(184,74,54,.22);
  pointer-events:none;
}

.hero-samurai figcaption{
  position:relative;
  margin-top:14px;
  text-align:center;
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.hero-samurai figcaption::before{
  content:'';
  display:block;
  width:30px;height:1px;
  margin:0 auto 9px;
  background:rgba(184,74,54,.45);
}

/* below 940px the hero is one column, so the photo cannot sit behind a
   narrow plate — it becomes a framed print above the plate instead */
@media (max-width:939px){
  .hero-samurai{
    position:relative;
    right:auto;top:auto;
    width:100%;
    margin:0 0 2px;
    order:-1;
  }
  .hero-samurai img{
    width:100%;
    max-height:52vh;
    border-radius:14px;
    object-fit:cover;
    object-position:50% 22%;
  }
  .hero-samurai::before{display:none}
  .hero-samurai figcaption{margin-top:10px}
}

/* the plate sits in front of him, a touch to the left so he is visible */
.hero-plate{z-index:2;position:relative}
.hero-ring{z-index:0}


/* softer sakura: it must read as背景, not compete with the figure */
.hero-scene{opacity:.8}