/* Parki Go showcase shell — local prototype polish */

:root {
  --showcase-mint: #e8f7ee;
  --showcase-sage: #ccebd9;
  --showcase-sky: #eef8f5;
  --device-edge: #17191d;
  --device-metal: #6d747b;
}

.iphone-button {
  display: none !important;
}

@keyframes showcase-glow {
  0%, 100% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .72; }
  50% { transform: translate3d(3%, 2%, 0) scale(1.06); opacity: .94; }
}

@keyframes device-arrive {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes season-wash {
  0% { opacity: 0; }
  34% { opacity: .18; }
  100% { opacity: 0; }
}

/* Used by AchievementDetailSheet; the recovered build referenced it globally. */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: .35; }
  to { transform: translateY(0); opacity: 1; }
}

@media (min-width: 620px) and (min-height: 700px) {
  html,
  body,
  #root {
    background:
      radial-gradient(circle at 16% 13%, rgba(255,255,255,.98) 0 11%, transparent 33%),
      radial-gradient(circle at 83% 20%, rgba(196,239,214,.72) 0 9%, transparent 36%),
      radial-gradient(circle at 72% 85%, rgba(222,247,234,.88) 0 12%, transparent 38%),
      linear-gradient(145deg, #fcfffd 0%, #edf9f2 43%, #dff3e7 72%, #f9fdfb 100%) !important;
  }

  body {
    position: relative;
  }

  #root {
    position: relative;
    isolation: isolate;
    padding: 8px !important;
  }

  #root::before {
    content: "";
    position: fixed;
    inset: -18%;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(circle at 28% 52%, rgba(76,190,126,.15), transparent 28%),
      radial-gradient(circle at 74% 44%, rgba(87,181,150,.12), transparent 27%);
    opacity: .86;
  }

  #root > div {
    background: transparent !important;
    min-height: 0 !important;
  }

  .iphone-stage {
    position: relative !important;
    isolation: isolate;
    flex: 0 0 auto;
    /* iPhone 17: 71.5 x 149.6 mm. The compact logical 402 x 842 canvas
       keeps the application at phone-sized typography; zoom only enlarges
       the finished device to the available browser viewport. */
    width: 402px !important;
    height: 842px !important;
    min-height: 0 !important;
    aspect-ratio: 71.5 / 149.6;
    margin: auto !important;
    overflow: visible !important;
    zoom: var(--device-scale, 1);
  }

  .iphone-stage > .phone-shell,
  .phone-shell {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: none !important;
    margin: auto !important;
    border: 5px solid var(--device-edge) !important;
    outline: 1px solid rgba(101,109,117,.96) !important;
    border-radius: 54px !important;
    background: #050607;
    overflow: hidden !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.09) inset,
      0 0 0 2px rgba(0,0,0,.09),
      0 30px 80px rgba(24,78,47,.17),
      0 10px 30px rgba(15,23,42,.15) !important;
    animation: device-arrive .65s cubic-bezier(.22,1,.36,1) both;
  }

  /* Full-screen concept requested for the showcase: no notch, island, or camera cutout. */
  .phone-shell::before {
    display: none !important;
  }

  .phone-shell header {
    padding-top: 10px !important;
  }

}

/* Remove the expensive global half-second transition from every nested node.
   Component-level inline transitions and the interactive controls remain animated. */
.phone-shell,
.phone-shell * {
  transition-property: none;
}

.phone-shell {
  overscroll-behavior: none !important;
  background-color: #fff;
}

html.winter .phone-shell {
  background-color: #173b5e;
}

.phone-shell img {
  -webkit-user-drag: none;
  user-select: none;
}

.phone-shell button,
.phone-shell a,
.phone-shell [role="button"],
.phone-shell .press-scale,
.phone-shell .filter-pill,
.phone-shell .scenario-card,
.phone-shell .service-tile {
  transition-property: transform, opacity, color, background-color, border-color, box-shadow;
  transition-duration: .18s;
  transition-timing-function: cubic-bezier(.23,1,.32,1);
}

/* The page scrolls inside the device, like a real app. */
.phone-shell .parkigo-primary-scroll {
  overscroll-behavior-y: contain !important;
  overscroll-behavior-x: none !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scroll-behavior: auto;
}

/* LandingScreen reuses `scroll-area-hide` on the white content panel and on
   horizontal filter rows. Applying overscroll-behavior to those nested,
   non-vertical areas stops Chrome/Dia from chaining the mouse wheel to the
   real page scroller. Keep them transparent to wheel propagation. */
.phone-shell .scroll-area-hide:not(.parkigo-primary-scroll) {
  overscroll-behavior-y: auto !important;
}

/* A single lightweight wash gives the season switch a soft visual hand-off
   without animating every card and slowing down the prototype. */
.phone-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9999;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}

html.season-transition.winter .phone-shell::after {
  background: linear-gradient(145deg, rgba(190, 222, 248, .46), rgba(26, 65, 102, .28));
  animation: season-wash .48s ease-out both;
}

html.season-transition:not(.winter) .phone-shell::after {
  background: linear-gradient(145deg, rgba(255, 249, 218, .5), rgba(132, 215, 166, .28));
  animation: season-wash .48s ease-out both;
}

