/* ROOM360 signature components that sit on paper. Tokens: tokens.css. Rules: ROOM360_SIGNATURE.md */

/* InkReveal / IllustratedDivider: real Landscape Kit contours, edge to edge. They draw in from the left when they enter the view,
   then drift slowly sideways forever (the tiles are seamless), the paler back ridge slower than the front one. */
.r360-ink { position: relative; width: 100vw; margin: 8px calc(50% - 50vw) 4px; height: clamp(64px, 7.4vw, 124px); pointer-events: none; }
.r360-ink svg { display: block; width: 100%; height: 100%; clip-path: inset(-20% 100% -20% 0); transition: clip-path 2.8s var(--r360-ease); }
.r360-ink path, .r360-ink use { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.r360-ink-a path, .r360-ink-a use { stroke: var(--r360-atlantic); stroke-width: 8; stroke-opacity: .85; }
.r360-ink-b path, .r360-ink-b use { stroke: var(--r360-atlantic-hi); stroke-width: 5.5; stroke-opacity: .6; }
.r360-ink-drift { animation: r360inkdrift 90s linear infinite; animation-play-state: paused; }
.r360-ink-b { animation-duration: 150s; }
@keyframes r360inkdrift { from { transform: translateX(0); } to { transform: translateX(-3000px); } }
.r360-ink-sun {
  position: absolute; top: 0; width: clamp(12px, 1.1vw, 18px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -60%) scale(.3); opacity: 0;
  background: radial-gradient(circle at 40% 35%, #FF8A50, var(--r360-orange) 70%); box-shadow: 0 0 14px rgba(229, 86, 4, 0.45);
  transition: opacity 1s ease 2s, transform 1.4s var(--r360-ease) 2s;
}
.r360-ink.is-drawn svg { clip-path: inset(-20% 0 -20% 0); }
.r360-ink.is-drawn .r360-ink-drift { animation-play-state: running; }
.r360-ink.is-drawn .r360-ink-sun { opacity: 1; transform: translate(-50%, -130%) scale(1); }
/* the divider above Room Service sits on the paper, full width of the content */
.r360-ink-wrap { max-width: 1440px; margin: 0 auto; padding: 30px 4% 0; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
  .r360-ink svg { clip-path: none; transition: none; }
  .r360-ink-drift { animation: none; }
  .r360-ink-sun { opacity: 1; transform: translate(-50%, -130%); transition: none; }
}

/* ---------- Hand-Painted Edition (representative page: the floors) ----------
   Real pigment: /brand/wash.jpg is the cloud texture lifted from the Landscape Kit's printed bands, centred on neutral grey,
   so `soft-light` tints any surface with genuine watercolour variation. Ink edges: a real stroke roughened by #r360-rough. */
:root { --r360-wash: url("/brand/wash.jpg"); --r360-wash-size: 1560px 276px; }

/* SignatureButton / secondary: Vanilla paper, Atlantic ink outline, hand-inked edge */
section:has(> .r360-fvid) .r360-btn-shape {
  position: relative; isolation: isolate; border: 0 !important; color: var(--r360-atlantic) !important;
  background: var(--r360-vanilla-hi) var(--r360-wash) center / var(--r360-wash-size) !important; background-blend-mode: soft-light !important;
  box-shadow: 0 6px 14px -10px rgba(38, 87, 124, 0.55); transition: transform var(--r360-fast) var(--r360-ease), box-shadow var(--r360-fast);
}
section:has(> .r360-fvid) .r360-btn-shape::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1.4px solid rgba(38, 87, 124, 0.78); filter: url(#r360-rough); pointer-events: none;
}
section:has(> .r360-fvid) .r360-btn-shape:hover { transform: translateY(-1px); box-shadow: 0 10px 18px -10px rgba(38, 87, 124, 0.6); }
/* chosen: an Atlantic watercolour wash */
section:has(> .r360-fvid) .r360-btn-shape:not([style*="background: transparent"]) {
  color: var(--r360-chalk) !important; background: var(--r360-atlantic) var(--r360-wash) center / var(--r360-wash-size) !important;
}
section:has(> .r360-fvid) .r360-btn-shape:not([style*="background: transparent"])::before { border-color: rgba(241, 237, 229, 0.45); }

/* PortfolioFrame: a paper mat, a fine inked frame, a soft watercolour shadow; the media itself untouched */
section:has(> .r360-fvid) .r360-mitem {
  padding: 7px !important; border-radius: 3px; background: var(--r360-vanilla-hi) var(--r360-wash) center / var(--r360-wash-size) !important; background-blend-mode: soft-light !important;
  box-shadow: 0 16px 30px -18px rgba(38, 87, 124, 0.5), 0 2px 0 rgba(38, 87, 124, 0.05);
  transition: transform var(--r360-mid) var(--r360-ease), box-shadow var(--r360-mid) !important;
}
section:has(> .r360-fvid) .r360-mitem::before {
  content: ''; position: absolute; inset: 3px; border: 1px solid rgba(38, 87, 124, 0.42); border-radius: 2px; filter: url(#r360-rough); pointer-events: none; z-index: 2;
}
section:has(> .r360-fvid) .r360-mitem:hover { transform: translateY(-4px); box-shadow: 0 24px 38px -18px rgba(38, 87, 124, 0.6), 0 2px 0 rgba(38, 87, 124, 0.05); }
section:has(> .r360-fvid) .r360-mitem .r360-mover { inset: 7px !important; }
/* the type label becomes a small hand-drawn paper tag */
section:has(> .r360-fvid) .r360-mitem > div:nth-child(2) {
  top: 16px !important; left: 16px !important; z-index: 3; opacity: 1 !important; padding: 4px 10px 4px 8px; border-radius: 999px; color: var(--r360-atlantic) !important;
  background: var(--r360-vanilla-hi) var(--r360-wash) center / var(--r360-wash-size); background-blend-mode: soft-light; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, 0.45);
  font-size: 10px !important; font-weight: 600; letter-spacing: 2px !important;
}
section:has(> .r360-fvid) .r360-mitem > div:nth-child(2)::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--r360-orange); }

