/* U29 motion: lightweight reveal + hover effects (opacity/transform only).
   Everything is scoped under html.u29-anim, which is only set when the browser
   supports IntersectionObserver and the user hasn't asked for reduced motion. */
:root { --u29-ease: cubic-bezier(.2, .7, .2, 1); }

/* ---- scroll reveal ---- */
.u29-anim .div-block-4,
.u29-anim .u29-hero-manifesto p,
.u29-anim .u29-hero-lead,
.u29-anim .u29-hero-org,
.u29-anim .zen-title-wrapper-left,
.u29-anim .zen-team-tabs-menu,
.u29-anim .zen-team-card,
.u29-anim .zen-blog-post {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .8s var(--u29-ease), transform .8s var(--u29-ease);
  transition-delay: var(--u29-d, 0s);
}
.u29-anim .div-block-4 { transform: translate3d(0, -12px, 0); }
.u29-anim .zen-header-image-wrapper {
  opacity: 0;
  transition: opacity 1s var(--u29-ease);
  transition-delay: var(--u29-d, 0s);
}
html.u29-anim body .is-in { opacity: 1; transform: none; }

/* ---- hero title: characters rise in one by one ---- */
.u29-anim .u29-hero-title .u29-char {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .5em, 0);
  transition: opacity .7s var(--u29-ease), transform .7s var(--u29-ease);
  transition-delay: calc(var(--u29-i) * 55ms + .15s);
}
.u29-anim .u29-hero-title.is-in .u29-char { opacity: 1; transform: none; }

/* ---- hover (mouse/trackpad only, so taps on phones stay snappy) ---- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .zen-blog-post.is-done { transition: opacity .8s var(--u29-ease), transform .4s var(--u29-ease), box-shadow .4s var(--u29-ease); transition-delay: 0s; }
  .zen-blog-post.is-done:hover { transform: translate3d(0, -4px, 0); box-shadow: 0 12px 28px rgba(17, 24, 39, .08); }
  .zen-team-tab-link { transition: color .3s, background-color .3s; }
}

/* =========================================================
   Brand accents: logo pink → blue (gradients + transitions)
   ========================================================= */
:root {
  --u29-pink: #e0466a;
  --u29-blue: #6a98cb;
  --u29-grad: linear-gradient(90deg, var(--u29-pink), var(--u29-blue));
}

/* Scroll progress bar along the top edge */
.u29-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000;
  background: var(--u29-grad);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* Hero: two soft brand-color glows drifting behind the copy */
.u29-hero { position: relative; isolation: isolate; }
.u29-hero::before,
.u29-hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; border-radius: 50%;
  opacity: .18;
}
.u29-hero::before { top: -12%; right: -6%; background: radial-gradient(closest-side, var(--u29-pink), transparent); }
.u29-hero::after { top: 28%; right: 16%; background: radial-gradient(closest-side, var(--u29-blue), transparent); }
@media (max-width: 767px) {
  .u29-hero::before, .u29-hero::after { width: 90vw; height: 90vw; opacity: .14; }
  .u29-hero::before { top: -8%; right: -30%; }
  .u29-hero::after { top: 35%; right: auto; left: -35%; }
}
.u29-anim .u29-hero::before { animation: u29-drift-a 16s ease-in-out infinite alternate; }
.u29-anim .u29-hero::after { animation: u29-drift-b 19s ease-in-out infinite alternate; }
@keyframes u29-drift-a { to { transform: translate3d(-8%, 10%, 0) scale(1.12); } }
@keyframes u29-drift-b { to { transform: translate3d(10%, -8%, 0) scale(.9); } }

/* Hero title: a pink→blue light sweeps across once the letters have landed */
.u29-hero-title.is-shine {
  background: linear-gradient(100deg, #384252 0 38%, var(--u29-pink) 46%, var(--u29-blue) 54%, #384252 62% 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: u29-shine 1.8s var(--u29-ease) forwards;
}
@keyframes u29-shine { to { background-position: 0 0; } }
/* Gradient rule that draws in under the key word 「分担」.
   Drawn as the span's own background (not a positioned ::after) so the
   title's background-clip:text light sweep still paints these letters. */
.u29-key {
  background: var(--u29-grad) no-repeat 0 100% / 100% 4px;
  padding-bottom: .02em;
}
@media (max-width: 767px) { .u29-key { background-size: 100% 3px; } }
.u29-anim .u29-key { background-size: 0 4px; transition: background-size 1s var(--u29-ease) .7s; }
.u29-anim .u29-hero-title.is-in .u29-key { background-size: 100% 4px; }
@media (max-width: 767px) {
  .u29-anim .u29-key { background-size: 0 3px; }
  .u29-anim .u29-hero-title.is-in .u29-key { background-size: 100% 3px; }
}

/* Videos: a brand-gradient curtain wipes away to reveal each one */
.zen-header-image-wrapper { position: relative; }
.u29-anim .zen-header-image-wrapper::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(120deg, var(--u29-pink), var(--u29-blue));
  transform-origin: 100% 50%;
  transition: transform 1.1s cubic-bezier(.77, 0, .18, 1) calc(var(--u29-d, 0s) + .15s);
}
.u29-anim .zen-header-image-wrapper.is-in::after { transform: scaleX(0); }

