/* ALTIS — the rooftop terrace's controls (src/rooftop.js).

   The photograph is the product, on the terrace exactly as in the residence.
   These two markers are held to the same rule the control surface is held to:
   AT REST THE TERRACE MUST LOOK LIKE A PHOTOGRAPH WITH A COUPLE OF SMALL
   LIGHTS IN IT. Two ~5px pips of warm light, no rings, no scrims, no resident
   labels. The label is summoned by hover or focus and folds away again.

   This is deliberately the same idiom as styles/panel.css and deliberately not
   the same file: panel.css is signed off and is not touched. Colour comes from
   the site tokens on :root in styles/main.css, each with a literal fallback.

   SCROLL CONTRACT (tests/t10-scroll-block.mjs): nothing here touches overflow
   on any axis, there is no overscroll-behavior and there is no `touch-action`
   declaration anywhere in this file — nothing on the terrace is dragged, so
   nothing needs to claim a gesture from the page. */

.rc-root {
  --rc-focus:    #7FC0FF;
  --rc-ease:     cubic-bezier(0.32, 0.72, 0.24, 1);
  --rc-ease-out: cubic-bezier(0.16, 0.84, 0.28, 1);

  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* The layer exists only while the terrace is the spot you are standing in
     and nothing is dissolving over it. src/main.js reads that off the scroll
     offset every frame and toggles .rc-live, exactly as it arms the residence
     — so the controls can never be caught half-way through a move. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}
.rc-root.rc-live {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease, visibility 0s;
}
#smart-home-experience.she-snap .rc-root { transition: none; }

.rc-root :focus-visible {
  outline: 1.5px solid var(--rc-focus, #7FC0FF);
  outline-offset: 3px;
}

/* ============================================================ the dot of light
   A recessed status LED in a deck, not a UI pin. One warm core, one tight
   bloom, a 1px dark bezel so it survives both the travertine and the water.
   The 44px target around it is completely invisible. */

.rc-mark {
  position: absolute;
  width: 44px; height: 44px;
  margin: 0; padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

/* Same ring the residence's markers carry, for the same reason: the terrace's
   two switches have to be findable on a photograph of a terrace. */
.rc-mark::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 214, 160, 0.5);
  box-shadow: 0 0 0 1px rgba(6, 11, 16, 0.35), inset 0 0 12px rgba(255, 190, 124, 0.14);
  pointer-events: none;
  transition: border-color 0.3s ease, transform 0.3s var(--rc-ease);
}
.rc-mark:hover::after,
.rc-mark:focus-visible::after {
  border-color: rgba(255, 226, 184, 0.9);
  transform: scale(1.12);
}

.rc-pip {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #FFFFFF 0%, #FFEBD2 40%, #FFC581 100%);
  box-shadow:
    0 0 0 1px rgba(6, 11, 16, 0.55),
    0 0 4px 1px rgba(255, 210, 150, 0.95),
    0 0 13px 3px rgba(255, 168, 84, 0.48);
  transition: box-shadow 0.5s var(--rc-ease), background 0.5s ease,
              width 0.35s var(--rc-ease), height 0.35s var(--rc-ease),
              margin 0.35s var(--rc-ease);
}

/* The only thing that moves at rest: the bloom breathes, very slowly, at a
   very low amplitude. It should read as a light being on, not an animation. */
.rc-pip::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 186, 118, 0.40) 0%, rgba(255, 176, 100, 0.14) 45%, rgba(255, 170, 90, 0) 72%);
  animation: rc-breathe 5.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rc-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.88); }
  50%      { opacity: 1;    transform: scale(1.12); }
}

.rc-mark:hover .rc-pip,
.rc-mark:focus-visible .rc-pip {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  box-shadow:
    0 0 0 1px rgba(6, 11, 16, 0.5),
    0 0 4px 1px rgba(255, 226, 184, 1),
    0 0 14px 4px rgba(255, 172, 92, 0.55);
}

/* A switch that is ON carries it in the light itself, the way the residence's
   privacy glass does. The water runs cool, because the pool is lit cool and a
   running jet is white; the evening scene runs warm, because that is what the
   soffit and the planter lines actually do. Nothing else changes — the
   photograph underneath is doing the talking. */
.rc-mark[data-rc="water"].rc-on .rc-pip {
  background: radial-gradient(circle at 50% 38%, #FFFFFF 0%, #E6FBFF 40%, #96DCE6 100%);
  box-shadow:
    0 0 0 1px rgba(6, 11, 16, 0.55),
    0 0 3px 0.5px rgba(206, 245, 252, 0.95),
    0 0 11px 2.5px rgba(112, 205, 220, 0.50);
}
.rc-mark[data-rc="water"].rc-on .rc-pip::after {
  background: radial-gradient(circle, rgba(140, 216, 230, 0.32) 0%, rgba(130, 208, 224, 0.10) 45%, rgba(130, 208, 224, 0) 72%);
}
.rc-mark[data-rc="evening"].rc-on .rc-pip {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  box-shadow:
    0 0 0 1px rgba(6, 11, 16, 0.5),
    0 0 4px 1px rgba(255, 232, 196, 1),
    0 0 16px 5px rgba(255, 164, 76, 0.55);
}
.rc-mark.rc-on .rc-pip::after { animation-duration: 3.4s; }

/* The label is summoned, never resident. */
.rc-tag {
  position: absolute;
  left: 26px; top: 50%;
  padding: 5px 9px 5px 10px;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 246, 236, 0.94);
  background: rgba(7, 12, 17, 0.5);
  border-radius: 2px;
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  opacity: 0;
  transform: translateY(-50%) translateX(-4px);
  pointer-events: none;
  transition: opacity 0.32s ease, transform 0.32s var(--rc-ease-out);
}
.rc-mark.rc-flip .rc-tag {
  left: auto; right: 26px;
  padding-left: 9px; padding-right: 10px;
  transform: translateY(-50%) translateX(4px);
}
.rc-mark:hover .rc-tag,
.rc-mark:focus-visible .rc-tag {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Reduced motion stops the bloom breathing and stops the label sliding. It
   does NOT remove a control, a label or a state: both switches and both
   photographs work identically, and the crossfade between them is softened in
   src/rooftop.js rather than deleted. */
@media (prefers-reduced-motion: reduce) {
  .rc-pip::after { animation: none; }
  .rc-tag { transition: opacity 0.2s ease; transform: translateY(-50%); }
  .rc-mark.rc-flip .rc-tag { transform: translateY(-50%); }
}

/* On a phone the terrace is centre-cropped hard and there is not room for a
   label beside a dot without it crossing the copy. The dot and its 44px target
   remain; the accessible name is on the button either way. */
@media (max-width: 620px) {
  .rc-tag { display: none; }
}