/* IllustratedCard: 'Room available' on paper, a mountain corner, a painted orange call to action */
section:has(> .r360-fvid) .r360-roomcard {
  position: relative; overflow: hidden; isolation: isolate; border: 0 !important; padding: 40px 28px !important; border-radius: 6px;
  background: var(--r360-vanilla-hi) var(--r360-wash) center / var(--r360-wash-size) !important; background-blend-mode: soft-light !important;
  box-shadow: 0 22px 40px -26px rgba(38, 87, 124, 0.55); cursor: pointer;
}
section:has(> .r360-fvid) .r360-roomcard::before {
  content: ''; position: absolute; inset: 6px; border: 1.2px solid rgba(38, 87, 124, 0.6); border-radius: 4px; filter: url(#r360-rough); pointer-events: none;
}
section:has(> .r360-fvid) .r360-roomcard::after {                     /* the mountain corner, from the kit's own lines */
  content: ''; position: absolute; right: -2%; bottom: -10px; width: 46%; height: 70%; z-index: -1; opacity: .55;
  background: url('/stone/peaks-lines.png') right bottom / auto 150% no-repeat;
  -webkit-mask-image: linear-gradient(105deg, transparent 0%, #000 45%); mask-image: linear-gradient(105deg, transparent 0%, #000 45%);
}
section:has(> .r360-fvid) .r360-roomcard > span:last-child {          /* the painted orange pill */
  position: relative; isolation: isolate; border: 0 !important; padding: 13px 26px; border-radius: 999px; color: #FFF6EA !important; font-weight: 600; letter-spacing: 2.4px !important; opacity: 1 !important;
  background: var(--r360-orange) var(--r360-wash) center / var(--r360-wash-size); background-blend-mode: soft-light;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 22px -10px rgba(229, 86, 4, 0.7);
  transition: transform var(--r360-fast) var(--r360-ease), box-shadow var(--r360-fast);
}
section:has(> .r360-fvid) .r360-roomcard > span:last-child::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1.4px solid rgba(140, 45, 0, 0.55); filter: url(#r360-rough); }
section:has(> .r360-fvid) .r360-roomcard:hover > span:last-child { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 16px 30px -10px rgba(229, 86, 4, 0.8), 0 0 24px rgba(255, 106, 46, 0.3); }

@media (prefers-reduced-motion: reduce) { section:has(> .r360-fvid) .r360-mitem, section:has(> .r360-fvid) .r360-btn-shape { transition: none !important; } }

/* ---------- SignatureDoor: an arched hotel door, lit fanlight, two leaves, lanterns, steps ----------
   Hover: the leaves open a crack and warm light spills out. Chosen (html.r360-to-hotel / .r360-to-studio): the door swings open. */
.r360-doors { display: flex; justify-content: center; align-items: flex-start; gap: clamp(40px, 11vw, 200px); margin-top: clamp(10px, 2.4vh, 30px); }
.r360-door {
  --door-h: clamp(210px, 37vh, 480px); --door-w: calc(var(--door-h) * 0.68);
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--r360-chalk); text-decoration: none; font: inherit; -webkit-tap-highlight-color: transparent;
}
.r360-door-sign { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 18px; font-family: var(--r360-sans); font-weight: 600; font-size: clamp(11px, .8vw, 13px); letter-spacing: 4px; color: rgba(241, 237, 229, 0.8); transition: color .5s; }
.r360-door-sign b { font-family: var(--r360-serif); font-weight: 400; font-size: clamp(22px, 2vw, 32px); letter-spacing: 0; color: var(--r360-orange-hi); }
.r360-door-body { position: relative; display: flex; align-items: flex-start; gap: clamp(14px, 1.6vw, 26px); }
.r360-door-arch {
  position: relative; width: var(--door-w); height: var(--door-h); border-radius: 999px 999px 0 0; padding: 9px; box-sizing: border-box;
  border: 1.5px solid rgba(241, 237, 229, 0.92); box-shadow: 0 0 0 7px rgba(21, 50, 74, 0.9), 0 0 0 8px rgba(241, 237, 229, 0.35), 0 0 70px rgba(255, 150, 90, 0.12), 0 40px 80px -30px rgba(0, 0, 0, 0.85);
  perspective: 900px; overflow: hidden; background: transparent;
}
.r360-door-arch::after { content: ''; position: absolute; left: 50%; top: -1px; width: 14px; height: 18px; transform: translateX(-50%); background: #EBE4D1; clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%); z-index: 4; }
.r360-door-arch::before { content: ''; position: absolute; inset: 9px; border-radius: 999px 999px 0 0; background: #E4DCC6; }   /* the lit room behind */
.r360-door-glow { position: absolute; inset: 9px; border-radius: 999px 999px 0 0; z-index: 1;
  background: radial-gradient(70% 60% at 50% 70%, #FFE2B8 0%, #FFB27A 35%, rgba(229, 86, 4, 0.55) 70%, rgba(229, 86, 4, 0.2) 100%); opacity: .55; transition: opacity .8s; }
.r360-door-fan { position: absolute; left: 9px; right: 9px; top: 9px; width: calc(100% - 18px); height: calc(var(--door-w) * 0.5 - 9px); z-index: 2; }
.r360-door-leaves { position: absolute; left: 9px; right: 9px; bottom: 0; top: calc(var(--door-w) * 0.5 + 2px); z-index: 3; border-top: 3px solid #EBE4D1; display: flex; transform-style: preserve-3d; }
.r360-dleaf { position: relative; flex: 1; background: linear-gradient(180deg, #1B3D58, #15324A); border: 1px solid rgba(235, 228, 209, 0.85); box-sizing: border-box; transition: transform 1.4s cubic-bezier(.6, 0, .2, 1); backface-visibility: hidden; }
.r360-dleaf-l { transform-origin: 0 50%; } .r360-dleaf-r { transform-origin: 100% 50%; }
.r360-dleaf i { position: absolute; left: 14%; right: 14%; border: 1px solid rgba(235, 228, 209, 0.28); }
.r360-dleaf i:first-child { top: 7%; height: 22%; } .r360-dleaf i:nth-child(2) { top: 35%; bottom: 7%; }
.r360-dleaf b { position: absolute; top: 46%; width: 3px; height: 13%; border-radius: 2px; background: #EBE4D1; }
.r360-dleaf-l b { right: 7%; } .r360-dleaf-r b { left: 7%; }
.r360-door-lamp { position: relative; margin-top: calc(var(--door-h) * 0.42); width: clamp(15px, 1.4vw, 22px); height: clamp(26px, 2.4vw, 38px); border: 1px solid #EBE4D1; background: #FD9268; box-shadow: 0 0 22px 8px rgba(253, 146, 104, 0.3); animation: r360lamp 4s ease-in-out infinite; transition: box-shadow .6s; }
.r360-door-lamp::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 14px; background: #D8520B; transform: translateX(-50%); }
.r360-door-lamp-r { animation-delay: -1.7s; }
@keyframes r360lamp { 0%, 100% { opacity: 1; } 47% { opacity: .82; } 50% { opacity: 1; } 52% { opacity: .9; } }
.r360-door-steps { display: flex; flex-direction: column; align-items: center; margin-top: 0; }
.r360-door-steps i { display: block; height: 7px; border-top: 1px solid #EBE4D1; }
.r360-door-steps i:nth-child(1) { width: calc(var(--door-w) + 30px); } .r360-door-steps i:nth-child(2) { width: calc(var(--door-w) + 60px); border-color: #EC5C13; } .r360-door-steps i:nth-child(3) { width: calc(var(--door-w) + 90px); border-color: #CF4E06; }
.r360-door-title { margin-top: 16px; max-width: calc(var(--door-w) + 260px); white-space: nowrap; text-align: center; font-family: var(--r360-serif); font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.1; }
.r360-door-title em { color: var(--r360-orange-hi); }
.r360-door-go {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 999px; font-family: var(--r360-sans); font-weight: 600; font-size: 11px; letter-spacing: 2.6px;
  color: #FFFFFF; background: var(--r360-hot); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 22px -10px rgba(255, 80, 20, 0.7); transition: transform .5s var(--r360-ease), box-shadow .5s;
}
.r360-door-studio .r360-door-go { background: var(--r360-glass); border: 1px solid var(--r360-glass-rim); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22); }
.r360-door-go svg { transition: transform .45s var(--r360-ease); }
/* hover: a crack of light */
.r360-door:hover .r360-dleaf-l, .r360-door:focus-visible .r360-dleaf-l { transform: rotateY(-24deg); }
.r360-door:hover .r360-dleaf-r, .r360-door:focus-visible .r360-dleaf-r { transform: rotateY(24deg); }
.r360-door:hover .r360-door-glow, .r360-door:focus-visible .r360-door-glow { opacity: 1; }
.r360-door:hover .r360-door-lamp { box-shadow: 0 0 30px 12px rgba(253, 146, 104, 0.45); }
.r360-door:hover .r360-door-sign { color: #FFFFFF; }
.r360-door:hover .r360-door-go { transform: translateY(-2px); } .r360-door:hover .r360-door-go svg { transform: translateX(3px); }
.r360-door:focus-visible { outline: none; } .r360-door:focus-visible .r360-door-arch { box-shadow: 0 0 0 2px var(--r360-chalk), 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
/* chosen: the door swings open, the other dims */
html.r360-to-hotel .r360-door-hotel .r360-dleaf-l, html.r360-to-studio .r360-door-studio .r360-dleaf-l { transform: rotateY(-100deg); }
html.r360-to-hotel .r360-door-hotel .r360-dleaf-r, html.r360-to-studio .r360-door-studio .r360-dleaf-r { transform: rotateY(100deg); }
html.r360-to-hotel .r360-door-hotel .r360-door-glow, html.r360-to-studio .r360-door-studio .r360-door-glow { opacity: 1; }
html.r360-to-hotel .r360-door-studio, html.r360-to-studio .r360-door-hotel { opacity: .25; transition: opacity .8s; }
@media (max-width: 640px) {
  .r360-doors { gap: 18px; }
  .r360-door { --door-h: clamp(190px, 36vh, 300px); }
  .r360-door-lamp { display: none; }
  .r360-door-sign { font-size: 9px; letter-spacing: 2.2px; margin-bottom: 10px; }
  .r360-door-title { font-size: 1.05rem; max-width: 42vw; white-space: normal; }
  .r360-door-go { padding: 10px 14px; font-size: 9.5px; letter-spacing: 1.8px; }
  .r360-door-steps i:nth-child(3) { width: calc(var(--door-w) + 40px); } .r360-door-steps i:nth-child(2) { width: calc(var(--door-w) + 24px); } .r360-door-steps i:nth-child(1) { width: calc(var(--door-w) + 10px); }
}
@media (prefers-reduced-motion: reduce) { .r360-dleaf, .r360-door-glow { transition: none; } .r360-door-lamp { animation: none; } }

/* entering: the chosen door swings open, then the camera flies through it (origin set by nav.js on <html>) */
html.r360-to-hotel [style*="transform-origin: 50% 46%"], html.r360-to-studio [style*="transform-origin: 50% 46%"] {
  transform-origin: var(--r360-zx, 50%) var(--r360-zy, 50%) !important; transform: scale(11) !important;
  transition: transform 1.9s cubic-bezier(.7, 0, .25, 1) .5s !important;
}
html.r360-to-studio::after {             /* the Studio: the light behind the door fills the screen, and the Studio page rises out of it */
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0;
  background: radial-gradient(60% 60% at 50% 55%, #FFF1DC 0%, #FFC28E 45%, #F07A3A 100%); animation: r360flash .8s ease 1.55s forwards;
}
@keyframes r360flash { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html.r360-to-hotel [style*="transform-origin: 50% 46%"], html.r360-to-studio [style*="transform-origin: 50% 46%"] { transform: none !important; transition: none !important; }
  html.r360-to-studio::after { animation-duration: .01s; animation-delay: 0s; }
}
html.r360-to-hotel [style*="transition: opacity 1.1s ease 0.8s"] { transition: opacity .6s ease 1.85s !important; }   /* the blue of the hotel arrives once we are through the door */
/* the call to enter sits on the door itself, over the lower panels */
.r360-door-go { position: absolute; left: 50%; bottom: calc(var(--door-h) * 0.12 + 22px); transform: translateX(-50%); margin: 0; z-index: 6; white-space: nowrap; }
.r360-door:hover .r360-door-go { transform: translate(-50%, -2px); }
.r360-door-studio .r360-door-go { background: rgba(21, 50, 74, 0.82); }
html.r360-to-hotel .r360-door-go, html.r360-to-studio .r360-door-go { opacity: 0; transition: opacity .3s; }