/* ============================================================
   イベント詳細ページ専用の見た目（白ベース）
   site.css のあとに読み込む。body の data-ev で色を切り替える
   ============================================================ */

/* ---------- イベントごとの色 ----------
   --ev-ink  見出しや罫線に使う濃い色
   --ev-key  小さな文字やタグに使う中間色
   --ev-w1/2 白の上に薄く敷く色（multiply で重ねる）        */
body[data-ev]{
  --ev-ink:#0B3D2A;
  --ev-key:#16603F;
  --ev-w1:rgba(22,96,63,.10);
  --ev-w2:rgba(168,128,47,.12);
}
body[data-ev="christmas"]{        /* もみの木の緑と、灯りの金 */
  --ev-ink:#0B3D2A;
  --ev-key:#176542;
  --ev-w1:rgba(17,101,66,.11);
  --ev-w2:rgba(178,134,52,.15);
}
body[data-ev="culture"]{          /* スタッフTシャツの黄を、白の上で読める琥珀に */
  --ev-ink:#6B4300;
  --ev-key:#A87200;
  --ev-w1:rgba(242,194,0,.20);
  --ev-w2:rgba(226,99,42,.12);
}
body[data-ev="summer"]{           /* 沖縄の海と、夕暮れの橙 */
  --ev-ink:#04486B;
  --ev-key:#0A7FA8;
  --ev-w1:rgba(63,168,201,.16);
  --ev-w2:rgba(255,146,86,.13);
}

body[data-ev]{background:var(--paper);color:var(--ink)}

/* ============================================================
   ヒーロー（白地）
   ============================================================ */
.ev-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(118px,17vh,200px) var(--gutter) clamp(44px,6vw,84px);
  background:var(--paper);
}
.ev-hero-in{position:relative;z-index:4;max-width:1180px;margin:0 auto}

