/* ============================================================
   Kiray Sushi — link-in-bio
   Conceito: bentô lacado. Cada compartimento é um destino.
   ============================================================ */

:root{
  /* tinta */
  --sumi:        #0B0E13;
  --sumi-2:      #10141C;
  --cell:        #1A202B;
  --cell-2:      #121721;

  /* vermelho da marca (hinomaru) */
  --shu:         #D0233C;
  --shu-deep:    #8E1226;

  /* papel */
  --washi:       #F2EDE6;
  --take:        #949AA6;

  --rim:         rgba(242,237,230,.09);
  --rim-hi:      rgba(208,35,60,.45);

  --gap:         8px;
  --radius:      20px;

  --display: "Shippori Mincho B1", "Times New Roman", serif;
  --sans:    "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
  min-height:100svh;
  background:var(--sumi);
  color:var(--washi);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:flex;
  justify-content:center;
  padding:clamp(20px,6vw,56px) 18px calc(28px + env(safe-area-inset-bottom));
}

/* leve textura de tinta ao fundo — nada de gradiente berrante */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(208,35,60,.13), transparent 60%),
    radial-gradient(80% 50% at 50% 110%, rgba(142,18,38,.10), transparent 65%);
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }

.skip{
  position:absolute; left:-9999px; top:12px;
  background:var(--shu); color:#fff; padding:10px 16px; border-radius:10px; z-index:10;
}
.skip:focus{ left:16px; }

:focus-visible{ outline:2px solid var(--shu); outline-offset:4px; border-radius:6px; }

.page{
  position:relative; z-index:1;
  width:100%; max-width:520px;
  display:flex; flex-direction:column;
  gap:clamp(24px,5vw,36px);
}

/* ---------- topo ---------- */

.hero{ text-align:center; }

.hero__logo{ font-size:0; line-height:0; }

.hero__logo img{
  width:min(80%,340px);
  margin-inline:auto;
  filter:drop-shadow(0 14px 34px rgba(208,35,60,.22));
}

.hero__tag{
  margin-top:6px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--take);
}

.status{
  margin-top:16px;
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 12px;
  border:1px solid var(--rim);
  border-radius:999px;
  background:var(--sumi-2);
  font-size:13px;
  color:var(--take);
}
.status b{ color:var(--washi); font-weight:500; }
.status i{ font-style:normal; color:#454B58; margin:0 1px; }

.status__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--take);
  box-shadow:0 0 0 0 rgba(0,0,0,0);
}
.status.is-open .status__dot{
  background:#37C46B;
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%   { box-shadow:0 0 0 0 rgba(55,196,107,.45); }
  70%  { box-shadow:0 0 0 7px rgba(55,196,107,0); }
  100% { box-shadow:0 0 0 0 rgba(55,196,107,0); }
}

/* ---------- bentô ---------- */

.bento{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
  padding:var(--gap);
  border:1px solid var(--rim);
  border-radius:calc(var(--radius) + var(--gap));
  background:linear-gradient(180deg,#0C1017,#080B10);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}

.cell{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:112px;
  padding:18px;
  border:1px solid var(--rim);
  border-radius:var(--radius);
  background:linear-gradient(165deg,var(--cell),var(--cell-2));
  transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}

/* brilho de laca que corre na diagonal */
.cell::after{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg,transparent 38%,rgba(242,237,230,.05) 50%,transparent 62%);
  transform:translateX(-60%);
  transition:transform .7s var(--ease);
}

.cell:hover,.cell:focus-visible{
  transform:translateY(-3px);
  border-color:var(--rim-hi);
}
.cell:hover::after,.cell:focus-visible::after{ transform:translateX(60%); }
.cell:active{ transform:translateY(-1px) scale(.995); }

.cell--wide{
  grid-column:1 / -1;
  flex-direction:row;
  align-items:center;
  gap:14px;
  min-height:0;
  padding:16px 18px;
}

.cell__eyebrow{
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--take);
}
.cell__eyebrow [lang="ja"]{
  font-family:var(--display);
  font-size:13px;
  letter-spacing:.04em;
  text-transform:none;
  color:var(--shu);
}

.cell__title{
  font-family:var(--display);
  font-weight:600;
  font-size:19px;
  line-height:1.25;
  letter-spacing:.01em;
}

