/*
 * ATN Summit — site-wide custom CSS.
 * Moved out of the Webflow site-settings <head> code, in its original order, and loaded
 * right after the three Webflow stylesheets (see src/layouts/BaseLayout.astro).
 */

/* ==== Webflow Interactions (IX3): hide animated elements until src/scripts/webflow/interactions.ts has set their start state ==== */
html.w-mod-js:not(.w-mod-ix3) :is(.cta-slider-wrapper, :is(.wrapper-thumbnail, .wrapper-thumbnail) .workshop-thumbnail-image) {visibility: hidden !important;}
@media screen and (max-width: 991px) {
  html.w-mod-js:not(.w-mod-ix3) :is(.site-nav__logo, .site-nav__join) {visibility: hidden !important;}
}

/* ==== Page-entry reveals: hidden only while src/scripts/site/page-reveal.js prepares them ==== */
.reveal-pending [data-line-reveal='true'],
.reveal-pending [data-reveal-group] { visibility: hidden; }
/* Room for descenders inside the SplitText line masks */
.line-mask, .word-mask, .char-mask { padding-block: 0.1em; margin-block: -0.1em; }

/* ==== Button ==== */
/* Text scramble on hover (src/scripts/site/text-scramble.js) */
.btn-animate-chars [data-scramble-hover] {
  overflow: hidden;
  position: relative;
  display: inline-block;
}
/* The scrambled text is never the click target: the link around it always is. */
[data-scramble-hover],
[data-scramble-hover] * {
  pointer-events: none;
}
/* Background */
.btn-animate-chars__bg {
  inset: 0;
  transition: inset 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}
.btn-animate-chars:hover .btn-animate-chars__bg {
  inset: 0.125em;
}
/* Pixel arrow: turns a quarter clockwise while its call to action is hovered (CTA buttons,
   sponsor-tier and workshop buttons, form submit buttons). The submit arrow keeps its centring
   offset. Mouse hover only, so a tap on a phone doesn't leave it turned. */
.cta-icon-image,
.workshop-tickets-icon.sponsors-contact,
.image-3 {
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}
@media (hover: hover) {
  :is(a, button, .btn-animate-chars, .w-button):hover :is(.cta-icon-image, .workshop-tickets-icon.sponsors-contact) {
    transform: rotate(90deg);
  }
  :is(a, button, .w-button):hover .image-3 {
    transform: translate(50%, -50%) rotate(90deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta-icon-image,
  .workshop-tickets-icon.sponsors-contact,
  .image-3 {
    transition: none;
  }
}

/* ==== MODAL CSS ==== */
[data-modal-group-status] {
  transition: all 0.2s linear;
}
[data-modal-group-status="active"] {
  opacity: 1;
  visibility: visible;
}
[data-modal-name][data-modal-status="active"] {
  display: flex;
}

/* ==== Hover Mouse EffecT css ==== */
.cursor-marquee__card {
  transition: all 0.4s cubic-bezier(.75, 0, .25, 1);
  transform: translateY(0%) rotate(0.001deg);
  clip-path: inset(calc(50% - 0.25em) round 50em);
  will-change: clip-path;
  opacity: 0;
}
[data-cursor-marquee-status="active"] .cursor-marquee__card {
  clip-path: inset(0 round 50em);
  transform: translateY(-25%) rotate(0.001deg);
}
/* Show cursor dot when script loaded */
[data-cursor-marquee-status="not-active"] .cursor-marquee__card,
[data-cursor-marquee-status="active"] .cursor-marquee__card{
  opacity: 1;
}
/* CSS Keyframe Animation */
@keyframes translateXCursor { 
  to {
    transform: translateX(-100%);
  }
}
.cursor-marquee__text-span {
  animation: translateXCursor 10s linear infinite paused;
  transition: opacity 0.15s ease-in-out 0.25s;
  opacity: 0;
}
[data-cursor-marquee-status="active"] .cursor-marquee__text-span {
  transition: opacity 0.15s ease-in-out 0s;
  opacity: 1;
}
/* Hide the cursor card when not hovering (removes the persistent dot) */
[data-cursor-marquee-status="not-active"] .cursor-marquee__card {
  opacity: 0 !important;
}

/* ==== Menu Mobile - CSS ==== */
/* Moved to public/css/components/site-nav.css with the header it animates. */
/* CTA Banner marquee */
@keyframes translateX {
  to {
    transform: translateX(-100%);
  }
}
[data-css-marquee-list] {
  animation: translateX 20s linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
[data-navigation-status="active"] [data-css-marquee-list] {
  animation-play-state: running;
}
[data-navigation-status="active"] .centered-nav__banner:hover [data-css-marquee-list] {
  animation-play-state: paused;
}

/* ==== CSS Marquee simple ==== */
/* OPTIONAL but recommended: mask overflow on each wrapper */
[data-marquee-left],
[data-marquee-right] { overflow: hidden; }
/* LEFT direction (like original -100%) */
@keyframes translateX-left {
  to { transform: translateX(-100%); }
}
[data-marquee-left-list] {
  animation: translateX-left 30s linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
/* RIGHT direction (+100%) */
@keyframes translateX-right {
  to { transform: translateX(100%); }
}
[data-marquee-right-list] {
  animation: translateX-right 30s linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

/* ==== Logo Reveal Loader CSS ==== */
.wf-design-mode .loader{ display: none; }
[data-load-reset]{ opacity: 0; }

/* ==== Accordion Animation - CSS ==== */
/* Animate Accordion Bottom Grid */
.accordion-css__item-bottom,
.accordion-css__item-bottom2 {
  transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}
[data-accordion-status="active"] .accordion-css__item-bottom,
[data-accordion-status="active"] .accordion-css__item-bottom2 {
  grid-template-rows: 1fr;
}
/* Animate Icon */
.accordion-css__item-icon,
.accordion-css__item-icon2 {
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}
[data-accordion-status="active"] .accordion-css__item-icon,
[data-accordion-status="active"] .accordion-css__item-icon2 {
  transform: rotate(0.001deg);
}

/* ==== Call-to-action boxes and banners that open the email pop-up ([data-modal-target]) are
   <button>s: they look exactly like the link versions (.cta-wrapper, .cta-slider-wrapper). ==== */
button.cta-wrapper,
button.cta-slider-wrapper {
  padding: 0;
  border: 0;
  border-radius: 0;
  font: inherit;
  cursor: pointer;
}
button.cta-wrapper { color: inherit; }
button.cta-slider-wrapper { width: 100%; }