/* ═══════════════════════════════════════════════════════════════════════════
   POSE FOOTER  v3  —  Light studio / editorial photography palette
   Touches: public/static-assets/css/components/footer.css only.
   Blade partial, layout, routes, page content: unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Design tokens ─────────────────────────────────────────────────────────
   Palette: soft pearl-white → misty dusk blue.
   NOT dark. Feels like a photography studio wall, morning fog, gallery floor.
   Page bg is #f9f9f8 (alabaster). Footer continues that light language,
   stepping just slightly cooler and more structured.
   Accent: dusty slate-blue for links, soft navy for brand text.
   Kalam (already loaded in app.blade.php) for the brand tagline line only.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Footer surface — pearl to misty blue gradient */
  --pf-bg-top:       #f0f3f8;   /* top: cool pearl almost-white  */
  --pf-bg-base:      #e8eef6;   /* base: soft mist blue           */
  --pf-bg-deep:      #dde5f0;   /* bottom: dusk blue-grey         */

  /* Text hierarchy */
  --pf-ink:          #2a3a52;   /* main: deep navy, readable      */
  --pf-ink-mid:      #415a77;   /* muted: dusk blue (palette)     */
  --pf-ink-soft:     rgba(65, 90, 119, 0.52);
  --pf-link:         #415a77;
  --pf-link-hover:   #1b263b;

  /* Dividers */
  --pf-rule:         rgba(65, 90, 119, 0.12);
  --pf-rule-soft:    rgba(65, 90, 119, 0.07);

  /* Accent — soft navy, not red */
  --pf-accent:       #334e6e;
  --pf-accent-hover: #1b3350;
  --pf-accent-ring:  rgba(51, 78, 110, 0.15);

  /* Ghost button */
  --pf-ghost:        rgba(65, 90, 119, 0.08);
  --pf-ghost-hover:  rgba(65, 90, 119, 0.15);
  --pf-ghost-border: rgba(65, 90, 119, 0.22);

  /* Bokeh orbs */
  --pf-orb-a: rgba(175, 196, 220, 0.38);
  --pf-orb-b: rgba(200, 213, 230, 0.28);
}

/* ─── Box-sizing ─────────────────────────────────────────────────────────── */
.pose-public-footer,
.pose-public-footer * { box-sizing: border-box; }

/* ─── Keyframes ──────────────────────────────────────────────────────────── */

/* Soft bokeh-orb drift */
@keyframes pf-drift-a {
  0%,100% { transform: translate(0,    0   ) scale(1);    }
  33%      { transform: translate(6%,  4%  ) scale(1.06); }
  66%      { transform: translate(-4%, 2%  ) scale(0.97); }
}
@keyframes pf-drift-b {
  0%,100% { transform: translate(0,    0   ) scale(1);    }
  40%      { transform: translate(-5%, -3% ) scale(1.04); }
  75%      { transform: translate(3%,  5%  ) scale(0.98); }
}

/* Horizontal light-sweep shimmer */
@keyframes pf-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* ─── Outer element ──────────────────────────────────────────────────────── */
.pose-public-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 0;
  background: linear-gradient(175deg, var(--pf-bg-top) 0%, var(--pf-bg-base) 55%, var(--pf-bg-deep) 100%);
  color: var(--pf-ink);
}

/* ─── Bokeh orb layer ────────────────────────────────────────────────────── */
/* Blurred radial washes that drift gently — evokes out-of-focus light,       */
/* a central photographic motif.                                               */
.pose-public-footer__ground {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.pose-public-footer__ground::before {
  content: none;
  position: absolute;
  width: 70%; aspect-ratio: 1;
  top: -30%; left: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pf-orb-a) 0%, transparent 70%);
  filter: blur(48px);
  animation: pf-drift-a 22s ease-in-out infinite;
  will-change: transform;
}

.pose-public-footer__ground::after {
  content: none;
  position: absolute;
  width: 55%; aspect-ratio: 1;
  bottom: -20%; right: -5%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pf-orb-b) 0%, transparent 68%);
  filter: blur(40px);
  animation: pf-drift-b 28s ease-in-out infinite;
  will-change: transform;
}

