/* ============================================================
   Concept 4 — INTERACTIVE BOARD
   Builds on canvas.css (shared lower sections). Adds a real,
   playable whiteboard hero: draggable/throwable photos & notes,
   pen / marker / highlighter / eraser drawing.
   ============================================================ */

/* hide Concept-1-only hero flourish (its toolbar); keep the cursor ink-trail */
.board-tools { display: none !important; }
/* ambient cursor trail: passive layer, above the board bg, below items/ink */
.inktrail { position: fixed; inset: 0; z-index: 4; pointer-events: none; }

/* ---------- the board ---------- */
.iboard{
  position:relative; height:100vh; min-height:600px; margin-top:-0; overflow:hidden;
  background:radial-gradient(120% 90% at 80% 10%,#12151d,var(--board) 60%);
  border-bottom:1px solid var(--line);
}
.iboard__grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:46px 46px;opacity:.5;pointer-events:none}
.iboard.tool-move{cursor:default}
.iboard.tool-pen,.iboard.tool-marker,.iboard.tool-hi{cursor:crosshair}
.iboard.tool-eraser{cursor:cell}

/* drawing layer sits above items; pointer-events toggled by JS via body class */
.drawlayer{position:absolute;inset:0;z-index:30;pointer-events:none;touch-action:none}
.iboard:not(.tool-move) .drawlayer{pointer-events:auto}

