/* ==========================================================================
   PENSA 2027 — motion & micro-interaction layer
   Self-contained: no dependency on AOS. Everything degrades gracefully and
   is fully disabled under prefers-reduced-motion.
   ========================================================================== */

:root {
  --px-ease: cubic-bezier(.22, .61, .36, 1);
  --px-ease-out: cubic-bezier(.16, 1, .3, 1);
  --px-dur: 760ms;
}

/* --------------------------------------------------------------------------
   1. Scroll reveal (drives every [data-aos] element in the imported markup)
   -------------------------------------------------------------------------- */
html.px-motion [data-aos] {
  opacity: 0;
  transition:
    opacity var(--px-dur) var(--px-ease-out),
    transform var(--px-dur) var(--px-ease-out),
    filter var(--px-dur) var(--px-ease-out);
  transition-delay: var(--px-delay, 0ms);
  will-change: opacity, transform;
}

html.px-motion [data-aos="fade-up"],
html.px-motion [data-aos="fade-up-right"],
html.px-motion [data-aos="fade-up-left"] { transform: translate3d(0, 28px, 0); }
html.px-motion [data-aos="fade-down"] { transform: translate3d(0, -22px, 0); }
html.px-motion [data-aos="fade-right"] { transform: translate3d(-28px, 0, 0); }
html.px-motion [data-aos="fade-left"] { transform: translate3d(28px, 0, 0); }
html.px-motion [data-aos="zoom-in"] { transform: scale(.94); }
html.px-motion [data-aos="zoom-out"] { transform: scale(1.06); }
html.px-motion [data-aos="flip-up"] { transform: perspective(900px) rotateX(10deg); }

html.px-motion [data-aos].px-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Legacy hook kept alive */
html.px-motion .px-reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity var(--px-dur) var(--px-ease-out), transform var(--px-dur) var(--px-ease-out); }
html.px-motion .px-reveal.px-in { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   2. Scroll progress bar
   -------------------------------------------------------------------------- */
.px-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--pensa-ruby, #6b1534), var(--pensa-green, #0b6655) 45%, var(--pensa-gold, #e3a51a));
  z-index: 10005;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   3. Header polish
   -------------------------------------------------------------------------- */
.header.fixed-top {
  transition: background-color .35s var(--px-ease), box-shadow .35s var(--px-ease), padding .35s var(--px-ease);
}
body.scrolled .header.fixed-top,
.header.scrolled {
  box-shadow: 0 10px 30px -22px rgba(6, 31, 80, .45);
}

/* animated underline for nav items */
@media (min-width: 1200px) {
  .navmenu ul li > a { position: relative; }
  .navmenu ul li > a::after {
    content: "";
    position: absolute;
    left: 12px; right: 12px; bottom: 6px;
    height: 2px;
    background: var(--pensa-gold, #e3a51a);
    transform: scaleX(0);
    transform-origin: 100% 50%;
    transition: transform .38s var(--px-ease-out);
  }
  .navmenu ul li > a:hover::after,
  .navmenu ul li > a.active::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
  }
}

.px-logo-mark svg { transition: transform .5s var(--px-ease-out); }
.px-logo:hover .px-logo-mark svg { transform: rotate(-8deg) scale(1.06); }

/* mobile menu: staggered item entrance */
.navmenu.is-open > ul { animation: pxMenuIn .34s var(--px-ease-out) both; }
.navmenu.is-open > ul > li { animation: pxMenuItem .42s var(--px-ease-out) both; }
.navmenu.is-open > ul > li:nth-child(1) { animation-delay: .04s; }
.navmenu.is-open > ul > li:nth-child(2) { animation-delay: .08s; }
.navmenu.is-open > ul > li:nth-child(3) { animation-delay: .12s; }
.navmenu.is-open > ul > li:nth-child(4) { animation-delay: .16s; }
.navmenu.is-open > ul > li:nth-child(5) { animation-delay: .20s; }
.navmenu.is-open > ul > li:nth-child(6) { animation-delay: .24s; }
.navmenu.is-open > ul > li:nth-child(7) { animation-delay: .28s; }
.navmenu.is-open > ul > li:nth-child(8) { animation-delay: .32s; }
.navmenu.is-open > ul > li:nth-child(9) { animation-delay: .36s; }
@keyframes pxMenuIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes pxMenuItem { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   4. Hero — subtle living background + entrance
   -------------------------------------------------------------------------- */
.ed-hero { position: relative; overflow: hidden; isolation: isolate; }
.ed-hero::before,
.ed-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.ed-hero::before {
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  top: -14%; right: -10%;
  background: radial-gradient(circle at 30% 30%, rgba(0, 106, 112, .16), rgba(0, 106, 112, 0) 68%);
  animation: pxDrift 22s ease-in-out infinite alternate;
}
.ed-hero::after {
  width: 38vw; height: 38vw;
  max-width: 520px; max-height: 520px;
  bottom: -18%; left: -12%;
  background: radial-gradient(circle at 60% 40%, rgba(242, 160, 0, .16), rgba(242, 160, 0, 0) 68%);
  animation: pxDrift 28s ease-in-out infinite alternate-reverse;
}
@keyframes pxDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(3%, 5%, 0) scale(1.12); }
}