/* ─── Landing wave — page dissolves into footer ──────────────────────────── */
/* SVG wave in data-URI, colour matches page bg (#f9f9f8 alabaster).          */
/* No external file, no Blade change.                                          */
.pose-public-footer::before {
  content: "";
  display: block;
  width: 100%;
  height: clamp(22px, 3.5vw, 44px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C360,44 720,44 1080,22 C1260,11 1380,6 1440,16 L1440,0 Z' fill='%23f9f9f8'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
  z-index: 2;
  margin-bottom: -1px;
  pointer-events: none;
}

/* Light-reflection shimmer line at the wave seam */
.pose-public-footer::after {
  content: "";
  position: absolute;
  top: clamp(22px, 3.5vw, 44px);
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(148, 172, 209, 0.6) 20%,
    rgba(220, 230, 245, 0.9) 50%,
    rgba(148, 172, 209, 0.6) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: pf-shimmer 8s linear infinite;
  z-index: 3;
}

/* ─── Film-frame corner brackets ────────────────────────────────────────── */
/* Tiny L-brackets at top corners evoke a camera viewfinder / contact-sheet  */
/* crop marks. Pure CSS on __shell, no new HTML.                              */
.pose-public-footer__shell::before,
.pose-public-footer__shell::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-color: rgba(65, 90, 119, 0.22);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
  z-index: 4;
}
.pose-public-footer__shell::before {
  top: clamp(24px, 3.5vw, 42px); left: 0;
  border-top-width: 1px; border-left-width: 1px;
}
.pose-public-footer__shell::after {
  top: clamp(24px, 3.5vw, 42px); right: 0;
  border-top-width: 1px; border-right-width: 1px;
}

/* ─── Inner grid ─────────────────────────────────────────────────────────── */
.pose-public-footer__shell {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 56px));
  margin: 0 auto;
  padding: clamp(28px, 4vw, 52px) 0 clamp(18px, 2.5vw, 32px);
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(360px, 2fr) auto;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

/* ─── Brand column ───────────────────────────────────────────────────────── */
.pose-public-footer__brand {
  display: grid;
  gap: 14px;
  min-width: 0;
}

/* Wordmark — clean logotype, no badge box */
.pose-public-footer__logo {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pf-ink);
  text-decoration: none;
  line-height: 1;
  transition: opacity 200ms ease;
}
.pose-public-footer__logo:hover { opacity: 0.7; }

/* Brand mark: a small navy dot — refined logotype accent.
   Evokes a camera aperture point. Scales up on hover.        */
.pose-public-footer__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--pf-accent);
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  margin-right: 0;
  margin-bottom: 0;
  flex-shrink: 0;
  transition: transform 200ms ease, background 200ms ease;
}
.pose-public-footer__logo:hover .pose-public-footer__mark {
  transform: translateY(-1px);
  background: var(--pf-accent-hover);
}

.pose-public-footer__logo > span:last-child {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--pf-ink);
  font-family: 'Manrope', sans-serif;
}

/* Description */
.pose-public-footer__brand p {
  margin: 0;
  max-width: 260px;
  color: var(--pf-ink-mid);
  font-size: 13px;
  line-height: 1.65;
  font-weight: 400;
}

/* Kalam signature — one line only, separated by a soft rule */
.pose-public-footer__brand::after {
  content: "light is everything.";
  display: block;
  font-family: 'Kalam', cursive;
  font-size: 14px;
  font-weight: 400;
  color: var(--pf-ink-mid);
  opacity: 0.65;
  letter-spacing: 0.01em;
  padding-top: 10px;
  border-top: 1px solid var(--pf-rule-soft);
}

/* ─── Nav columns ────────────────────────────────────────────────────────── */
.pose-public-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
}

.pose-public-footer__column { min-width: 0; }

.pose-public-footer__column h2 {
  margin: 0 0 12px;
  color: var(--pf-ink);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1;
}

.pose-public-footer__column ul {
  display: grid;
  gap: 8px;
  margin: 0; padding: 0;
  list-style: none;
}

