/* Branch C: mobile interaction and performance refinements.
   Every rule is isolated from tablet/desktop layouts. */
@media (max-width: 768px) {
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }

  body.is-mobile-c,
  body.is-mobile-c button,
  body.is-mobile-c a,
  body.is-mobile-c [role="button"] {
    -webkit-tap-highlight-color: transparent;
  }

  body.is-mobile-c .page-screen {
    padding-right: env(safe-area-inset-right, 0px);
    padding-left: env(safe-area-inset-left, 0px);
  }

  body.is-mobile-c .hero-mobile-hint {
    display: none;
  }

  body.is-mobile-c[data-active-page="hero"] .site-header,
  body.is-mobile-c[data-active-page="hero"] .site-header.is-visible {
    transform: translateY(calc(-100% - 28px));
    opacity: 0;
    pointer-events: none;
    transition:
      transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 480ms ease,
      background-color 320ms ease,
      box-shadow 320ms ease;
  }

  body.is-mobile-c.is-hero-menu-ready[data-active-page="hero"] .site-header,
  body.is-mobile-c.is-hero-menu-ready[data-active-page="hero"] .site-header.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    background: rgba(20, 11, 28, 0.72);
    box-shadow: 0 14px 36px rgba(10, 5, 13, 0.2);
  }

  body.is-mobile-c .site-header {
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
  }

  body.is-mobile-c .mobile-category-grid,
  body.is-mobile-c .menu-carousel__track {
    touch-action: none;
  }

  /* Full-screen pages are gesture-driven. Long-form and final sections
     explicitly opt back into native vertical scrolling. */
  body.is-mobile-c {
    overscroll-behavior-y: none;
  }

  body.is-mobile-c .page-screen {
    touch-action: none;
    overscroll-behavior-y: none;
  }

  body.is-mobile-c[data-active-page="studio-about"]
    #studio-about.is-about-phase-copy,
  body.is-mobile-c[data-active-page="studio-about"]
    #studio-about.is-about-phase-peek,
  body.is-mobile-c[data-active-page="contacts"] #contacts,
  body.is-mobile-c[data-active-page="contacts"] .site-footer {
    touch-action: pan-y;
    overscroll-behavior-y: contain;
  }

  body.is-mobile-c .mobile-category-tile,
  body.is-mobile-c .site-header__burger,
  body.is-mobile-c .mobile-category-sheet__close,
  body.is-mobile-c .menu-drink__book,
  body.is-mobile-c .btn {
    min-height: 44px;
  }

  body.is-mobile-c .mobile-category-sheet__close,
  body.is-mobile-c .site-header__burger {
    min-width: 44px;
  }

  body.is-mobile-c .menu-drink__desc,
  body.is-mobile-c .about-studio__text,
  body.is-mobile-c .contacts-block p,
  body.is-mobile-c .site-footer__text {
    font-size: max(16px, 1rem);
    line-height: 1.5;
  }

  body.is-mobile-c .menu-drink__kcal,
  body.is-mobile-c .menu-drink__compose,
  body.is-mobile-c .club-stamp__reward {
    font-size: 11px;
    line-height: 1.35;
  }

  body.is-mobile-c button:focus-visible,
  body.is-mobile-c a:focus-visible,
  body.is-mobile-c [role="button"]:focus-visible {
    outline: 2px solid var(--color-accent, #e81e73);
    outline-offset: 3px;
  }

  body.is-mobile-c .site-header__burger:active,
  body.is-mobile-c .mobile-category-sheet__close:active,
  body.is-mobile-c .menu-drink__book:active,
  body.is-mobile-c .btn:active {
    transform: scale(0.96);
  }

  body.is-mobile-c .mobile-category-pagination {
    min-height: 44px;
    padding-block: 0;
  }

  body.is-mobile-c .mobile-category-pagination__dot {
    position: relative;
    width: 32px;
    min-width: 32px;
    height: 44px;
    padding: 0;
    background: transparent !important;
  }

  body.is-mobile-c .mobile-category-pagination__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(26, 17, 36, 0.3);
    transform: translate(-50%, -50%);
    transition:
      width 220ms cubic-bezier(0.22, 1, 0.36, 1),
      background-color 180ms ease;
  }

  body.is-mobile-c .mobile-category-pagination__dot.is-active::before {
    width: 26px;
    background: var(--color-accent, #e81e73);
  }

  body.is-mobile-c[data-active-page="coffee-tariffs"]
    #coffee-tariffs .mobile-category-pagination__dot:not(.is-active)::before {
    background: rgba(225, 247, 239, 0.48);
  }

  body.is-mobile-c .mobile-category-sheet {
    padding-top: env(safe-area-inset-top, 0px);
  }

  body.is-mobile-c .mobile-category-sheet__panel {
    max-height: min(
      calc(var(--app-height, 100dvh) - env(safe-area-inset-top, 0px)),
      94dvh
    );
    scrollbar-width: none;
    touch-action: pan-y;
  }

  body.is-mobile-c .mobile-category-sheet__panel::-webkit-scrollbar {
    display: none;
  }

  body.is-mobile-c .club-modal {
    padding:
      max(18px, env(safe-area-inset-top, 0px))
      max(18px, env(safe-area-inset-right, 0px))
      max(18px, env(safe-area-inset-bottom, 0px))
      max(18px, env(safe-area-inset-left, 0px));
  }

  body.is-mobile-c .club-modal__dialog {
    max-height: calc(
      min(var(--app-height, 100dvh), 100dvh) -
      env(safe-area-inset-top, 0px) -
      env(safe-area-inset-bottom, 0px) -
      36px
    );
    overflow-y: auto;
  }

  body.is-mobile-c .club-modal__close,
  body.is-mobile-c .club-wallet__reset,
  body.is-mobile-c .works-tabs__btn {
    min-width: 44px;
    min-height: 44px;
  }

  body.is-mobile-c .works-tabs__btn {
    padding: 11px 16px;
    font-size: 12px;
  }

  body.is-mobile-c .site-footer {
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }

  body.is-mobile-c .intro-splash__skip {
    bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    opacity: 1;
    transition-delay: 0.35s;
  }

  body.is-mobile-c.is-intro-booting .intro-splash__skip {
    opacity: 1;
  }

  body.is-mobile-c.is-lite-hero .hero-screen .panel-video {
    visibility: hidden;
    opacity: 0;
  }

  body.is-mobile-c.is-lite-hero .hero-screen .panel-bg {
    z-index: 2;
    filter: none;
  }

  body.is-mobile-c.is-lite-hero .hero-logo-layer::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.is-mobile-c.is-lite-hero.is-hero-about-blending .hero-screen .panel-video {
    filter: none;
  }

  body.is-mobile-c .menu-carousel__stage {
    height: clamp(
      400px,
      calc(var(--app-height, 100dvh) - 190px),
      620px
    );
  }

  body.is-mobile-c .hero-screen .hero-logo-layer .logo-center {
    top: 0;
    transform:
      scale(2.05)
      rotate(var(--ml-logo-orient, 0deg))
      translateZ(0);
    transform-origin: center center;
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.is-mobile-c[data-active-page="hero"] .hero-screen .ml-scene,
  body.is-mobile-c[data-active-page="about"] .hero-screen .ml-scene,
  body.is-mobile-c.is-page-paging[data-active-page="about"] .hero-screen .ml-scene,
  body.is-mobile-c.is-hero-about-blending .hero-screen .ml-scene {
    position: fixed;
    inset: 0;
    overflow: hidden;
    transform: none;
    border-radius: 0;
  }

  body.is-mobile-c[data-active-page="hero"] .hero-screen .hero-logo-layer,
  body.is-mobile-c[data-active-page="about"] .hero-screen .hero-logo-layer,
  body.is-mobile-c.is-page-paging[data-active-page="about"] .hero-screen .hero-logo-layer,
  body.is-mobile-c.is-hero-about-blending .hero-screen .hero-logo-layer {
    position: fixed;
    inset: 0;
    scale: 1 !important;
    will-change: filter, opacity;
  }

  body.is-mobile-c.has-mobile-page-motion .hero-screen .hero-logo-layer {
    scale: 1 !important;
  }

  body.is-mobile-c.is-hero-about-blending .hero-screen .hero-logo-layer {
    opacity: max(0, calc(1 - var(--hero-about-progress, 0) * 1.18));
    filter: blur(calc(var(--hero-about-progress, 0) * 18px));
    transform: none;
  }

  body.is-mobile-c.is-hero-about-blending .hero-screen .ml-scene::before {
    background: rgba(14, 8, 18, 0.42);
    opacity: var(--hero-about-progress, 0);
  }

  body.is-mobile-c.is-hero-about-blending .hero-screen .ml-scene::after {
    display: none;
  }

  body.is-mobile-c.is-hero-about-blending .hero-screen .panel-video,
  body.is-mobile-c.is-hero-about-blending .hero-screen .panel-bg,
  body.is-mobile-c[data-active-page="about"] .hero-screen .panel-video,
  body.is-mobile-c[data-active-page="about"] .hero-screen .panel-bg {
    filter:
      blur(calc(var(--hero-about-progress, 1) * 22px))
      saturate(0.92);
  }

  body.is-mobile-c.is-page-dragging.is-hero-about-blending .hero-screen .panel-video,
  body.is-mobile-c.is-page-dragging.is-hero-about-blending .hero-screen .panel-bg {
    filter: blur(14px) saturate(0.94);
  }

  body.is-mobile-c #about {
    position: relative;
    z-index: 2;
    background: transparent !important;
  }

  body.is-mobile-c.is-hero-about-blending .hero-mobile-ui,
  body.is-mobile-c[data-active-page="about"] .hero-mobile-ui {
    opacity: 0;
    pointer-events: none;
  }

  body.is-mobile-c #about .section-eyebrow {
    color: var(--color-gold, #d4a574);
  }

  body.is-mobile-c #about .section-title,
  body.is-mobile-c #about .section-lead {
    color: #fff;
  }

  body.is-mobile-c #about .section-lead {
    color: rgba(255, 255, 255, 0.78);
  }

  body.is-mobile-c #about .about-card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 18px 40px rgba(8, 4, 12, 0.22);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  body.is-mobile-c #about .about-card h3,
  body.is-mobile-c #about .about-card p,
  body.is-mobile-c #about .about-card__link {
    color: #fff;
  }

  body.is-mobile-c #about .about-card p {
    color: rgba(255, 255, 255, 0.72);
  }

  body.is-mobile-c #about .about-card__tag {
    color: var(--color-gold, #d4a574);
  }

  body.is-mobile-c.is-hero-about-blending #about > .container {
    transform: none !important;
    opacity: clamp(
      0,
      calc((var(--hero-about-progress, 0) - 0.04) * 1.34),
      1
    );
    translate: 0 calc((1 - var(--hero-about-progress, 0)) * 72px);
    transition: none;
    will-change: translate, opacity;
  }

  body.is-mobile-c:not(.is-page-dragging):not(.is-page-paging)
    .page-screen,
  body.is-mobile-c:not(.is-page-dragging)
    .mobile-category-tile {
    will-change: auto;
  }

  /* Dynamic blur on the compact menu only; it is never animated. */
  body.is-mobile-c .site-header__nav.is-open {
    background: rgba(26, 17, 36, 0.82);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    backdrop-filter: blur(18px) saturate(130%);
  }

  /* Paint layers animate with compositor-friendly properties on phones. */
  body.is-mobile-c .mobile-category-tile__splash,
  body.is-mobile-c .mobile-category-tile__drip {
    filter: none !important;
    will-change: transform, opacity;
  }

  /* Coffee Club: keep both stacked card faces visibly rounded. */
  body.is-mobile-c #coffee-club-card .club-card__content,
  body.is-mobile-c #coffee-club-card .club-card__visual {
    border-radius: 26px;
    overflow: hidden;
  }

  /* Studio categories stay typographic on mobile. */
  body.is-mobile-c
    #studio-services
    .mobile-category-tile__icon,
  body.is-mobile-c
    #studio-services
    .mobile-category-tile.has-category-icon::after {
    display: none;
  }

  /* Preserve the cinematic video sequence while separating copy from motion. */
  body.is-mobile-c #studio-about .about-studio__panel > * {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    background: rgba(18, 10, 24, 0.34);
    box-shadow:
      0 18px 42px rgba(5, 2, 8, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(16px) saturate(118%);
    backdrop-filter: blur(16px) saturate(118%);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.62);
  }

  /* Works viewer: use the whole screen and let the photo own the canvas. */
  body.is-mobile-c #studio-works.page-screen {
    height: var(--app-height, 100dvh);
    min-height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    padding: 0 !important;
    overflow: hidden;
  }

  body.is-mobile-c #studio-works .works-layout {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding:
      calc(84px + env(safe-area-inset-top, 0px))
      12px
      calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    gap: 10px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.is-mobile-c #studio-works .works-header {
    flex: 0 0 auto;
    width: 100%;
    padding: 0 4px;
    margin: 0;
    background: transparent;
    box-shadow: none;
  }

  body.is-mobile-c #studio-works .works-header .section-eyebrow {
    margin-bottom: 4px;
  }

  body.is-mobile-c #studio-works .works-header .section-title {
    margin-bottom: 8px;
    font-size: clamp(28px, 8vw, 34px);
  }

  body.is-mobile-c #studio-works .works-tabs {
    gap: 6px;
    padding-bottom: 2px;
  }

  body.is-mobile-c #studio-works .works-tabs__btn {
    min-height: 40px;
    padding: 8px 12px;
  }

  body.is-mobile-c #studio-works .works-stage {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  body.is-mobile-c #studio-works .works-slide {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 26px;
    overflow: hidden;
  }

  body.is-mobile-c #studio-works .works-slide__visual {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  body.is-mobile-c #studio-works .works-slide__meta {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 56px 18px 18px;
    border: 0;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(26, 17, 36, 0.76) 48%,
      rgba(26, 17, 36, 0.94) 100%
    );
  }

  body.is-mobile-c #studio-works .works-slide__category {
    color: #ff79b2;
  }

  body.is-mobile-c #studio-works .works-slide__title,
  body.is-mobile-c #studio-works .works-slide__note {
    color: #fff;
  }

  body.is-mobile-c #studio-works .works-slide__title {
    margin-top: 6px;
    font-size: clamp(21px, 6.4vw, 27px);
  }

  body.is-mobile-c #studio-works .works-slide__note {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.78);
  }

  body.is-mobile-c #studio-works .works-pips {
    flex: 0 0 auto;
    min-height: 14px;
    padding: 0 4px;
  }

  body.is-mobile-c #studio-works .works-footer-cta {
    display: none;
  }

  .mobile-c-scroll-progress {
    position: fixed;
    z-index: 1200;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    overflow: hidden;
    pointer-events: none;
  }

  .mobile-c-scroll-progress::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0 999px 999px 0;
    background: #e81e73;
    box-shadow: 0 0 10px rgba(232, 30, 115, 0.45);
    transform: scaleX(var(--mobile-c-progress, 0));
    transform-origin: left center;
    transition: transform 90ms linear;
    will-change: transform;
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body.is-mobile-c *,
  body.is-mobile-c *::before,
  body.is-mobile-c *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  body.is-mobile-c .mobile-c-scroll-progress::after {
    transition: none;
  }

  body.is-mobile-c.is-hero-about-blending .hero-screen .hero-logo-layer,
  body.is-mobile-c.is-hero-about-blending .hero-screen .panel-video,
  body.is-mobile-c.is-hero-about-blending .hero-screen .panel-bg,
  body.is-mobile-c.is-hero-about-blending .hero-screen .ml-scene {
    filter: none !important;
    transform: none !important;
    border-radius: 0 !important;
  }

  body.is-mobile-c.is-hero-about-blending #about > .container {
    opacity: 1;
    translate: none;
  }
}