.ev-hero-in .date{
  font-family:var(--disp);font-weight:900;font-size:clamp(12px,1.2vw,15px);
  letter-spacing:.24em;color:var(--ev-key);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.ev-hero-in .date::before{
  content:"";width:clamp(28px,5vw,72px);height:1px;background:var(--ev-key);
}
.ev-hero-in .tag{
  border:1px solid var(--ev-key);color:var(--ev-key);border-radius:999px;
  padding:5px 14px;font-size:11px;letter-spacing:.18em;
}
.ev-hero-in h1{
  font-family:var(--disp);font-weight:900;
  font-size:clamp(34px,7.4vw,104px);line-height:1.06;letter-spacing:-.02em;
  margin:clamp(18px,2.4vw,32px) 0 clamp(22px,2.8vw,36px);
  background:linear-gradient(172deg,var(--ink) 22%,var(--ev-ink) 88%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .ev-hero-in h1{color:var(--ev-ink);background:none}
}
.ev-hero-in h1::after{
  content:"";display:block;width:clamp(64px,9vw,140px);height:3px;
  margin-top:clamp(20px,2.6vw,34px);
  background:linear-gradient(90deg,var(--ev-ink),transparent);
}
.ev-hero-in .lead{
  font-size:clamp(14px,1.42vw,19px);font-weight:500;line-height:2.05;
  max-width:44em;color:rgba(20,22,26,.82);
}

/* ============================================================
   イベントごとの空気（白地の上に、ごく薄く）
   ============================================================ */
.ev-fx,.ev-fx2{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---------- クリスマス：静かに舞う粒と、緑と金のにじみ ---------- */
body[data-ev="christmas"] .ev-fx{
  background-image:
    radial-gradient(3px 3px at 12% 8%, rgba(11,61,42,.16), transparent 100%),
    radial-gradient(2px 2px at 34% 22%, rgba(11,61,42,.12), transparent 100%),
    radial-gradient(2.6px 2.6px at 58% 12%, rgba(11,61,42,.14), transparent 100%),
    radial-gradient(1.8px 1.8px at 77% 30%, rgba(11,61,42,.11), transparent 100%),
    radial-gradient(3.2px 3.2px at 90% 6%, rgba(178,134,52,.22), transparent 100%),
    radial-gradient(2.2px 2.2px at 21% 54%, rgba(11,61,42,.13), transparent 100%),
    radial-gradient(1.7px 1.7px at 46% 68%, rgba(178,134,52,.18), transparent 100%),
    radial-gradient(2.8px 2.8px at 68% 58%, rgba(11,61,42,.12), transparent 100%),
    radial-gradient(2px 2px at 85% 76%, rgba(178,134,52,.2), transparent 100%),
    radial-gradient(2.6px 2.6px at 6% 84%, rgba(11,61,42,.13), transparent 100%);
  background-size:100% 70vh;
  animation:ev-snow 22s linear infinite;
}
@keyframes ev-snow{
  from{background-position:0 -70vh}
  to{background-position:0 70vh}
}

/* ---------- 国際文化祭：右上から差す放射光 ---------- */
body[data-ev="culture"] .ev-fx{
  background:repeating-conic-gradient(from 0deg at 84% -14%,
    rgba(242,194,0,.16) 0deg 5deg, transparent 5deg 19deg);
  -webkit-mask-image:radial-gradient(84% 96% at 86% 0%, #000 0%, rgba(0,0,0,.5) 46%, transparent 82%);
  mask-image:radial-gradient(84% 96% at 86% 0%, #000 0%, rgba(0,0,0,.5) 46%, transparent 82%);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  mix-blend-mode:multiply;
  will-change:opacity;
  animation:ev-rays 11s ease-in-out infinite alternate;
}
@keyframes ev-rays{ from{opacity:.5} to{opacity:1} }

/* ---------- サマフェス：下からうねる波 ---------- */
body[data-ev="summer"] .ev-fx{
  background:
    repeating-radial-gradient(150% 40% at 50% 152%,
      rgba(10,127,168,.13) 0 2px, transparent 2px 24px),
    repeating-radial-gradient(170% 46% at 44% 168%,
      rgba(63,168,201,.11) 0 2px, transparent 2px 33px);
  mix-blend-mode:multiply;
  animation:ev-wave 18s ease-in-out infinite alternate;
}
@keyframes ev-wave{
  from{transform:translate3d(-2%,0,0) scaleY(1)}
  to{transform:translate3d(2%,-1.5%,0) scaleY(1.06)}
}

/* 共通：四隅にイベントの色をほんのり敷く */
.ev-fx2{
  background:
    radial-gradient(46% 40% at 96% -6%, var(--ev-w2) 0%, transparent 72%),
    radial-gradient(52% 44% at -6% 12%, var(--ev-w1) 0%, transparent 74%),
    radial-gradient(70% 30% at 50% 108%, var(--ev-w1) 0%, transparent 70%);
  mix-blend-mode:multiply;
  animation:ev-glow 15s ease-in-out infinite alternate;
}
@keyframes ev-glow{
  0%{opacity:.7;transform:translate3d(-1.5%,-1%,0) scale(1.02)}
  100%{opacity:1;transform:translate3d(1.5%,1%,0) scale(1.08)}
}

/* ============================================================
   主役の写真（幅いっぱいの帯）
   ============================================================ */
.ev-key-photo{position:relative;margin:0;background:var(--paper)}
.ev-key-photo img{
  width:100%;height:clamp(280px,58vh,620px);object-fit:cover;display:block;
  object-position:50% 42%;
}
/* dvh はアドレスバーの伸縮で値が変わり写真が跳ねるので、固定される svh を使う */
@supports (height:1svh){
  .ev-key-photo img{height:clamp(280px,58svh,620px)}
}
.ev-key-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--paper) 62%,transparent) 0%,
    transparent 26%,
    transparent 78%,
    color-mix(in srgb,var(--paper) 48%,transparent) 100%);
}
@supports not (background:color-mix(in srgb,#000 50%,transparent)){
  .ev-key-photo::after{background:linear-gradient(180deg,rgba(250,249,247,.6),transparent 28%,transparent 80%,rgba(250,249,247,.45))}
}

/* 写真を先頭に置いて、見出しの帯として使う並び */
.ev-photo-top .ev-key-photo{margin:0}
.ev-photo-top .ev-key-photo img{height:clamp(300px,62vh,660px);object-position:50% 16%}
@supports (height:1svh){
  .ev-photo-top .ev-key-photo img{height:clamp(300px,62svh,660px)}
}
/* 固定した案内が写真の上でも読めるよう、上端だけ少し落とす */
.ev-photo-top .ev-key-photo::after{
  background:linear-gradient(180deg,
    rgba(0,0,0,.30) 0%,
    rgba(0,0,0,.06) 18%,
    transparent 42%,
    transparent 74%,
    color-mix(in srgb,var(--paper) 55%,transparent) 100%);
}
@supports not (background:color-mix(in srgb,#000 50%,transparent)){
  .ev-photo-top .ev-key-photo::after{background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.06) 18%,transparent 42%,transparent 76%,rgba(250,249,247,.5))}
}
/* 写真が上端を占めるぶん、見出しの上の余白を詰める */
.ev-photo-top .ev-hero{padding-top:clamp(38px,5.4vw,76px)}

/* ============================================================
   本文側
   ============================================================ */
.ev-main{
  position:relative;background:var(--paper);
  padding:clamp(48px,7vw,96px) var(--gutter) clamp(72px,10vw,140px);
}
.ev-main>*{max-width:1180px;margin-inline:auto}

/* 数字 */
.ev-numbers{
  border-top:2px solid var(--ev-ink);
  border-bottom:1px solid var(--line);
  padding:clamp(28px,4vw,52px) 0;
}
.ev-numbers .stats{gap:clamp(28px,6vw,96px)}
.ev-numbers .stats>div{position:relative;padding-left:clamp(14px,1.6vw,22px)}
.ev-numbers .stats>div::before{
  content:"";position:absolute;left:0;top:.16em;bottom:.4em;width:2px;
  background:linear-gradient(180deg,var(--ev-ink),transparent);
}
.ev-numbers .stats .n{color:var(--ev-ink);font-size:clamp(38px,5.6vw,84px)}
.ev-numbers .stats .n em{color:var(--ev-key)}
.ev-numbers .stats .k{color:var(--muted);letter-spacing:.14em;margin-top:10px}

/* ---------- 写真をならべるところ ---------- */
.ev-gallery{margin-top:clamp(56px,8vw,110px)}
.ev-gallery-head{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:clamp(16px,2vw,24px);
  border-bottom:2px solid var(--ev-ink);
  margin-bottom:clamp(24px,3.4vw,44px);
}
.ev-gallery-head h2{
  font-family:var(--disp);font-weight:900;
  font-size:clamp(20px,2.6vw,34px);letter-spacing:.02em;color:var(--ev-ink);
}
.ev-gallery-head .count{
  font-family:var(--disp);font-weight:900;font-size:12px;
  letter-spacing:.2em;color:var(--ev-key);
}
.ev-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  /* 行の高さを揃えることで、幅違いの枠を混ぜても穴があかない */
  grid-auto-rows:clamp(148px,17vw,238px);
  gap:clamp(8px,1.1vw,16px);
}
.ev-grid .g{position:relative;overflow:hidden;height:100%;background:var(--tint)}
/* 写真がまだ入っていない枠は、点線の受け皿として見せる */
.ev-grid .g:not(:has(img)){
  display:grid;place-items:center;
  border:1px dashed var(--line);background:transparent;
  font-family:var(--disp);font-weight:900;font-size:11px;
  letter-spacing:.2em;color:var(--muted);
}
.ev-grid .g img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
@media (hover:hover){.ev-grid .g:hover img{transform:scale(1.05)}}
.ev-grid .g.wide{grid-column:span 2}
.ev-grid .g.tall{grid-row:span 2}
@media (max-width:820px){
  .ev-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(120px,26vw,200px)}
}

