/* Phase UI-Login-07: a full-screen, discoverable bamboo-grove entrance. */
html,
body.login-grove {
  width: 100%;
  min-width: 320px;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #071b14;
}

body.login-grove {
  display: block;
  padding: 0;
}

.grove-stage {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100vw;
  width: 100dvw;
  height: 100vh;
  height: 100dvh;
  min-height: 520px;
  overflow: hidden;
  background: #071b14;
}

/* The 4K source remains completely still: this is not a zoom-animation page. */
.grove-background {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: none;
}

.grove-background {
  z-index: 0;
  filter: none;
}

/* Phase 41: two pixel-identical C3 masters, except for the native Leaf A edit. */
.grove-background-hover {
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  filter: none;
  transition: opacity .74s cubic-bezier(.22, .76, .22, 1);
}

.leaf-hovered .grove-background-hover,
.access-revealed .grove-background-hover {
  opacity: 1;
}

/* A quiet edge vignette preserves depth without changing the photographic scene. */
.grove-stage::before {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgba(1, 19, 12, .13), transparent 44%, rgba(1, 19, 12, .06));
}

/* This veil only appears after a user deliberately discovers the entry. */
.grove-stage::after {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: block;
  content: "";
  pointer-events: none;
  background: rgba(2, 20, 13, 0);
  transition: background .75s cubic-bezier(.22, .76, .22, 1);
}

.access-revealed .grove-stage::after {
  background: transparent;
}

/* Independent source layers move at different rates; the photograph itself never moves. */
.grove-light-shafts,
.grove-fog,
.grove-foreground,
.grove-particles {
  position: absolute;
  pointer-events: none;
}

.grove-light-shafts {
  inset: -4% 9% 0 20%;
  z-index: 4;
  opacity: .19;
  background:
    linear-gradient(113deg, transparent 36%, rgba(255, 241, 185, .24) 47%, transparent 57%),
    radial-gradient(ellipse at 42% 13%, rgba(255, 244, 194, .22), transparent 34%);
  mix-blend-mode: screen;
  filter: blur(9px);
  animation: grove-sunlight-shift 24s ease-in-out infinite alternate;
  will-change: opacity, transform;
}

.grove-fog,
.grove-foreground,
.grove-particles {
  inset: 0;
  overflow: hidden;
}

