/* ========================================
   デザインの切り替え演出（js/design-switch.js）
   新デザインとクラシックの両方で読み込む。どちらのページの色にも左右されないよう、色はここで決める
======================================== */

.ds-switch {
    --ds-red: #d7263d;
    --ds-ink: #1a1a1a;
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Barlow Condensed", "Noto Sans JP", "Inter", sans-serif;
    color: #fff;
    pointer-events: all;
}

/* 赤と黒の板が、ななめに画面をおおう */
.ds-panel {
    position: absolute;
    inset: 0;
    background: var(--ds-red);
    transform: translateX(-110%) skewX(-12deg);
    transition: transform .45s cubic-bezier(.7, 0, .2, 1);
}
.ds-panel.is-b {
    background: var(--ds-ink);
    clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%);
    transform: translateX(110%) skewX(-12deg);
    transition-delay: .06s;
}
.ds-switch.is-in .ds-panel { transform: translateX(0) skewX(0); }

.ds-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 0 16px;
    text-align: center;
    opacity: 0;
    transform: scale(.92);
    transition: opacity .3s ease .3s, transform .4s cubic-bezier(.3, 1.4, .5, 1) .3s;
}
.ds-switch.is-in .ds-body { opacity: 1; transform: none; }
.ds-small { margin: 0; font-style: italic; font-weight: 700; font-size: 16px; letter-spacing: .4em; }
.ds-modes { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 18px; font-style: italic; font-weight: 800; font-size: clamp(34px, 7vw, 84px); line-height: 1; }
.ds-from { opacity: .5; text-decoration: line-through; text-decoration-thickness: 4px; }
.ds-arrow { font-size: .5em; animation: ds-nudge .6s ease-in-out infinite; }
.ds-to { color: #fff; }
@keyframes ds-nudge { 50% { transform: translateX(8px); } }
.ds-bar { width: min(420px, 72vw); height: 8px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.ds-bar span { display: block; height: 100%; width: 0; background: #fff; }
.ds-num { margin: 0; font-style: italic; font-weight: 700; font-size: 15px; letter-spacing: .3em; }
.ds-num b { font-size: 1.3em; }

/* 着いた側：同じ赤と黒の板が、上へ抜けて幕が開く（ページを描く前から出せるよう、<html> の飾りで作る） */
html.ds-arrive::before,
html.ds-arrive::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 100000;
    pointer-events: none;
    animation: ds-open .7s cubic-bezier(.7, 0, .2, 1) .35s forwards;
}
html.ds-arrive::before { background: #d7263d; animation-delay: .5s; }
/* 黒い幕に「○○ MODE」→ 上へ抜ける → 赤い幕 → 上へ抜けてページが見える */
html.ds-arrive::after {
    content: attr(data-ds-label);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
    color: #fff;
    font-family: "Barlow Condensed", "Noto Sans JP", "Inter", sans-serif;
    font-style: italic;
    font-weight: 800;
    font-size: clamp(34px, 7vw, 84px);
    letter-spacing: .02em;
    animation-delay: .3s;
}
@keyframes ds-open { to { transform: translateY(-102%); } }

/* クラシックの設定画面に足した「デザイン」の行 */
.settings-row:has([data-design-switch]) .settings-note { margin-top: 6px; }

/* 新デザインのフッター・BETA の帯の「○○で見る」リンク */
[data-design-link][hidden] { display: none !important; }

/* クラシックのフッターの「新しいデザインで見る」 */
.footer-design { margin: 10px 0 0; text-align: center; }
.footer-design a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: #d7263d; color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .04em; text-decoration: none; }
.footer-design a:hover { background: #b81d31; }

/* ================================================================
   幕が開いたあとの「最初の動き」（html.ds-enter。js/design-switch.js が付ける）
   ・--ds-d … 動き始めるまでの時間（切り替えで来たときは幕が開くのを待つ。新デザインを普通に開いたときはすぐ）
   ・アニメーション「なし」「軽量」のときは付けない
================================================================ */

@keyframes ds-up { from { opacity: 0; transform: translateY(36px); } }
@keyframes ds-left { from { opacity: 0; transform: translateX(80px); } }
@keyframes ds-drop { from { transform: translateY(-100%); } }
@keyframes ds-fade { from { opacity: 0; } }

/* ---------- 新デザイン：赤い帯がサッと入り、文字と写真がキビキビ並ぶ（採用サイトらしく、まっすぐで速い動き） ---------- */

@keyframes ds-band-in { from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } }
@keyframes ds-band-in-sp { from { clip-path: polygon(0 10%, 0 10%, 0 100%, 0 100%); } }
@keyframes ds-mask-up { from { clip-path: inset(0 0 100% 0); transform: translateY(40px); } to { clip-path: inset(0 0 -20% 0); } }
@keyframes ds-dot { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.6); } }
@keyframes ds-frame-in { from { opacity: 0; transform: translateY(40px) scale(.94); } }
/* トップの映像：映像そのものは動かさず、上にかぶせた赤い幕が右へ抜けて見せる
   （映像を透明や切り抜きの状態から動かすと、ブラウザが「一番大きな表示（LCP）」を演出が終わるまで数えず、表示が遅いと判定されるため） */
@keyframes ds-curtain-off { 0% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes ds-count-glow { 0% { background-color: #c8102e; } 100% { background-color: #222222; } }

html[data-design="new"].ds-enter .hd { animation: ds-drop .6s cubic-bezier(.2, .8, .2, 1) var(--ds-d, 0s) both; }
html[data-design="new"].ds-enter .hero-band { animation: ds-band-in 1s cubic-bezier(.7, 0, .2, 1) var(--ds-d, 0s) both; }
html[data-design="new"].ds-enter .hero-media::before { animation: ds-band-in-sp 1s cubic-bezier(.7, 0, .2, 1) calc(var(--ds-d, 0s) + .3s) both; }
html[data-design="new"].ds-enter .hero-display { animation: ds-mask-up .9s cubic-bezier(.2, .8, .2, 1) calc(var(--ds-d, 0s) + .15s) both; }
html[data-design="new"].ds-enter .hero-display span { display: inline-block; transform-origin: 50% 80%; animation: ds-dot .6s cubic-bezier(.3, 1.6, .5, 1) calc(var(--ds-d, 0s) + .85s) both; }
html[data-design="new"].ds-enter .hero-name { animation: ds-up .7s cubic-bezier(.2, .8, .2, 1) calc(var(--ds-d, 0s) + .35s) both; }
html[data-design="new"].ds-enter .hero-copy { animation: ds-up .7s cubic-bezier(.2, .8, .2, 1) calc(var(--ds-d, 0s) + .45s) both; }
html[data-design="new"].ds-enter .hero-lead { animation: ds-up .7s cubic-bezier(.2, .8, .2, 1) calc(var(--ds-d, 0s) + .55s) both; }
html[data-design="new"].ds-enter .hero-actions { animation: ds-up .7s cubic-bezier(.2, .8, .2, 1) calc(var(--ds-d, 0s) + .65s) both; }
html[data-design="new"].ds-enter .hero-news { animation: ds-fade .8s ease calc(var(--ds-d, 0s) + .85s) both; }
html[data-design="new"].ds-enter .hero-frame.is-main::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--ink, #222);
    pointer-events: none;
    content: "";
    animation: ds-curtain-off .7s cubic-bezier(.7, 0, .2, 1) calc(var(--ds-d, 0s) + .4s) both;
}
html[data-design="new"].ds-enter .hero-frame.is-photo { animation: ds-frame-in .8s cubic-bezier(.2, .8, .2, 1) calc(var(--ds-d, 0s) + .55s) both; }
html[data-design="new"].ds-enter .hero-frame.is-sub { animation: ds-frame-in .8s cubic-bezier(.2, .8, .2, 1) calc(var(--ds-d, 0s) + .7s) both; }
html[data-design="new"].ds-enter .hero-badges { animation: ds-up .7s cubic-bezier(.2, .8, .2, 1) calc(var(--ds-d, 0s) + .9s) both; }
html[data-design="new"].ds-enter .status-band { animation: ds-up .8s cubic-bezier(.2, .8, .2, 1) calc(var(--ds-d, 0s) + .8s) both; }
html[data-design="new"].ds-enter .status-list div { animation: ds-count-glow .8s ease calc(var(--ds-d, 0s) + 1.1s + var(--i, 0) * .08s) both; }
html[data-design="new"].ds-enter .status-list div:nth-child(2) { --i: 1; }
html[data-design="new"].ds-enter .status-list div:nth-child(3) { --i: 2; }
html[data-design="new"].ds-enter .status-list div:nth-child(4) { --i: 3; }
html[data-design="new"].ds-enter .status-list div:nth-child(5) { --i: 4; }
html[data-design="new"].ds-enter .status-list div:nth-child(6) { --i: 5; }

/* ---------- クラシック：ゲームのタイトル画面のように、画面が光って文字がポンポン弾んで出てくる ---------- */

@keyframes ds-pop { 0% { opacity: 0; transform: translateY(30px) scale(.6); } 60% { opacity: 1; transform: translateY(-6px) scale(1.06); } 100% { transform: none; } }
@keyframes ds-screen-pop { 0% { opacity: 0; transform: translateY(40px) scale(.7) rotate(-3deg); } 60% { opacity: 1; transform: translateY(-8px) scale(1.04) rotate(1deg); } 100% { opacity: 1; transform: none; } }
@keyframes ds-flash { 0% { filter: brightness(2.2) saturate(.4); } 100% { filter: none; } }
@keyframes ds-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-4deg) scale(1.08); } 40% { transform: rotate(3deg) scale(1.08); } 60% { transform: rotate(-2deg); } }
@keyframes ds-bounce-drop { 0% { transform: translateY(-110%); } 70% { transform: translateY(8%); } 100% { transform: none; } }

