/* ============================================================================
  couponcode.css（決定版 / 方式A・変数ゲート）
  - クーポンのコピーUI（::afterヒント / 「コピーしました！」バルーン）
  - 見た目・位置・アニメはCSSで一元管理（JSは状態切替のみ）
  - 速度・カーブは“変数ゲート”でフェーズ別に切替（競合を根絶）
  - 注意：cookie consent 等の --cc-* との衝突を避けるため、--cpn-* を採用
============================================================================ */

/* SSOT: 見た目とモーションの基準値（必要に応じて上書き可） */
:root{
  /* ツールチップ上下ギャップ（ご指定値） */
  --cpn-tip-gap-y: 2px;

  /* フェード時間（役割別に完全分離） */
  --cpn-fade-in:   240ms;   /* 表示（hover等で“スッ”と出る） */
  --cpn-fade-out:  480ms;   /* 非表示（hover離脱で“ゆっくり”消える） */

  /* 滞留／休符（バルーン系・再武装の間合い） */
  --cpn-hold: 1000ms;       /* 「コピーしました！」の滞留時間 */
  --cpn-rest: 160ms;        /* 休符（再出現抑止の間合い） */

  /* 再出現だけを超ゆっくりにする個別時間（方式A） */
  --cpn-hint-in: 1200ms;    /* 休符後の“じわ〜っ”時間（::afterの再出現専用） */

  /* イージング（非対称） */
  --cpn-ease-in:   cubic-bezier(.4,0,.2,1);   /* 退場/収束はやや速く（粘性） */
  --cpn-ease-out:  cubic-bezier(.2,.6,.2,1);  /* 登場はややゆっくり（上品） */
  --cpn-ease-both: cubic-bezier(.25,.1,.25,1);

  /* 色・角丸・余白・文字サイズ */
  --cpn-bg: rgba(0,0,0,0.75);
  --cpn-fg: #fff;
  --cpn-radius: 4px;
  --cpn-pad-v: 2px;
  --cpn-pad-h: 6px;
  --cpn-font-size: 10px;

  /* 「コピーしました！」だけ個別にずらす場合（未指定なら tip-gap と同値） */
  /* --cpn-copied-gap-y: 2px; */

  /* 変数ゲート（transitionの値だけ切替。宣言は下層で1本化） */
  /* ::after（ヒント）の登場側コントロール：基底は“抜け側”の値 */
  --cpn-enter-dur:  var(--cpn-fade-out);
  --cpn-enter-ease: var(--cpn-ease-in);

  /* バルーンの登場側コントロール */
  --cpn-balloon-in-dur:  var(--cpn-fade-in);
  --cpn-balloon-in-ease: var(--cpn-ease-out);
}

/* ダークモード */
html.dark-mode{
  --cpn-bg: rgba(255,255,255,0.97);
  --cpn-fg: #333;
}

/* 初期ラッチ：boot中は一切表示させない（Safari復元/FOUC封じ） */
html.booting .couponcode::after,
html.booting .couponcode > .copy-balloon{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ========== クーポン本体 ========== */
.couponcode{
  display: inline-block;
  position: relative;           /* 子バルーンの原点 */
  cursor: pointer;
  user-select: text;            /* クーポンは選択可（他は copykinshi.js 側で管理） */
  -webkit-user-select: text;
  transition: color .2s var(--cpn-ease-both), background-color .2s var(--cpn-ease-both);
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
}

.couponcode:hover,
.couponcode:focus-visible{
  color:#0056b3;
  background-color:#eef;
  outline: none;
}

/* ▼ PC向けヒント（::after） */
.couponcode::after{
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(calc(-1 * var(--cpn-tip-gap-y)));
  white-space: nowrap;
  background: var(--cpn-bg);
  color: var(--cpn-fg);
  padding: var(--cpn-pad-v) var(--cpn-pad-h);
  border-radius: var(--cpn-radius);
  font-size: var(--cpn-font-size);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;

  /* 常に同じ“1本のトランジション”。入り/抜けの速度とカーブは変数で切替 */
  transition:
    opacity   var(--cpn-enter-dur)  var(--cpn-enter-ease),
    visibility var(--cpn-enter-dur)  var(--cpn-enter-ease);

  z-index: 1;
}

/* ★ 可視ゲート（表示/非表示）— rearmの有無に関わらず発火させる */
@media (hover:hover){
  .couponcode[data-tooltip-armed="true"][data-tooltip-state="initial"]:hover::after{
    opacity: 1;
    visibility: visible;
  }

  /* 通常の“入り”の速度/カーブ（rearm時は上書きしない） */
  .couponcode[data-tooltip-armed="true"][data-tooltip-state="initial"]:not([data-rearm="true"]):hover::after{
    --cpn-enter-dur:  var(--cpn-fade-in);
    --cpn-enter-ease: var(--cpn-ease-out);
  }
}

/* コピー直後（copied）では::afterは出さない */
.couponcode[data-tooltip-state="copied"]::after{
  opacity: 0;
  visibility: hidden;
}

/* 休符後“じわ〜っ”再出現（方式A：速度だけ差し替え） */
.couponcode[data-rearm="true"]::after{
  --cpn-enter-dur:  var(--cpn-hint-in);     /* 1200ms の超ゆっくり */
  --cpn-enter-ease: var(--cpn-ease-out);
}

/* ▼ タッチ端末：hover禁止、タップ時のみ一時表示（ワンタップ問題ゼロ） */
@media (hover: none), (pointer: coarse){
  .couponcode:hover::after{ opacity: 0 !important; visibility: hidden !important; }
  .couponcode::after{ content: 'タップでコピー'; }
  .couponcode[data-tooltip-armed="true"].show-tooltip::after{
    --cpn-enter-dur:  var(--cpn-fade-in);
    --cpn-enter-ease: var(--cpn-ease-out);
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ========== 「コピーしました！」バルーン（.couponcodeの子要素） ========== */
.couponcode > .copy-balloon{
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%)
             translateY(calc(-1 * var(--cpn-copied-gap-y, var(--cpn-tip-gap-y))));
  white-space: nowrap;
  background: var(--cpn-bg);
  color: var(--cpn-fg);
  padding: var(--cpn-pad-v) var(--cpn-pad-h);
  border-radius: var(--cpn-radius);
  font-size: var(--cpn-font-size);
  pointer-events: none;
  z-index: 2;                   /* ::after より前面 */
  opacity: 0;
  visibility: hidden;

  /* 基底は“入り”の契約（.show で生きる）。退場は .fade が変数で切替。 */
  transition:
    opacity   var(--cpn-balloon-in-dur)  var(--cpn-balloon-in-ease),
    visibility var(--cpn-balloon-in-dur)  var(--cpn-balloon-in-ease);
}

/* 表示開始（JSが .show を付与） */
.couponcode > .copy-balloon.show{
  opacity: 1;
  visibility: visible;
}

/* 退場（JSが .fade を付与）→ 抜けはゆっくり・粘性（変数で上書き可能に） */
.couponcode > .copy-balloon.fade{
  opacity: 0;
  visibility: hidden;
  --cpn-balloon-in-dur:  var(--cpn-fade-out);
  --cpn-balloon-in-ease: var(--cpn-ease-in);
}

/* prefers-reduced-motion：装飾モーションのみ最小化（体感は不変） */
@media (prefers-reduced-motion: reduce){
  .couponcode::after,
  .couponcode > .copy-balloon{
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}