/* ---------- toolbar ---------- */
.ib-toolbar{
  position:absolute; z-index:40; top:96px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:4px; padding:6px;
  background:rgba(18,20,28,.82); border:1px solid var(--line); border-radius:16px;
  backdrop-filter:blur(14px); box-shadow:0 20px 50px -18px rgba(0,0,0,.7);
}
.ib-tool{
  display:inline-flex; align-items:center; gap:7px; border:0; cursor:pointer;
  background:transparent; color:var(--ink-dim); font-family:var(--disp); font-weight:600;
  font-size:.82rem; padding:9px 13px; border-radius:11px; transition:background .2s,color .2s;
}
.ib-tool:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.ib-tool.is-active{color:#fff;background:var(--accent-solid)}
.ib-tool__dot{width:12px;height:12px;border-radius:50%;display:inline-block}
.ib-tool[data-tool="pen"] .ib-tool__dot{background:#2547d0}
.ib-tool[data-tool="marker"] .ib-tool__dot{background:#6b86f5}
.ib-tool[data-tool="hi"] .ib-tool__dot{background:#9db4ff}
.ib-tool[data-tool="eraser"] .ib-tool__dot{background:#3a3f4b;border:1px solid #5b6270}
.ib-tool--sep{width:1px;height:22px;background:var(--line);margin:0 3px;padding:0}
@media(max-width:720px){
  .ib-toolbar{top:auto;bottom:74px;gap:2px;padding:5px;max-width:calc(100vw - 24px);overflow-x:auto}
  .ib-tool{padding:8px 10px;font-size:.74rem}
  .ib-tool span:not(.ib-tool__dot){display:none}
}

/* ---------- draggable items ---------- */
.ib-item{position:absolute;z-index:10;will-change:transform;user-select:none;touch-action:none}
.iboard.tool-move .ib-item{cursor:grab}
.ib-item.grabbing{cursor:grabbing;z-index:60}
.ib-item .ib-inner{transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.ib-item.grabbing .ib-inner{transform:scale(1.04) rotate(0deg)!important;box-shadow:0 40px 90px -24px rgba(0,0,0,.75)}
/* non-move tools: items are inert so you can draw over them */
.iboard:not(.tool-move) .ib-item{pointer-events:none}

/* photo card */
.ib-photo{width:clamp(200px,26vw,300px)}
.ib-photo .ib-inner{background:#fff;padding:10px 10px 6px;border-radius:12px;box-shadow:0 26px 60px -26px rgba(0,0,0,.7)}
.ib-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:7px;pointer-events:none}
.ib-photo figcaption{font-family:var(--hand);color:#14161a;font-size:1.1rem;text-align:center;padding:5px 4px 2px}
.ib-photo .pin{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:var(--accent-solid);box-shadow:0 3px 8px rgba(0,0,0,.5)}

/* sticky note */
.ib-note{width:clamp(200px,22vw,260px)}
.ib-note .ib-inner{background:#fbfaf8;color:#14161a;border-radius:4px;padding:16px 18px;box-shadow:0 20px 46px -22px rgba(0,0,0,.6);border-left:4px solid var(--accent-solid)}
.ib-note .ib-inner p{font-family:var(--body);font-size:.98rem;line-height:1.45;font-weight:500}
.ib-note--accent .ib-inner{background:var(--accent-solid);color:#fff;border-left:0}

/* title card */
.ib-title{width:clamp(300px,42vw,560px)}
.ib-title .ib-inner{background:rgba(10,11,15,.35);backdrop-filter:blur(4px);border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.ib-title h1{font-family:var(--disp);color:#fff;font-weight:700;font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.04;letter-spacing:-.03em}
.ib-title .markword{color:var(--accent)}

/* fixed board UI */
.ib-cta{position:absolute;z-index:45;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);display:inline-flex;align-items:center;gap:.5rem;background:var(--accent-solid);color:#fff;font-family:var(--disp);font-weight:600;padding:13px 22px;border-radius:999px;box-shadow:0 16px 40px -12px rgba(37,71,208,.6);transition:transform .25s var(--ease)}
.ib-cta:hover{transform:translateY(-3px)}
.ib-hint{position:absolute;z-index:35;left:clamp(16px,3vw,32px);bottom:86px;display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:500;color:#d3daee;font-size:.92rem;background:rgba(18,20,28,.72);border:1px solid var(--line);border-radius:999px;padding:10px 16px;backdrop-filter:blur(10px);white-space:nowrap;pointer-events:none;max-width:calc(100vw - 32px)}
.ib-hint__dot{width:8px;height:8px;border-radius:50%;background:#6b86f5;flex-shrink:0;box-shadow:0 0 0 0 rgba(107,134,245,.6);animation:hintpulse 2.2s infinite}
@keyframes hintpulse{0%{box-shadow:0 0 0 0 rgba(107,134,245,.55)}70%{box-shadow:0 0 0 9px rgba(107,134,245,0)}100%{box-shadow:0 0 0 0 rgba(107,134,245,0)}}
@media(max-width:720px){.ib-hint{bottom:128px;font-size:.85rem;white-space:normal;line-height:1.35}.ib-cta{bottom:auto;top:80px;right:12px;padding:10px 16px;font-size:.85rem}}
@media(prefers-reduced-motion:reduce){.ib-hint__dot{animation:none}}

/* eyebrow chip top-left of board */
.ib-eyebrow{position:absolute;z-index:35;top:98px;left:clamp(16px,3vw,32px);font-family:var(--hand);color:var(--accent);font-size:1.3rem;max-width:300px;transform:rotate(-2deg);pointer-events:none}
@media(max-width:720px){.ib-eyebrow{display:none}}

/* ---------- "try these" arrow marker (points up at the toolbar) ---------- */
.ib-try{position:absolute;z-index:38;top:150px;left:50%;transform:translate(-50%,0);display:flex;flex-direction:column;align-items:center;gap:0;pointer-events:none;transition:opacity .5s var(--ease);animation:ibbob 2.4s var(--ease) infinite}
.ib-try.hide{opacity:0}
.ib-try__arrow{width:52px;height:62px}
.ib-try__text{font-family:var(--hand);color:#8aa0ff;font-size:1.5rem;font-weight:700;white-space:nowrap;transform:rotate(-3deg);margin-top:2px}
@keyframes ibbob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-8px)}}
@media(max-width:820px){.ib-try{display:none}}
@media(prefers-reduced-motion:reduce){.ib-try{animation:none}}

/* ---------- first-time nudge ---------- */
@keyframes ibnudge{0%,100%{transform:none}18%{transform:translate(-8px,-5px) rotate(-3deg)}38%{transform:translate(7px,3px) rotate(3deg)}58%{transform:translate(-5px,-2px) rotate(-2deg)}78%{transform:translate(3px,1px) rotate(1deg)}}
.ib-item.nudge{animation:ibnudge 1.15s var(--ease)}
.ib-grabme{position:absolute;z-index:70;top:-14px;left:50%;transform:translate(-50%,-100%);background:var(--accent-solid);color:#fff;font-family:var(--disp);font-weight:600;font-size:.82rem;padding:6px 13px;border-radius:999px;white-space:nowrap;box-shadow:0 12px 26px -8px rgba(37,71,208,.7);opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.ib-grabme::after{content:"";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:var(--accent-solid)}
.ib-grabme.show{opacity:1}

@media(prefers-reduced-motion:reduce){.ib-item .ib-inner{transition:none}.ib-item.nudge{animation:none}}