.grove-fog img,
.grove-foreground img,
.grove-particles img {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* A single foreground branch moves around its stem. It never moves the scene. */
.grove-foreground {
  z-index: 4;
}

.grove-foreground img {
  top: 4vh;
  left: -9vw;
  width: clamp(430px, 34vw, 760px);
  height: auto;
  opacity: .72;
  transform-origin: 6% 9%;
  will-change: transform;
  animation: foreground-leaf-breeze 17.5s cubic-bezier(.42, 0, .58, 1) infinite;
}

/* Far fog describes humid depth; near fog remains below the centre path. */
.grove-fog-far {
  z-index: 4;
  mix-blend-mode: screen;
}

.grove-fog-far img {
  left: 7vw;
  bottom: 15vh;
  width: min(96vw, 2280px);
  height: auto;
  opacity: .56;
  filter: none;
  will-change: transform, opacity;
  animation: fog-far-drift 41s cubic-bezier(.45, 0, .55, 1) infinite;
}

.grove-fog-near {
  z-index: 6;
  mix-blend-mode: screen;
}

.grove-fog-near img {
  left: -13vw;
  bottom: -13vh;
  width: min(119vw, 2740px);
  height: auto;
  opacity: .47;
  filter: none;
  will-change: transform, opacity;
  animation: fog-near-drift 29s cubic-bezier(.45, 0, .55, 1) infinite;
}

.grove-particles {
  z-index: 5;
  mix-blend-mode: screen;
}

.grove-particles img {
  top: 3vh;
  left: 27vw;
  width: min(55vw, 1320px);
  height: auto;
  opacity: .60;
  will-change: transform, opacity;
  animation: light-particle-drift 19s ease-in-out infinite;
}

/* The hit area is transparent; the gold material lives in the C3-derived background itself. */
.golden-leaf {
  position: absolute;
  z-index: 8;
  /* The source crop is aligned with one broad, down-facing native leaf in C3's left-middle cluster. */
  top: 47.6%;
  left: 33.1%;
  /* Slightly more forgiving than the real leaf, yet much smaller than the prior cluster-sized target. */
  width: clamp(88px, 2.75vw, 112px);
  height: clamp(116px, 3.7vw, 142px);
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  filter: none;
  isolation: auto;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  transition: none;
  animation: none;
}

.golden-leaf .leaf-vein {
  display: none;
}

/*
 * style.css predates the alpha-based entrance and defines a gold gradient on
 * .golden-leaf::before. The hit target is deliberately rectangular, so that
 * legacy pseudo element becomes a visible rectangular paint box unless it is
 * explicitly neutralized here. The complete C3 masters render all gold-leaf
 * visuals; this hit target intentionally paints nothing.
 */
.golden-leaf::before,
.golden-leaf::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.golden-leaf:focus-visible {
  outline: none;
}

.leaf-spark {
  position: absolute;
  display: block;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  opacity: 0;
  background: rgba(255, 229, 158, .92);
  box-shadow: none;
}

.leaf-spark-one { top: 37%; left: 58%; }
.leaf-spark-two { top: 49%; left: 69%; }
.leaf-spark-three { top: 62%; left: 54%; }

.leaf-hovered .leaf-spark,
.access-revealed .leaf-spark {
  animation: golden-particle 6.4s ease-in-out infinite;
}

.leaf-hovered .leaf-spark-two,
.access-revealed .leaf-spark-two { animation-delay: 1.75s; }

.leaf-hovered .leaf-spark-three,
.access-revealed .leaf-spark-three { animation-delay: 3.1s; }

.entry-invitation {
  position: absolute;
  z-index: 9;
  top: calc(47.6% + clamp(50px, 3.25vw, 65px));
  left: 39.6%;
  width: 214px;
  color: #fff0b2;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  text-shadow: 0 1px 12px rgba(11, 30, 16, .96), 0 0 12px rgba(255, 209, 90, .22);
  transform: translate(-50%, -2px);
  transition: opacity .43s ease .08s, transform .66s cubic-bezier(.22, .76, .22, 1) .08s;
}

.entry-invitation strong,
.entry-invitation small {
  display: block;
}

.entry-invitation strong {
  font-size: clamp(16px, .64vw, 25px);
  font-weight: 600;
  letter-spacing: .18em;
}

.entry-invitation small {
  margin-top: 7px;
  font-size: clamp(10px, .30vw, 13px);
  letter-spacing: .22em;
  opacity: .85;
}

.leaf-hovered .golden-leaf + .entry-invitation {
  opacity: 1;
  transform: translate(-50%, 0);
}

.access-revealed .entry-invitation {
  opacity: 0;
  transform: translate(-50%, -6px);
  transition-delay: 0s;
}

.access-revealed .leaf-hovered .golden-leaf + .entry-invitation {
  opacity: 0;
}

.discovery-hint {
  display: none;
}

/* The credential panel is absent from the visual and interactive tree until discovery. */
.access-panel {
  position: absolute;
  z-index: 8;
  box-sizing: border-box;
  top: 46%;
  right: clamp(5vw, 8vw, 10vw);
  width: clamp(360px, 22vw, 440px);
  max-width: calc(100vw - 48px);
  padding: 24px 27px 20px;
  color: #f4ecd2;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: rgba(5, 35, 27, .86);
  border: 1px solid rgba(218, 194, 118, .18);
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(0, 13, 8, .21), inset 0 1px 0 rgba(248, 236, 190, .05);
  backdrop-filter: blur(8px) saturate(106%);
  -webkit-backdrop-filter: blur(8px) saturate(106%);
  transform: translateY(calc(-50% + 10px));
  transition: opacity .42s cubic-bezier(.22, .76, .22, 1), transform .42s cubic-bezier(.22, .76, .22, 1), visibility 0s linear .42s;
}

.access-revealed .access-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%);
  transition-delay: .04s, .04s, 0s;
}

