:root {
  color-scheme: dark;

  --bg: #09090d;
  --bg-raised: #101015;
  --text: #f5f4f8;
  --muted: #a4a0aa;
  --soft: #706c78;
  --line: rgba(255, 255, 255, .095);
  --line-strong: rgba(255, 255, 255, .17);

  --purple: #9176ee;
  --purple-soft: #c2b3ff;
  --cyan: #6fd4ef;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.2, .8, .2, 1);

  --pointer-x: 50vw;
  --pointer-y: 50vh;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

::selection {
  color: #0a0910;
  background: var(--purple-soft);
}

/* ---------- page transition ---------- */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: .22s ease both page-out;
}

::view-transition-new(root) {
  animation: .48s var(--ease-out) both page-in;
}

@keyframes page-out {
  to {
    opacity: 0;
    transform: scale(.994);
    filter: blur(2px);
  }
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(.997);
    filter: blur(5px);
  }
}

/* ---------- ambient world ---------- */

.world {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% -12%, rgba(123, 95, 204, .12), transparent 35rem),
    linear-gradient(180deg, #0b0a10 0%, #09090d 68%);
}

.aurora {
  position: absolute;
  width: min(72vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(95px);
  opacity: .18;
  mix-blend-mode: screen;
  will-change: transform;
}

.aurora-a {
  top: -32%;
  left: -25%;
  background: #7048db;
  animation: aurora-a 21s var(--ease-soft) infinite alternate;
}

.aurora-b {
  right: -28%;
  bottom: -39%;
  background: #225e78;
  opacity: .15;
  animation: aurora-b 25s var(--ease-soft) infinite alternate;
}

.aurora-c {
  width: min(44vw, 500px);
  left: 42%;
  top: 38%;
  background: #532e86;
  opacity: .09;
  animation: aurora-c 17s var(--ease-soft) infinite alternate;
}

.light-thread {
  position: absolute;
  height: 1px;
  width: min(70vw, 900px);
  opacity: .1;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,0) 15%,
      rgba(212,201,255,.72) 50%,
      rgba(255,255,255,0) 85%,
      transparent 100%);
  filter: blur(.2px);
}

.light-thread-a {
  top: 23%;
  left: -27%;
  transform: rotate(-11deg);
  animation: thread-a 15s ease-in-out infinite;
}

.light-thread-b {
  right: -28%;
  bottom: 19%;
  transform: rotate(-14deg);
  animation: thread-b 19s ease-in-out infinite;
}

.pointer-glow {
  position: absolute;
  left: 0;
  top: 0;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  transform:
    translate3d(calc(var(--pointer-x) - 260px), calc(var(--pointer-y) - 260px), 0);
  background:
    radial-gradient(circle,
      rgba(154, 128, 239, .075) 0%,
      rgba(154, 128, 239, .03) 32%,
      transparent 68%);
  filter: blur(2px);
  opacity: 0;
  transition: opacity .6s ease;
  will-change: transform;
}

body.pointer-active .pointer-glow {
  opacity: 1;
}

.noise {
  position: absolute;
  inset: -40%;
  opacity: .045;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.6'/%3E%3C/svg%3E");
  transform: rotate(.001deg);
  animation: noise-drift .7s steps(2) infinite;
  mix-blend-mode: soft-light;
}

.vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center,
      transparent 40%,
      rgba(0,0,0,.08) 70%,
      rgba(0,0,0,.24) 100%);
}

@keyframes aurora-a {
  from { transform: translate3d(-4%, -5%, 0) scale(1); }
  to   { transform: translate3d(29%, 23%, 0) scale(1.18); }
}

@keyframes aurora-b {
  from { transform: translate3d(5%, 6%, 0) scale(1.04); }
  to   { transform: translate3d(-27%, -18%, 0) scale(1.22); }
}

@keyframes aurora-c {
  from { transform: translate3d(-22%, 18%, 0) scale(.92); }
  to   { transform: translate3d(18%, -22%, 0) scale(1.12); }
}

@keyframes thread-a {
  0%, 100% {
    opacity: .025;
    transform: translate3d(-12%, 0, 0) rotate(-11deg);
  }
  44% { opacity: .04; }
  50% {
    opacity: .16;
    transform: translate3d(64%, -7vh, 0) rotate(-11deg);
  }
  56% { opacity: .04; }
}

@keyframes thread-b {
  0%, 100% {
    opacity: .02;
    transform: translate3d(12%, 0, 0) rotate(-14deg);
  }
  50% {
    opacity: .12;
    transform: translate3d(-55%, 8vh, 0) rotate(-14deg);
  }
}

