/*
 * style.css
 * 三重県立〇〇高等学校 - 共通スタイル
 */

/* ベースのタイポグラフィ（モダンなサンセリフ） */
* {
    font-family: 'Outfit', 'sans-serif', 'Noto Serif JP', serif;
}

/* 明朝体が必要な要素（見出し、キャッチコピー等） */
h1,
h2,
h3,
h4,
.serif,
.shadow-text,
.font-serif {
    font-family: 'Noto Serif JP', serif !important;
}

/* 
 * 全体のベース・スタイル
 * ページ全体の背景色や基本の文字色をここで管理します 
 */
body {
    background-color: #ffffff;
    /* ページ全体の背景色 */
    color: #0f172a;
    /* 基本の文字色 (Slate 900相当) */
    overflow-x: hidden;
    /* 横スクロールの防止 */
    margin: 0;
    /* 
     * アクセシビリティ調整: フォーカス表示
     * マウス操作時は表示せず、キーボード操作時のみ表示されるように調整
     */
}

/* --- Accessibility Optimizations --- */

/* 1. フォーカス・リング (Keyboard Focus Ring) - 強力かつ視認性高く設定 */
:focus-visible {
    outline: 3px solid #1e3a8a !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
    transition: none !important; /* フォーカス時は瞬時に表示させる */
}

/* ブラウザ標準の青枠を消しつつ、カスタムスタイルを適用 */
*:focus {
    outline: none;
}

/* スキップ先のターゲット自体が選択された際の状態 */
#main-content:focus {
    outline: none !important;
}

/* 2. コンテンツへのスキップリンク (Skip to Content) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 20px;
    background: #1e3a8a;
    color: white;
    padding: 12px 24px;
    z-index: 99999;
    font-weight: bold;
    border-radius: 0 0 12px 12px;
    transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* 3. コントラスト調整 (Contrast Fixes for Visual Impairment) */
/* 一般的に薄すぎる gray-400 (Tailwind) を少し濃いめにオーバーライド */
.text-gray-400 {
    color: #64748b !important; /* gray-500相当に濃くして視認性を確保 */
}

.text-gray-500 {
    color: #475569 !important; /* gray-600相当 */
}

/* 背景パターンの定義 */
.bg-pattern {
    background-image: url('../images/natural-paper.png');
}

/* スムーズなスクロール体験を提供（JS側で制御） */
/* CSSの scroll-behavior: smooth はページ遷移時の意図しないアニメーションを防ぐため無効化しています */

/* テキストに奥行きを与えるシャドウ */
.shadow-text {
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* スクロール時のフェードイン・アニメーション初期状態 */
.feature-item {
    opacity: 0;
    transform: translateY(30px);
    /* Framer Motionのような、少し「粘り」のある滑らかなイージングを採用 */
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s ease;
    will-change: opacity, transform, box-shadow;
}

/* 表示状態（JSで制御） */
.feature-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* カードパララックスのベース調整 */
.card-parallax {
    /* JSでの高頻度な更新（RequestAnimationFrame）をスムーズにするため、
       transform のトランジションは無効化するか、極めて短い時間にする */
    transition: transform 0.1s linear, box-shadow 0.3s ease;
    will-change: transform;
}

.card-parallax:hover {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 日本語の改行調整用ユーティリティ */
.ib {
    display: inline-block;
}

/* --- Premium Interactivity Utility --- */

/* 1. リキッド・ホバー・エフェクト (Liquid Hover) */
.btn-premium {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-premium::before {
    content: '';
    position: absolute;
    top: var(--y, 50%);
    left: var(--x, 50%);
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s cubic-bezier(0.1, 0, 0.3, 1), height 0.6s cubic-bezier(0.1, 0, 0.3, 1);
    z-index: -1;
    pointer-events: none;
}

.btn-premium:hover::before {
    width: 300%;
    height: 600%;
}

/* 3. カードの高度なホバー（立体感の強調） */
.card-parallax {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.card-parallax:hover {
    box-shadow: 0 40px 80px -15px rgba(30, 58, 138, 0.2) !important;
    z-index: 30;
}

.keep-all {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .sm-keep-all {
        word-break: keep-all;
    }
}

/* --- Mobile Menu Animations (Premium Edition) --- */

/* ハンバーガーアイコンの3本線 - モダンな非対称デザイン */
.hamburger-icon {
    width: 28px;
    height: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    /* 右揃えでスタイリッシュに */
    cursor: pointer;
    z-index: 50;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger-icon span {
    display: block;
    height: 2px;
    background-color: #1e3a8a;
    /* 校色（紺色） */
    border-radius: 4px;
    transition: all 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    /* 弾むようなアニメーション */
    transform-origin: right center;
}

/* 線の長さを変えてリズムを出す */
.hamburger-icon span:nth-child(1) {
    width: 100%;
}

.hamburger-icon span:nth-child(2) {
    width: 70%;
}

.hamburger-icon span:nth-child(3) {
    width: 100%;
}

/* ホバー時に全て100%にして反応を見せる */
.hamburger-icon:hover span {
    width: 100%;
}

/* 開いた際（is-active）の× 変形
   ※ コンテナ全体を rotate すると transform-origin:right のスパンと干渉し
     ×ではなく＜に見えるため、コンテナ回転は使わずスパン単体で制御する */
.hamburger-icon.is-active span:nth-child(1) {
    width: 100%;
    transform-origin: center center;
    /* 中心基点にして正しく×を作る */
    transform: translateY(9px) rotate(-45deg);
    background-color: #1e3a8a;
}

.hamburger-icon.is-active span:nth-child(2) {
    opacity: 0;
    width: 0;
}

.hamburger-icon.is-active span:nth-child(3) {
    width: 100%;
    transform-origin: center center;
    /* 中心基点にして正しく×を作る */
    transform: translateY(-9px) rotate(45deg);
    background-color: #1e3a8a;
}

/* メニューオープン中: ボタン自体を濃紺に変えて×を白で際立たせる */
#mobile-menu-btn:has(.hamburger-icon.is-active) {
    background-color: #1e3a8a;
    box-shadow: 0 8px 32px rgba(30, 58, 138, 0.4);
}

#mobile-menu-btn:has(.hamburger-icon.is-active) .hamburger-icon span {
    background-color: #ffffff;
    /* 濃紺背景の上で×を白くして視認性アップ */
}

/* ×ボタン時にホバーでくるっと一回転 */
#mobile-menu-btn:hover .hamburger-icon.is-active {
    transform: rotate(360deg);
}


/* --- Mega Menu Hover States --- */
.mega-trigger:hover .mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scaleY(1) !important;
}

/* リンクの下線アニメーションの共通設定 */
.mega-trigger .group-hover\:w-full {
    transition: width 0.3s ease;
}

/* サブメニューのアイコンアニメーション */
.submenu-icon {
    display: inline-block;
    /* transition is removed to avoid conflict with CSS animation */
}

/* ホバー時に左右に動くアクション */
a:hover .submenu-icon,
button:hover .submenu-icon,
.group\/btn:hover .submenu-icon,
.group\/mobile:hover .submenu-icon {
    animation: icon-bounce-x 0.6s ease-in-out infinite alternate !important;
}

@keyframes icon-bounce-x {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(4px);
    }
}