.cell__desc{
  font-size:13.5px;
  color:var(--take);
  max-width:20ch;
}

.cell__icon{
  width:26px; height:26px;
  fill:none; stroke:var(--washi); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  margin-bottom:2px;
  transition:stroke .35s var(--ease);
}
.cell__icon .fill{ fill:var(--washi); stroke:none; transition:fill .35s var(--ease); }
.cell:hover .cell__icon{ stroke:var(--shu); }
.cell:hover .cell__icon .fill{ fill:var(--shu); }

.cell--wide .cell__icon{ margin:0; flex:none; }
.cell--wide .cell__title{ font-size:17px; }

.cell__stack{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.cell--wide .arrow--end{ margin-left:auto; }

.arrow{
  width:18px; height:18px;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .35s var(--ease);
}
.arrow--end{ flex:none; color:var(--take); }
.cell:hover .arrow{ transform:translateX(4px); }

/* ---------- compartimento principal ---------- */

.cell--hero{
  grid-column:1 / -1;
  min-height:190px;
  padding:22px;
  padding-right:min(44%,196px);
  gap:8px;
  background:linear-gradient(150deg,#1A202B,#12161F 60%);
}

.cell--hero .cell__title{ font-size:27px; }

.cell--hero .cell__cta{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:700;
  letter-spacing:.02em;
  color:var(--shu);
  padding-top:10px;
}

/* o hinomaru: o prato de sushi vira o sol vermelho, sangrando para fora */
.hinomaru{
  position:absolute; z-index:-1;
  right:-34px; top:50%;
  width:214px; height:214px;
  translate:0 -50%;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #E4304C, var(--shu) 55%, var(--shu-deep));
  box-shadow:0 0 70px -14px rgba(208,35,60,.5);
  overflow:hidden;
  transition:transform .6s var(--ease);
}
/* o prato foi fotografado sobre fundo branco: a máscara radial dissolve
   esse branco no vermelho do disco e deixa só a comida em cor natural */
.hinomaru img{
  position:absolute; inset:50% auto auto 50%;
  width:116%; height:116%;
  max-width:none;
  translate:-50% -50%;
  object-fit:cover;
  filter:saturate(1.12) contrast(1.04) drop-shadow(0 6px 14px rgba(0,0,0,.35));
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 36%, rgba(0,0,0,.65) 45%, transparent 54%);
          mask-image:radial-gradient(circle at 50% 50%, #000 36%, rgba(0,0,0,.65) 45%, transparent 54%);
}
/* puxa a borda da foto de volta para o vermelho, sem tocar na comida */
.hinomaru::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, transparent 33%, rgba(208,35,60,.9) 53%, var(--shu-deep) 100%);
  mix-blend-mode:multiply;
}
.hinomaru::after{
  content:"";
  position:absolute; inset:0; z-index:2;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(242,237,230,.16);
}
.cell--hero:hover .hinomaru{ transform:scale(1.05) rotate(6deg); }

/* ---------- rodapé ---------- */

.foot{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#5C6270;
}
.foot__mark{
  width:26px; height:1px;
  background:linear-gradient(90deg,transparent,var(--shu),transparent);
}

/* ---------- telas maiores ---------- */

@media (min-width:560px){
  .cell{ min-height:126px; padding:20px; }
  .cell--hero{ min-height:214px; padding:26px; padding-right:224px; }
  .cell--hero .cell__title{ font-size:30px; }
  .hinomaru{ width:232px; height:232px; right:-28px; }
}

/* ---------- entrada: o bentô é montado peça por peça ---------- */

@media (prefers-reduced-motion:no-preference){
  .hero__logo img,.hero__tag,.status,.cell,.foot{
    animation:pack .7s var(--ease) both;
  }
  .hero__logo img{ animation-delay:.05s; }
  .hero__tag   { animation-delay:.14s; }
  .status      { animation-delay:.20s; }
  .cell:nth-child(1){ animation-delay:.26s; }
  .cell:nth-child(2){ animation-delay:.33s; }
  .cell:nth-child(3){ animation-delay:.39s; }
  .cell:nth-child(4){ animation-delay:.45s; }
  .foot        { animation-delay:.55s; }

  @keyframes pack{
    from{ opacity:0; transform:translateY(14px) scale(.985); }
    to  { opacity:1; transform:none; }
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}