.access-panel .panel-glow {
  display: none;
}

.access-panel .panel-mark,
.access-panel h1,
.access-panel .panel-subtitle,
.access-panel .security-note {
  position: relative;
}

.access-panel .panel-mark {
  width: 25px;
  height: 1px;
  margin: 0 auto 11px;
  overflow: hidden;
  color: transparent;
  background: linear-gradient(90deg, transparent, rgba(229, 196, 105, .9), transparent);
}

.access-panel h1 {
  margin: 0;
  color: #ead08a;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .15em;
}

.access-panel .panel-subtitle {
  margin: 7px 0 18px;
  color: rgba(235, 220, 174, .76);
  font-size: 11px;
  letter-spacing: .24em;
  opacity: 1;
}

.access-panel .key-field {
  height: 44px;
  gap: 9px;
  padding: 0 13px;
  background: rgba(1, 22, 16, .70);
  border: 1px solid rgba(213, 221, 180, .13);
  border-radius: 9px;
  box-shadow: inset 0 1px 0 rgba(239, 230, 190, .025);
}

.access-panel .key-field input {
  height: 42px;
  min-width: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  color: #f7efd4 !important;
  -webkit-text-fill-color: #f7efd4;
  caret-color: #e4bd67;
  font-size: 13px;
}

.access-panel .key-field input::placeholder {
  color: rgba(221, 213, 175, .54);
  -webkit-text-fill-color: rgba(221, 213, 175, .54);
}

.access-panel .key-field:focus-within {
  border-color: rgba(229, 191, 100, .52);
  box-shadow: 0 0 0 2px rgba(224, 179, 80, .09), inset 0 1px 0 rgba(239, 230, 190, .03);
}

.access-panel .key-field input:focus,
.access-panel .key-field input:focus-visible {
  outline: none;
  background: transparent !important;
}

.access-panel .key-field input:-webkit-autofill,
.access-panel .key-field input:-webkit-autofill:hover,
.access-panel .key-field input:-webkit-autofill:focus,
.access-panel .key-field input:-webkit-autofill:active {
  -webkit-text-fill-color: #f7efd4 !important;
  caret-color: #e4bd67;
  -webkit-box-shadow: 0 0 0 1000px rgba(1, 22, 16, .70) inset !important;
  box-shadow: 0 0 0 1000px rgba(1, 22, 16, .70) inset !important;
  transition: background-color 9999s ease-out 0s;
}

