/*
Media / Apps page — graffiti-themed companion to the Snyder Wildstyle home page.
Reuses the palette, fonts, and spray accents from style.css.
*/

/* ──────────────────────────────
   Old graffiti brick-wall backdrop
   A white wash is layered over the photo so it stays faint enough
   to preserve contrast against the white app cards.
   ────────────────────────────── */
body.apps-page{
  background-image:
    linear-gradient(rgba(255,255,255,.78), rgba(255,255,255,.78)),
    url("graffiti-wall.jpg");
  background-position:center;
  background-size:cover;
  background-attachment:fixed;
  background-repeat:no-repeat;
}
/* let the wall show through the page sections (they are solid white by default) */
.apps-page .apps-hero,
.apps-page .wall-strip,
.apps-page .site-footer{
  background:transparent;
}

/* ──────────────────────────────
   Header — make the ghost nav usable on this page
   ────────────────────────────── */
.site-header.media-header{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(0,0,0,.06);
}
.media-header .site-brand{opacity:.85}
.media-header .ghost-nav a{opacity:.6;transition:opacity var(--dur) var(--ease-out)}
.media-header .ghost-nav a:hover{opacity:1}

/* ──────────────────────────────
   Hero band — Permanent Marker title with spray shadow
   ────────────────────────────── */
.apps-hero{
  position:relative;
  text-align:center;
  padding:9.5rem 2rem 1rem;
  background:var(--white);
  overflow:hidden;
}
.apps-hero::before{
  content:'';
  position:absolute;left:50%;top:55%;
  transform:translate(-50%,-50%);
  width:680px;height:680px;
  border-radius:50%;
  background:radial-gradient(
    circle,
    rgba(194,59,34,.06) 0%,
    rgba(61,133,198,.04) 40%,
    transparent 70%
  );
  pointer-events:none;
  animation:halo-pulse 8s ease-in-out infinite alternate;
}
.apps-title{
  position:relative;
  font-family:var(--font-display);
  font-size:clamp(1.8rem,6vw,3.75rem);
  line-height:.95;
  color:var(--ink);
  letter-spacing:.01em;
  text-shadow:
     3px 3px 0 rgba(194,59,34,.16),
    -2px 5px 0 rgba(61,133,198,.12),
     1px 7px 0 rgba(76,175,80,.10);
  animation:tag-rise 1s var(--ease-out) both;
}
.apps-subtitle{
  position:relative;
  margin-top:1.4rem;
  max-width:46ch;
  margin-inline:auto;
  font-size:clamp(.95rem,2vw,1.08rem);
  color:var(--slate);
  line-height:1.65;
  opacity:0;
  animation:fade-up .9s var(--ease-out) .45s forwards;
}

/* ──────────────────────────────
   App grid — built on the wall-strip tiles
   ────────────────────────────── */
.apps-strip{padding:2.5rem 2rem 5rem}

.app-card{
  display:flex;
  flex-direction:column;
  min-height:0;
  transition:transform var(--dur) var(--ease-out),
             box-shadow var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out);
}
.app-card:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 34px rgba(0,0,0,.12);
  border-color:rgba(0,0,0,.08);
}

.logo-wrap{
  height:160px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.4rem;
  margin-bottom:1.4rem;
  overflow:hidden;
}
.logo-wrap img{
  width:auto;height:auto;
  max-width:92%;max-height:92%;
  object-fit:contain;
}

/* per-brand logo backdrops so each mark reads cleanly */
.whisperspace-bg{background:rgb(32,37,56)}
.medcares-bg{background:#0c0c0c}
.base64app-bg{background:rgb(15,23,42)}
.jsonapp-bg{background:#eef1f6}

.base64app-logo{filter:drop-shadow(0 6px 16px rgba(56,189,248,.35))}
.medcares-logo{filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))}
.whisperspace-logo{filter:brightness(1.1) saturate(1.05)}
.jsonapp-logo{filter:drop-shadow(0 6px 14px rgba(99,102,241,.28))}

.app-card .tile-body{flex:1}

.app-cta{
  margin-top:1.4rem;
  font-family:var(--font-display);
  font-size:.95rem;
  letter-spacing:.02em;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  transition:gap var(--dur) var(--ease-out);
}
.app-card:hover .app-cta{gap:.7rem}

/* ──────────────────────────────
   Responsive
   ────────────────────────────── */
@media(max-width:768px){
  .apps-hero{padding:7.5rem 1.2rem 1rem}
  .apps-strip{padding:2rem 1.2rem 3.5rem}
  .logo-wrap{height:140px}
}