/*
Theme Name: K.T企画
Description: K.T企画 ドローンサポート用シングルページテーマ
Version: 1.0.0
Author: K.T企画
Text Domain: ktkikaku
*/

html { scroll-behavior: smooth; }
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.show { opacity: 1; transform: translateY(0); transition: opacity .7s ease, transform .7s ease; }

/* ===== Effect B: Aurora overlay ===== */
.aurora-overlay{
  position: fixed; inset: -10% -10% auto -10%;
  height: 60vh; pointer-events: none; z-index: 5; opacity: .35;
  filter: blur(60px) saturate(120%);
  mix-blend-mode: soft-light;
  background:
    radial-gradient(1200px 600px at 20% 30%, rgba(59,130,246,.35), transparent 60%),
    radial-gradient(900px 500px at 70% 20%, rgba(236,72,153,.25), transparent 60%),
    radial-gradient(1000px 600px at 60% 80%, rgba(34,197,94,.22), transparent 60%),
    radial-gradient(1100px 700px at 30% 70%, rgba(56,189,248,.28), transparent 65%);
}
@media (prefers-reduced-motion: reduce){
  .aurora-overlay{ animation: none !important; opacity: .2; }
}

/* ===== Effect B: Clouds ===== */
.clouds-wrap{ position: fixed; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.cloud{
  position: absolute; top: var(--top,10%); left: -20%;
  width: var(--w, 22rem); height: var(--h, 7rem);
  filter: blur(28px); opacity: .35;
  background:
    radial-gradient(ellipse at 60% 40%, rgba(255,255,255,.9) 0 60%, rgba(255,255,255,0) 61%),
    radial-gradient(ellipse at 40% 60%, rgba(255,255,255,.8) 0 55%, rgba(255,255,255,0) 56%);
  border-radius: 9999px;
  animation: cloudDrift linear infinite;
}
.cloud.slow { opacity:.28; filter: blur(34px); }
.cloud.fast { opacity:.40; filter: blur(22px); }

/* ===== Effect C: Altimeter progress ===== */
.altimeter{
  position: fixed; top:0; left:0; right:0; height: 3px; z-index: 60;
  background: linear-gradient(to right, rgba(59,130,246,.2), transparent);
}
.altimeter .bar{
  height: 100%;
  background: linear-gradient(90deg,#60a5fa,#38bdf8,#34d399);
  transition: width .15s linear;
  width: 0%;
}
@media (prefers-reduced-motion: reduce){
  .altimeter .bar{ transition: none; }
}

/* ===== Effect C: Magnetic buttons ===== */
.magnetic { transition: transform .18s ease; will-change: transform; }
.magnetic-wrap { display:inline-block; }

/* ===== Effect A: Drone icon (SVG path fill) ===== */
.drone-shape { fill: #1f2937; }
.drone-prop { fill: #6b7280; opacity:.85; }

/* ログイン時は管理バー分だけヘッダーを下げる */
body.admin-bar #siteHeader {
  top: 32px;
}