/* --- Overlay --- */
.overlay {
    position:fixed;inset:0;display:grid;place-items:center;
    background:#000;
    z-index:9999;
    transition: transform 1.2s cubic-bezier(0.77,0,0.175,1), opacity 1.2s cubic-bezier(0.77,0,0.175,1);
    will-change: transform, opacity;
}
.overlay.hidden {
    transform: translateY(-120%);
    opacity:0;
    pointer-events:none;
}

/* --- Loader --- */
.loader {
    position: relative;
    width: 600px;
    height: 600px;
}

svg { transform: rotate(-90deg); width:100%; height:100%; }

circle {
    fill: none;
    stroke-width: 0.5; /* 線を細く */
    r: 70;
    cx: 80;
    cy: 80;
    background-color: #111;
}

.bg { stroke: #D9D9D9; }
.progress {
    stroke: #D9D9D9;
    stroke-width: 1.5; /* 線を細く */
    stroke-linecap: round;
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
    transition: stroke-dashoffset 0.3s ease;
}

.label {
    position:absolute;inset:0;display:grid;place-items:center;
    font-size:1.2rem;letter-spacing:.05em;
    font-weight: 400;
}

.label .text{
    justify-content: center;
    text-align: center;
}

.label .text p{
    font-weight: 200;
    font-size: 16px;
    margin: 0;
}

.label .text p.sitename{
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 0.5em;
    font-family: "Montserrat", sans-serif;
}

/* --- Center label (staggered fade-up) --- */
.label { position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
/* 初期は非表示（後で class 付与で入場） */
.label .line { opacity:0; transform: translateY(12px); }
/* 入場開始後のアニメーション（上から順に） */
.label .line { animation: fadeUp .6s cubic-bezier(.2,.8,.2,1) forwards; }
.label .line:nth-child(1){ animation-delay: .5s }
.label .line:nth-child(2){ animation-delay: 1s }

.title { font-size:1.15rem; letter-spacing:.06em; }
.subtitle { font-size:.86rem; opacity:.8; margin-top:.2rem; letter-spacing:.04em; }

/* iOS用の動画表示確保 */
#mainVideo {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* オーバーレイが消えた後も動画が表示されるように */
.overlay.hidden {
  pointer-events: none;
}

@keyframes fadeUp { to { opacity:1; transform: translateY(0) } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    .overlay{ transition-duration: .001ms }
    .label .line{ animation:none; opacity:1; transform:none }
}


@media screen and (max-width: 768px) {
    .loader {
        position: relative;
        width: 360px;
        height: 360px;
    }
}