@keyframes noise-drift {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(1%, -1%, 0); }
  50% { transform: translate3d(-1%, .5%, 0); }
  75% { transform: translate3d(.5%, 1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ---------- shared micro UI ---------- */

.magnetic {
  --mag-x: 0px;
  --mag-y: 0px;
  transform: translate3d(var(--mag-x), var(--mag-y), 0);
  transition:
    transform .45s var(--ease-out),
    color .25s ease,
    background .25s ease,
    border-color .25s ease;
  will-change: transform;
}

.magnetic.is-magnetic {
  transition:
    transform .12s linear,
    color .25s ease,
    background .25s ease,
    border-color .25s ease;
}

/* ---------- home ---------- */

.home-page {
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
}

.home-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  padding: 24px 28px 28px;
}

.hero {
  grid-row: 2;
  display: grid;
  justify-items: center;
  gap: clamp(1.75rem, 4vh, 2.5rem);
}

.brand-float {
  animation: brand-float 10s ease-in-out infinite;
  transform-origin: center;
}

.brand-lockup {
  --brand-rx: 0deg;
  --brand-ry: 0deg;
  --brand-x: 0px;
  --brand-y: 0px;

  width: min(93vw, 1120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transform:
    perspective(1100px)
    translate3d(var(--brand-x), var(--brand-y), 0)
    rotateX(var(--brand-rx))
    rotateY(var(--brand-ry));
  transform-style: preserve-3d;
  transition: none;
  will-change: transform;
}

.chichill-word {
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: clamp(5.4rem, 16.2vw, 11.8rem);
  font-weight: 800;
  line-height: .77;
  letter-spacing: -.068em;
  white-space: nowrap;

  color: transparent;
  background:
    linear-gradient(
      105deg,
      #dfdce6 0%,
      #ffffff 34%,
      #f3efff 47%,
      #ffffff 58%,
      #dedbe4 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 0 18px rgba(173, 151, 255, .10))
    drop-shadow(0 18px 42px rgba(0,0,0,.18));
  animation: chichill-sheen 11s ease-in-out infinite;
  transition: filter .55s var(--ease-out);
}



.brand-lockup:hover 
@keyframes brand-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-4px) rotate(-.15deg); }
  60% { transform: translateY(2px) rotate(.12deg); }
}

@keyframes chichill-sheen {
  0%, 15% { background-position: 0% 50%; }
  50%, 65% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.club-outline {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .032em;
  margin-top: clamp(.5rem, 1.15vw, .82rem);
  font-family: "Manrope", sans-serif;
  font-size: clamp(4.55rem, 13.25vw, 9.15rem);
  font-weight: 700;
  line-height: .82;
  white-space: nowrap;
  transform: translateZ(22px);
  filter:
    drop-shadow(0 0 16px rgba(166, 143, 255, .14))
    drop-shadow(0 12px 30px rgba(0,0,0,.12));
  transition:
    filter .55s var(--ease-out),
    transform .55s var(--ease-out);
}

.club-glyph {
  display: inline-block;
  position: relative;
  color: transparent;
  -webkit-text-stroke: 1.8px rgba(242, 239, 249, .88);
  paint-order: stroke fill;
  text-shadow: none;
}

/* Optical spacing per glyph.
   Each letter is its own box, so browser kerning can never make u/b collide. */
.club-glyph:nth-child(1) { margin-right: .005em; }  /* c */
.club-glyph:nth-child(2) { margin-right: .018em; }  /* l */
.club-glyph:nth-child(3) { margin-right: .055em; }  /* u -> b safety gap */
.club-glyph:nth-child(4) { margin-left:  .005em; }  /* b */

.brand-lockup:hover .chichill-word {
  filter:
    drop-shadow(0 0 29px rgba(173, 151, 255, .20))
    drop-shadow(0 18px 42px rgba(0,0,0,.18));
}

.brand-lockup:hover .club-outline {
  filter:
    drop-shadow(0 0 27px rgba(166, 143, 255, .25))
    drop-shadow(0 12px 30px rgba(0,0,0,.12));
  transform: translateZ(26px);
}

.home-nav {
  display: flex;
  justify-content: center;
}

.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .2rem;
  color: var(--muted);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.text-link::after {
  content: "";
  position: absolute;
  left: .2rem;
  right: .2rem;
  bottom: .18rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease-out);
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--text);
}

.text-link:hover::after,
.text-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.link-arrow {
  display: inline-block;
  transition: transform .35s var(--ease-out);
}

