/* ====================================================================== *
 * File: landing-social-position.css
 * Location: static/css/landing-social-position.css
 * Description: Physical-right social placement, collision-free mobile footer, and scroll-responsive hero chrome.
 * Version: 1.2.0
 * Last Modified: Sat Aug 08 2026 - 22:32
 * Dependencies: static/css/landing.css and landing_scroll_chrome.js
 * ====================================================================== */

/* -------------------------------------------------------------------------- *
 * 1. Desktop social-channel placement
 * -------------------------------------------------------------------------- */

/* - - - 1.1. Keep social channels anchored to the physical right edge - - - */
.landing-socials {
  right: max(30px, env(safe-area-inset-right));
  left: auto;
}

/* -------------------------------------------------------------------------- *
 * 2. Mobile bottom-area composition
 * -------------------------------------------------------------------------- */

/*
 * On narrow screens the credentials and social controls share one upper footer
 * tier, while the legal line occupies a separate lower tier. This prevents the
 * three independently positioned desktop elements from colliding.
 */
@media (max-width: 700px) {
  .landing-center {
    padding-bottom: 240px;
  }

  /* - - - 2.1. Compact credentials on the lower-left - - - */
  .landing-credentials {
    left: max(14px, env(safe-area-inset-left));
    bottom: max(76px, calc(env(safe-area-inset-bottom) + 64px));
    gap: 4px;
  }

  .landing-credential {
    width: 54px;
    min-height: 78px;
  }

  .landing-credential-enamad {
    width: 74px;
  }

  .landing-credential-visual,
  .landing-enamad-visual {
    min-height: 66px;
  }

  .landing-award-consumer {
    height: 62px;
  }

  .landing-award-beauty {
    height: 59px;
  }

  .enamad-seal-image {
    width: 68px;
    max-height: 57px;
  }

  .landing-micro-plinth {
    height: 4px;
    margin-top: 1px;
  }

  .landing-credential-consumer .landing-micro-plinth {
    width: 46px;
  }

  .landing-credential-beauty .landing-micro-plinth {
    width: 43px;
  }

  .landing-credential-enamad .landing-micro-plinth {
    width: 62px;
  }

  /* - - - 2.2. Social controls on the lower-right of the same upper tier - - - */
  .landing-socials {
    right: max(16px, env(safe-area-inset-right));
    left: auto;
    bottom: max(82px, calc(env(safe-area-inset-bottom) + 70px));
    gap: 7px;
  }

  .landing-social {
    width: 28px;
    height: 28px;
  }

  .landing-social svg {
    width: 15px;
    height: 15px;
  }

  /* - - - 2.3. Copyright gets its own centered lower tier - - - */
  .landing-copyright {
    right: 12px;
    left: 12px;
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px));
    gap: 6px;
    transform: none;
    justify-content: center;
    color: rgba(255, 255, 255, 0.54);
    font-size: 0.63rem;
    line-height: 1.45;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
  }
}

/* -------------------------------------------------------------------------- *
 * 3. Narrow-phone refinement
 * -------------------------------------------------------------------------- */

@media (max-width: 430px) {
  .landing-center {
    padding-bottom: 250px;
  }

  .landing-credentials {
    left: max(10px, env(safe-area-inset-left));
    bottom: max(74px, calc(env(safe-area-inset-bottom) + 62px));
    gap: 2px;
  }

  .landing-credential {
    width: 50px;
  }

  .landing-credential-enamad {
    width: 70px;
  }

  .landing-award-consumer {
    height: 58px;
  }

  .landing-award-beauty {
    height: 55px;
  }

  .enamad-seal-image {
    width: 64px;
    max-height: 54px;
  }

  .landing-socials {
    right: max(12px, env(safe-area-inset-right));
    left: auto;
    bottom: max(80px, calc(env(safe-area-inset-bottom) + 68px));
    gap: 6px;
  }

  .landing-social {
    width: 27px;
    height: 27px;
  }

  .landing-copyright {
    right: 8px;
    left: 8px;
    bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px));
    gap: 5px;
    font-size: 0.6rem;
  }
}

/* -------------------------------------------------------------------------- *
 * 4. Extra-small screen safety
 * -------------------------------------------------------------------------- */

@media (max-width: 360px) {
  .landing-credentials {
    transform: scale(0.9);
    transform-origin: left bottom;
  }

  .landing-socials {
    gap: 5px;
  }

  .landing-social {
    width: 25px;
    height: 25px;
  }

  .landing-social svg {
    width: 14px;
    height: 14px;
  }

  .landing-copyright {
    font-size: 0.56rem;
  }
}

/* -------------------------------------------------------------------------- *
 * 5. Scroll-responsive hero-bottom chrome
 * -------------------------------------------------------------------------- */

/*
 * These elements belong visually to the first viewport. A downward swipe fades
 * them away before the testimonial section enters. Reversing scroll direction
 * restores them so their original top-of-page composition is preserved.
 */
.landing-credentials,
.landing-socials,
.landing-copyright {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  transition:
    opacity 280ms ease,
    translate 360ms cubic-bezier(0.22, 0.72, 0.22, 1),
    visibility 0s linear 0s;
  will-change: opacity, translate;
}

body.is-landing-chrome-hidden .landing-page .landing-credentials,
body.is-landing-chrome-hidden .landing-page .landing-socials,
body.is-landing-chrome-hidden .landing-page .landing-copyright {
  opacity: 0;
  translate: 0 18px;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    translate 300ms cubic-bezier(0.4, 0, 1, 1),
    visibility 0s linear 300ms;
}

@media (prefers-reduced-motion: reduce) {
  .landing-credentials,
  .landing-socials,
  .landing-copyright {
    transition: none;
  }

  body.is-landing-chrome-hidden .landing-page .landing-credentials,
  body.is-landing-chrome-hidden .landing-page .landing-socials,
  body.is-landing-chrome-hidden .landing-page .landing-copyright {
    translate: 0 0;
  }
}

/* ============================= End of landing-social-position.css ============================= */