/* Awards（2026-09-28 作り直し）
 *
 * 4 つの賞を 2×2 の大きなカードにし、月桂樹の紋章を線で描く。賞ごとに色を分ける
 * （金・青緑・朱・藍）。発表までの流れと、懇親会までの日数を出す。
 * 中身（賞の名前・説明・発表日）は前の版のまま。
 */

.aw {
  --aw-ink: #15213a;
  --aw-ink-2: #4a566b;
  --aw-line: #e3e7ee;
  --aw-bg: #f6f7f9;
  --aw-gold: #b8892a;
  --aw-teal: #2a7a80;
  --aw-vermilion: #c0492f;
  --aw-indigo: #3b4c9a;
  --font-award: 'Playfair Display', Georgia, serif;
  background: var(--aw-bg);
  color: var(--aw-ink);
  padding: 5rem 1.5rem 6rem;
  overflow-x: clip;
}
.aw-wrap { width: min(1120px, 100%); margin: 0 auto; }

/* ---------- Masthead ---------- */
.aw-mast {
  margin-bottom: 3.5rem;
  max-width: 760px;
}
.aw-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--theme-primary);
  margin: 0 0 0.8rem;
}
.aw-mast h2 {
  font-family: var(--font-award);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  overflow-wrap: anywhere;
}
.aw-lead { font-size: 1.08rem; line-height: 1.7; color: var(--aw-ink-2); margin: 0; max-width: 52ch; }
/* ---------- Award cards ---------- */
.aw-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  perspective: 1200px;
}
.aw-card {
  --c: var(--aw-gold);
  position: relative;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  padding: 2rem 2rem 1.8rem;
  border-radius: 22px;
  background: #fff;
  border: 1px solid var(--aw-line);
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease, opacity 0.8s ease;
  box-shadow: 0 1px 2px rgba(10, 20, 40, 0.04);
}
.aw-card--student { --c: var(--aw-teal); }
.aw-card--presentation { --c: var(--aw-vermilion); }
.aw-card--poster { --c: var(--aw-indigo); }
/* 淡い色のにじみ（上端の色の帯は 2026-09-28 に外した） */
.aw-card::after {
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: -1;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 14%, transparent), transparent);
}
.aw-card:hover { box-shadow: 0 30px 60px -30px rgba(10, 20, 40, 0.35); }
/* マウスに合わせて走る光 */
.aw-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, -30%) var(--my, -30%),
    rgba(255, 255, 255, 0.55), transparent 60%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.aw-card:hover .aw-shine { opacity: 1; }

.aw-emblem { width: 120px; height: 120px; color: var(--c); }
.aw-emblem svg { width: 100%; height: 100%; overflow: visible; }
.aw-emblem .aw-draw {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.6, 0, 0.2, 1);
}
.aw-emblem .aw-leaf {
  fill: currentColor;
  opacity: 0;
  transform: scale(0.3);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.3, 1.6, 0.5, 1);
  transition-delay: calc(0.5s + var(--k, 0) * 60ms);
}
.aw-emblem .aw-disc { fill: color-mix(in srgb, currentColor 12%, #fff); }
.aw-emblem .aw-num {
  font-family: var(--font-award);
  font-size: 26px;
  font-weight: 700;
  fill: currentColor;
  opacity: 0;
  transition: opacity 0.6s ease 0.9s;
}
.aw-card.is-seen .aw-draw { stroke-dashoffset: 0; }
.aw-card.is-seen .aw-leaf { opacity: 0.85; transform: none; }
.aw-card.is-seen .aw-num { opacity: 1; }

.aw-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c);
  margin: 0.3rem 0 0.4rem;
}
.aw-name {
  font-family: var(--font-award);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.7rem;
}
.aw-desc { font-size: 0.98rem; line-height: 1.7; color: var(--aw-ink-2); margin: 0 0 1.1rem; }
.aw-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.aw-tags li {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 28%, #fff);
}

/* 現れ方（見えたときに順に） */
.aw-js .aw-card { opacity: 0; }
.aw-js .aw-card.is-seen { opacity: 1; }
.aw-js .aw-card.is-seen:nth-child(2) { transition-delay: 0.08s; }
.aw-js .aw-card.is-seen:nth-child(3) { transition-delay: 0.16s; }
.aw-js .aw-card.is-seen:nth-child(4) { transition-delay: 0.24s; }

/* ---------- Road to the ceremony ---------- */
.aw-road { margin-top: 4rem; }
.aw-road h3 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--aw-ink-2);
  margin: 0 0 1.4rem;
}
.aw-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  position: relative;
}
.aw-steps::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 11px;
  height: 2px;
  background: var(--aw-line);
}
.aw-steps::after {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  height: 2px;
  width: calc(100% * var(--aw-road, 0));
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent-light));
  transition: width 1.4s cubic-bezier(0.6, 0, 0.2, 1);
}
/* 点を線（.aw-steps::after）より手前に出す。 */
.aw-step { position: relative; z-index: 1; padding: 2.2rem 1.5rem 0 0; }
.aw-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--theme-primary);
  box-sizing: border-box;
}
.aw-step__when {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--theme-primary);
  margin: 0 0 0.35rem;
}
.aw-step__what { font-weight: 700; font-size: 1.05rem; margin: 0 0 0.3rem; }
.aw-step__note { font-size: 0.92rem; line-height: 1.6; color: var(--aw-ink-2); margin: 0; }
.aw-step--key .aw-step__what { font-family: var(--font-award); font-size: 1.25rem; }
.aw-step--key::before { background: var(--theme-primary); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .aw-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .aw { padding: 3.5rem 1rem 4rem; }
  .aw-card { grid-template-columns: minmax(0, 1fr); padding: 1.6rem 1.4rem; }
  .aw-emblem { width: 92px; height: 92px; }
  .aw-steps { grid-template-columns: minmax(0, 1fr); }
  .aw-steps::before, .aw-steps::after { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .aw-steps::after { height: calc(100% * var(--aw-road, 0)); width: 2px; transition: height 1.4s cubic-bezier(0.6, 0, 0.2, 1); }
  .aw-step { padding: 0 0 1.8rem 2.2rem; }
  .aw-step::before { top: 0; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .aw-card { transition: none; transform: none !important; }
  .aw-js .aw-card { opacity: 1; }
  .aw-emblem .aw-draw { stroke-dashoffset: 0; transition: none; }
  .aw-emblem .aw-leaf { opacity: 0.85; transform: none; transition: none; }
  .aw-emblem .aw-num { opacity: 1; transition: none; }
  .aw-shine { display: none; }
  .aw-steps::after { width: 100%; transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .aw-steps::after { height: 100%; width: 2px; }
}