html[data-design="classic"].ds-enter .header { animation: ds-bounce-drop .7s cubic-bezier(.3, 1.3, .5, 1) var(--ds-d, 0s) both; }
/* 動画の画面も、名前や見出しと同じタイミングで「ポン」と出てから、一瞬光る（最初から置いてあると、止まった画面に見えるので） */
html[data-design="classic"].ds-enter .hero-screen { animation: ds-screen-pop .75s cubic-bezier(.3, 1.4, .5, 1) calc(var(--ds-d, 0s) + .35s) both, ds-flash .9s cubic-bezier(.2, .8, .2, 1) calc(var(--ds-d, 0s) + .6s) both; }
html[data-design="classic"].ds-enter .hero-content > * { animation: ds-pop .6s cubic-bezier(.3, 1.4, .5, 1) calc(var(--ds-d, 0s) + .2s + var(--i, 0) * .1s) both; }
html[data-design="classic"].ds-enter .hero-content > :nth-child(2) { --i: 1; }
html[data-design="classic"].ds-enter .hero-content > :nth-child(3) { --i: 2; }
html[data-design="classic"].ds-enter .hero-content > :nth-child(4) { --i: 3; }
html[data-design="classic"].ds-enter .hero-content > :nth-child(5) { --i: 4; }
html[data-design="classic"].ds-enter .hero-content > :nth-child(6) { --i: 5; }
html[data-design="classic"].ds-enter .hero-mark { display: inline-block; animation: ds-wiggle .7s ease calc(var(--ds-d, 0s) + .9s) both; }

