/* ============================================================
   仕掛け用スタイル: 印刷アニメーション + シミュレーター
   ============================================================ */

/* ---------- トップ: ロゴラテが印刷されていくアニメ ---------- */
.hero-img .main{animation:printReveal 2.2s ease-out .5s both}
@keyframes printReveal{
  from{clip-path:inset(0 0 100% 0)}
  to{clip-path:inset(0 0 0 0)}
}
.hero-img::after{
  content:"";position:absolute;left:4%;right:4%;top:0;height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent,#ff7a59 30%,#ffc94d 70%,transparent);
  box-shadow:0 0 12px rgba(255,122,89,.6);
  animation:printLine 2.2s ease-out .5s both;opacity:0;z-index:2
}
@keyframes printLine{
  0%{top:0;opacity:1}
  92%{opacity:1}
  100%{top:99%;opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .hero-img .main{animation:none}
  .hero-img::after{display:none}
}

/* ---------- コーヒーカーソル(PCのみ) ---------- */
@media (hover:hover) and (pointer:fine){
  body{cursor:url('../img/cursor.png') 6 6, auto}
  a,button,label,select,input[type=range],summary{cursor:pointer}
  input[type=text],input[type=email],input[type=tel],textarea{cursor:text}
}

/* ---------- クリックの雫 ---------- */
.coffee-drop{
  position:absolute;width:9px;height:9px;border-radius:50% 50% 60% 60%;
  background:radial-gradient(circle at 35% 30%,#c98a4b,#6b3f1d);
  pointer-events:none;z-index:9999;
  animation:dropFly .65s ease-in forwards;
}
@keyframes dropFly{
  0%{transform:translate(0,0) scale(1);opacity:.95}
  100%{transform:translate(var(--dx),var(--dy)) scale(.4);opacity:0}
}

/* ---------- スクロールでふわっと表示 ---------- */
.js-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.js-reveal.in{opacity:1;transform:none}

/* ---------- 湯気 ---------- */
.steam{
  position:absolute;top:4%;width:20px;height:70px;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.95));
  filter:blur(7px);opacity:0;pointer-events:none;
  animation:steamUp 3s ease-in-out infinite;
}
@keyframes steamUp{
  0%{transform:translateY(30px) scaleX(1);opacity:0}
  25%{opacity:1}
  60%{opacity:.85}
  100%{transform:translateY(-64px) scaleX(1.8) rotate(10deg);opacity:0}
}

/* ---------- シミュレーター ---------- */
.sim-wrap{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.sim-canvas-box{text-align:center}
.sim-canvas-box canvas{width:100%;max-width:440px;border-radius:24px;box-shadow:var(--shadow)}
.sim-note{font-size:.76rem;color:var(--coffee-light);margin-top:12px}
.sim-controls{display:grid;gap:22px}
.sim-controls h3{font-family:var(--font-serif);font-size:1.05rem;letter-spacing:.06em}
.sim-tabs{display:flex;gap:10px}
.sim-tabs button{flex:1;padding:12px;border-radius:14px;border:2px solid var(--line);background:#fff;font-family:var(--font-sans);font-size:.9rem;font-weight:700;cursor:pointer;color:var(--coffee-light)}
.sim-tabs button.active{border-color:var(--gold);color:var(--gold);background:#fff6f3}
.sim-pane{display:none}
.sim-pane.active{display:block}
.sim-drop{border:2.5px dashed var(--line);border-radius:18px;padding:34px 20px;text-align:center;cursor:pointer;background:#fff;transition:.2s;font-size:.9rem;color:var(--coffee-light)}
.sim-drop:hover,.sim-drop.over{border-color:var(--teal,#2ec4b6);background:#f0fbf9}
.sim-drop input{display:none}
.sim-text-pane textarea{width:100%;padding:14px;border-radius:14px;border:2px solid var(--line);font-family:var(--font-sans);font-size:1rem;min-height:90px;resize:vertical}
.sim-opts{display:flex;gap:10px;flex-wrap:wrap}
.sim-opts button{padding:10px 18px;border-radius:999px;border:2px solid var(--line);background:#fff;cursor:pointer;font-size:.85rem;font-weight:700;color:var(--coffee-light);font-family:var(--font-sans)}
.sim-opts button.active{border-color:var(--gold);color:var(--gold);background:#fff6f3}
.sim-size input{width:100%}
.sim-actions{display:flex;gap:12px;flex-wrap:wrap}
.sim-actions .btn{cursor:pointer;border:none;font-family:var(--font-sans)}
.sim-privacy{font-size:.78rem;color:var(--coffee-light);background:var(--cream-2,#fff2e0);border-radius:12px;padding:12px 16px}
@media(max-width:900px){
  .sim-wrap{grid-template-columns:1fr}
}