/* Landing styles loaded before the page-specific club shelf rules. */
/* Logo Animation - Step 1: Start at center, tape peels. Step 2: Move up */
/* Desktop only - disable on mobile */
.logo-reveal {
  display: inline-block;
}

.logo-tape-container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.logo-tape-container img {
  opacity: 1;
}

/* Hero Animation - default visible on mobile */
.hero-animate {
  opacity: 1;
  transform: translateY(0);
}

/* Desktop animations (lg breakpoint: 1024px and up) */
@media (min-width: 1024px) {
  .logo-reveal {
    will-change: transform;
    transform: translateY(35vh);
    animation: logoSlideUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 1.1s;
  }

  /* Tape overlay that peels to the left - happens first */
  .logo-tape-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(249,250,251,1) 50%, rgba(243,244,246,1) 100%);
    z-index: 10;
    transform-origin: right center;
    will-change: transform;
    animation: tapePeelLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: 0.3s;
  }

  .logo-tape-container img {
    opacity: 0;
    animation: logoAppear 0.4s ease-out forwards;
    animation-delay: 0.5s;
  }

  .hero-animate {
    opacity: 0;
    will-change: transform, opacity;
    transform: translateY(60px);
    animation: slideUpFadeIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(2s + (var(--delay) * 0.12s));
  }
}

@keyframes logoSlideUp {
  0% {
    transform: translate3d(0, 35vh, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes tapePeelLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-105%, 0, 0);
  }
}

@keyframes logoAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideUpFadeIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 60px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* 재방문 시 애니메이션 스킵 - 즉시 최종 상태로 표시 */
html.skip-landing-animation .logo-reveal {
  transform: translateY(0) !important;
  animation: none !important;
}

html.skip-landing-animation .logo-tape-container::before {
  display: none !important;
}

html.skip-landing-animation .logo-tape-container img {
  opacity: 1 !important;
  animation: none !important;
}

html.skip-landing-animation .hero-animate {
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: none !important;
}