html.motion-off.ds-enter *, html.motion-lite.ds-enter * { animation: none !important; }

/* ---------- クラシックを開いたとき（タブで最初の1回）：ゲームの始まりのように「READY?」→ 丸く閉じて画面が始まる ---------- */

@keyframes cl-iris { 0%, 55% { clip-path: circle(150% at 50% 50%); } 100% { clip-path: circle(0% at 50% 50%); } }
@keyframes cl-ready { 0% { opacity: 0; transform: scale(.3) rotate(-8deg); } 25% { opacity: 1; transform: scale(1.15) rotate(3deg); } 40% { transform: scale(.95) rotate(-1deg); } 50%, 100% { transform: none; } }
html.cl-intro::before,
html.cl-intro::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 100000;
    pointer-events: none;
    animation: cl-iris 1.4s cubic-bezier(.6, 0, .3, 1) both;
}
html.cl-intro::before { background: radial-gradient(circle at 30% 30%, #fff7d6, transparent 55%), linear-gradient(135deg, #e3f3ff, #fefcf4 60%, #ffe9ec); }
html.cl-intro::after {
    content: "READY?";
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Inter", "Noto Sans JP", sans-serif;
    font-weight: 900;
    font-size: clamp(48px, 11vw, 132px);
    letter-spacing: -.02em;
    color: #006ea8;
    text-shadow: 0 6px 0 #ffd54a;
    animation: cl-ready 1.4s cubic-bezier(.3, 1.4, .5, 1) both, cl-iris 1.4s cubic-bezier(.6, 0, .3, 1) both;
}
html.motion-off.cl-intro::before, html.motion-off.cl-intro::after, html.motion-lite.cl-intro::before, html.motion-lite.cl-intro::after { display: none; }