/* =========================================================
   Coming Soon Gate - SYNC
   - 時間帯で色が変わる（data-theme）
   - グラデが上に被って遷移しながら移動
   - SYNCは薄め＆見えたり見えなかったり
========================================================= */

/* webfont はここで一体化（index.htmlはcomingsoon.cssだけでもOK） */
@import url("./webfont.css");

/* =========================================================
   Vars
========================================================= */
:root{
  --bg:#000;

  /* 時間帯で変わる：オーバーレイ */
  --overlayOpacity: .36;
  --blur: 14px;
  --sat: 1.15;
  --hueBase: 0deg;

  /* 時間帯で変わる：色の重心（青・紫・黄） */
  --cBlue:   rgba(0,160,255,.42);
  --cPurple: rgba(140,60,255,.34);
  --cYellow: rgba(255,220,90,.26);

  /* ロゴの薄さ（全体薄め） */
  --logoBase: rgba(255,255,255,.18);

  /* 速度（ゆっくり） */
  --overlayMoveDur: 6.8s;
  --overlayHueDur:  18s;
  --maskSweepDur:   4.8s;
  --logoFadeDur:    7.6s;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  font-family:"LINE Seed JP", system-ui, -apple-system, "Hiragino Sans","Noto Sans JP", sans-serif !important;
}

/* =========================================================
   Gate
========================================================= */
.gate{
  min-height:100vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
}

/* =========================================================
   全体に被るグラデ（上に被って遷移）
========================================================= */
.gate::before{
  content:"";
  position:absolute;
  inset:-40%;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(1000px 720px at 20% 30%, var(--cBlue),   rgba(0,0,0,0) 62%),
    radial-gradient(980px 760px at 78% 32%, var(--cPurple), rgba(0,0,0,0) 64%),
    radial-gradient(900px 760px at 55% 78%, var(--cYellow), rgba(0,0,0,0) 62%),
    linear-gradient(120deg,
      rgba(10,20,40,.45),
      rgba(40,20,80,.35),
      rgba(80,60,20,.30),
      rgba(0,30,60,.40)
    );

  background-size:
    160% 160%,
    160% 160%,
    160% 160%,
    240% 240%;

  background-position:
    0% 40%,
    90% 35%,
    50% 90%,
    0% 45%;

  opacity: var(--overlayOpacity);
  mix-blend-mode: screen;

  filter:
    blur(var(--blur))
    saturate(var(--sat))
    contrast(1.02)
    hue-rotate(var(--hueBase));

  animation:
    overlayMove var(--overlayMoveDur) ease-in-out infinite alternate,
    overlayHue  var(--overlayHueDur)  linear infinite;
}

/* ゆったり移動 */
@keyframes overlayMove{
  0%{
    background-position:
      0% 40%,
      90% 35%,
      50% 90%,
      0% 45%;
    transform: translate3d(-1.2%, -0.8%, 0) rotate(-1deg);
  }
  50%{
    background-position:
      45% 55%,
      65% 45%,
      60% 70%,
      55% 60%;
    transform: translate3d( 1.2%,  1.0%, 0) rotate( 1deg);
  }
  100%{
    background-position:
      100% 35%,
      55% 60%,
      35% 60%,
      100% 40%;
    transform: translate3d(-1.0%,  1.2%, 0) rotate(-0.8deg);
  }
}

/* 色相の遷移（穏やか） */
@keyframes overlayHue{
  0%{
    filter:
      blur(var(--blur))
      saturate(calc(var(--sat) * 0.96))
      contrast(1.02)
      hue-rotate(calc(var(--hueBase) + 0deg));
  }
  50%{
    filter:
      blur(var(--blur))
      saturate(calc(var(--sat) * 1.06))
      contrast(1.02)
      hue-rotate(calc(var(--hueBase) + 12deg));
  }
  100%{
    filter:
      blur(var(--blur))
      saturate(calc(var(--sat) * 0.96))
      contrast(1.02)
      hue-rotate(calc(var(--hueBase) + 0deg));
  }
}