/* 左右に小さく揺れるアニメーションユーティリティ */
.group:hover .group-hover\:animate-sideways {
    animation: sideways 0.8s ease-in-out infinite;
}

@keyframes sideways {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

/* --- Global Text Style Overrides --- */

/* 
 * グレーの文字が薄いという要望に基づき、
 * Tailwind の標準的なグレー系テキストクラスを #000000 に上書きします。
 * 紺色（blue-900, blue-950, #1e3a8a 等）はそのまま保持されます。
 */
.text-gray-400,
.text-gray-500,
.text-gray-600,
.text-gray-700,
.text-slate-400,
.text-slate-500,
.text-slate-600,
.text-slate-700 {
    color: #000000 !important;
}

/* 
 * 暗い背景のセクション（グレーや紺色）の中では、黒文字だと見えないため
 * 上のオーバーライドをキャンセルし、明るいグレー（白に近い）に戻します。
 */
.bg-gray-900 .text-gray-400,
.bg-gray-900 .text-gray-500,
.bg-gray-900 .text-gray-600,
.bg-gray-900 .text-gray-700,
.bg-gray-900 .text-slate-400,
.bg-gray-900 .text-slate-500,
.bg-gray-900 .text-slate-600,
.bg-gray-900 .text-slate-700,
.bg-blue-900 .text-gray-400,
.bg-blue-900 .text-gray-500,
.bg-blue-900 .text-gray-600,
.bg-blue-900 .text-gray-700,
.bg-blue-900 .text-slate-400,
.bg-blue-900 .text-slate-500,
.bg-blue-900 .text-slate-600,
.bg-blue-900 .text-slate-700,
.bg-blue-950 .text-gray-400,
.bg-blue-950 .text-gray-500,
.bg-blue-950 .text-gray-600,
.bg-blue-950 .text-gray-700,
.bg-blue-950 .text-slate-400,
.bg-blue-950 .text-slate-500,
.bg-blue-950 .text-slate-600,
.bg-blue-950 .text-slate-700,
.bg-\[\#1e3a8a\] .text-gray-400,
.bg-\[\#1e3a8a\] .text-gray-500,
.bg-\[\#1e3a8a\] .text-gray-600,
.bg-\[\#1e3a8a\] .text-gray-700,
.bg-\[\#1e3a8a\] .text-slate-400,
.bg-\[\#1e3a8a\] .text-slate-500,
.bg-\[\#1e3a8a\] .text-slate-600,
.bg-\[\#1e3a8a\] .text-slate-700,
.bg-\[\#0a192f\] .text-gray-400,
.bg-\[\#0a192f\] .text-gray-500,
.bg-\[\#0a192f\] .text-gray-600,
.bg-\[\#0a192f\] .text-gray-700,
.bg-\[\#0a192f\] .text-slate-400,
.bg-\[\#0a192f\] .text-slate-500,
.bg-\[\#0a192f\] .text-slate-600,
.bg-\[\#0a192f\] .text-slate-700 {
    color: #9ca3af !important;
    /* 明るいグレー相当に復元 */
}

/* iframe 等のインラインスタイルを外部化するための共通クラス */
.border-none {
    border: 0 !important;
}

/* --- index.css (merged) --- */
/* スプラッシュスクリーン（オーバーレイ） */
#splash-screen {
    position: fixed;
    inset: 0;
    background: white;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 1s ease-in-out, visibility 1s;
}

/* フェードアウト時の状態 */
#splash-screen.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* ロゴアニメーションの初期状態 */
#splash-logo {
    opacity: 0;
    transform: scale(0.8);
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ロゴの表示アニメーション */
#splash-logo.show {
    opacity: 1;
    transform: scale(1);
}

/* --- ebook.css (merged) --- */
.book-container {
    width: 90vw;
    max-width: 500px;
    aspect-ratio: 1 / 1.414;
    max-height: 60vh;
    height: auto;
    perspective: 2000px;
    margin: 10px auto;
    position: relative;
    user-select: none;
    z-index: 5;
}

/* 虫眼鏡（拡大鏡）のスタイル */
.magnifier {
    width: 450px;
    height: 450px;
    max-width: 80vw;
    max-height: 80vh;
    position: absolute;
    border-radius: 50%;
    border: 8px solid white;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.4), inset 0 0 80px rgba(0, 0, 0, 0.1);
    display: none;
    pointer-events: none;
    z-index: 1000;
    background-color: white;
    background-repeat: no-repeat;
}

/* モバイルでは拡大鏡を強制非表示 */
@media (max-width: 767px) {
    .magnifier {
        display: none !important;
    }
}

.page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: 10;
    cursor: pointer;
}

.page.flipped {
    transform: rotateY(-180deg);
}

.page-side {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background: white;
    box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.1), 0 0 20px rgba(0, 0, 0, 0.1);
    border-radius: 0 4px 4px 0;
}

.page-back {
    transform: rotateY(180deg);
    background: #fdfdfd;
    border-radius: 4px 0 0 4px;
}

.book-container canvas {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transition: transform 0.5s ease;
}

/* 影の演出 */
.page.flipped {
    z-index: 20;
}

/* ナビゲーション - 画面下部に固定 */
.controls-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0.5rem;
    z-index: 100;
    margin-top: 1rem;
}

.controls {
    background: white;
    padding: 0.75rem 1.5rem;
    border-radius: 99px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.btn-nav {
    padding: 0.6rem 1.2rem;
    background: #1e3a8a;
    color: white;
    border-radius: 99px;
    font-size: 0.875rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.3s;
}

.btn-nav:hover:not(:disabled) {
    background: #1e40af;
    transform: translateY(-2px);
}

.btn-nav:disabled {
    background: #e2e8f0;
    color: #333333;
    /* 薄いグレーから#333333に変更 */
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .book-container {
        max-width: 85vw;
        max-height: 55vh;
    }

    .controls {
        gap: 0.75rem;
        padding: 0.5rem 1rem;
    }

    .btn-nav {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
}

/* --- Header Skeleton (FOUC & Layout Shift Prevention) --- */
/* Fetchでヘッダーが読み込まれるまでの間、画面のチラつき（ガタつき）とヘッダー消失を防ぐプレースホルダー */
body:not(.layout-ready) #site-header {
    height: 81px;
    /* ヘッダーの実測ベースの高さ(80px + 1px border) */
    display: block;
}

body:not(.layout-ready) #site-header::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 81px;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #f3f4f6;
    /* Tailwind gray-100 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* Tailwind shadow-sm */
    z-index: 100;
}

/* --- View Transitions API Support --- */
@view-transition {
    navigation: auto;
}

/* ヘッダーは固定（内部のheader要素に適用してクリップを防ぐ） */
#site-header header {
    view-transition-name: site-header;
}

/* フッターも固定 */
#site-footer footer {
    view-transition-name: site-footer;
}

/* ヘッダーとフッターはアニメーションなし（常に表示） */
::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-old(site-footer),
::view-transition-new(site-footer) {
    animation: none;
}

/* コンテンツ部分はフェードで切り替え */
::view-transition-old(root) {
    animation: fade-out 0.15s ease-out;
}

::view-transition-new(root) {
    animation: fade-in 0.15s ease-in;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* --- 検索モーダル: 検索バーを常に上部に固定 ---
 * pagefind-ui が #pagefind-container 内に描画するフォームを
 * sticky で貼り付け、結果だけがスクロールするようにする。
 */
#pagefind-container .pagefind-ui__form {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 1;
    padding-bottom: 0.5rem;
}