.text-link:hover .link-arrow,
.text-link:focus-visible .link-arrow {
  transform: translate(3px, -3px);
}

.home-footer {
  grid-row: 3;
  align-self: end;
}

.contact-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  padding: .72rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: #918d98;
  text-decoration: none;
  font-size: .86rem;
  letter-spacing: .025em;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.contact-pill:hover,
.contact-pill:focus-visible {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(255,255,255,.055);
}

.contact-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}
  70% { opacity: .5; }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* ---------- apps ---------- */

.apps-page {
  min-height: 100dvh;
}

.apps-shell {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(22px, 4vw, 38px) 0 72px;
}

.apps-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  margin-bottom: clamp(20px, 4vw, 34px);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .64rem .84rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  text-decoration: none;
  font-size: .86rem;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(255,255,255,.055);
}

.back-arrow {
  transition: transform .35s var(--ease-out);
}

.back-link:hover .back-arrow,
.back-link:focus-visible .back-arrow {
  transform: translateX(-3px);
}


.apps-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.apps-grid:has(.app-card:only-child) .app-card {
  max-width: 610px;
}

.app-card {
  --card-accent: 145, 118, 238;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --shine-x: 50%;
  --shine-y: 50%;

  position: relative;
  min-height: 360px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding: clamp(24px, 4vw, 34px);
  overflow: hidden;
  isolation: isolate;

  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.057), rgba(255,255,255,.018));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 24px 60px rgba(0,0,0,.10);

  color: var(--text);
  text-decoration: none;

  transform:
    perspective(900px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translateY(0);

  transition:
    transform .65s var(--ease-out),
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;

  will-change: transform;
}

.app-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .58;
  background:
    radial-gradient(
      360px circle at var(--shine-x) var(--shine-y),
      rgba(var(--card-accent), .18),
      rgba(var(--card-accent), .06) 33%,
      transparent 68%);
  transition: opacity .35s ease;
}

.app-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: 29px;
  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.04),
      transparent 34%,
      transparent 68%,
      rgba(255,255,255,.018));
  pointer-events: none;
}

.app-card:hover,
.app-card:focus-visible {
  border-color: rgba(255,255,255,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 30px 74px rgba(0,0,0,.19);
}

.app-card.is-tilting {
  transition:
    transform .12s linear,
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.app-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}

.app-icon-shell {
  position: relative;
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  padding: 9px;
  border-radius: 29px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  box-shadow:
    0 20px 42px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateZ(38px);
}

.app-icon-shell::after {
  content: "";
  position: absolute;
  inset: -15px;
  z-index: -1;
  border-radius: 38px;
  background:
    radial-gradient(circle, rgba(var(--card-accent), .22), transparent 68%);
  opacity: .55;
  filter: blur(9px);
  transition: opacity .35s ease, transform .45s var(--ease-out);
}

.app-card:hover .app-icon-shell::after {
  opacity: .85;
  transform: scale(1.12);
}

.app-icon {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}

.app-open {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255,255,255,.025);
  color: var(--muted);
  font-size: 1.08rem;
  transform: translateZ(26px);
  transition:
    color .3s ease,
    background .3s ease,
    border-color .3s ease,
    transform .45s var(--ease-out);
}

.app-card:hover .app-open,
.app-card:focus-visible .app-open {
  color: var(--text);
  border-color: var(--line-strong);
  background: rgba(255,255,255,.065);
  transform: translate3d(3px, -3px, 26px);
}

.app-bottom {
  transform: translateZ(28px);
}

.app-meta {
  margin: 0 0 .65rem;
  color: #77727f;
  font-size: .73rem;
  font-weight: 600;
  letter-spacing: .125em;
  text-transform: uppercase;
}

.app-name {
  margin: 0;
  font-family: "Manrope", sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.05em;
  padding-bottom: .04em;
}

.app-description {
  max-width: 520px;
  margin: .88rem 0 0;
  color: var(--muted);
  font-size: .97rem;
  line-height: 1.62;
  overflow-wrap: break-word;
  margin-bottom: .08rem;
}

.app-card[data-reveal] {
  opacity: 0;
  transform:
    perspective(900px)
    rotateX(0deg)
    rotateY(0deg)
    translateY(18px);
}