/* Section headings: gradient accent line draws in */
.zen-title-wrapper-left .zen-h3-heading { position: relative; padding-bottom: 14px; }
.zen-title-wrapper-left .zen-h3-heading::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 4px;
  background: var(--u29-grad);
}
.u29-anim .zen-title-wrapper-left .zen-h3-heading::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--u29-ease) .35s; }
.u29-anim .zen-title-wrapper-left.is-in .zen-h3-heading::after { transform: none; }

/* Year tabs: active tab gets the brand gradient */
.zen-team-tab-link.w--current {
  background-image: var(--u29-grad);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(224, 70, 106, .45);
}

/* Sister-event cards (links): gradient outline fades in on hover.
   Participant cards link nowhere, so they get no hover effect. */
.zen-blog-post { position: relative; }
.zen-blog-post::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: linear-gradient(135deg, var(--u29-pink), var(--u29-blue));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s var(--u29-ease);
}
@media (hover: hover) {
  .zen-blog-post:hover::before { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .u29-hero::before, .u29-hero::after { animation: none; }
}
/* keep the drifting glows from widening the page */
.zen-section-regular { overflow: hidden; }
/* The original Webflow interaction zooms participant photos on hover (inline
   transform from u-29-japan.js); the cards link nowhere, so keep photos still. */
.zen-team-card .zen-image-cover { transform: none !important; }

/* Participant photos: a faint pink→blue band passes diagonally (45°, top-left
   to bottom-right) while each photo fades in as its card comes into view. */
.zen-team-image { position: relative; }
.u29-anim .zen-team-image::after {
  content: ""; position: absolute; top: 0; left: 0; width: 300%; height: 300%;
  pointer-events: none; z-index: 1;
  background: linear-gradient(135deg,
    rgba(224, 70, 106, 0) 34%, rgba(224, 70, 106, .28) 43%,
    rgba(106, 152, 203, .28) 51%, rgba(106, 152, 203, 0) 60%);
  transform: translate3d(-62%, -62%, 0);
  transition: transform 1.5s cubic-bezier(.45, 0, .25, 1) calc(var(--u29-d, 0s) + .15s);
}
.u29-anim .zen-team-card.is-in .zen-team-image::after { transform: translate3d(0, 0, 0); }
.u29-anim .zen-team-image img {
  opacity: 0; filter: saturate(.6);
  transition: opacity .9s var(--u29-ease) calc(var(--u29-d, 0s) + .35s), filter 1.4s var(--u29-ease) calc(var(--u29-d, 0s) + .35s);
}
.u29-anim .zen-team-card.is-in .zen-team-image img { opacity: 1; filter: none; }

/* Year tabs: a gradient pill glides to the selected year */
.zen-team-tabs-menu.u29-tabs { position: relative; }
.u29-tabs .zen-team-tab-link { position: relative; z-index: 1; transition: color .45s var(--u29-ease), background-color .3s; }
.u29-tabs .zen-team-tab-link.w--current { background: transparent; box-shadow: none; color: #fff; }
.u29-tab-pill {
  position: absolute; top: 0; left: 0; z-index: 0; border-radius: 99px; pointer-events: none;
  background: var(--u29-grad);
  box-shadow: 0 8px 20px -8px rgba(224, 70, 106, .45);
  transition: transform .55s cubic-bezier(.65, 0, .25, 1), width .55s cubic-bezier(.65, 0, .25, 1), height .55s cubic-bezier(.65, 0, .25, 1);
}

/* SP: year tabs docked at the bottom while browsing participants */
.u29-tabdock { display: none; }
@media screen and (max-width: 767px) {
  .u29-tabdock {
    display: flex; gap: 4px; padding: 4px;
    position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 900;
    border-radius: 99px;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: 0 12px 32px -12px rgba(40, 50, 90, .45), 0 0 0 1px rgba(106, 152, 203, .18);
    opacity: 0; visibility: hidden;
    transform: translate3d(-50%, 150%, 0) scale(.92);
    transition: transform .35s cubic-bezier(.4, 0, 1, 1), opacity .25s ease, visibility 0s linear .35s;
  }
  .u29-tabdock.is-shown {
    opacity: 1; visibility: visible;
    transform: translate3d(-50%, 0, 0) scale(1);
    transition: transform .6s cubic-bezier(.34, 1.45, .5, 1), opacity .3s ease, visibility 0s;
  }
  .u29-tabdock-btn {
    position: relative; z-index: 1;
    -webkit-appearance: none; appearance: none; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 16px; font-weight: 500; letter-spacing: -.2px; line-height: 1.2;
    color: var(--zen--gray--500, #6b7280);
    padding: 10px 22px; border-radius: 99px;
    -webkit-tap-highlight-color: transparent;
    transition: color .45s var(--u29-ease);
  }
  .u29-tabdock-btn.is-current { color: #fff; }
}