.ed-hero-title em { position: relative; }
.ed-hero-title em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .06em;
  height: .10em;
  background: rgba(227, 165, 26, .34);
  transform-origin: 0 50%;
  animation: pxUnderline 1.1s .55s var(--px-ease-out) both;
}
@keyframes pxUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.ed-eyebrow::before { transition: width .6s var(--px-ease-out); }
.ed-hero:hover .ed-eyebrow::before { width: 54px; }

/* --------------------------------------------------------------------------
   5. Cards, tiles & surfaces — lift on hover
   -------------------------------------------------------------------------- */
.ed-topic,
.ed-date,
.ed-stat,
.ed-meta,
.countdown-card,
.card,
.card-welcome-message,
.ed-venue,
.organizing-card,
.ed-gallery figure {
  transition:
    transform .45s var(--px-ease-out),
    box-shadow .45s var(--px-ease-out),
    border-color .45s var(--px-ease-out);
}
.ed-topic:hover,
.ed-date:hover,
.ed-stat:hover,
.countdown-card:hover,
.card:hover,
.card-welcome-message:hover,
.organizing-card:hover,
.ed-gallery figure:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -30px rgba(6, 31, 80, .45);
  border-color: rgba(6, 31, 80, .22) !important;
}

.ed-topic .n { transition: color .35s var(--px-ease), transform .45s var(--px-ease-out); display: inline-block; }
.ed-topic:hover .n { color: var(--pensa-gold, #F2A000); transform: translateX(2px); }

.ed-stat .num::after { transition: width .5s var(--px-ease-out); }
.ed-stat:hover .num::after { width: 60px; }

/* images */
.ed-gallery figure,
.ed-venue .map,
.px-zoom { overflow: hidden; }
.ed-gallery img,
.px-zoom img {
  transition: transform .9s var(--px-ease-out), filter .6s var(--px-ease);
}
.ed-gallery figure:hover img,
.px-zoom:hover img { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   6. Buttons & links
   -------------------------------------------------------------------------- */
.ed-btn, a.ed-btn, .btn-primary, .btn-getstarted, .btn-submit-abstract {
  position: relative;
  overflow: hidden;
  transition:
    background-color .35s var(--px-ease),
    border-color .35s var(--px-ease),
    color .35s var(--px-ease),
    transform .3s var(--px-ease-out),
    box-shadow .35s var(--px-ease-out);
}
.ed-btn:not(.is-soon):hover,
.btn-primary:hover,
.btn-getstarted:hover,
.btn-submit-abstract:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -18px rgba(6, 31, 80, .7);
}
.ed-btn:not(.is-soon):active,
.btn-primary:active,
.btn-getstarted:active { transform: translateY(0); }

.ed-btn::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: skewX(-18deg);
  transition: left .7s var(--px-ease-out);
  pointer-events: none;
}
.ed-btn:not(.is-soon):hover::before { left: 115%; }

.ed-btn.is-soon { position: relative; }
.ed-btn.is-soon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  background-size: 220% 100%;
  animation: pxShimmer 3.4s linear infinite;
}
@keyframes pxShimmer { from { background-position: 140% 0; } to { background-position: -60% 0; } }

.ed-link { transition: color .3s var(--px-ease), border-color .3s var(--px-ease), gap .3s var(--px-ease); }
.footer a, .footer .social-links a { transition: color .3s var(--px-ease), background-color .3s var(--px-ease), border-color .3s var(--px-ease), transform .3s var(--px-ease-out); }
.footer .social-links a:hover { transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   7. Accordions, tabs & tables
   -------------------------------------------------------------------------- */
.accordion-button::after { transition: transform .35s var(--px-ease-out); }
.accordion-item { transition: border-color .35s var(--px-ease), background-color .35s var(--px-ease); }
.accordion-button:not(.collapsed) { transition: color .3s var(--px-ease), background-color .3s var(--px-ease); }

.tab-regist { transition: color .3s var(--px-ease), background-color .3s var(--px-ease), border-color .3s var(--px-ease), transform .3s var(--px-ease-out); }
.tab-regist:hover { transform: translateY(-1px); }
.tab-content-regist.active { animation: pxFadeIn .45s var(--px-ease-out) both; }
@keyframes pxFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

table tbody tr { transition: background-color .25s var(--px-ease); }
table tbody tr:hover { background-color: rgba(6, 31, 80, .035); }

/* --------------------------------------------------------------------------
   8. Back to top
   -------------------------------------------------------------------------- */
.px-top {
  position: fixed;
  right: 20px; bottom: 20px;
  width: 46px; height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--pensa-navy, #061F50);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.9);
  transition: opacity .35s var(--px-ease), transform .35s var(--px-ease-out), background-color .3s var(--px-ease), visibility .35s;
  box-shadow: 0 18px 34px -18px rgba(6, 31, 80, .8);
  z-index: 9990;
}
.px-top.is-on { opacity: 1; visibility: visible; transform: none; }
.px-top:hover { background: var(--pensa-gold, #F2A000); color: var(--pensa-navy, #061F50); transform: translateY(-3px); }

/* --------------------------------------------------------------------------
   9. Focus & accessibility
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--pensa-gold, #F2A000);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   10. Reduced motion — turn everything off
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.px-motion [data-aos],
  html.px-motion .px-reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   11. Per-page animation off-switch
   -------------------------------------------------------------------------- */
.fx-off [data-aos],
.fx-off .px-reveal { opacity: 1 !important; transform: none !important; }
.fx-off .ed-head::after { transform: scaleX(1) !important; }