.app-card[data-reveal].is-visible {
  opacity: 1;
  transform:
    perspective(900px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translateY(0);
  transition:
    opacity .7s var(--ease-out),
    transform .8s var(--ease-out),
    border-color .3s ease,
    box-shadow .3s ease;
}

.noscript {
  color: var(--muted);
}

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  .home-shell {
    padding: 18px 16px 22px;
  }

  .chichill-word {
    font-size: clamp(4.35rem, 23.5vw, 8.1rem);
  }

  
  .apps-shell {
    width: min(100% - 28px, 1120px);
  }

  .apps-grid {
    grid-template-columns: 1fr;
  }

  .apps-grid:has(.app-card:only-child) .app-card {
    max-width: none;
  }

  .app-card {
    min-height: 330px;
    border-radius: 26px;
  }

  .app-card::after {
    border-radius: 25px;
  }
}

@media (max-height: 680px) and (min-width: 761px) {
  .home-shell {
    padding-block: 16px 18px;
  }

  .hero {
    gap: 1.6rem;
  }

  .chichill-word {
    font-size: clamp(4.75rem, 13.4vw, 8.8rem);
  }

  
  .contact-pill {
    padding-block: .58rem;
  }
}

@media (hover: none), (pointer: coarse) {
  .pointer-glow {
    display: none;
  }

  .brand-lockup,
  .app-card,
  .magnetic {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }

  .pointer-glow {
    display: none;
  }

  .brand-lockup,
  .app-card,
  .magnetic {
    transform: none !important;
  }
}


/* ---------- V7 logo assets ---------- */

.brand-lockup-image {
  width: min(90vw, 740px);
  display: block;
  transform:
    perspective(1100px)
    translate3d(var(--brand-x), var(--brand-y), 0)
    rotateX(var(--brand-rx))
    rotateY(var(--brand-ry));
}

.brand-image {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 0 20px rgba(166, 143, 255, .10))
    drop-shadow(0 26px 52px rgba(0,0,0,.22));
  transition: filter .45s var(--ease-out), transform .45s var(--ease-out);
}

.brand-lockup-image:hover .brand-image {
  filter:
    drop-shadow(0 0 32px rgba(166, 143, 255, .18))
    drop-shadow(0 26px 52px rgba(0,0,0,.22));
}

.apps-top-logo-wrap {
  width: min(100%, 560px);
  padding-top: .1rem;
}

.apps-top-logo {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 0 18px rgba(166, 143, 255, .08))
    drop-shadow(0 16px 30px rgba(0,0,0,.16));
}

.apps-header {
  gap: 1.15rem;
  margin-bottom: clamp(24px, 4.5vw, 42px);
}

@media (max-width: 760px) {
  .brand-lockup-image {
    width: min(92vw, 620px);
  }

  .apps-top-logo-wrap {
    width: min(100%, 460px);
  }
}

@media (max-height: 680px) and (min-width: 761px) {
  .brand-lockup-image {
    width: min(84vw, 620px);
  }
}


/* ====================================================================
   V8 — supplied logo artwork + club-only glow
   ==================================================================== */

/* HOME: keep the supplied two-line logo large and visually clean. */
.brand-lockup-image {
  width: min(91vw, 860px);
  display: block;
}

.brand-visual {
  position: relative;
  display: block;
  width: 100%;
  isolation: isolate;
}

.brand-image,
.brand-club-layer {
  display: block;
  width: 100%;
  height: auto;
}

.brand-image {
  position: relative;
  z-index: 1;
  /* No purple glow on chichill. */
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, .20));
  transition: filter .45s var(--ease-out);
}

.brand-club-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  /* Permanent subtle glow on CLUB only. */
  filter:
    drop-shadow(0 0 8px rgba(174, 151, 255, .20))
    drop-shadow(0 0 19px rgba(150, 122, 242, .11));
  transition:
    filter .5s var(--ease-out),
    opacity .5s var(--ease-out);
  opacity: .98;
}

/* Accent the same glow on hover, still club-only. */
.brand-lockup-image:hover .brand-club-layer {
  filter:
    drop-shadow(0 0 11px rgba(181, 160, 255, .34))
    drop-shadow(0 0 27px rgba(150, 122, 242, .21));
}

/* Cancel the old whole-image hover glow from V7. */
.brand-lockup-image:hover .brand-image {
  filter: drop-shadow(0 24px 50px rgba(0, 0, 0, .20));
}


/* APPS: Back button and horizontal logo share one centered row. */
.apps-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  gap: 16px;
  margin-bottom: clamp(24px, 4.5vw, 42px);
}

.back-link {
  grid-column: 1;
  justify-self: start;
  min-height: 42px;
}

