/* WUAI official site. Calm and clean: warm white, soft ink, and the gold of the logo. */
:root {
  --cream: #faf7f2;
  --ink: #2e2925;
  --muted: #7b7067;
  --gold: #a47a22;
  --line: #e9e1d5;
  --serif: "Noto Serif SC", "Songti SC", STSong, serif;
  --hand: "Ma Shan Zheng", "Kaiti SC", STKaiti, cursive;
  --sans: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}
:lang(en), :lang(ms) { --serif: "Cormorant Garamond", Georgia, serif; --hand: "Caveat", cursive; }

* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--ink); font: 16px/1.85 var(--sans); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
.shell { width: min(1080px, 100% - 48px); margin-inline: auto; }
.section { padding: 112px 0; }
.center { text-align: center; }

/* Handwritten lines: care and service in a warm hand */
.hand { font-family: var(--hand); font-weight: 400; color: var(--gold); }
.label { font-family: var(--hand); font-size: 22px; color: var(--gold); margin-bottom: 10px; }
h2 { font: 400 clamp(28px, 4vw, 40px)/1.4 var(--serif); letter-spacing: 0.06em; }
.sub { color: var(--muted); margin-top: 12px; }

/* Header floats on the slideshow */
.header { position: absolute; inset: 0 0 auto 0; z-index: 3; color: #fff; }
.header .shell { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; }
.brand img { width: 40px; height: auto; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 14px; letter-spacing: 0.12em; }
.nav a { text-decoration: none; opacity: 0.88; transition: opacity 0.4s; }
.nav a:hover { opacity: 1; }
.button { display: inline-block; padding: 12px 28px; border: 1px solid currentColor; text-decoration: none; font-size: 14px; letter-spacing: 0.16em; transition: background 0.5s, color 0.5s; }
.button:hover { background: rgba(255, 255, 255, 0.16); }
.button.dark { color: var(--ink); border-color: var(--line); }
.button.dark:hover { background: var(--ink); color: #fff; }

/* Hero: four rooms fade into each other, each slowly drifting closer */
.hero { position: relative; overflow: hidden; min-height: 100svh; display: grid; place-items: center; text-align: center; color: #fff; padding: 120px 24px 90px; isolation: isolate; }
.slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 65%; z-index: -2; opacity: 0; }
.slides img:first-child { opacity: 1; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(38, 30, 24, 0.5), rgba(38, 30, 24, 0.32) 45%, rgba(38, 30, 24, 0.55)); }
.hero .logo { width: clamp(120px, 16vw, 150px); height: auto; margin: 0 auto 30px; }
.hero h1 { font: 400 clamp(24px, 3.4vw, 34px)/1.5 var(--serif); letter-spacing: 0.32em; margin-right: -0.32em; }
.hero h1:lang(en), .hero h1:lang(ms) { letter-spacing: 0.08em; margin-right: -0.08em; }
.hero .tagline { font-family: var(--hand); font-size: clamp(30px, 4.4vw, 44px); line-height: 1.3; margin: 28px 0 34px; color: #f6e6c4; }
.scroll { position: absolute; left: 50%; bottom: 26px; width: 1px; height: 48px; background: rgba(255, 255, 255, 0.5); overflow: hidden; }
.scroll::after { content: ""; position: absolute; inset: 0; background: #fff; transform: translateY(-100%); }

/* Promise */
.promise { background: var(--cream); }
.heart { width: 76px; margin: 0 auto 18px; overflow: visible; }
.heart path { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; }
.promise .label { margin-bottom: 26px; }
.promise .big { font-family: var(--hand); font-size: clamp(40px, 6.4vw, 66px); line-height: 1.35; color: var(--ink); }
.promise p:last-child { color: var(--muted); margin-top: 22px; }

/* Care */
.care-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 64px; text-align: left; }
.care-grid article { border-top: 1px solid var(--line); padding-top: 24px; }
.care-grid h3 { font-family: var(--hand); font-weight: 400; font-size: 30px; line-height: 1.3; color: var(--gold); }
.care-grid p { color: var(--muted); font-size: 15px; margin-top: 10px; }

/* Services: two rows of photos drift slowly past, each with a small caption (Wynssa style: tiny spaced serif, gold accent) */
.rooms { background: var(--cream); }
.drift { display: grid; gap: 26px; margin-top: 58px; }
.belt-row { overflow-x: auto; scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.belt-row::-webkit-scrollbar { display: none; }
.belt-row:active { cursor: grabbing; }
.belt { display: flex; width: max-content; }
.set { display: flex; gap: 20px; padding-right: 20px; }
.shot { width: 320px; margin: 0; text-align: left; }
.shot img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; pointer-events: none; }
.shot figcaption { display: flex; align-items: center; gap: 10px; margin-top: 12px; font: 400 13px/1.6 var(--serif); letter-spacing: 0.24em; color: var(--muted); }
.shot figcaption::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

/* Branches: one reception photo, then three quiet columns divided by hairlines, three across on every screen */
.branch-photo { margin: 56px auto 0; max-width: 860px; }
.branch-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.branch-photo figcaption { margin-top: 12px; font: 400 12px/1.6 var(--serif); letter-spacing: 0.24em; color: var(--muted); }
.branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 860px; margin: 44px auto 0; }
.branches article { padding: 6px 20px 4px; border-left: 1px solid var(--line); }
.branches article:first-child { border-left: 0; }
.branches .city { font: 400 12px/1.6 var(--serif); letter-spacing: 0.34em; color: var(--gold); }
.branches h3 { font: 400 21px/1.35 var(--serif); margin: 12px 0 4px; }
.branches .place { font-size: 13px; color: var(--muted); }
.soon { display: inline-block; margin-top: 8px; padding: 0 9px; border: 1px solid var(--gold); font: 400 11px/1.9 var(--serif); color: var(--gold); letter-spacing: 0.2em; }
.wa { display: inline-block; margin-top: 20px; font-size: 14px; letter-spacing: 0.12em; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; transition: color 0.5s; }
.wa:hover { color: var(--gold); }
.tel { margin-top: 6px; white-space: nowrap; font-size: 12px; color: var(--muted); letter-spacing: 0.04em; }

/* Closing band (as on Wynssa): a full-width photo under a soft veil, the name spaced wide */
.closing { position: relative; overflow: hidden; isolation: isolate; padding: 150px 24px; text-align: center; color: #fff; }
.closing > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.closing::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(32, 26, 22, 0.52); }
.closing .mark { font: 500 clamp(40px, 6vw, 60px)/1.1 "Cormorant Garamond", Georgia, serif; letter-spacing: 0.32em; margin-right: -0.32em; }
.closing .name { font: 400 15px/1.8 var(--serif); letter-spacing: 0.5em; margin: 16px -0.5em 0 0; }
.closing .name:lang(en), .closing .name:lang(ms) { letter-spacing: 0.2em; margin-right: -0.2em; }
.closing .line { font-size: 13px; letter-spacing: 0.24em; opacity: 0.85; margin: 14px 0 30px; }
.closing .text-link { border-color: rgba(255, 255, 255, 0.6); }

.text-link { font-size: 14px; letter-spacing: 0.1em; text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }

/* Questions: the common ones first, more behind one quiet button */
.notes { max-width: 760px; margin: 52px auto 0; text-align: left; }
.notes details { border-top: 1px solid var(--line); }
.notes > details:nth-last-child(2) { border-bottom: 1px solid var(--line); }
.notes summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font: 400 19px/1.5 var(--serif); }
.notes summary::-webkit-details-marker { display: none; }
.notes summary::after { content: "+"; color: var(--gold); font-size: 22px; line-height: 1; transition: transform 0.5s; }
.notes details[open] > summary::after { transform: rotate(45deg); }
.notes details p { color: var(--muted); padding: 0 0 24px; }
.notes .more { margin-top: 34px; border-top: 0; }
.notes .more > summary { display: block; padding: 0; text-align: center; font: 400 14px/1.8 var(--sans); letter-spacing: 0.16em; color: var(--gold); }
.notes .more > summary::after { content: none; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary span { border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.more[open] > summary { margin-bottom: 26px; }
.more > details:last-child { border-bottom: 1px solid var(--line); }

/* Footer */
.footer { padding: 40px 0; font-size: 13px; color: var(--muted); }
.footer .shell { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.footer .social a { text-decoration: none; }
.footer .social a:hover { color: var(--ink); }

/* Calm motion, only for visitors who have not asked for less */
@media (prefers-reduced-motion: no-preference) {
  .slides img { animation: slide 28s infinite; }
  .slides img:nth-child(1) { animation-delay: -1.4s; }
  .slides img:nth-child(2) { animation-delay: 5.6s; }
  .slides img:nth-child(3) { animation-delay: 12.6s; }
  .slides img:nth-child(4) { animation-delay: 19.6s; }
  .slides img:not(:first-child) { opacity: 0; }
  .scroll::after { animation: drip 3.2s ease-in-out infinite; }
  .heart { animation: beat 3.2s ease-in-out infinite; }
  .heart path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 3s ease forwards 0.6s; }
  @supports (animation-timeline: view()) {
    .heart path { animation: draw linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
  }
  @supports (animation-timeline: view()) {
    .reveal { animation: rise both ease-out; animation-timeline: view(); animation-range: entry 0% cover 28%; }
  }
}
@keyframes slide {
  0% { opacity: 0; transform: scale(1); }
  5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.08); }
}
@keyframes drip { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes beat { 0%, 40%, 100% { transform: scale(1); } 12% { transform: scale(1.1); } 24% { transform: scale(1.03); } 32% { transform: scale(1.08); } }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

@media (max-width: 880px) {
  .section { padding: 80px 0; }
  .nav a:not(.button):not(.lang) { display: none; }
  .care-grid { grid-template-columns: repeat(2, 1fr); }
  .branch-photo { margin-top: 44px; }
}
@media (max-width: 540px) {
  .nav { gap: 16px; }
  .care-grid { grid-template-columns: 1fr; }
  .shot { width: 220px; }
  .set { gap: 14px; padding-right: 14px; }
  .branches { margin-inline: -12px; }
  .branches article { padding: 2px 8px; }
  .branches .city { font-size: 11px; letter-spacing: 0.2em; }
  .branches h3 { font-size: 15px; margin-top: 8px; }
  .branches .place { font-size: 11px; line-height: 1.5; }
  .soon { padding: 0 5px; font-size: 10px; letter-spacing: 0.08em; }
  .wa { font-size: 12px; letter-spacing: 0.02em; margin-top: 14px; }
  .tel { font-size: 10px; letter-spacing: 0; }
  .closing { padding: 110px 20px; }
}