/* 戻る */
.ev-back{margin-top:clamp(56px,8vw,110px)}
.ev-back .back{color:var(--ev-ink);border-bottom-color:var(--ev-ink)}

/* ============================================================
   登場アニメーション
   ============================================================ */
.js .ev-hero-in .date,
.js .ev-hero-in h1,
.js .ev-hero-in .lead{
  opacity:0;transform:translateY(26px);
  transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,.84,.24,1);
}
.js .ev-hero-in h1{transition-delay:.18s}
.js .ev-hero-in .lead{transition-delay:.34s}
.js .ev-hero.is-in .ev-hero-in .date,
.js .ev-hero.is-in .ev-hero-in h1,
.js .ev-hero.is-in .ev-hero-in .lead{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .ev-fx,.ev-fx2{animation:none!important}
  .ev-grid .g img{transition:none}
  .js .ev-hero-in .date,
  .js .ev-hero-in h1,
  .js .ev-hero-in .lead{opacity:1;transform:none;transition:none}
}

@media (max-width:820px){
  /* 全面に重なる装飾は、狭い端末では負担が大きいので控える */
  body[data-ev] .ev-fx,body[data-ev] .ev-fx2{animation:none}
  body[data-ev] .ev-fx2{opacity:.85}
}
@media (max-width:640px){
  .ev-numbers .stats{gap:26px}
}