.access-panel .enter-grove {
  height: 44px;
  margin-top: 14px;
  padding: 0 16px;
  border: 1px solid rgba(243, 215, 139, .56);
  border-radius: 9px;
  background: linear-gradient(135deg, #d9b160, #e6c573 52%, #d6aa57);
  color: #193326;
  box-shadow: 0 6px 16px rgba(8, 25, 16, .15);
  font-size: 14px;
  letter-spacing: .14em;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.access-panel .enter-grove:hover:not(:disabled) {
  background: linear-gradient(135deg, #e0bc6f, #edd183 52%, #dfb86a);
  box-shadow: 0 7px 18px rgba(8, 25, 16, .18);
  transform: translateY(-1px);
}

.access-panel .login-error {
  min-height: 1.2em;
  margin: 9px 0 -1px;
  color: #efc6af;
  font-size: 11px;
}

.access-panel .security-note {
  margin: 14px 0 0;
  color: rgba(225, 213, 173, .52);
  font-size: 10px;
  letter-spacing: .09em;
}

@keyframes grove-sunlight-shift {
  0%, 100% { opacity: .15; transform: translate3d(-.55%, .28%, 0); }
  31% { opacity: .235; transform: translate3d(.72%, -.26%, 0); }
  64% { opacity: .18; transform: translate3d(.22%, .17%, 0); }
  82% { opacity: .22; transform: translate3d(.93%, -.16%, 0); }
}

@keyframes foreground-leaf-breeze {
  0%, 100% { transform: rotate(-1.45deg) translate3d(-.35%, .18%, 0); }
  16% { transform: rotate(-.38deg) translate3d(.34%, -.18%, 0); }
  38% { transform: rotate(2.35deg) translate3d(1.15%, -.52%, 0); }
  57% { transform: rotate(1.08deg) translate3d(.66%, -.72%, 0); }
  74% { transform: rotate(-2.18deg) translate3d(-.83%, .39%, 0); }
  89% { transform: rotate(-.74deg) translate3d(-.06%, .09%, 0); }
}

@keyframes fog-near-drift {
  0%, 100% { opacity: .36; transform: translate3d(-3.1%, 1.35%, 0) scale(1.008); }
  24% { opacity: .54; transform: translate3d(3.9%, -.25%, 0) scale(1.025); }
  52% { opacity: .62; transform: translate3d(11.8%, -1.45%, 0) scale(1.043); }
  76% { opacity: .46; transform: translate3d(6.7%, -.55%, 0) scale(1.028); }
}

@keyframes fog-far-drift {
  0%, 100% { opacity: .46; transform: translate3d(-1.8%, .48%, 0) scale(1.002); }
  28% { opacity: .64; transform: translate3d(4.8%, -.38%, 0) scale(1.016); }
  61% { opacity: .72; transform: translate3d(10.6%, -.94%, 0) scale(1.031); }
  82% { opacity: .55; transform: translate3d(5.2%, -.08%, 0) scale(1.017); }
}

@keyframes light-particle-drift {
  0%, 100% { opacity: .36; transform: translate3d(-.65%, .42%, 0); }
  27% { opacity: .64; transform: translate3d(.68%, -1.25%, 0); }
  58% { opacity: .71; transform: translate3d(1.78%, -.45%, 0); }
  79% { opacity: .48; transform: translate3d(.34%, .62%, 0); }
}

@keyframes golden-particle {
  0%, 100% { opacity: 0; transform: translate3d(0, 5px, 0) scale(.76); }
  26% { opacity: .18; }
  63% { opacity: .36; transform: translate3d(6px, -13px, 0) scale(1); }
  86% { opacity: .06; }
}

@media (max-width: 740px) {
  .grove-background { object-position: 43% center; }
  .grove-foreground img { top: 7vh; left: -18vw; width: 470px; }
  .grove-fog-near img { left: -48vw; width: 170vw; }
  .grove-fog-far img { right: -53vw; width: 142vw; }
  .golden-leaf { top: 47.6%; left: 33.1%; width: 104px; height: 112px; }
  .entry-invitation { top: calc(47.6% + 58px); left: 39.6%; }
  .access-panel { top: auto; right: 24px; bottom: 30px; transform: translateY(10px); }
  .access-revealed .access-panel { transform: translateY(0); }
}

@media (max-width: 440px) {
  .grove-background { object-position: 39% center; }
  .grove-foreground img { top: 0; left: -37vw; width: 360px; opacity: .66; }
  .grove-fog-near img { left: -76vw; width: 205vw; opacity: .08; }
  .grove-fog-far img { right: -78vw; width: 174vw; opacity: .055; }
  .golden-leaf { top: 47.6%; left: 33.1%; width: 94px; height: 104px; }
  .entry-invitation { top: calc(47.6% + 53px); left: 39.6%; }
  .access-panel { right: 16px; bottom: 18px; width: calc(100vw - 32px); padding: 24px 23px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .grove-light-shafts,
  .grove-fog img,
  .grove-foreground img,
  .grove-particles img,
  .leaf-hovered .leaf-spark,
  .access-revealed .leaf-spark { animation: none; }

  .grove-stage::after,
  .golden-leaf,
  .entry-invitation,
  .access-panel { transition: none; }
}