/* Underline-reveal hover — links draw a line beneath themselves */
.pose-public-footer__column a {
  color: var(--pf-link);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  display: inline-block;
  background-image: linear-gradient(var(--pf-link-hover), var(--pf-link-hover));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color 200ms ease, background-size 220ms ease;
}
.pose-public-footer__column a:hover {
  color: var(--pf-link-hover);
  background-size: 100% 1px;
}

/* ─── CTA buttons ────────────────────────────────────────────────────────── */
.pose-public-footer__actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: stretch;
  min-width: 100px;
}

.pose-public-footer__button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 6px;
  border: 1px solid var(--pf-ghost-border);
  background: var(--pf-ghost);
  color: var(--pf-ink-mid);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background    180ms ease,
    border-color  180ms ease,
    color         180ms ease,
    transform     180ms ease,
    box-shadow    180ms ease;
}

.pose-public-footer__logout {
  display: block;
  margin: 0;
}

.pose-public-footer__logout .pose-public-footer__button {
  width: 100%;
  cursor: pointer;
}

.pose-public-footer__button:hover {
  background: var(--pf-ghost-hover);
  border-color: rgba(65, 90, 119, 0.38);
  color: var(--pf-ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--pf-accent-ring);
}
.pose-public-footer__button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Primary — solid navy fill, unique to Pose */
.pose-public-footer__button--primary {
  background: var(--pf-accent);
  border-color: var(--pf-accent);
  color: #f0f5fb;
}
.pose-public-footer__button--primary:hover {
  background: var(--pf-accent-hover);
  border-color: var(--pf-accent-hover);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(51, 78, 110, 0.28);
}

.pose-public-footer__account {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 190px;
  border: 1px solid var(--pf-ghost-border);
  border-radius: 8px;
  background: var(--pf-ghost);
  padding: 9px 11px;
  color: var(--pf-ink);
}

.pose-public-footer__avatar {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--pf-accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 950;
}

.pose-public-footer__account strong,
.pose-public-footer__account small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pose-public-footer__account strong {
  font-size: 13px;
  font-weight: 950;
}

.pose-public-footer__account small {
  color: var(--pf-ink-soft);
  font-size: 11px;
  font-weight: 820;
}

/* ─── Bottom bar ─────────────────────────────────────────────────────────── */
.pose-public-footer__bottom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--pf-rule);
  color: var(--pf-ink-soft);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
}

/* ─── Tablet ≤ 900px ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pose-public-footer__shell {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 28px;
    width: min(1180px, calc(100% - 36px));
  }
  .pose-public-footer__brand p { max-width: 480px; }
  .pose-public-footer__actions { flex-direction: row; align-items: center; min-width: 0; }
  .pose-public-footer__shell::before,
  .pose-public-footer__shell::after { display: none; }
}

/* ─── Mobile ≤ 640px ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pose-public-footer::before { height: clamp(16px, 4vw, 26px); }

  .pose-public-footer__shell {
    width: min(100% - 24px, 1180px);
    gap: 20px;
    padding: 20px 0 14px;
  }
  .pose-public-footer__logo > span:last-child { font-size: 20px; }
  .pose-public-footer__brand p               { font-size: 12.5px; }
  .pose-public-footer__brand::after          { font-size: 13px; }

  .pose-public-footer__nav   { gap: 12px; }
  .pose-public-footer__column h2 { font-size: 9.5px; letter-spacing: 0.07em; }
  .pose-public-footer__column a  { font-size: 12px; }
  .pose-public-footer__column ul { gap: 7px; }

  .pose-public-footer__actions { width: 100%; flex-direction: row; gap: 8px; min-width: 0; }
  .pose-public-footer__button  { flex: 1 1 0; padding: 0 10px; font-size: 11px; }

  .pose-public-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding-top: 12px;
    font-size: 11px;
  }
}

/* ─── Reduced-motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pose-public-footer__ground::before,
  .pose-public-footer__ground::after { animation: none; }
  .pose-public-footer::after         { animation: none; }
  .pose-public-footer__button        { transition: none; }
  .pose-public-footer__column a      { transition: none; }
}