/* Onboarding route map: a generous square hero with softly finished edges. */
.phone-shell img[alt="Park map"] {
  width: 310px !important;
  height: 310px !important;
  max-width: none !important;
  aspect-ratio: 1;
  object-fit: cover !important;
  object-position: 50% 46%;
  border: 6px solid rgba(255, 255, 255, .94);
  border-radius: 30px !important;
  box-shadow:
    0 0 0 8px rgba(66, 169, 112, .08),
    0 20px 44px rgba(29, 101, 61, .22),
    0 6px 16px rgba(15, 45, 28, .1);
  animation: map-hero-arrive .62s cubic-bezier(.22,1,.36,1) both;
}

@keyframes map-hero-arrive {
  from { opacity: 0; transform: translateY(12px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.snowfall-layer {
  contain: strict;
  transform: translateZ(0);
}

.snowfall-layer > div {
  will-change: auto;
}

.phone-shell [style*="goShimmer"] {
  animation: none !important;
  text-shadow: 0 0 12px rgba(126, 200, 227, .72) !important;
}

.phone-shell .park-image-card {
  content-visibility: auto;
  contain: layout paint style;
  contain-intrinsic-size: auto 176px;
}

/* Keep the original transparent glass over photography. Only the summer
   sticky header receives a pale glass variant with dark-green controls.
   Scoped to the unscrolled state: once the screen scrolls the app adds
   --light with its own background, and this !important used to override that
   inline style, leaving the title floating over the cards. */
.phone-shell .landing-control-header:not(.landing-control-header--light):not(.landing-control-header--dark) {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Scrolled state: frosted panel with a straight bottom edge, so the header
   reads as its own layer above the content instead of blending into it. */
.phone-shell .landing-control-header--light {
  background: linear-gradient(180deg, rgba(252, 254, 253, .95), rgba(238, 248, 242, .9)) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(30, 119, 61, .12) !important;
  box-shadow:
    0 10px 28px rgba(15, 45, 28, .13),
    inset 0 -1px 0 rgba(255, 255, 255, .7) !important;
  padding-bottom: 14px !important;
}

/* Same panel for the winter palette, where the content behind it is dark. */
.phone-shell .landing-control-header--dark {
  background: linear-gradient(180deg, rgba(19, 34, 56, .93), rgba(26, 47, 74, .88)) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
  border-radius: 0 !important;
  border-bottom: 1px solid rgba(150, 190, 235, .18) !important;
  box-shadow:
    0 10px 28px rgba(6, 16, 30, .34),
    inset 0 -1px 0 rgba(255, 255, 255, .08) !important;
  padding-bottom: 14px !important;
}

.phone-shell .landing-control-header:not(.landing-control-header--light) > button[aria-label="Переключить сезон"] {
  background: rgba(12, 39, 28, .34) !important;
  border-color: rgba(255, 255, 255, .62) !important;
  box-shadow:
    0 5px 16px rgba(4, 20, 12, .18),
    inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

.phone-shell .landing-control-header:not(.landing-control-header--light) > button[aria-label="Войти"] > div,
.phone-shell .landing-control-header:not(.landing-control-header--light) > button[aria-label="Профиль"] > div {
  background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(10, 56, 33, .54)) !important;
  border: 1.5px solid rgba(255, 255, 255, .68) !important;
  border-radius: 50% !important;
  box-shadow:
    0 5px 16px rgba(4, 20, 12, .2),
    inset 0 1px 0 rgba(255, 255, 255, .26) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  clip-path: circle(50% at 50% 50%);
  overflow: hidden !important;
}

.phone-shell .landing-control-header:not(.landing-control-header--light) > button[aria-label="Войти"] svg,
.phone-shell .landing-control-header:not(.landing-control-header--light) > button[aria-label="Профиль"] svg {
  color: #fff !important;
  stroke: #fff !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28));
}

.phone-shell .landing-control-header--light > button[aria-label="Переключить сезон"] {
  background: rgba(243, 250, 246, .84) !important;
  border-color: rgba(30, 119, 61, .24) !important;
  box-shadow: 0 4px 14px rgba(15, 45, 28, .12) !important;
  backdrop-filter: blur(14px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.14) !important;
}

.phone-shell .landing-control-header--light > button[aria-label="Войти"],
.phone-shell .landing-control-header--light > button[aria-label="Профиль"] {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

.phone-shell .landing-control-header--light > button[aria-label="Войти"] > div,
.phone-shell .landing-control-header--light > button[aria-label="Профиль"] > div {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .96), rgba(233, 247, 239, .86) 64%, rgba(219, 240, 228, .9)) !important;
  border: 1.5px solid rgba(30, 119, 61, .26) !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 14px rgba(15, 45, 28, .12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  clip-path: circle(50% at 50% 50%);
  overflow: hidden !important;
  isolation: isolate;
  transform: translateZ(0);
}

.phone-shell .landing-control-header--light > button[aria-label="Войти"] svg,
.phone-shell .landing-control-header--light > button[aria-label="Профиль"] svg {
  color: #1f7a3e !important;
  stroke: #1f7a3e !important;
}

@media (prefers-reduced-motion: reduce) {
  #root::before,
  .phone-shell {
    animation: none !important;
  }

  .phone-shell *,
  .phone-shell *::before,
  .phone-shell *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Chrome does not clip backdrop-filter layers (and, under `zoom`, some painted
   boxes) against the rounded corners of an ancestor with overflow:hidden, so
   the translucent header panel leaked past the device bezel. clip-path is
   enforced on the compositor and cuts every child to the screen shape. */
@media (min-width: 620px) and (min-height: 700px) {
  .iphone-stage > .phone-shell,
  .phone-shell {
    clip-path: inset(0 round 54px);
  }
}