/* =========================================================
   SYNC ロゴ（薄め＋見えたり見えなかったり）
========================================================= */
.syncLogo{
  position:relative;
  z-index:2;

  font-weight:800;
  font-size:clamp(72px, 14vw, 190px);
  letter-spacing:.26em;
  line-height:1;
  user-select:none;

  color: var(--logoBase);
  text-shadow: 0 18px 60px rgba(0,0,0,.75);

  /* マスクが通過して見えたり消えたり */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    transparent 30%,
    #fff 46%,
    #fff 54%,
    transparent 70%,
    transparent 100%
  );
  -webkit-mask-size: 260% 100%;
  -webkit-mask-position: 0% 50%;

  mask-image: linear-gradient(90deg,
    transparent 0%,
    transparent 30%,
    #fff 46%,
    #fff 54%,
    transparent 70%,
    transparent 100%
  );
  mask-size: 260% 100%;
  mask-position: 0% 50%;

  animation:
    maskSweep var(--maskSweepDur) ease-in-out infinite,
    logoFade  var(--logoFadeDur)  ease-in-out infinite;
}

@keyframes maskSweep{
  0%   { -webkit-mask-position: 0% 50%; mask-position: 0% 50%; }
  50%  { -webkit-mask-position: 70% 50%; mask-position: 70% 50%; }
  100% { -webkit-mask-position: 140% 50%; mask-position: 140% 50%; }
}

@keyframes logoFade{
  0%   { opacity:.08; }
  20%  { opacity:.32; }
  40%  { opacity:.10; }
  60%  { opacity:.46; }
  80%  { opacity:.16; }
  100% { opacity:.28; }
}

/* =========================================================
   時間帯テーマ（data-theme）
   late:   0-4
   morning:5-10
   day:    11-15
   evening:16-18
   night:  19-23
========================================================= */

/* 深夜：青紫深め・静か */
html[data-theme="late"]{
  --overlayOpacity:.30;
  --sat: 1.05;
  --hueBase: -8deg;
  --cBlue:   rgba(0,140,255,.34);
  --cPurple: rgba(175,90,255,.40);
  --cYellow: rgba(255,220,90,.10);
  --logoBase: rgba(255,255,255,.14);

  --overlayMoveDur: 8.6s;
  --maskSweepDur:   6.6s;
  --logoFadeDur:    9.0s;
}

/* 朝：青クリア */
html[data-theme="morning"]{
  --overlayOpacity:.34;
  --sat: 1.12;
  --hueBase: 0deg;
  --cBlue:   rgba(0,180,255,.44);
  --cPurple: rgba(125,65,255,.24);
  --cYellow: rgba(255,230,120,.18);
  --logoBase: rgba(255,255,255,.18);

  --overlayMoveDur: 7.8s;
  --maskSweepDur:   5.8s;
  --logoFadeDur:    8.4s;
}

/* 昼：黄が出る（元気） */
html[data-theme="day"]{
  --overlayOpacity:.40;
  --sat: 1.18;
  --hueBase: 6deg;
  --cBlue:   rgba(0,170,255,.36);
  --cPurple: rgba(120,60,255,.20);
  --cYellow: rgba(255,230,120,.34);
  --logoBase: rgba(255,255,255,.20);

  --overlayMoveDur: 7.0s;
  --maskSweepDur:   5.2s;
  --logoFadeDur:    7.8s;
}

/* 夕：黄→紫（シネマ感） */
html[data-theme="evening"]{
  --overlayOpacity:.38;
  --sat: 1.16;
  --hueBase: 14deg;
  --cBlue:   rgba(0,150,255,.30);
  --cPurple: rgba(185,90,255,.36);
  --cYellow: rgba(255,200,80,.26);
  --logoBase: rgba(255,255,255,.18);

  --overlayMoveDur: 7.6s;
  --maskSweepDur:   5.6s;
  --logoFadeDur:    8.6s;
}

/* 夜：紫中心（ネオン寄り） */
html[data-theme="night"]{
  --overlayOpacity:.36;
  --sat: 1.22;
  --hueBase: 18deg;
  --cBlue:   rgba(0,150,255,.30);
  --cPurple: rgba(205,100,255,.44);
  --cYellow: rgba(255,220,90,.16);
  --logoBase: rgba(255,255,255,.16);

  --overlayMoveDur: 7.2s;
  --maskSweepDur:   5.4s;
  --logoFadeDur:    8.2s;
}

/* =========================================================
   Accessibility
========================================================= */
@media (prefers-reduced-motion: reduce){
  .gate::before{ animation:none; }
  .syncLogo{ animation:none; opacity:.35; }
}