/*
Theme Name: TIDE 潮流芸術祭(制作サンプル)
Theme URI: https://tribal-works.com/sample/
Author: TRIBAL WORKS
Description: 芸術祭・イベント向けの制作サンプル。虹色に流れる液体グラデーション(WebGL)とキネティック・タイポグラフィをメインビジュアルにしたデザイン。※団体名・内容はすべて架空です。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: tidewave
*/

:root {
	--bg: #f6f3ee; --ink: #0d0d12; --muted: #6b6a73; --line: rgba(13, 13, 18, .16); --line-strong: rgba(13, 13, 18, .3);
	--accent: #ff3d6e; --accent2: #2a45ff; --panel: #fff; --on-accent: #fff;
	--f-display: "Syne", "Zen Kaku Gothic New", sans-serif;
	--f-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
	--f-mono: "Space Mono", ui-monospace, monospace;
	--gut: clamp(18px, 3.6vw, 56px);
	--header-bg: rgba(246, 243, 238, .92); --menu-bg: #f6f3ee; --footer-bg: #0d0d12;
	--intro-bg: #0d0d12; --intro-ink: #fff;
}
.m-header { color: var(--ink); mix-blend-mode: normal; }
.m-btn--lg { padding: 22px 46px; font-size: .9rem; }
.m-btn::before { background: var(--ink); }
.m-btn:hover { color: #fff; border-color: var(--ink); }
.m-btn--fill { background: var(--ink); color: #fff; border-color: var(--ink); }
.m-btn--fill::before { background: var(--accent); }
.m-btn--fill:hover { border-color: var(--accent); }
.m-footer { color: #fff; --line: rgba(255, 255, 255, .18); --line-strong: rgba(255, 255, 255, .32); --muted: #9a98a6; }
.m-footer a { color: #fff; }
.m-pagehead { background: linear-gradient(120deg, rgba(255, 61, 110, .1), rgba(42, 69, 255, .1) 60%, rgba(52, 214, 230, .12)); }

/* ---------- 液体グラデーション ---------- */
.t-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: linear-gradient(120deg, #ff3d6e, #ff9d33 35%, #34d6e6 70%, #2a45ff); }

/* ---------- ヒーロー ---------- */
.t-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; overflow: hidden; color: var(--ink); }
.t-hero__inner { position: relative; z-index: 2; width: 100%; max-width: 1760px; margin-inline: auto; padding: 110px var(--gut) clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.t-hero__top { display: flex; flex-wrap: wrap; gap: 8px 40px; font-family: var(--f-mono); font-size: clamp(.7rem, 1vw, .9rem); letter-spacing: .14em; font-weight: 700; }
.t-hero__title { font-family: var(--f-display); font-weight: 800; line-height: .78; letter-spacing: -.045em; font-size: clamp(6rem, 25.5vw, 30rem); margin: 0 0 0 -.04em; --skew: 0deg; transform: skewX(var(--skew)); transform-origin: 0 100%; will-change: transform; }
.t-hero__word .ch { font-weight: var(--wg, 800); transition: transform 1.05s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 80ms); }
.t-hero__word .chw { padding-bottom: .02em; margin-bottom: -.02em; overflow: hidden; }
.t-hero__bottom { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.t-hero__lead { max-width: 540px; font-weight: 700; font-size: clamp(.86rem, 1.2vw, 1.05rem); line-height: 1.9; background: rgba(246, 243, 238, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 16px 20px; border-radius: 16px; }
.t-badge { position: relative; flex: 0 0 auto; width: clamp(110px, 12vw, 170px); aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.t-badge:hover { transform: scale(1.08) rotate(8deg); }
.t-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: t-rot 18s linear infinite; }
.t-badge text { font-family: var(--f-mono); font-size: 15px; letter-spacing: 3px; fill: #fff; font-weight: 700; }
.t-badge span { font-size: 1.8rem; font-family: var(--f-display); }
@keyframes t-rot { to { transform: rotate(360deg); } }
@media (max-width: 700px) { .t-hero__bottom { flex-direction: column; align-items: flex-start; } }

/* ---------- 帯 ---------- */
.t-bandwrap { overflow: hidden; padding-block: 34px; margin-block: -20px; position: relative; z-index: 3; }
.t-band { background: var(--ink); color: #fff; padding-block: 20px; font-size: clamp(1.4rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: .02em; transform: rotate(-1.4deg); width: 104%; margin-left: -2%; }
.t-band .m-marquee__track { animation-duration: 50s; }

/* ---------- コンセプト ---------- */
.t-concept { padding-block: clamp(110px, 16vw, 240px) clamp(80px, 12vw, 180px); }
.t-concept__text { font-size: clamp(1.4rem, 3.4vw, 3.1rem); line-height: 1.7; font-weight: 700; margin-top: 26px; max-width: 1300px; }
.t-concept__text .ws { opacity: .14; }
.t-concept__text .ws.on { opacity: 1; }
.t-nums ul { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.t-nums li { padding: clamp(24px, 4vw, 52px) 20px; border-right: 1px solid var(--line); }
.t-nums li:last-child { border-right: 0; }
.t-nums b { font-family: var(--f-display); font-weight: 800; font-size: clamp(3.4rem, 9vw, 9rem); line-height: .9; letter-spacing: -.05em; background: linear-gradient(120deg, var(--accent), #ff9d33 50%, var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-nums span { font-family: var(--f-mono); font-weight: 700; font-size: .8rem; letter-spacing: .14em; margin-left: 8px; }
.t-nums p { margin-top: 10px; font-size: .85rem; color: var(--muted); }
@media (max-width: 760px) { .t-nums ul { grid-template-columns: 1fr 1fr; } .t-nums li:nth-child(2) { border-right: 0; } .t-nums li { border-bottom: 1px solid var(--line); } }

/* ---------- 見出し ---------- */
.t-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: clamp(28px, 5vw, 64px); }
.t-h2 { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.6rem, 9vw, 9.5rem); line-height: .9; letter-spacing: -.04em; margin-top: 16px; }
.t-h2--inv { color: #fff; }

/* ---------- プログラム(ホバーで色が追従) ---------- */
.t-programs { position: relative; }
.t-prog { border-top: 1px solid var(--ink); }
.t-prog__item a { display: grid; grid-template-columns: 4em 1.6fr .8fr 1fr 1fr; gap: 20px; align-items: baseline; padding: clamp(18px, 2.4vw, 32px) 4px; border-bottom: 1px solid var(--line-strong); transition: padding .6s cubic-bezier(.16, 1, .3, 1), color .3s; position: relative; z-index: 2; }
.t-prog__item a:hover { padding-left: 24px; color: #fff; mix-blend-mode: difference; }
.t-prog__no { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .12em; }
.t-prog__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.2rem, 2.8vw, 2.6rem); line-height: 1.25; letter-spacing: -.01em; }
.t-prog__type { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
.t-prog__date, .t-prog__venue { font-size: .86rem; color: inherit; opacity: .8; }
.t-float { position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none; width: clamp(220px, 28vw, 420px); aspect-ratio: 1; margin: calc(clamp(220px, 28vw, 420px) / -2) 0 0 calc(clamp(220px, 28vw, 420px) / -2); opacity: 0; transition: opacity .4s; }
.t-float i { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--fh1, #ff3d6e), var(--fh2, #2a45ff) 70%); filter: blur(6px); animation: t-morph 7s ease-in-out infinite; }
.t-float.is-on { opacity: .95; }
@keyframes t-morph { 0%, 100% { border-radius: 52% 48% 56% 44% / 46% 54% 46% 54%; } 33% { border-radius: 40% 60% 46% 54% / 58% 42% 58% 42%; } 66% { border-radius: 58% 42% 38% 62% / 44% 56% 44% 56%; } }
@media (max-width: 900px) { .t-prog__item a { grid-template-columns: 2.4em 1fr; } .t-prog__type, .t-prog__venue { display: none; } .t-prog__date { grid-column: 2; } .t-float { display: none; } }

/* ---------- アーティスト ---------- */
.t-artists { background: var(--ink); color: #fff; --line: rgba(255, 255, 255, .18); --muted: #9a98a6; }
.t-artists .m-label { color: #ff9d33; }
.t-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 24px); }
.t-art a { display: grid; gap: 6px; align-content: start; }
.t-art__blob { display: block; aspect-ratio: 1; margin-bottom: 10px; background: radial-gradient(circle at 28% 28%, var(--h1), var(--h2) 72%); border-radius: 52% 48% 56% 44% / 46% 54% 46% 54%; animation: t-morph 9s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * -20); transition: transform .8s cubic-bezier(.16, 1, .3, 1), filter .5s; filter: saturate(1.05); }
.t-art a:hover .t-art__blob { transform: scale(.94) rotate(-6deg); filter: saturate(1.4) brightness(1.1); }
.t-art__name { font-family: var(--f-display); font-weight: 800; font-size: clamp(1.1rem, 1.8vw, 1.6rem); line-height: 1.2; }
.t-art__meta { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; color: var(--muted); }
@media (max-width: 900px) { .t-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- チケット ---------- */
.t-tix { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); }
.t-tix__card { position: relative; padding: clamp(26px, 3vw, 44px); border-radius: 28px; color: #fff; background: radial-gradient(120% 120% at 0% 0%, var(--h1), var(--h2)); display: grid; gap: 14px; overflow: hidden; min-height: 340px; align-content: space-between; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.t-tix__card:hover { transform: translateY(-10px) rotate(-.8deg); }
.t-tix__type { font-family: var(--f-mono); font-weight: 700; letter-spacing: .2em; font-size: .8rem; }
.t-tix__price { font-family: var(--f-display); font-weight: 800; font-size: clamp(2.4rem, 4.2vw, 4.4rem); line-height: 1; letter-spacing: -.04em; white-space: nowrap; }
.t-tix__price small { font-size: 1rem; margin-left: 6px; }
.t-tix__note { font-size: .88rem; opacity: .92; }
.t-tix__card .m-btn { --btn-line: #fff; justify-self: start; }
.t-tix__card .m-btn::before { background: #fff; }
.t-tix__card .m-btn:hover { color: var(--ink); border-color: #fff; }
.t-tix__foot { margin-top: 28px; color: var(--muted); font-size: .84rem; }
@media (max-width: 900px) { .t-tix { grid-template-columns: 1fr; } .t-tix__card { min-height: 260px; } }

/* ---------- お知らせ ---------- */
.t-news { padding-top: 0; }

/* ---------- CTA ---------- */
.t-cta { position: relative; min-height: 80vh; display: grid; place-items: center; text-align: center; overflow: hidden; color: var(--ink); }
.t-cta__inner { position: relative; z-index: 2; padding: 100px var(--gut); display: grid; gap: 30px; justify-items: center; }
.t-cta__label { font-family: var(--f-mono); font-weight: 700; letter-spacing: .3em; font-size: .8rem; }
.t-cta__title { font-family: var(--f-display); font-weight: 800; font-size: clamp(4rem, 17vw, 18rem); line-height: .85; letter-spacing: -.05em; }
.m-main { background: var(--bg); }
.m-footer { position: relative; z-index: 2; }