/* ======================================================================
   BOOK YOUR CABIN — page-scoped styles.
   Everything is under .bc-root so it cannot leak into the shared header,
   footer or styles.css.
   ====================================================================== */

.bc-root{
  --tb: clamp(150px, 22vw, 290px);   /* top band: depth of sky before the teak */
  --rust: #a8432a;
  --ink: #173049;
  --rule: #c7b487;
  position:relative;
  overflow:hidden;
  background:#bcdef2;
}
.bc-root *{box-sizing:border-box}
.bc-root input,.bc-root textarea,.bc-root select{font-family:'Nunito Sans',system-ui,sans-serif}
.bc-root input::placeholder,.bc-root textarea::placeholder{color:#a58a63;opacity:1}

/* ---------- motion ---------- */
@keyframes bcDrop{0%{transform:translateY(-46px);opacity:0}66%{transform:translateY(6px);opacity:1}100%{transform:translateY(0)}}
@keyframes bcCloud{0%{transform:translateX(-30px)}100%{transform:translateX(46px)}}
@keyframes bcSway{0%{transform:rotate(-.22deg) translateY(1px)}50%{transform:rotate(.22deg) translateY(-2px)}100%{transform:rotate(-.22deg) translateY(1px)}}

.bc-cloud{animation:bcCloud 34s ease-in-out infinite alternate}
.bc-scene{animation:bcSway 9s ease-in-out infinite;transform-origin:50% 42%}
.bc-sway{animation:bcSway 9s ease-in-out infinite;transform-origin:50% 30%}
.bc-drop{animation:bcDrop .55s cubic-bezier(.2,.8,.25,1) both}

/* ---------- the scene: sky, sea, varnished teak coaming ---------- */
.bc-scene{
  position:absolute;left:-3%;top:-40px;width:106%;height:calc(100% + 80px);
  z-index:0;overflow:hidden;pointer-events:none;
}
.bc-teak{
  position:absolute;inset:0;
  background:
    radial-gradient(1200px 520px at 18% 0%,rgba(255,240,205,.16),transparent 60%),
    repeating-linear-gradient(1deg,rgba(45,25,8,.05) 0 2px,transparent 2px 7px),
    repeating-linear-gradient(.35deg,rgba(38,20,6,.13) 0 2px,transparent 2px 104px),
    linear-gradient(176deg,#9a6a3e 0,#835831 46%,#6c4829 100%);
}
.bc-sheen{
  position:absolute;left:0;right:0;top:calc(var(--tb) + 150px);height:240px;
  background:linear-gradient(100deg,transparent 0,rgba(255,244,214,.16) 42%,rgba(255,244,214,.05) 58%,transparent 100%);
}
.bc-sea{
  position:absolute;left:0;right:0;top:0;height:calc(var(--tb) + 150px);overflow:hidden;
  background:linear-gradient(180deg,#8ec8ee 0,#a9d7f2 26%,#c9e7f7 45%,#c1e1f0 55%,#93c1e1 60%,#6fa8d2 76%,#5892c1 100%);
}

/* ---------- the chit ---------- */
.bc-stage{
  position:relative;z-index:10;max-width:1180px;margin:0 auto;
  /* the chit lands on the teak, just below the waterline */
  padding:calc(var(--tb) + 120px) clamp(14px,4vw,40px) clamp(46px,6vw,78px);
}
.bc-rot{width:min(1000px,100%);margin:0 auto;transform:rotate(-.55deg)}
.bc-stack{position:relative}

.bc-carbon{
  position:absolute;inset:0;transform:translate(15px,20px) rotate(1.5deg);
  background:linear-gradient(150deg,#f5dad4,#edc9c2 60%,#e7bfb8);
  border:1px solid rgba(150,90,80,.3);border-radius:3px;
  box-shadow:7px 13px 26px -16px rgba(30,16,6,.55);
  z-index:1;overflow:hidden;
}
.bc-carbon-body{
  position:relative;padding:clamp(30px,4.5vw,52px) clamp(26px,4.5vw,50px);
  opacity:0;transition:opacity .4s ease .35s;
}
.bc-topsheet{
  position:relative;z-index:2;
  background:linear-gradient(152deg,#f1e6cb 0,#e9dab9 55%,#e3d2ac 100%);
  border:1px solid rgba(90,66,30,.24);border-radius:3px;
  box-shadow:0 3px 5px -1px rgba(30,16,6,.42),24px 32px 54px -28px rgba(30,16,6,.55),0 2px 0 rgba(255,255,255,.42) inset;
  transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .45s ease;
  overflow:hidden;
}
.bc-grain{
  position:absolute;inset:0;opacity:.06;mix-blend-mode:multiply;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
.bc-ghostref{
  position:absolute;top:14px;right:22px;z-index:0;user-select:none;
  font:700 62px/1 'Oswald',sans-serif;letter-spacing:.02em;color:rgba(60,44,20,.07);
}

/* ---------- fields ---------- */
.bc-label{
  display:block;margin-bottom:2px;
  font:600 11px/1.3 'Oswald',sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#25415e;
}
.bc-opt-note{font:500 10px/1 'Nunito Sans',sans-serif;letter-spacing:.02em;text-transform:none;color:#9a7b4f}
.bc-input{
  width:100%;background:transparent;border:0;outline:none;padding:7px 2px 8px;
  font:400 17px/1.35 'Nunito Sans',sans-serif;color:var(--ink);
}
textarea.bc-input{font-size:16px;line-height:1.5;resize:vertical;min-height:52px}
select.bc-input{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a8432a' stroke-width='3'%3E%3Cpath d='M5 9l7 7 7-7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;
}

/* the hairline rule that inks in, left to right, on focus */
.bc-rule{position:relative;height:2px;background:var(--rule)}
.bc-ink{
  position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--rust);
  transform:scaleX(0);transform-origin:left;transition:transform .18s ease;
}
.bc-field:focus-within .bc-ink{transform:scaleX(1)}

.bc-err{display:none;font:700 12px/1.4 'Nunito Sans',sans-serif;color:var(--rust);margin-top:6px}
.bc-field.is-invalid .bc-err,
.bc-fieldset.is-invalid .bc-err{display:block}
.bc-field.is-invalid .bc-rule{background:transparent;border-bottom:2px dashed var(--rust)}

/* ---------- radio options (cabin, experience) ---------- */
.bc-fieldset{border:0;margin:0;padding:0;min-width:0}
.bc-legend{
  padding:0;font:600 11px/1.3 'Oswald',sans-serif;
  letter-spacing:.15em;text-transform:uppercase;color:#25415e;
}
.bc-opt{
  position:relative;border:1.5px solid #d3c09a;background:rgba(255,253,247,.4);
  cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s;
}
.bc-opt input{position:absolute;opacity:0;width:1px;height:1px}
.bc-tick{
  flex:none;border-radius:50%;border:2px solid var(--rust);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .18s;
}
.bc-opt:has(input:checked){
  border-color:var(--rust);background:rgba(168,67,42,.09);
  box-shadow:0 8px 18px -12px rgba(168,67,42,.7);
}
.bc-opt:has(input:checked) .bc-tick{opacity:1}
.bc-opt:has(input:focus-visible){outline:3px solid #ffe6ad;outline-offset:2px}
.bc-fieldset.is-invalid .bc-opt{border-color:var(--rust)}

.bc-opt-cabin{display:flex;gap:12px;align-items:flex-start;border-radius:4px;padding:14px 16px}
.bc-opt-cabin .bc-tick{margin-top:1px;width:22px;height:22px}
.bc-opt-exp{display:inline-flex;align-items:center;gap:9px;border-radius:40px;padding:9px 15px 9px 13px}
.bc-opt-exp .bc-tick{width:16px;height:16px}

/* ---------- the stamp ---------- */
.bc-stamp{
  position:relative;border:0;background:transparent;padding:8px;cursor:pointer;border-radius:6px;
  transition:transform .12s cubic-bezier(.3,.7,.4,1);
}
.bc-stamp:hover{transform:translateY(-4px)}
.bc-stamp:active{transform:translateY(4px) scale(.97)}
.bc-stamp:focus-visible{outline:3px solid #ffe6ad;outline-offset:4px}
/* held down while the request is in flight */
.bc-stamp.is-pressing,
.bc-stamp.is-pressing:hover{transform:translateY(6px) scale(.95);transition:transform .09s ease;cursor:progress}
.bc-stamp[disabled]{cursor:progress}

.bc-topstamp{
  position:absolute;left:50%;bottom:clamp(96px,15vw,130px);
  transform:translateX(-50%) rotate(-8deg) scale(1.25);
  color:var(--rust);opacity:0;z-index:3;pointer-events:none;
  transition:opacity .12s ease,transform .2s cubic-bezier(.3,1.5,.5,1);
}
.bc-stampface{border:3px solid var(--rust);border-radius:7px;text-align:center;position:relative;overflow:hidden}
.bc-stampface::before{
  content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:screen;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}

/* ---------- the three states ---------- */
/* signed: the stamp lands, the top sheet lifts away, the carbon copy stays */
.bc-stack.is-signed .bc-topstamp{opacity:1;transform:translateX(-50%) rotate(-8deg) scale(1)}
.bc-stack.is-signed .bc-carbon-body{opacity:1}
.bc-stack.is-signed .bc-topsheet{transform:translate(38px,-58px) rotate(-4.5deg);opacity:0}
/* Once the sheet is gone, take it out of the flow and let the copy stand on its
   own — otherwise the carbon stays stretched to the full height of the form it
   is covering, and the confirmation floats in a tall empty pink field. */
.bc-stack.is-lifted .bc-topsheet{display:none}
.bc-stack.is-lifted .bc-carbon{position:relative;inset:auto;transform:rotate(1.5deg)}

/* failure: input is untouched, the stamp comes back, the fallback is offered */
.bc-formerr{
  display:none;margin-top:16px;border:1.5px solid var(--rust);border-left-width:5px;border-radius:4px;
  padding:13px 16px;background:rgba(168,67,42,.07);
  font:400 14px/1.6 'Nunito Sans',sans-serif;color:#7a3d31;
}
.bc-formerr.is-shown{display:block}
.bc-formerr a{color:var(--rust);font-weight:700;border-bottom:2px solid rgba(168,67,42,.4)}

.bc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- mobile ---------- */
@media (max-width:720px){
  .bc-rot{transform:none}          /* chit sits square on a narrow screen */
  .bc-stage{padding-top:calc(var(--tb) + 70px)}
}

/* ---------- reduced motion: every state still works, nothing moves ---------- */
@media (prefers-reduced-motion: reduce){
  .bc-drop,.bc-cloud,.bc-scene,.bc-sway{animation:none !important}
  .bc-topsheet,.bc-carbon-body,.bc-topstamp,.bc-stamp,.bc-ink,.bc-opt,.bc-tick{transition:none !important}
  .bc-stamp:hover,.bc-stamp:active,.bc-stamp.is-pressing{transform:none}
  .bc-stack.is-signed .bc-topsheet{transform:none}      /* no slide — it just goes */
  .bc-stack.is-signed .bc-topstamp{transform:translateX(-50%) rotate(-8deg) scale(1)}
}