:root{
  --bg:#000;
  --fg:rgba(255,255,255,.92);
  --fg-soft:rgba(255,255,255,.68);
  --fg-faint:rgba(255,255,255,.38);
  --line:rgba(255,255,255,.12);

  --logo-main-size:clamp(3.5rem, 8vw, 7.2rem);
  --logo-sub-size:clamp(.72rem, .92vw, .88rem);
  --lang-size:clamp(.78rem, 1.1vw, .92rem);

  --safe-x:clamp(20px, 4vw, 40px);
  --safe-y:clamp(22px, 4vh, 42px);

  /* 視覚中央補正用 */
  --brand-main-ls:.46em;
  --brand-sub-ls:10.3em;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,
body{
  width:100%;
  height:100%;
  min-height:100%;
  background:#000;
  color:var(--fg);
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
  overflow:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

body{
  position:relative;
  isolation:isolate;
  touch-action:manipulation;
}

/* ==============================
   Canvas
============================== */
#particle-canvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  display:block;
  z-index:10;
  pointer-events:auto;
  touch-action:manipulation;
}

/* ==============================
   Entrance base layer
============================== */
.entrance{
  position:fixed;
  inset:0;
  z-index:20;
  min-height:100svh;
  min-height:100vh;
  display:grid;
  grid-template-rows:1fr auto;
  padding:var(--safe-y) var(--safe-x);
  pointer-events:none;
}

.hero-overlay,
.hero-copy,
.hero-logo,
.fx-layer{
  pointer-events:none;
}

/* ==============================
   Initial logo
   U   k   i   y   o
        F i l m
============================== */
.brand{
  position:fixed;
  left:50%;
  top:53%;
  z-index:22;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  pointer-events:none;
  opacity:1;
  visibility:visible;
  transform:translate(-50%, -50%);
  text-align:center;

  transition:
    opacity 700ms ease,
    transform 900ms cubic-bezier(.22,.7,.16,1),
    filter 900ms ease;

  animation:brandFloat 5.6s ease-in-out infinite;
}

.brand::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:155%;
  height:185%;
  transform:translate(-50%, -54%);
  pointer-events:none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,255,255,.032) 0%,
      rgba(255,255,255,.012) 36%,
      rgba(255,255,255,0) 75%
    );
  filter:blur(14px);
}

.brand-main{
  position:relative;
  z-index:1;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:.46em;

  margin:0;
  padding:0;

  font-size:clamp(3.8rem, 8.8vw, 7.8rem);
  font-weight:240;
  line-height:.9;
  text-transform:none;
  color:rgba(255,255,255,.89);

  text-shadow:
    0 0 10px rgba(255,255,255,.035),
    0 0 30px rgba(120,150,255,.02);

  transition:
    opacity 700ms ease,
    transform 950ms cubic-bezier(.2,.7,.15,1),
    gap 950ms cubic-bezier(.2,.7,.15,1),
    filter 950ms ease;
}

.brand-main span{
  display:block;
}

.brand-sub{
  position:relative;
  z-index:1;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:12.0em;

  margin:18px 0 0;
  padding:0;

  font-size:clamp(.86rem, 1.45vw, 1.2rem);
  font-weight:300;
  line-height:2;
  text-transform:none;
  color:rgba(255,255,255,.44);

  text-shadow:
    0 0 8px rgba(255,255,255,.02),
    0 0 22px rgba(120,150,255,.012);

  transition:
    opacity 760ms ease,
    transform 980ms cubic-bezier(.2,.7,.15,1),
    gap 980ms cubic-bezier(.2,.7,.15,1),
    filter 980ms ease;

  transition-delay:40ms;
}

.brand-sub span{
  display:block;
}

@keyframes brandFloat {
  0%{
    transform:translate(-50%, -50%);
    opacity:1;
  }
  50%{
    transform:translate(-50%, calc(-50% - 1px));
    opacity:.985;
  }
  100%{
    transform:translate(-50%, -50%);
    opacity:1;
  }
}