/* Trusted By marquee — seamless horizontal scroll of partner logos */
@keyframes student-partner-scroll {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(var(--student-partner-shift, -50%), 0, 0); }
}
.student-partner-marquee {
  display: flex;
  width: max-content;
  /* `paused` initial state — JS flips to running after image dimensions
     are known and the correct duration is computed. Without this, the
     animation runs with the 60s fallback against an unknown scrollWidth
     and visibly snaps to a slower speed once the recalculation lands. */
  animation: student-partner-scroll var(--student-partner-duration, 60s) linear infinite paused;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.student-partner-marquee-track {
  display: flex;
  flex-shrink: 0;
}
.student-partner-marquee:hover {
  animation-play-state: paused;
}

.offer-proof-card.is-active {
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
}
.offer-proof-card {
  cursor: pointer;
  flex: 0 0 clamp(260px, 28%, 340px);
  scroll-snap-align: start;
  transition-property: border-color, box-shadow;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.offer-card-window {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-padding-left: 0.25rem;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.offer-card-window::-webkit-scrollbar {
  display: none;
}
.offer-proof-card:hover:not(.is-active) {
  border-color: rgba(156, 163, 175, 0.6);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}
.offer-proof-card:focus {
  outline: none;
}
.offer-proof-card:focus-visible {
  outline: 2px solid rgba(239, 68, 68, 0.35);
  outline-offset: 3px;
}
.offer-proof-card-title {
  min-height: 3.5rem;
}
.offer-step {
  -webkit-tap-highlight-color: transparent;
}
.offer-step.is-active {
  border-color: rgb(239, 68, 68);
  background: rgb(239, 68, 68);
  color: #fff;
  box-shadow: 0 10px 24px rgba(239, 68, 68, 0.18);
}
.offer-step:not(.is-active) {
  border-color: rgb(229, 231, 235);
  background: #fff;
  color: rgb(75, 85, 99);
}
[data-offer-stage],
[data-offer-panel] {
  contain: layout paint style;
}
[data-offer-panel].offer-panel-hidden {
  content-visibility: hidden;
  visibility: hidden;
}
@media (max-width: 767px) {
  [data-offer-stage] {
    --offer-mobile-card-height: 90%;
    aspect-ratio: auto;
    height: min(74vh, 640px);
    /* Keep every section below the offer media anchored while Chrome's
       native toolbar changes the visual viewport height. `vh` remains the
       compatibility fallback; modern mobile browsers use the stable small
       viewport value. */
    height: min(74svh, 640px);
    margin-inline: -0.75rem;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    --tw-ring-color: transparent !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-shadow: 0 0 #0000 !important;
  }
  [data-offer-panel] > .absolute.inset-0 {
    border-radius: 24px;
  }
  [data-offer-panel="projects"] > .absolute.inset-0:first-child,
  [data-offer-panel="jobs"] > .absolute.inset-0:first-child,
  [data-offer-panel="clubs"] > .absolute.inset-0:first-child {
    display: none !important;
  }
  [data-project-carousel],
  [data-offer-instagram-panel],
  .offer-club-shelf {
    inset: 0 !important;
  }
}

/* Landing instance of the shared club shelf. Kept in this cacheable page
   stylesheet instead of regenerating the same prefix-only CSS in every HTML
   response. These rules intentionally precede student-landing.css. */
.offer-club-shelf {
  align-items: stretch;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  overflow-anchor: none;
  padding: 0.75rem 1rem 0.5rem;
  perspective: 1200px;
  scroll-behavior: smooth;
  scroll-padding-inline: 1rem;
  scrollbar-width: none;
}
.offer-club-shelf.is-auto-navigating {
  scroll-behavior: auto;
}
.offer-club-shelf::-webkit-scrollbar {
  display: none;
}
.offer-club-shelf-card {
  appearance: none;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  color: inherit;
  flex: 0 0 76px;
  min-width: 76px;
  overflow: hidden;
  position: relative;
  text-align: left;
  transform-origin: center;
  transition: flex-basis 440ms cubic-bezier(0.22, 1, 0.36, 1),
              min-width 440ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 300ms ease,
              background-color 300ms ease,
              border-color 300ms ease,
              box-shadow 300ms ease;
  -webkit-tap-highlight-color: transparent;
}
.offer-club-shelf-card:not(.is-active):focus-visible {
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(239, 68, 68, 0.28);
}
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  .offer-club-shelf-card:not(.is-active):hover {
    background: rgba(255, 255, 255, 0.86);
    border-color: rgba(239, 68, 68, 0.28);
    transform: translateY(-4px) rotateY(-4deg);
  }
}
.offer-club-shelf-card:focus {
  outline: none;
}
.offer-club-shelf-card:focus-visible {
  outline: 2px solid rgba(239, 68, 68, 0.35);
  outline-offset: 3px;
}
.offer-club-shelf-card.is-active {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.14);
  flex-basis: clamp(360px, 42vw, 540px);
  min-width: min(540px, 66vw);
  scroll-margin-inline: 1rem;
}
.offer-club-spine,
.offer-club-expanded {
  height: 100%;
}
.offer-club-spine {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 1rem 0.75rem;
}
.offer-club-spine-name {
  color: rgb(75, 85, 99);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.1;
  max-height: 8.5rem;
  overflow: hidden;
  text-align: center;
  writing-mode: vertical-rl;
}
.offer-club-expanded {
  display: none;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto;
  padding: 2rem;
  scrollbar-width: none;
}
.offer-club-expanded::-webkit-scrollbar {
  display: none;
}
.offer-club-shelf-card.is-active .offer-club-spine {
  display: none;
}
.offer-club-shelf-card.is-active .offer-club-expanded {
  display: flex;
}
@media (max-width: 767px) {
  @keyframes katchup-club-card-exit-left {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
    to {
      opacity: 0;
      transform: translate3d(-34vw, 14px, 0) rotate(-8deg) scale(0.94);
    }
  }
  @keyframes katchup-club-card-exit-right {
    from {
      opacity: 1;
      transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
    to {
      opacity: 0;
      transform: translate3d(34vw, 14px, 0) rotate(8deg) scale(0.94);
    }
  }
  @keyframes katchup-club-card-enter-left {
    from {
      opacity: 0;
      transform: translate3d(-26vw, 10px, 0) rotate(-5deg) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
  }
  @keyframes katchup-club-card-enter-right {
    from {
      opacity: 0;
      transform: translate3d(26vw, 10px, 0) rotate(5deg) scale(0.96);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }
  }
  .offer-club-shelf {
    display: block;
    justify-content: center;
    overflow: hidden;
    padding: 0.25rem 0 0.35rem;
    position: absolute;
    touch-action: pan-y;
  }
  .offer-club-shelf.is-dragging .offer-club-shelf-card {
    transition: none !important;
  }
  .offer-club-shelf::-webkit-scrollbar {
    display: none;
  }
  .offer-club-shelf-card {
    display: none;
    flex: none;
    height: 88%;
    left: 50%;
    min-width: min(78vw, 380px);
    position: absolute;
    top: 50%;
    width: min(78vw, 380px);
  }
  .offer-club-shelf-card.is-active {
    display: block;
    flex-basis: min(78vw, 380px);
    min-width: min(78vw, 380px);
    transform: translate3d(-50%, -50%, 80px) rotateY(0deg) scale(1);
    width: min(78vw, 380px);
    z-index: 4;
  }
  .offer-club-shelf-card.is-left,
  .offer-club-shelf-card.is-right {
    display: block;
    opacity: 0.68;
    pointer-events: auto;
    z-index: 2;
  }
  .offer-club-shelf-card.is-left {
    transform: translate3d(-116%, -50%, -90px) rotateY(34deg) scale(0.74);
  }
  .offer-club-shelf-card.is-right {
    transform: translate3d(16%, -50%, -90px) rotateY(-34deg) scale(0.74);
  }
  .offer-club-shelf-card.is-back {
    display: none;
  }
  .offer-club-shelf-card.is-left .offer-club-spine,
  .offer-club-shelf-card.is-right .offer-club-spine {
    display: none;
  }
  .offer-club-shelf-card.is-left .offer-club-expanded,
  .offer-club-shelf-card.is-right .offer-club-expanded {
    display: flex;
    pointer-events: none;
  }
  .offer-club-shelf-card.is-swipe-exit-left,
  .offer-club-shelf-card.is-swipe-exit-right,
  .offer-club-shelf-card.is-swipe-enter-left,
  .offer-club-shelf-card.is-swipe-enter-right {
    display: block;
    pointer-events: none;
  }
  .offer-club-shelf-card.is-swipe-exit-left {
    animation: katchup-club-card-exit-left 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .offer-club-shelf-card.is-swipe-exit-right {
    animation: katchup-club-card-exit-right 220ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .offer-club-shelf-card.is-swipe-enter-left {
    animation: katchup-club-card-enter-left 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .offer-club-shelf-card.is-swipe-enter-right {
    animation: katchup-club-card-enter-right 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .offer-club-expanded {
    padding: 1.25rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .offer-club-shelf {
    scroll-behavior: auto;
  }
  .offer-club-shelf-card {
    transition: none;
  }
}