/* Damak Ilham: premium polish layered over style.css (motion, details, focus, forms). */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --espresso: #1c1815;
  --ivory: #f6f1e9;
}

::selection { background: var(--espresso); color: var(--ivory); }
html { scrollbar-color: hsl(30 6% 62%) transparent; text-rendering: optimizeLegibility; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Buttons and links in the page body: one smooth, custom ease instead of the default 150ms. */
main a.transition-all, main a.transition-colors, main button.transition-all, main button.transition-colors,
footer a.transition-all, footer a.transition-colors, [data-mobile-menu] a, [data-enquiry-form] button {
  transition-duration: 220ms;
  transition-timing-function: var(--ease-out);
}
main a.active\:scale-\[0\.98\]:active, main button[type="submit"]:active, .enquire-bar a:active { transform: scale(0.97); }

/* Visible keyboard focus everywhere (mouse clicks stay clean). */
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}
select[data-currency]:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
input:focus-visible, textarea:focus-visible, select#cf-service:focus-visible { outline: none; }

/* Text links with an arrow: a hairline that draws in from the left, arrow nudges forward. */
.link-draw { position: relative; }
.link-draw::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 450ms var(--ease-out);
}
.link-draw svg { transition: transform 300ms var(--ease-out); }
footer li:not(.flex) > a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 450ms var(--ease-out), color 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-draw:hover::after { transform: scaleX(1); transform-origin: left; }
  .link-draw:hover svg { transform: translateX(4px); }
  footer li:not(.flex) > a:hover { background-size: 100% 1px; }
  .animate-marquee:hover { animation-play-state: paused; }
}

/* Ticker: a touch darker so it reads as intentional, not faded. */
.animate-marquee .font-display { color: hsl(var(--foreground) / 0.7); }

/* Footer and dark-band small print: lift the faintest ivory to readable contrast (4.5:1). */
.text-\[\#F6F1E9\]\/40 { color: rgb(246 241 233 / 0.58); }

/* WhatsApp: quiet espresso button with a fine ivory ring instead of bright green. */
.wa-float {
  background: var(--espresso);
  color: var(--ivory);
  box-shadow: 0 0 0 1px rgb(246 241 233 / 0.28), 0 12px 32px -8px rgb(20 16 12 / 0.45);
  transition: transform 220ms var(--ease-out), bottom 350ms var(--ease-out), background-color 220ms var(--ease-out);
}
.wa-float svg { width: 1.5rem; height: 1.5rem; }
.wa-float:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .wa-float:hover { background: #2a241f; transform: translateY(-2px); }
}

/* Contact form: fine-line dropdown arrow and inline field errors. */
select#cf-service {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1815' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}
[data-enquiry-form] input:hover, [data-enquiry-form] textarea:hover, [data-enquiry-form] select:hover { border-color: hsl(var(--foreground) / 0.45); }
[data-enquiry-form] [aria-invalid="true"] { border-color: hsl(var(--destructive)); }
.field-error { margin-top: 0.5rem; font-size: 0.8125rem; color: hsl(var(--destructive)); }

/* Phone: sticky enquiry bar on design pages, shown once the main button scrolls away. */
.enquire-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 54;
  padding: 0.75rem 1.5rem calc(0.75rem + env(safe-area-inset-bottom));
  background: hsl(var(--background) / 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid hsl(var(--border) / 0.7);
  transform: translateY(100%);
  transition: transform 400ms var(--ease-out);
}
.enquire-bar.is-shown { transform: none; }
.enquire-bar a {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transition: transform 160ms var(--ease-out);
}
body.has-enquire-bar .wa-float { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .enquire-bar { display: none; } }

/* Scroll reveal: only applied by main.js, so content is always visible without JavaScript. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* Home hero: a slow, one-time entrance. */
@keyframes di-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes di-settle { from { transform: scale(1.05); } }
@keyframes di-fade { from { opacity: 0; } }
header[data-home] ~ main > section:first-child > img { animation: di-settle 2200ms var(--ease-out) both; }
header[data-home] ~ main > section:first-child h1,
header[data-home] ~ main > section:first-child p,
header[data-home] ~ main > section:first-child .flex-wrap { animation: di-rise 1000ms var(--ease-out) both; }
header[data-home] ~ main > section:first-child p:first-child { animation-delay: 150ms; }
header[data-home] ~ main > section:first-child h1 { animation-delay: 250ms; }
header[data-home] ~ main > section:first-child div + div p { animation-delay: 420ms; }
header[data-home] ~ main > section:first-child .flex-wrap { animation-delay: 540ms; }

/* Design gallery main photo cross-fade target. */
[data-gallery-main] { transition: opacity 260ms var(--ease-out); }
[data-gallery-main].is-swapping { opacity: 0; transition-duration: 140ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
}