.apps-top-logo-wrap {
  position: relative;
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  width: auto;
  height: 42px;
  padding: 0;
  isolation: isolate;
}

.apps-top-logo,
.apps-top-logo-club-layer {
  display: block;
  width: auto;
  height: 38px;
  max-width: min(48vw, 270px);
  object-fit: contain;
}

.apps-top-logo {
  position: relative;
  z-index: 1;
  /* No glow on chichill. */
  filter: none;
}

.apps-top-logo-club-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter:
    drop-shadow(0 0 5px rgba(174, 151, 255, .18))
    drop-shadow(0 0 11px rgba(150, 122, 242, .09));
  transition: filter .45s var(--ease-out);
}

.apps-top-logo-wrap:hover .apps-top-logo-club-layer {
  filter:
    drop-shadow(0 0 7px rgba(181, 160, 255, .29))
    drop-shadow(0 0 15px rgba(150, 122, 242, .16));
}

/* Ensure the center logo stays truly centered even with only two elements. */
.apps-header::after {
  content: "";
  grid-column: 3;
  justify-self: end;
  width: 1px;
  height: 1px;
}

@media (max-width: 760px) {
  .brand-lockup-image {
    width: min(94vw, 720px);
  }

  .apps-shell {
    width: min(100% - 24px, 1120px);
  }

  .apps-header {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
  }

  .back-link {
    min-height: 40px;
    padding-inline: .72rem;
  }

  .apps-top-logo-wrap {
    height: 40px;
  }

  .apps-top-logo,
  .apps-top-logo-club-layer {
    height: 34px;
    max-width: 42vw;
  }
}

@media (max-width: 430px) {
  .apps-top-logo,
  .apps-top-logo-club-layer {
    height: 29px;
    max-width: 38vw;
  }
}

@media (max-height: 680px) and (min-width: 761px) {
  .brand-lockup-image {
    width: min(84vw, 720px);
  }
}


/* ====================================================================
   V9 — exact horizontal logo + reveal animation without transform clash
   ==================================================================== */

/* The supplied LINE artwork is now the only logo used on /apps/. */
.apps-header {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.apps-top-logo-wrap {
  position: relative;
  grid-column: 2;
  justify-self: center;
  width: auto;
  height: 42px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.apps-top-logo,
.apps-top-logo-club-layer {
  width: auto;
  height: 40px;
  max-width: min(56vw, 320px);
  object-fit: contain;
}

.apps-top-logo {
  position: relative;
  z-index: 1;
  filter: none;
}

.apps-top-logo-club-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter:
    drop-shadow(0 0 5px rgba(174, 151, 255, .18))
    drop-shadow(0 0 12px rgba(150, 122, 242, .10));
  transition: filter .45s var(--ease-out);
}

.apps-top-logo-wrap:hover .apps-top-logo-club-layer {
  filter:
    drop-shadow(0 0 7px rgba(181, 160, 255, .30))
    drop-shadow(0 0 16px rgba(150, 122, 242, .17));
}


/* Card reveal:
   IMPORTANT — reveal no longer animates `transform`.
   `transform` belongs exclusively to the 3D tilt, preventing the final jump. */
.app-card[data-reveal] {
  opacity: 0;
  filter: blur(5px);
  clip-path: inset(10px 0 0 0 round 30px);

  transform:
    perspective(900px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translateY(0);
}

.app-card[data-reveal].is-visible {
  opacity: 1;
  filter: blur(0);
  clip-path: inset(0 0 0 0 round 30px);

  transform:
    perspective(900px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translateY(0);

  transition:
    opacity .62s var(--ease-out),
    filter .62s var(--ease-out),
    clip-path .72s var(--ease-out),
    transform .65s var(--ease-out),
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

/* Once pointer tilt is active, keep tilt responsive without disturbing reveal. */
.app-card[data-reveal].is-visible.is-tilting {
  transition:
    opacity .62s var(--ease-out),
    filter .62s var(--ease-out),
    clip-path .72s var(--ease-out),
    transform .12s linear,
    border-color .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

@media (max-width: 760px) {
  .apps-top-logo-wrap {
    height: 40px;
  }

  .apps-top-logo,
  .apps-top-logo-club-layer {
    height: 36px;
    max-width: 46vw;
  }

  .app-card[data-reveal],
  .app-card[data-reveal].is-visible {
    clip-path: inset(0 0 0 0 round 26px);
  }
}

@media (max-width: 430px) {
  .apps-top-logo,
  .apps-top-logo-club-layer {
    height: 31px;
    max-width: 41vw;
  }
}