/* ==========================================================================
   style.css (O-nazo) – Citrus Light Theme + Splash + PJAX + Leaf CTA
   ========================================================================== */

/* ===== Theme Variables ===== */
:root{
  /* Citrus palette */
  --citrus-orange: #ff8a3d;
  --citrus-lemon:  #ffd166;
  --citrus-lime:   #2ec27e;

  /* Base */
  --bg: #fff7e6;         /* soft cream */
  --bg-2: #fffdfa;
  --fg: #253238;         /* blue-gray text */
  --muted: #5f6b6b;
  --border: #e8e1d6;

  /* Accents (generic buttons etc.) */
  --acc:   var(--citrus-orange);
  --acc-2: var(--citrus-lime);

  /* Components */
  --card: #ffffffcc;
  --radius: 16px;
  --container: 1080px;

  /* Splash overlay */
  --overlay-bg: #fff7e6;
  --overlay-accent-ring: #ffb36f;

  /* Motion */
  --fade-ms: 600ms;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color:var(--fg);
  background:
    radial-gradient(900px 600px at 20% -10%, #fff0d1 0%, var(--bg) 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
  line-height:1.65;
}

/* ===== Layout ===== */
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:5;
  backdrop-filter:saturate(1.5) blur(8px);
  background: color-mix(in oklab, #ffffff 78%, transparent);
  border-bottom:1px solid var(--border);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; min-height:64px;
}
.brand{display:inline-flex; align-items:center; gap:12px; text-decoration:none; color:var(--fg)}
.brand__logo{width:28px; height:28px; object-fit:contain}
.brand__name{font-weight:800; letter-spacing:.02em}
.nav a{color:var(--muted); text-decoration:none; margin-left:20px; padding:10px 0}
.nav a:hover,.nav a:focus{color:var(--fg)}

/* Hero */
.hero{
  padding:96px 0 64px;
  background:
    radial-gradient(400px 200px at 10% 15%, #fff0d1 0%, transparent 70%),
    radial-gradient(500px 220px at 90% 10%, #e9ffe8 0%, transparent 70%),
    radial-gradient(600px 260px at 50% 0%, #fff6d8 0%, transparent 70%);
}
.hero h1{font-size:clamp(28px,4vw,44px); line-height:1.2; margin:0 0 12px}
.hero p{color:var(--muted); margin:0 0 24px}

/* Buttons (base) */
.btn{
  display:inline-block; text-decoration:none; cursor:pointer;
  background:linear-gradient(135deg, var(--acc), var(--acc-2));
  color:#0a0a0c; padding:12px 16px; border-radius:12px; font-weight:800;
  border:1px solid color-mix(in oklab, var(--acc) 60%, black);
  box-shadow:0 4px 18px #00000014, 0 0 0 4px #ffffff20 inset;
  transition: filter .12s ease, transform .08s ease;
}
.btn:hover{filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}

/* Sections & Cards */
.section{padding:56px 0; border-top:1px solid var(--border)}
.section h2{margin:0 0 16px; font-size:clamp(22px,3vw,28px)}
.cards{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px; list-style:none; padding:0; margin:16px 0 0;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 4px 20px #0000000a;
}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:32px 0; color:var(--muted)}

/* ===== Splash / Preloader ===== */
#preloader{
  position:fixed; inset:0; display:grid; place-items:center;
  background:var(--overlay-bg);
  z-index:9999; opacity:1; visibility:visible;
  transition:opacity var(--fade-ms) ease, visibility var(--fade-ms) ease;
}
.preloader__center{
  display:grid; justify-items:center; gap:12px;
  padding:28px 32px; border-radius:999px;
  background:#ffffffdd;
  border:6px solid var(--overlay-accent-ring);
  box-shadow: 0 8px 40px #ffb36f55, 0 0 0 10px #ffffff80 inset;
}
.preloader__logo{width:clamp(72px,18vw,128px); height:auto; transform-origin:center}
.preloader__tagline{margin:0; font-size:14px; color:#7a705f}

/* subtle pop animation (disabled for reduced-motion) */
@keyframes citrus-pop{
  0%{transform:scale(.96)}
  50%{transform:scale(1.02)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion: no-preference){
  .preloader__center{animation:citrus-pop 800ms ease both}
}

/* Fade-out when loaded */
body.is-loaded #preloader{opacity:0; visibility:hidden}

/* JS disabled */
.no-js #preloader{display:none!important}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #preloader{transition:none}
  body.is-loaded #preloader{display:none}
}

/* ===== Seamless Router Transition ===== */
[data-router-view]{transition: opacity 220ms ease, transform 220ms ease}
.router-leave{opacity:0; transform: translateY(6px)}
.router-enter{opacity:0; transform: translateY(-6px)}
.router-enter.router-enter-active{
  opacity:1; transform:none;
  transition: opacity 260ms ease, transform 260ms ease;
}

/* Current nav marker */
.nav a[aria-current="page"]{
  color: var(--fg);
  font-weight: 700;
}

/* ===== Citrus CTA with popping leaf (wrapper-based) =====
   Use:
     <div class="btn-leaf-wrap">
       <a class="btn btn--citrus-leaf" ...>制作物を見る</a>
     </div>
   The leaf/stem live on the wrapper (::before/::after) so they can sit behind the <a>.
*/

/* Gradient per spec: orange→lemon */
.btn--citrus-leaf{
  background: linear-gradient(135deg, var(--citrus-orange), var(--citrus-lemon));
  border: 1px solid color-mix(in oklab, var(--citrus-orange) 60%, black);
}
/* Ensure a’s own pseudo-elements (if any past code existed) are off */
.btn--citrus-leaf::before,
.btn--citrus-leaf::after{ content:none !important; }

/* Wrapper = hover/focus container + stacking root */
.btn-leaf-wrap{
  position: relative;
  display: inline-block;     /* make wrapper match content width & accept hover around the button */
  padding: 6px 8px;          /* enlarge perceived hit area (optional) */
  z-index: 0;
  isolation: isolate;        /* keep internal stacking isolated */
  overflow: visible;
}
/* Keep the real button in front of the leaf */
.btn-leaf-wrap > .btn{ position: relative; z-index: 1 }

/* Leaf & stem on the wrapper (always behind the button) */
.btn-leaf-wrap::before,
.btn-leaf-wrap::after{
  content:"";
  position:absolute;
  z-index: 0;                /* behind the <a> (z=1) */
  pointer-events:none;
  opacity:0;                 /* hidden by default */
  transition:
    top 260ms cubic-bezier(.2,.9,.2,1.4),
    opacity 200ms ease;
}

/* Stem (center top) */
.btn-leaf-wrap::before{
  --stem-color: color-mix(in oklab, var(--citrus-lime) 70%, #063 30%);
  width:8px; height:8px; border-radius:999px;
  background: var(--stem-color);
  box-shadow: 0 1px 0 0 #ffffff50 inset;
  left: 50%;
  top: 8px;                                 /* start hidden inside wrapper padding */
  transform: translateX(-50%);
}

/* Leaf (slightly to the right) */
.btn-leaf-wrap::after{
  --leaf-w: 18px; --leaf-h: 12px;
  --leaf-color: color-mix(in oklab, var(--citrus-lime) 88%, #0b5 12%);
  --leaf-shadow: color-mix(in oklab, var(--citrus-lime) 60%, #083 40%);
  width: var(--leaf-w); height: var(--leaf-h);
  left: calc(50% + 6px - (var(--leaf-w) / 2));
  top: 10px;                                 /* start hidden */
  background: var(--leaf-color);
  border-radius: 100% 0 100% 0 / 100% 0 100% 0; /* teardrop leaf shape */
  box-shadow: 0 1px 0 0 #ffffff55 inset, 0 0 0 1px var(--leaf-shadow);
}

/* Hover/focus reveal (wrapper reacts to both mouse and keyboard) */
.btn-leaf-wrap:hover::before,
.btn-leaf-wrap:hover::after,
.btn-leaf-wrap:focus-within::before,
.btn-leaf-wrap:focus-within::after{
  opacity:1;
}
.btn-leaf-wrap:hover::before,
.btn-leaf-wrap:focus-within::before{ top:-6px }
.btn-leaf-wrap:hover::after,
.btn-leaf-wrap:focus-within::after{ top:-12px }

/* Reduced motion: keep it gentle */
@media (prefers-reduced-motion: reduce){
  .btn-leaf-wrap::before,
  .btn-leaf-wrap::after{ transition:none }
}

/* ==== Leaf position & size knobs ==== */
.btn-leaf-wrap{
  /* 好みで上書きできる“つまみ” */
  --leaf-w: 18px;            /* 葉の幅 */
  --leaf-h: 12px;            /* 葉の高さ */
  --leaf-offset-x: 6px;      /* 中央からの左右オフセット（+で右へ） */
  --leaf-hidden-top: 10px;   /* 非ホバー時のY位置（大きいほど下=隠れる） */
  --leaf-visible-top: -8px; /* ホバー時のY位置（負にすると上に出る） */

  --stem-size: 8px;          /* ヘタの直径 */
  --stem-offset-x: 0px;      /* ヘタの左右オフセット */
  --stem-hidden-top: 8px;    /* ヘタの隠れ位置 */
  --stem-visible-top: 2px;  /* ヘタの見せ位置 */

  /* ここを増減すると“ボタン周りのホバー域”も変えられます */
  /* padding-top を増やすと、葉がボタンの下に隠れやすくなります */
  /* padding: 6px 8px; ←既定のままでOK。狭めたいなら 0 に */
}

/* ヘタ（:before）— 変数で制御 */
.btn-leaf-wrap::before{
  width: var(--stem-size);
  height: var(--stem-size);
  left: calc(50% + var(--stem-offset-x) - (var(--stem-size)/2));
  top: var(--stem-hidden-top);
}
.btn-leaf-wrap:hover::before,
.btn-leaf-wrap:focus-within::before{
  top: var(--stem-visible-top);
}

/* 葉（:after）— 変数で制御 */
.btn-leaf-wrap::after{
  width: var(--leaf-w);
  height: var(--leaf-h);
  left: calc(50% + var(--leaf-offset-x) - (var(--leaf-w) / 2));
  top: var(--leaf-hidden-top);
}
.btn-leaf-wrap:hover::after,
.btn-leaf-wrap:focus-within::after{
  top: var(--leaf-visible-top);
}

/* ==== Leaf click wobble ==== */
/* 調整ノブ（デフォルト値） */
.btn-leaf-wrap{
  --leaf-wobble-deg: 16deg;        /* 揺れの最大角度 */
  --leaf-wobble-duration: 700ms;   /* 揺れ全体の時間 */
}

/* 葉っぱは根元（左下寄り）を軸に回転 */
.btn-leaf-wrap::after{
  transform-origin: left 95%;
  will-change: transform, top, opacity;
}

/* クリック時に付くクラスで“表示を確実に”＆アニメ開始 */
.btn-leaf-wrap.is-wobbling::before{
  opacity: 1;
  top: var(--stem-visible-top);
}
.btn-leaf-wrap.is-wobbling::after{
  opacity: 1;
  top: var(--leaf-visible-top);
  animation: leaf-wobble var(--leaf-wobble-duration) cubic-bezier(.2,.8,.2,1) 1;
}

/* 揺れ（減衰しながら左右へ2回ほど） */
@keyframes leaf-wobble{
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(calc(var(--leaf-wobble-deg) * -1)); }
  30%  { transform: rotate(calc(var(--leaf-wobble-deg) * 0.70)); }
  45%  { transform: rotate(calc(var(--leaf-wobble-deg) * -0.45)); }
  60%  { transform: rotate(calc(var(--leaf-wobble-deg) * 0.28)); }
  75%  { transform: rotate(calc(var(--leaf-wobble-deg) * -0.16)); }
  100% { transform: rotate(0deg); }
}

/* 動きが苦手な環境ではクリック揺れも抑止 */
@media (prefers-reduced-motion: reduce){
  .btn-leaf-wrap.is-wobbling::after{ animation: none; }
}

/* ==== Top-left rotating orange motif ==== */
:root{
  /* つまみ（自由に調整OK） */
  --orange-deco-size: clamp(360px, 36vw, 760px); /* オレンジ直径 */
  --orange-deco-x: -140px;   /* 左上のオフセットX（負でさらに左） */
  --orange-deco-y: -140px;   /* 左上のオフセットY（負でさらに上） */
  --orange-deco-opacity: 0.15;       /* 全体の薄さ */
  --orange-rot-duration: 90s;       /* 1回転の時間（ゆっくり=120〜180s） */
}

/* 擬似要素でオレンジを描画＆ゆっくり回転 */
body{ position: relative; z-index: 0; } /* 背景の下敷きにするための土台 */
body::before{
  content: "";
  position: fixed;
  top: var(--orange-deco-y);
  left: var(--orange-deco-x);
  width: var(--orange-deco-size);
  height: var(--orange-deco-size);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1; /* ←基本は“裏”。もし見えない場合は 0 に変えてください */
  opacity: var(--orange-deco-opacity);
  /* オレンジ（房=conic、外皮リング=radial、中央の白いわた=radial） */
  background:
    /* ほんのり中央ハイライト */
    radial-gradient(circle at 50% 50%, #ffffffc0 0 9%, transparent 10%),
    /* 外皮リング */
    radial-gradient(circle at 50% 50%,
      transparent 60%,
      color-mix(in oklab, var(--citrus-orange) 85%, #a85a00 15%) 61% 74%,
      transparent 75%),
    /* 房（45度ごとに1度の白い薄皮） */
    repeating-conic-gradient(
      from 0deg,
      color-mix(in oklab, var(--citrus-orange) 78%, var(--citrus-lemon) 22%) 0deg 44deg,
      #ffffff 44deg 45deg
    );
  filter: drop-shadow(0 18px 40px rgba(255, 138, 61, .18));
  animation: citrus-deco-spin var(--orange-rot-duration) linear infinite;
}

/* ゆっくり回転 */
@keyframes citrus-deco-spin { to { transform: rotate(360deg); } }

/* 動きが苦手な環境では回転を止める */
@media (prefers-reduced-motion: reduce){
  body::before{ animation: none; }
}