/* ほどけて広がって消える */
body.is-transitioning .brand{
  opacity:0;
  transform:translate(-50%, calc(-50% - 4px)) scale(1.015);
  filter:blur(2.4px);
  animation:none;
}

body.is-transitioning .brand-main{
  gap:.60em;
  transform:scaleX(1.035) translateY(-1px);
  opacity:0;
  filter:blur(1.6px);
}

body.is-transitioning .brand-sub{
  gap:.40em;
  transform:translateY(4px) scale(1.02);
  opacity:0;
  filter:blur(1.2px);
}

/* ==============================
   Final reveal logo
============================== */
.reveal-logo{
  position:fixed;
  left:50%;
  top:50%;
  z-index:30;
  display:block;
  text-align:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transform:translate(-50%, -50%) translateY(10px) scale(.985);
  transition:
    opacity 800ms ease,
    transform 800ms ease,
    visibility 800ms ease;
}

.reveal-logo.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate(-50%, -50%) translateY(0) scale(1);
}

.reveal-logo-main{
  color:rgba(255,255,255,.94);
  font-size:clamp(2.8rem, 10vw, 7rem);
  line-height:1;
  letter-spacing:.16em;
  text-align:center;
}

.reveal-logo-sub{
  margin-top:14px;
  color:rgba(255,255,255,.36);
  font-size:clamp(.72rem, 1.35vw, 1rem);
  letter-spacing:.30em;
  text-transform:uppercase;
  text-align:center;
}

/* ==============================
   Entrance Language Gate
============================== */
.entrance-gate{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  color:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .45s ease,
    visibility .45s ease;
}

.entrance-gate.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.entrance-gate__inner{
  width:min(88vw, 420px);
  padding:24px 20px;
  text-align:center;
}

.entrance-gate__panel{
  display:none;
}

.entrance-gate__panel.is-active{
  display:block;
}

.entrance-gate__note{
  margin:0;
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
  font-size:.72rem;
  line-height:1.95;
  letter-spacing:.14em;
  color:rgba(255,255,255,.82);
  text-transform:none;
}

.entrance-gate__links{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.entrance-gate__link{
  appearance:none;
  border:0;
  background:transparent;
  color:#fff;
  padding:0;
  margin:0;
  font:inherit;
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
  font-size:.95rem;
  line-height:1.6;
  letter-spacing:.22em;
  text-transform:uppercase;
  cursor:pointer;
  opacity:.88;
  transition:opacity .2s ease;
}

.entrance-gate__link:hover,
.entrance-gate__link:focus-visible{
  opacity:1;
  outline:none;
}

.entrance-gate__sep{
  opacity:.34;
  user-select:none;
}

@media (max-width:640px){
  :root{
    --brand-main-ls:.24em;
    --brand-sub-ls:.22em;
  }

  .brand{
    top:54%;
  }

  .brand-main{
    font-size:clamp(3.1rem, 12vw, 5.6rem);
    gap:.24em;
  }

  .brand-sub{
    margin-top:12px;
    font-size:clamp(.78rem, 1.8vw, .92rem);
    gap:.22em;
  }

  .reveal-logo-main{
    letter-spacing:.12em;
  }
}

@media (max-width:480px){
  .entrance-gate__inner{
    width:min(90vw, 340px);
    padding:20px 16px;
  }

  .entrance-gate__note{
    font-size:.68rem;
    letter-spacing:.12em;
  }

  .entrance-gate__link{
    font-size:.88rem;
    letter-spacing:.18em;
  }
}

@media (prefers-reduced-motion:reduce){
  .brand,
  .reveal-logo,
  .entrance-gate{
    transition:none;
    animation:none;
  }

  .brand-main,
  .brand-sub,
  .entrance-gate__link{
    transition:none;
  }
}